/* Ezytrack, gold theme. Design tokens first, every component reads from them. */
@layer reset, tokens, base, layout, components, hero, sections, utilities;

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/chivomono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, picture, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    /* colour: Ezytrack logo blue owns the site, charcoal from the logo, paper not white */
    --paper: #F3F6F8;
    --paper-2: #E6ECF0;
    --ink: #202C34;
    --ink-2: #33424C;
    --steel: #5D6B76;
    --blue: #087FE5;
    --blue-deep: #0A6CC4;   /* blue buttons and accents, white text passes AA */
    --blue-ink: #0B4F8F;
    /* James 6 Nov: charcoal leads, blue is the accent only (buttons, links, live data).
       Graphite is the second dark block, so two dark bands never merge into one. */
    --graphite: #33424C;
    --vis: #F2D21B;         /* hi-vis yellow, live pings only */
    --white: #FFFFFF;
    --line: rgba(32, 44, 52, .14);

    /* type */
    --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --f-body: "Archivo", Arial, sans-serif;
    --f-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --t-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    --t-small: .9375rem;
    --t-micro: .8125rem;
    --t-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
    --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    --t-h2: clamp(2rem, 1.3rem + 3vw, 4.25rem);
    --measure: 60ch;

    /* space */
    --g: clamp(1rem, .6rem + 1.8vw, 3.5rem);   /* page gutter */
    --s-1: .5rem; --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 7rem;
    --radius: 4px;
    --hdr-h: 76px;

    /* motion */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ease-slam: cubic-bezier(.8, 0, .2, 1);
    --ease-draw: cubic-bezier(.65, 0, .35, 1);
    --ease-reveal: cubic-bezier(.17, .67, .1, .99);
    --d-fast: 160ms; --d-mid: 260ms; --d-slow: 520ms;

    --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--blue);
  }
}

@layer base {
  html { overflow-x: clip; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
  body {
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
  .skip { position: absolute; left: var(--g); top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: var(--radius); }
  .skip:focus { top: .75rem; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer components {
  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 52px; padding: 0 1.4rem;
    font-weight: 650; font-size: 1rem; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
    border-radius: var(--radius); border: 2px solid transparent;
    transition: transform var(--d-fast) var(--ease-out), background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: scale(.97); }
  .btn--solid { background: var(--blue-deep); color: var(--white); }
  .btn--light { background: var(--white); color: var(--ink); }
  .btn--line { background: transparent; border-color: rgba(255,255,255,.75); color: var(--white); } /* a <button> otherwise gets the browser's grey fill */
  @media (hover: hover) and (pointer: fine) {
    .btn--solid:hover { background: var(--blue-ink); }
    .btn--light:hover { background: var(--vis); }
    .btn--line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
  }

  /* header */
  .hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr-h);
    display: flex; align-items: center; gap: var(--s-5);
    padding: 0 var(--g);
    color: var(--white);
    transition: transform var(--d-mid) var(--ease-out), background-color var(--d-mid) ease, color var(--d-mid) ease, box-shadow var(--d-mid) ease;
  }
  .hdr.is-hidden { transform: translateY(-100%); }
  .hdr.is-solid { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  .hdr__logo { position: relative; display: block; width: 176px; flex: none; }
  .hdr__logo img { width: 100%; height: auto; }
  /* James 9 Nov (Stuart): a tap on the logo did nothing on phones. The logo is only 32px tall, so the tap area reaches past it, finger sized */
  .hdr__logo::before { content: ""; position: absolute; inset: -12px -10px; }
  .hdr__logo-c { position: absolute; inset: 0; opacity: 0; }
  .hdr.is-solid .hdr__logo-w { opacity: 0; }
  .hdr.is-solid .hdr__logo-c { opacity: 1; }
  .hdr__nav { display: flex; gap: clamp(1rem, .4rem + 1.2vw, 2rem); margin-left: auto; }
  .hdr__nav a, .login__btn, .hdr__tel {
    position: relative; text-decoration: none; font-size: .9688rem; font-weight: 560; padding: .5rem 0; white-space: nowrap;
  }
  .hdr__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: right center; transition: transform var(--d-mid) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
  }
  .hdr__end { display: flex; align-items: center; gap: var(--s-4); }
  .hdr__tel { font-family: var(--f-mono); font-size: .875rem; font-weight: 500; letter-spacing: .02em; }
  .hdr__cta { min-height: 44px; padding: 0 1.1rem; font-size: .9375rem; white-space: nowrap; flex: none; }
  .hdr__cta-s { display: none; }
  .hdr:not(.is-solid) .hdr__cta { background: var(--white); color: var(--ink); }

  .login { position: relative; }
  .login__btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer; min-height: 44px; }
  .login__btn svg { transition: transform var(--d-mid) var(--ease-out); }
  .login.is-open .login__btn svg { transform: rotate(180deg); }
  .login__menu {
    position: absolute; top: calc(100% + .4rem); right: -1rem; width: 270px; padding: .5rem;
    background: var(--white); color: var(--ink); border-radius: var(--radius);
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -12px rgba(32,44,52,.35);
    transform-origin: top right; transform: scale(.96) translateY(-4px); opacity: 0; visibility: hidden;
    transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .login.is-open .login__menu { transform: none; opacity: 1; visibility: visible; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s; }
  /* James 9 Nov (Stuart): brand name and its own logo, no descriptions */
  .login__menu a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .55rem .8rem; border-radius: 3px; text-decoration: none; }
  .login__menu img { flex: none; width: 26px; height: 26px; object-fit: contain; }
  .login__menu b { font-weight: 650; font-size: .9688rem; }
  @media (hover: hover) and (pointer: fine) { .login__menu a:hover { background: var(--paper); } }

  .burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
  .burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform var(--d-mid) var(--ease-out); }
  .burger span:first-child { top: 17px; }
  .burger span:last-child { top: 25px; }

  /* Stuart 7 Nov: on a big screen the bar read small, so the logo and menu grow with the screen */
  @media (min-width: 1400px) {
    :root { --hdr-h: 88px; }
    .hdr__logo { width: 208px; }
    .hdr__nav a, .login__btn { font-size: 1.0625rem; }
    .hdr__tel { font-size: .9688rem; }
    .hdr__cta { min-height: 48px; padding: 0 1.3rem; font-size: 1rem; }
  }
  @media (min-width: 1800px) {
    :root { --hdr-h: 96px; }
    .hdr__logo { width: 232px; }
    .hdr__nav a, .login__btn { font-size: 1.125rem; }
  }
  /* nine menu items since Dashcams joined (7 Nov): the phone number shows on wide screens only, it is on every call button below */
  @media (min-width: 1024px) and (max-width: 1679px) {
    .hdr__tel { display: none; }
  }
  /* 1024 to 1240: nine links and the button only just fit, so tighten the gaps and shorten the button */
  @media (min-width: 1024px) and (max-width: 1240px) {
    .hdr { gap: 1rem; }
    .hdr__nav { gap: .75rem; }
    .hdr__nav a, .login__btn { font-size: .9063rem; }
    .hdr__end { gap: .9rem; }
    .hdr__logo { width: 140px; }
    .hdr__cta { padding: 0 .9rem; }
    .hdr__cta-l { display: none; } .hdr__cta-s { display: inline; }
  }
  @media (max-width: 1023px) {
    :root { --hdr-h: 64px; }
    .hdr__nav, .login, .hdr__cta { display: none; }
    .burger { display: block; }
    .hdr__tel { display: inline-flex; }
    .hdr__end { margin-left: auto; }
    .hdr__logo { width: 128px; }
  }
  @media (max-width: 420px) {
    .hdr__tel { display: none; }
  }
}

@layer components {
  /* phone menu: full screen ink sheet, slides down from the header */
  .msheet {
    position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--white);
    display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--g) calc(var(--s-5) + env(safe-area-inset-bottom));
    transform: translateY(-100%); visibility: hidden;
    transition: transform 360ms cubic-bezier(.32,.72,0,1), visibility 0s linear 360ms;
  }
  .msheet.is-open { transform: none; visibility: visible; transition: transform 420ms cubic-bezier(.32,.72,0,1), visibility 0s; }
  .msheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); }
  .msheet__top img { width: 128px; height: auto; }
  .msheet__close { width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
  .msheet__close::before, .msheet__close::after { content: ""; position: absolute; left: 11px; right: 11px; top: 21px; height: 2px; background: currentColor; transform: rotate(45deg); }
  .msheet__close::after { transform: rotate(-45deg); }
  .msheet__nav { display: grid; align-content: start; padding-top: var(--s-4); }
  .msheet__nav a {
    font-family: var(--f-display); font-stretch: 112%; font-weight: 780; text-transform: uppercase;
    font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.12; text-decoration: none; padding: .35rem 0;
  }
  .msheet__logins { display: grid; gap: .25rem; padding: var(--s-4) 0; border-top: 1px solid rgba(255,255,255,.16); }
  .msheet__logins p { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  .msheet__logins a { display: flex; align-items: center; gap: .8rem; min-height: 48px; text-decoration: none; font-weight: 600; }
  .msheet__logins img { flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 5px; border-radius: 6px; background: var(--white); object-fit: contain; }
  .msheet__call { display: grid; gap: var(--s-2); }

  /* phone bottom bar: call and quote one thumb away, shows once the hero buttons scroll off */
  .callbar { display: none; }
  @media (max-width: 899px) {
    .callbar {
      position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
      display: grid; grid-template-columns: 1fr 1fr; background: var(--ink);
      padding-bottom: env(safe-area-inset-bottom);
      transform: translateY(110%); transition: transform var(--d-mid) var(--ease-out);
    }
    .callbar.is-on { transform: none; }
    .callbar a {
      display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 58px;
      font-weight: 650; font-size: 1rem; text-decoration: none; color: var(--white); background: var(--ink);
    }
    .callbar a + a { background: var(--blue-deep); }
    .callbar a:active { opacity: .85; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  }

  /* chat: arrives once the first screen is passed, never auto-opens, sits above the phone call bar */
  .chat { position: fixed; z-index: 45; right: max(var(--g), env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .chat__fab {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1.15rem 0 1rem;
    border: 0; border-radius: var(--radius); background: var(--ink); color: var(--white); cursor: pointer;
    font-weight: 650; font-size: .9688rem; box-shadow: 0 10px 28px -10px rgba(32,44,52,.55);
    transition: transform var(--d-mid) var(--ease-out), opacity var(--d-mid) var(--ease-out), background-color var(--d-fast) ease;
    -webkit-tap-highlight-color: transparent;
  }
  .chat__fab:active { transform: scale(.97); }
  @media (hover: hover) and (pointer: fine) { .chat__fab:hover { background: var(--blue-ink); } }
  .chat:not(.is-visible):not(.is-open) .chat__fab, .chat.is-tucked:not(.is-open) .chat__fab { opacity: 0; transform: translateY(14px); pointer-events: none; }
  .chat__ico--close { display: none; }
  .chat.is-open .chat__ico--open { display: none; }
  .chat.is-open .chat__ico--close { display: block; }
  .chat__panel {
    position: absolute; right: 0; bottom: calc(100% + .75rem); width: min(380px, calc(100vw - 2 * var(--g)));
    height: min(560px, calc(100svh - var(--hdr-h) - 7rem)); display: grid; grid-template-rows: auto 1fr auto auto;
    background: var(--white); color: var(--ink); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 24px 60px -18px rgba(32,44,52,.45);
    transform-origin: bottom right; animation: chatIn 220ms var(--ease-out);
  }
  .chat__panel[hidden] { display: none; }
  @keyframes chatIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  .chat__head { position: relative; padding: .9rem 3.5rem .9rem 1.1rem; background: var(--ink); color: var(--white); }
  .chat__title { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .01em; line-height: 1.1; }
  .chat__sub { font-family: var(--f-mono); font-size: var(--t-micro); color: rgba(255,255,255,.72); margin-top: .2rem; }
  .chat__close { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; }
  .chat__body { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem .5rem; display: flex; flex-direction: column; gap: .6rem; }
  .msg { max-width: 88%; padding: .7rem .85rem; border-radius: var(--radius); font-size: .9688rem; line-height: 1.45; }
  .msg--bot { align-self: flex-start; background: var(--paper); }
  .msg--user { align-self: flex-end; background: var(--blue-deep); color: var(--white); }
  .msg__go { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; }
  .msg__go a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 650; color: var(--blue-ink); text-underline-offset: 3px; }
  .chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: .8rem .9rem; background: var(--paper); border-radius: var(--radius); }
  .chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--steel); animation: dot 1s infinite ease-in-out; }
  .chat__typing i:nth-child(2) { animation-delay: .15s; }
  .chat__typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
  .chat__quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; }
  .chat__quick:empty { display: none; }
  .chat__quick button { min-height: 44px; padding: 0 .85rem; border: 1px solid rgba(32,44,52,.28); border-radius: var(--radius); background: var(--white); cursor: pointer; font-size: .9063rem; font-weight: 560; }
  @media (hover: hover) and (pointer: fine) { .chat__quick button:hover { border-color: var(--blue-deep); color: var(--blue-ink); } }
  .chat__form { display: flex; border-top: 1px solid var(--line); }
  .chat__form input { flex: 1; min-width: 0; min-height: 54px; padding: 0 1rem; border: 0; background: none; font-size: 1rem; }
  .chat__form input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--blue); }
  .chat__form button { width: 54px; border: 0; background: none; color: var(--blue-deep); cursor: pointer; display: grid; place-items: center; }
  .chat__lead { display: grid; gap: .5rem; padding: .8rem; background: var(--paper); border-radius: var(--radius); align-self: stretch; }
  .chat__lead label { font-size: var(--t-micro); font-weight: 600; }
  .chat__lead input { min-height: 46px; padding: 0 .75rem; border: 1px solid rgba(32,44,52,.3); border-radius: var(--radius); background: var(--white); font-size: 1rem; }
  .chat__lead button { min-height: 46px; border: 0; border-radius: var(--radius); background: var(--blue-deep); color: var(--white); font-weight: 650; cursor: pointer; }
  .chat__lead-err { font-size: var(--t-micro); color: #A3261B; min-height: 0; }
  .chat__lead .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  @media (max-width: 899px) {
    .chat { right: max(.75rem, env(safe-area-inset-right)); bottom: calc(58px + env(safe-area-inset-bottom) + .75rem); }
    .chat__fab { padding: 0; width: 52px; justify-content: center; }
    .chat__fab-label { display: none; }
    .chat__panel { position: fixed; left: .5rem; right: .5rem; bottom: calc(58px + env(safe-area-inset-bottom) + .5rem); width: auto; height: min(560px, calc(100svh - 58px - env(safe-area-inset-bottom) - 1.5rem)); }
    .chat.is-open .chat__fab { opacity: 0; pointer-events: none; }
  }
}

@layer hero {
  /* Fleet hero: photo (1) < charcoal block (2) < headline (3) < live pins (5).
     James 6 Nov: no text over the vehicles, so the headline sits in the sky above the fleet's rooflines,
     and every tracked vehicle carries a live pin that reports in once the headline lands. */
  .hero {
    --hh: clamp(640px, 100svh, 1240px);
    /* James 7 Nov: no charcoal panel, the mine scene is the whole hero. --fw: the photo is drawn at least
       as wide as the window and at least as tall as the hero, centred, so it always covers. */
    --fw: max(100vw, calc(var(--hh) * 1.7917));
    --F: min(calc(var(--hh) * .124), 8.4vw);
    position: relative; height: var(--hh); overflow: hidden; isolation: isolate;
    background: var(--graphite);
    color: var(--white);
  }
  /* on the charcoal blocks the main button is the blue accent, the second one stays an outline */
  .hero .btn--light, .phero .btn--light, .close .btn--light, .lost .btn--light { background: var(--blue-deep); color: var(--white); }
  @media (hover: hover) and (pointer: fine) {
    .hero .btn--light:hover, .phero .btn--light:hover, .close .btn--light:hover, .lost .btn--light:hover { background: var(--blue-ink); }
  }

  .hero__frame {
    position: absolute; width: var(--fw); height: calc(var(--fw) / 1.7917);
    left: calc((100vw - var(--fw)) / 2); top: calc((var(--hh) - var(--fw) / 1.7917) / 2);
  }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

  .hero__type {
    position: absolute; z-index: 3; left: var(--g); right: var(--g);
    /* row two's baseline sits at 44% down the photo: clear of the haul truck (48.5%),
       the ute's beacon (49.5%) and the pins' pulse (51% and down). James 6 Nov: no overlapping text */
    top: calc(var(--hh) * .44 - var(--F) * 1.36);
    margin: 0;
    font-family: var(--f-display); font-weight: 820; font-stretch: 125%;
    font-size: var(--F); line-height: .86; letter-spacing: -.012em; text-transform: uppercase;
    will-change: transform;
  }
  .row { display: block; overflow: hidden; padding-bottom: .04em; }
  .row__in { display: block; }

  .hero__copy {
    position: absolute; z-index: 5; left: var(--g);
    top: calc(var(--hh) * .44 + var(--F) * .42 + 2rem);
    bottom: clamp(2.5rem, 9vh, 6rem);
    width: min(33rem, calc(44vw - var(--g)));
    display: flex; flex-direction: column; gap: var(--s-4);
    /* sits on the red dirt: a soft shadow keeps it readable without tinting the photo */
    text-shadow: 0 1px 2px rgba(20,28,34,.55), 0 0 22px rgba(20,28,34,.45);
  }
  .hero__copy .btn { text-shadow: none; }
  .hero__copy > :first-child { margin-top: auto; }
  /* James 7 Nov: the line still read small, so it steps up to 28px on big screens */
  .hero__sub { font-size: clamp(1.375rem, .55rem + 1.1vw, 1.75rem); line-height: 1.38; font-weight: 500;
    /* the words stop short of the convoy: the lead truck starts about a third of the way across */
    max-width: calc(32vw - var(--g)); }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .hero__trust { font-size: var(--t-small); color: rgba(255,255,255,.86); }
  .hero__trust a { font-family: var(--f-mono); font-size: .9em; white-space: nowrap; color: var(--white); }
  .mask { display: block; }
  /* start state for the Brutal Frame load. Only with JS on; a 4s safety class shows everything if JS stalls */
  .js .hero:not(.is-done) .mask { overflow: hidden; }
  .js .hero:not(.is-done) [data-brutal-role="frame-top"] { transform: translateY(-105%); }
  .js .hero:not(.is-done) [data-brutal-role="frame-bottom"] { transform: translateY(105%); }
  .js .hero:not(.is-done) [data-brutal-role^="label"] { transform: translateY(115%); }
  .js .hero:not(.is-done) [data-brutal-role="connector"] { transform: scaleY(0); }
  .brutal-off .hero [data-brutal-role] { transform: none !important; }

  /* live pins: one per tracked vehicle, placed in % of the photo, so they ride with it at every size.
     They pop in one by one after the headline lands, then pulse in a wave down the line. */
  .hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  /* James 6 Nov: make the pins obvious. The blue dot in a white ring reads as "live location" to anyone
     who has used a phone map, and blue stands off the white roofs, the red pit and the orange mine flags.
     Two rings leave each dot half a beat apart, a steady radar pulse rolling down the line. */
  .pin {
    --pr: 7px; --ring: 6;
    position: absolute; left: var(--x); top: var(--y); width: calc(var(--pr) * 2); height: calc(var(--pr) * 2); margin: calc(var(--pr) * -1) 0 0 calc(var(--pr) * -1);
    border-radius: 50%; background: var(--blue);
    box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4px rgba(32,44,52,.5), 0 0 22px 6px rgba(8,127,229,.55);
    transition: opacity .35s var(--ease-out) calc(var(--i) * .14s), transform .45s var(--ease-out) calc(var(--i) * .14s);
  }
  .pin::before, .pin::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--blue); background: radial-gradient(circle, rgba(8,127,229,0) 40%, rgba(8,127,229,.28) 100%);
    opacity: 0; animation: ping 2.6s cubic-bezier(.16, .7, .3, 1) calc(1s + var(--i) * .3s) infinite;
  }
  .pin::after { animation-delay: calc(2.3s + var(--i) * .3s); }
  @keyframes ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(var(--ring)); opacity: 0; } }
  .js .hero:not(.is-done) .pin { opacity: 0; transform: scale(.4); }
  /* the tag rides just above its dot on a charcoal chip, the dot sits on the vehicle */
  .pin__tag {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
    padding: .3rem .45rem; border-radius: 3px; background: rgba(32,44,52,.86);
    font-family: var(--f-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; line-height: 1;
    color: var(--white); white-space: nowrap;
  }
  /* the haul truck sits higher than the rest, so its tag goes beside the dot and stays clear of the headline */
  .pin--side .pin__tag { left: calc(100% + 9px); bottom: auto; top: 50%; transform: translateY(-50%); }

  @media (min-width: 900px) and (max-width: 1199px) {
    .hero { --F: min(calc(var(--hh) * .118), 8vw); }
    .hero__sub { font-size: 1.1875rem; max-width: calc(27vw - var(--g)); }
  }
  @media (max-width: 1099px) { .pin__tag { display: none; } }

  /* phone and portrait tablets: the tall photo, headline in the sky, copy on paper below (James 7 Nov: no charcoal) */
  @media (max-width: 899px), (max-aspect-ratio: 1/1) {
    /* --iw: how wide the tall photo is drawn (8% crop on phones). The frame is never shorter than
       the sky the headline needs above the ute roof, so tablets and square windows keep the headline. */
    .hero {
      --hh: auto; --iw: 108vw; --F: min(14.2vw, 8rem);
      --cb: .18;  /* share of the tall photo's foreground dirt cropped off the bottom (James 8 Nov: .1 to .18 so the whole line clears the call bar on an iPhone 15) */
      --sh: max(clamp(420px, 60svh, 760px), calc(var(--iw) / .7467 * (.68 - var(--cb)) + var(--F) * 1.76 + var(--hdr-h) + 2rem));
      height: auto; background: var(--paper);
    }
    .hero__frame {
      position: relative; left: auto; top: auto; height: var(--sh); width: 100%; aspect-ratio: auto; overflow: hidden;
    }
    .hero__frame picture { display: contents; }
    /* the pins' box is drawn exactly like the photo, so their % positions land on the same vehicles */
    .hero__bg, .hud {
      /* drawn tall enough to cover the frame even with the bottom crop */
      --ih: max(calc(100% / (1 - var(--cb))), calc(var(--iw) / .7467));
      inset: auto; bottom: calc(var(--ih) * var(--cb) * -1); left: 50%; top: auto;
      height: var(--ih); width: auto; max-width: none; aspect-ratio: 1792 / 2400;
      transform: translateX(-52%);
    }
    .hero__type {
      /* the headline sits wholly in clean sky: the pit rim and the lead ute's flag start 33% down
         the tall photo, so row two ends at 32%. The photo is pinned to the bottom of the frame */
      top: auto; bottom: calc(100% - var(--sh) + max(var(--sh) / (1 - var(--cb)), var(--iw) / .7467) * (.68 - var(--cb)) + .6rem);
      font-stretch: 70%; line-height: .88;
    }
    .pin { left: var(--mx); top: var(--my); --pr: 6px; --ring: 5; }
    .hero__copy {
      position: relative; left: auto; top: auto; bottom: auto; width: auto; max-width: none;
      padding: var(--s-3) var(--g) var(--s-6); text-shadow: none; color: var(--ink);
    }
    .hero__sub { color: var(--ink); font-size: 1.25rem; line-height: 1.32; max-width: none; }
    .hero__trust { color: var(--ink-2); }
    .hero__trust a { color: var(--ink); }
    .hero__copy .btn--line { border-color: var(--ink); color: var(--ink); }
    .hero__ctas { display: grid; grid-template-columns: 1fr; }
    .hero__ctas .btn { width: 100%; }
  }
  /* tablets and square windows: no side crop needed, so the photo is drawn exactly full width and centred */
  @media (min-width: 600px) and (max-width: 899px), (min-width: 600px) and (max-aspect-ratio: 1/1) {
    .hero { --iw: 100vw; }
    .hero__bg, .hud { transform: translateX(-50%); }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .pin::before, .pin::after { display: none; }
  }
}

@layer components {
  /* footer: plain on purpose, ink block, real contact details, legal row in the site's own type */
  .ftr { background: var(--ink); color: rgba(255,255,255,.74); padding: var(--s-7) var(--g) var(--s-5); font-size: var(--t-small); line-height: 1.5; }
  .ftr a { color: var(--white); text-decoration: none; }
  .ftr__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: var(--s-6) var(--s-5); padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255,255,255,.12); }
  .ftr__brand img { width: 168px; height: auto; margin-bottom: var(--s-4); }
  .ftr__brand p { max-width: 32ch; }
  .ftr__group { margin-top: var(--s-3); font-size: var(--t-micro); }
  .ftr__group a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
  .ftr__col { display: grid; align-content: start; justify-items: start; gap: .15rem; }
  .ftr__h { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.58); margin-bottom: .6rem; }
  .ftr__col a { padding: .25rem 0; }
  .ftr__tel { font-family: var(--f-mono); font-size: 1.375rem; letter-spacing: .02em; }
  .ftr__legal { padding-top: var(--s-4); font-size: .875rem; color: rgba(255,255,255,.62); }
  .ftr__legal a { color: rgba(255,255,255,.84); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    .ftr__col a, .ftr__legal a, .ftr__group a { transition: color var(--d-fast) ease; }
    .ftr__col a:hover { color: var(--vis); }
    .ftr__legal a:hover, .ftr__group a:hover { color: var(--white); text-decoration-color: currentColor; }
  }
  @media (max-width: 899px) {
    .ftr { padding-top: var(--s-6); }
    .ftr__top { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
    .ftr__brand, .ftr__talk { grid-column: 1 / -1; }
    .ftr__brand p:not(.ftr__group) { display: none; }
    /* site links wrap as a row; the burger menu carries them too */
    .ftr__top > .ftr__col:not(.ftr__talk) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
    .ftr__top > .ftr__col:not(.ftr__talk) .ftr__h { flex-basis: 100%; margin-bottom: 0; }
    .ftr__top:has(.is-fold) { row-gap: 0; }
    .ftr__top:has(.is-fold) .ftr__brand { margin-bottom: var(--s-4); }
    .ftr__top:has(.is-fold) .ftr__talk { margin-top: var(--s-5); }
    .ftr__top > .ftr__col.is-fold { display: block; }
    .ftr__tog { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
    .ftr__tog::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 220ms var(--ease-out); }
    .ftr__col.is-open .ftr__tog::after { transform: translateY(2px) rotate(-135deg); }
    .ftr__col.is-fold .ftr__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: .25rem; }
    .ftr__col.is-fold:not(.is-open) .ftr__links { display: none; }
    .ftr__col a { padding: .5rem 0; }
    .ftr__brand img { margin-bottom: var(--s-2); }
    .ftr__col a { padding: .6rem 0; }
    .ftr__legal { line-height: 2; }
  }

  /* plain pages (blog posts, new pages the client adds, 404): header starts solid */
  .is-plain .hdr { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  .is-plain .hdr__logo-w { opacity: 0; }
  .is-plain .hdr__logo-c { opacity: 1; }
  .plain { padding: calc(var(--hdr-h) + var(--s-7)) var(--g) var(--s-8); min-height: 70vh; }
  .plain__in { max-width: 46rem; }
  .plain__title {
    font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase;
    font-size: var(--t-h2); line-height: .95; letter-spacing: -.01em; margin-bottom: var(--s-5); text-wrap: balance;
  }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { font-size: var(--t-h3); line-height: 1.2; margin-top: 1.8em; }
  .prose h3 { font-size: 1.125rem; margin-top: 1.4em; }
  .prose a { color: var(--blue-ink); text-underline-offset: 3px; }
  .prose ul { list-style: disc; padding-left: 1.2em; }
  .prose ol { list-style: decimal; padding-left: 1.4em; }
  .prose img { height: auto; border-radius: var(--radius); }
  .plain__list > * + * { margin-top: var(--s-6); }
  .plain__list h2 { font-size: var(--t-h3); }
  .plain__list h2 a { text-decoration: none; }

  /* 404 */
  .lost { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--hdr-h) + var(--s-6)) var(--g) var(--s-7); background: var(--graphite); color: var(--white); }
  .lost__title { font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(3rem, 1rem + 9vw, 9rem); line-height: .86; letter-spacing: -.012em; }
  .lost__ping { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .04em; margin: var(--s-4) 0 var(--s-3); color: rgba(255,255,255,.8); min-height: 1.4em; overflow-wrap: anywhere; }
  .lost__ping::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vis); margin-right: .6rem; vertical-align: .05em; }
  .lost p { max-width: 38ch; }
  .lost__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
  .is-plain.error404 .hdr { background: transparent; color: var(--white); box-shadow: none; }
  .is-plain.error404 .hdr__logo-w { opacity: 1; }
  .is-plain.error404 .hdr__logo-c { opacity: 0; }

  /* logged in WordPress users: keep the fixed header below the admin bar */
  .admin-bar .hdr { top: var(--wp-admin--admin-bar--height, 32px); }
}

@layer sections {
  .sec { padding: var(--s-8) var(--g); }
  .h2 {
    font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase;
    font-size: var(--t-h2); line-height: .92; letter-spacing: -.01em; text-wrap: balance;
  }
  .lead { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin-top: var(--s-4); }
  p { text-wrap: pretty; }
  .arrow {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
    font-weight: 650; text-decoration: none; color: var(--blue-ink);
  }
  .arrow::after, .tile__cap::after {
    content: ""; flex: none; width: 1.05em; height: .72em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--d-fast) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .arrow:hover::after, .tile:hover .tile__cap::after { transform: translateX(5px); }
  }

  /* pain hook: the questions are the type, one answer open at a time */
  .pain { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; }
  .pain__head { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); }
  .pain__list { border-top: 2px solid var(--ink); }
  /* the photo beside the questions changes with the one you open (Radius accordion with swapping media, wiped in) */
  .pain__media { display: none; }
  @media (min-width: 900px) {
    .pain__media { position: relative; display: block; margin-top: var(--s-5); aspect-ratio: 4 / 3; max-width: 34rem; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
    .pain__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); }
    .pain__media img.was { z-index: 1; clip-path: inset(0); }
    .pain__media img.is-on { z-index: 2; clip-path: inset(0); transition: clip-path 620ms cubic-bezier(.65, 0, .35, 1); }
    .pain__media img.is-on { animation: painZoom 1100ms cubic-bezier(.65, 0, .35, 1) both; }
    @keyframes painZoom { from { transform: scale(1.06); } }
  }
  @media (prefers-reduced-motion: reduce) { .pain__media img.is-on { transition: none; animation: none; } }
  .q__h { margin: 0; }
  .q__btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: clamp(1rem, .7rem + 1vw, 1.6rem) 0; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--f-display); font-weight: 720; font-stretch: 100%;
    font-size: clamp(1.375rem, .95rem + 1.6vw, 2.375rem); line-height: 1.12; letter-spacing: -.01em;
    color: var(--ink-2); transition: color var(--d-fast) ease;
  }
  .q.is-open .q__btn, .q__btn:focus-visible { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .q__btn:hover { color: var(--ink); } }
  .q__btn i { position: relative; flex: none; width: 22px; height: 22px; }
  .q__btn i::before, .q__btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2.5px; background: var(--blue-deep); transition: transform var(--d-mid) var(--ease-out); }
  .q__btn i::after { transform: rotate(90deg); }
  .q.is-open .q__btn i::after { transform: rotate(0deg); }
  .q__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
  .q__in { overflow: hidden; min-height: 0; }
  .q__in p { font-size: var(--t-lead); line-height: 1.45; max-width: 40ch; color: var(--ink-2); }
  .q__in .arrow { margin: .4rem 0 1.4rem; }
  .js .q:not(.is-open) .q__a { grid-template-rows: 0fr; }
  .js .q:not(.is-open) .q__in { visibility: hidden; transition: visibility 0s linear 300ms; }
  .q + .q { box-shadow: 0 -1px 0 var(--line); }

  /* application collage */
  .apps { padding-top: 0; }
  .apps__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: end; margin-bottom: var(--s-6); }
  .apps__head .lead { justify-self: end; margin-top: 0; }
  .apps__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(230px, 22vw, 400px); gap: var(--s-4) var(--s-3); }
  .tile { display: flex; flex-direction: column; min-height: 0; text-decoration: none; color: var(--ink); }
  .tile__img { display: block; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
  .tile__img img { width: 100%; height: 100%; object-fit: cover; }
  .tile__cap {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: .8rem;
    font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase;
    font-size: clamp(1rem, .85rem + .55vw, 1.375rem); letter-spacing: .01em;
  }
  .tile__cap::after { color: var(--blue-deep); }
  .tile--a { grid-column: 1 / 8; grid-row: span 2; }
  .tile--b, .tile--c { grid-column: 8 / 13; }
  .tile--b img { object-position: 50% 60%; }
  .tile--d { grid-column: 1 / 6; }
  .tile--d img { object-position: 50% 40%; }
  .tile--more {
    grid-column: 6 / 13; background: var(--blue-deep); color: var(--white); border-radius: var(--radius);
    padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  }
  .tile--more p { font-family: var(--f-display); font-weight: 760; font-stretch: 100%; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em; max-width: 20ch; }
  .tile--more .arrow { color: var(--white); }

  /* benefits: full panels pin and stack (Sticky Stack Cards) */
  .gains { padding: var(--s-8) var(--g) var(--s-7); }
  .gains__title { max-width: 16ch; margin-bottom: var(--s-6); }
  .stack { display: grid; gap: var(--s-5); }
  .card__in { display: grid; grid-template-columns: 56fr 44fr; border-radius: 6px; overflow: hidden; transform-origin: 50% 0; }
  .card__img { min-height: 0; }
  .card__img img { width: 100%; height: 100%; object-fit: cover; }
  .card__body { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); padding: clamp(1.75rem, 1rem + 3vw, 4rem); }
  .card__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.875rem, 1.1rem + 2.4vw, 3.5rem); line-height: .94; letter-spacing: -.01em; text-wrap: balance; }
  .card__body p { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; }
  /* James 7 Nov: no charcoal panels anywhere, so the cards are light and the photo carries them */
  .card--ink .card__in { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  .card--ink .card__body p { color: var(--ink-2); }
  .card--blue .card__in { background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  .card--blue .card__body p { color: var(--ink-2); }
  .card--paper .card__in { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  .card--paper .card__body p { color: var(--ink-2); }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .chips li {
    font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase;
    padding: .45rem .7rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  }
  @media (min-width: 900px) {
    .stack { gap: 14vh; padding-bottom: 4vh; }
    .card { position: sticky; top: calc(var(--hdr-h) + var(--s-3) + var(--i, 0) * 16px); height: min(76vh, 640px); }
    .card:nth-child(2) { --i: 1; }
    .card:nth-child(3) { --i: 2; }
    .card:nth-child(4) { --i: 3; }
    .card:nth-child(5) { --i: 4; }
    .card__in { height: 100%; will-change: transform; }
  }

  /* hardware by type: the kit stands on a shelf, one bay per family (own build: James asked for three headings, not a list of models) */
  .kit { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-6); align-items: end; }
  .kit__side { display: grid; justify-items: start; gap: var(--s-4); }
  .kit__side .lead { margin-top: 0; }
  .shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .shelf__bay { display: grid; align-content: start; gap: .45rem; text-decoration: none; color: var(--ink); border-radius: var(--radius); transition: opacity 100ms cubic-bezier(.19, 1, .22, 1); }
  .shelf__bay:focus-visible { outline: var(--focus); outline-offset: 6px; }
  .shelf__kit { position: relative; display: block; aspect-ratio: var(--kit-ar, 2.1); margin-bottom: var(--s-2); border-bottom: 2px solid var(--ink); clip-path: inset(-40% -12% 0 -12%); }
  .shelf__in { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
  .shelf__in img { position: relative; flex: none; width: var(--w, 40%); height: auto; margin: 0 -6%; filter: drop-shadow(0 7px 7px rgba(20,28,34,.18)); transition: transform var(--d-mid) var(--ease-out); }
  .shelf__in img:nth-child(2) { z-index: 1; }
  .shelf__name { white-space: nowrap; margin-top: .2rem; font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.375rem, .85rem + 1.15vw, 2.25rem); line-height: .95; letter-spacing: -.01em; transition: color var(--d-fast) ease; }
  .shelf__for { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
  .shelf__n { display: inline-flex; align-items: center; gap: .5rem; margin-top: .15rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--blue-ink); }
  .shelf__n::after { content: ""; width: 1.05em; height: .72em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform var(--d-fast) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    /* point at one bay and the other two step back (Dim Brand Wall timing) */
    .shelf:has(.shelf__bay:hover) .shelf__bay:not(:hover) { opacity: .42; }
    .shelf__bay:hover .shelf__in img { transform: translateY(-7px); }
    .shelf__bay:hover .shelf__in img:nth-child(2) { transition-delay: 35ms; }
    .shelf__bay:hover .shelf__in img:nth-child(3) { transition-delay: 70ms; }
    .shelf__bay:hover .shelf__name { color: var(--blue-deep); }
    .shelf__bay:hover .shelf__n::after { transform: translateX(4px); }
  }
  /* arrival: each family rises up from behind its shelf */
  @media (prefers-reduced-motion: no-preference) {
    .motion .shelf__in { transition: transform 1100ms cubic-bezier(.19, 1, .22, 1) var(--ld, 0ms); }
    .motion .shelf:not(.is-in) .shelf__in { transform: translateY(104%); }
  }

  /* home: from the ute to your phone. The real kit beside a laptop and a phone that tell the story
     (Sticky Product Showcase: pinned on wide screens so the scroll drives it, elsewhere it plays in view) */
  .u2p { background: var(--paper-2); }
  .u2p__pin { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); gap: var(--s-6); align-items: center; padding: var(--s-8) var(--g); }
  .u2p .h2 { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.5rem); max-width: 12ch; }
  .u2p__steps { margin-top: var(--s-5); display: grid; gap: var(--s-2); }
  .u2p__go {
    display: grid; grid-template-columns: 3px minmax(0, 1fr); column-gap: var(--s-3); row-gap: .3rem; width: 100%;
    padding: .55rem 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
    transition: opacity var(--d-mid) ease;
  }
  .u2p__bar { grid-row: 1 / span 2; position: relative; overflow: hidden; border-radius: 2px; background: rgba(32,44,52,.16); }
  .u2p__bar > i { position: absolute; inset: 0; background: var(--blue); transform-origin: 50% 0; transform: scaleY(var(--f, 0)); }
  .u2p__go b { font-family: var(--f-display); font-weight: 760; font-stretch: 100%; font-size: var(--t-h3); line-height: 1.15; }
  .u2p__go span { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
  .u2p__go:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
  .u2p__copy > .arrow { margin-top: var(--s-4); }
  /* the story's clock: split-flap tiles flip to each moment (Split-Flap Scroll Clock, charterflightsupport.com values) */
  .u2p__clock { display: flex; align-items: center; gap: .3rem; margin-top: var(--s-4); }
  .sf { position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.9rem; border-radius: 4px; background: var(--ink); color: var(--white); font-family: var(--f-mono); font-weight: 600; font-size: 1.5rem; line-height: 1; perspective: 300px; box-shadow: 0 2px 4px rgba(20,28,34,.18); }
  .sf::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 4; height: 1px; background: rgba(0,0,0,.6); }
  .sf__h { position: absolute; left: 0; right: 0; z-index: 2; height: 50%; overflow: hidden; background: var(--ink); backface-visibility: hidden; }
  .sf__h > b { position: absolute; left: 0; right: 0; height: 2.9rem; display: grid; place-items: center; font-weight: 600; }
  .sf__t { top: 0; transform-origin: 50% 100%; border-radius: 4px 4px 0 0; background-image: linear-gradient(rgba(255,255,255,.03), rgba(0,0,0,.09)); }
  .sf__t > b { top: 0; }
  .sf__b { bottom: 0; transform-origin: 50% 0; border-radius: 0 0 4px 4px; }
  .sf__b > b { bottom: 0; }
  .sf__away { z-index: 3; animation: sfAway var(--d, 150ms) linear both; }
  .sf__in { z-index: 3; animation: sfIn var(--d, 150ms) linear both; }
  @keyframes sfAway { 0% { transform: rotateX(0); } 50%, 100% { transform: rotateX(-90deg); } }
  @keyframes sfIn { 0%, 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
  .u2p__clk-am { align-self: flex-end; margin: 0 .55rem .3rem .1rem; font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; color: var(--steel); }
  .u2p__clk-t { font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.3; color: var(--ink-2); transition: opacity 160ms var(--ease-out); }
  .u2p__clk-t.is-out { opacity: 0; }
  .u2p.is-run .u2p__step:not(.is-on) .u2p__go { opacity: .45; }
  @media (hover: hover) and (pointer: fine) { .u2p.is-run .u2p__step:not(.is-on) .u2p__go:hover { opacity: .8; } }
  .u2p__say { display: none; }
  /* James 9 Nov (Stuart): a progress bar under the picture, so you can see the story moving as you scroll. Three parts, one per step,
     each fills in turn; the word under the part you are on goes blue. Desktop only: on a phone the three steps under the picture
     already carry their own bars. */
  .u2p__prog { display: none; }
  @media (min-width: 900px) {
    .u2p.is-run .u2p__prog { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); width: 100%; margin-top: calc(var(--s-4) * -1); }
    .u2p__seg { display: grid; gap: .55rem; }
    .u2p__seg i { position: relative; height: 4px; border-radius: 2px; background: rgba(32, 44, 52, .14); overflow: hidden; }
    .u2p__seg i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue-deep); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
    .u2p__seg b { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); transition: color var(--d-mid) ease; }
    .u2p__seg.is-on b { color: var(--blue-ink); }
  }

  .u2p__stage { position: relative; width: 100%; aspect-ratio: 1000 / 640; container-type: inline-size; justify-self: end; }
  .u-shadow { position: absolute; left: 6%; width: 84%; top: 72%; height: 8%; background: radial-gradient(closest-side, rgba(20,28,34,.3), rgba(20,28,34,0)); }
  .u-laptop { position: absolute; left: 12%; top: 0; width: 72%; }
  .u-screen { position: relative; padding: 1.85% 1.85% 2.1%; background: #141B21; border-radius: 2.2% 2.2% .5% .5% / 3.4% 3.4% .8% .8%; box-shadow: inset 0 0 0 1px #34404A; }
  .u-screen::before { content: ""; position: absolute; top: .65%; left: 50%; width: .6%; aspect-ratio: 1; border-radius: 50%; background: #2E3943; transform: translateX(-50%); }
  .u-view { position: relative; overflow: hidden; border-radius: 2px; background: #F7F9FA; container-type: inline-size; }
  .u-app { display: block; width: 100%; height: auto; }
  .u-base { position: relative; display: block; padding-top: 2.9%; margin: 0 -6%; background: linear-gradient(#E8ECEF, #BEC6CC 62%, #98A2A9); border-radius: 0 0 5% 5% / 0 0 100% 100%; }
  .u-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 12%; height: 40%; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #A9B2B8; }

  /* the drawn Telematics Guru style app */
  .u-app text { font-family: var(--f-body); font-size: 10px; fill: var(--ink); }
  .u-app .ua-tabs text { font-weight: 500; fill: var(--steel); }
  .u-app .ua-tabs .is-on { font-weight: 700; fill: var(--ink); }
  .u-app .ua-h { font-size: 11px; font-weight: 750; }
  .u-app .ua-n, .u-app .ua-s { font-family: var(--f-mono); font-size: 8.5px; fill: var(--steel); }
  .u-app .ua-r { font-size: 10.5px; font-weight: 650; }
  .ua-row__bg { fill: #EAF3FC; }
  .c-off { fill: #A3ADB5; } .c-live { fill: var(--blue); } .c-idle { fill: #E8A317; }
  .ua-dot circle { stroke: #fff; stroke-width: 2; }
  .ua-fence { fill: rgba(8,127,229,.07); stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 4 3; }
  .u-app .ua-place { font-family: var(--f-mono); font-size: 8.5px; fill: var(--blue-ink); }
  .ua-route { fill: none; stroke: var(--blue); stroke-opacity: .3; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round; }
  .ua-trail { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .ua-ev > rect { fill: var(--vis); stroke: var(--ink); stroke-width: 1.4; }
  .ua-ev g rect { fill: var(--ink); }
  .u-app .ua-ev text { font-family: var(--f-mono); font-size: 8.5px; fill: #fff; }
  .ua-ev__ring { fill: none; stroke: #C9A800; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .ua-ute__halo { fill: var(--blue); opacity: .18; transform-box: fill-box; transform-origin: center; }
  .ua-ute__dot { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
  .ua-ute g rect { fill: var(--blue-deep); }
  .u-app .ua-ute text { font-size: 9.5px; font-weight: 700; fill: #fff; }
  .ua-zoom rect { fill: #fff; stroke: #D3DAE0; }
  .ua-badge circle { fill: var(--vis); stroke: #fff; stroke-width: 1.5; }
  .u-app .ua-badge text { font-family: var(--f-mono); font-size: 7.5px; font-weight: 700; fill: var(--ink); }
  .u2p.is-run .ua-badge { opacity: 0; transition: opacity 200ms var(--ease-out); }
  .u2p.is-run .u2p__stage:not([data-beat="0"]) .ua-badge { opacity: 1; }
  .ua-zoom path { fill: none; stroke: var(--steel); stroke-width: 1.5; }

  /* RideView clip: a side panel slides over the map, like the real app */
  .u-clip { position: absolute; top: 6.75%; right: 0; bottom: 0; width: 31.25%; display: flex; flex-direction: column; background: #fff; box-shadow: -1px 0 0 #DDE3E7, -2cqw 0 4cqw rgba(20,28,34,.12); line-height: 1.3; color: var(--ink); }
  .u-clip__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2cqw; align-items: center; padding: 1.6cqw 1.8cqw; }
  .u-clip__bar .u-ico { grid-row: 1 / span 2; width: 4.4cqw; }
  .u-clip__bar b { font-weight: 750; font-size: 1.75cqw; }
  .u-clip__bar span { font-family: var(--f-mono); font-size: 1.35cqw; color: var(--steel); }
  .u-clip__vid { position: relative; }
  .u-clip__vid img { display: block; width: 100%; height: auto; }
  .u-clip__ev { position: absolute; left: 1.4cqw; top: 1.4cqw; padding: .35cqw .8cqw; border-radius: .5cqw; background: var(--vis); color: var(--ink); font-family: var(--f-mono); font-weight: 600; font-size: 1.35cqw; }
  .u-clip__ts { position: absolute; left: 1.4cqw; bottom: 1.2cqw; font-family: var(--f-mono); font-size: 1.3cqw; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .u-clip__scrub { position: relative; height: .8cqw; margin: 1.6cqw 1.8cqw 1.2cqw; border-radius: 1cqw; background: #E3E8EC; }
  .u-clip__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: 0 50%; }
  .u-clip__tick { position: absolute; left: 58%; top: -.5cqw; bottom: -.5cqw; width: .5cqw; border-radius: .3cqw; background: var(--ink); }
  .u-clip__rows { display: grid; margin: 0 1.8cqw; }
  .u-clip__rows div { display: grid; grid-template-columns: 9cqw minmax(0, 1fr); align-items: baseline; padding: 1cqw 0; border-top: 1px solid #E6EBEE; }
  .u-clip__rows dt { font-family: var(--f-mono); font-size: 1.3cqw; color: var(--steel); }
  .u-clip__rows dd { margin: 0; font-weight: 650; font-size: 1.45cqw; }
  .u-ico { position: relative; display: block; aspect-ratio: 1; border-radius: 22%; background: var(--ink); }
  .u-ico--cam::after {
    content: ""; position: absolute; inset: 22%; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* the real hardware on the desk */
  .u-kit { position: absolute; margin: 0; }
  .u-kit__img { position: relative; display: block; }
  .u-kit img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.1cqw 1.2cqw rgba(20,28,34,.26)); }
  .u-kit figcaption { margin-top: .5cqw; font-family: var(--f-mono); font-size: max(10px, 1.05cqw); letter-spacing: .05em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
  .u-kit--cam { left: 0; top: 61%; width: 14.5%; }
  .u-kit--trk { left: 15.5%; top: 73%; width: 16.5%; }
  .u-ping { position: absolute; left: 50%; top: 45%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; pointer-events: none; }

  /* the phone: lock screen with the two alerts */
  .u-phone { position: absolute; left: 80%; top: 31%; width: 19.5%; aspect-ratio: 9 / 19.5; container-type: inline-size; border-radius: 16% / 7.4%; background: #0D1216; box-shadow: inset 0 0 0 1.5px #3B4650, 0 2cqw 4cqw rgba(20,28,34,.34); }
  .u-phone__scr { position: absolute; inset: 3.4cqw; overflow: hidden; border-radius: 13cqw; padding: 0 4cqw; background: #1C2A33; isolation: isolate; }
  .u-phone__scr::before { content: ""; position: absolute; top: 3cqw; left: 50%; z-index: 2; width: 30cqw; height: 8.5cqw; border-radius: 5cqw; background: #000; transform: translateX(-50%); }
  .u-phone__scr::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(12,18,22,.5), rgba(12,18,22,.08) 42%, rgba(12,18,22,.3)); }
  .u-phone__wall { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
  .u-phone__date { margin-top: 15cqw; text-align: center; color: #fff; font-size: 5.6cqw; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
  .u-phone__time { margin: .5cqw 0 8cqw; text-align: center; color: #fff; font-family: var(--f-display); font-weight: 600; font-stretch: 100%; font-size: 24cqw; line-height: 1; letter-spacing: -.02em; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
  .u-notes { display: grid; grid-auto-rows: 1fr; gap: 3cqw; }
  .u-note { display: grid; grid-template-columns: 11cqw minmax(0, 1fr) auto; column-gap: 3.5cqw; row-gap: .5cqw; align-items: start; padding: 4cqw 4.5cqw; border-radius: 7cqw; background: rgba(245,248,250,.93); color: var(--ink); line-height: 1.25; }
  .u-note img, .u-note .u-ico { grid-row: 1 / span 2; width: 11cqw; height: auto; border-radius: 2.6cqw; }
  .u-note b { font-size: 5.2cqw; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .u-note time { font-size: 4.6cqw; color: var(--steel); }
  .u-note span { grid-column: 2 / -1; font-size: 5.8cqw; }

  /* the story, beat by beat. Without the script (or with reduced motion) the final frame shows. */
  .u2p.is-run .u-clip { transform: translateX(101%); transition: transform 560ms cubic-bezier(.32, .72, 0, 1); }
  .u2p.is-run .u2p__stage:not([data-beat="0"]) .u-clip { transform: none; }
  .u2p.is-run .ua-ev { opacity: 0; transition: opacity 220ms var(--ease-out); }
  .u2p.is-run .u2p__stage:not([data-beat="0"]) .ua-ev { opacity: 1; }
  .u2p.is-run .u-kit { opacity: .72; transition: opacity 420ms var(--ease-out), translate 520ms var(--ease-out); }
  .u2p.is-run [data-beat="0"] .u-kit--trk, .u2p.is-run [data-beat="1"] .u-kit--cam { translate: 0 -.6cqw; }
  .u2p.is-run [data-beat="0"] .u-kit--trk, .u2p.is-run [data-beat="1"] .u-kit--cam { opacity: 1; }
  .u2p.is-run .u-phone { translate: 0 2cqw; transition: translate 700ms var(--ease-out); }
  .u2p.is-run [data-beat="2"] .u-phone { translate: 0 -1cqw; }
  .u2p.is-run .u-note { opacity: 0; transform: translateY(-14%) scale(.96); transition: opacity 240ms var(--ease-out), transform 520ms cubic-bezier(.32, .72, 0, 1); }
  .u2p.is-run .u-note.is-in { opacity: 1; transform: none; }
  .u2p.is-run .u-notes:not(.has-tg) .u-note--rv.is-in { transform: translateY(calc(-100% - 3cqw)); }
  .u-phone.is-buzz { animation: uBuzz 420ms linear; }
  @media (prefers-reduced-motion: no-preference) {
    .u2p.is-live .ua-ute__halo { animation: uHalo 1.8s var(--ease-out) infinite; }
    .u2p.is-live [data-beat="0"] .u-kit--trk .u-ping, .u2p.is-live [data-beat="1"] .u-kit--cam .u-ping { animation: uPing 1.6s var(--ease-out) infinite; }
    .u2p.is-live [data-beat="1"] .ua-ev__ring { animation: uRing 1.4s var(--ease-out) infinite; }
  }
  @keyframes uHalo { 0% { transform: scale(.55); opacity: .35; } 100% { transform: scale(1.7); opacity: 0; } }
  @keyframes uPing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
  @keyframes uRing { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
  @keyframes uBuzz { 0%, 100% { rotate: 0deg; } 15% { rotate: 1.6deg; } 35% { rotate: -1.6deg; } 55% { rotate: 1.1deg; } 75% { rotate: -.6deg; } }

  /* wide screens: pin the section, three beats over about two screens of scroll */
  @media (min-width: 1200px) and (min-height: 700px) {
    .u2p.is-pin { height: 400vh; }
    .u2p.is-pin .u2p__pin { position: sticky; top: 0; height: 100vh; padding-top: calc(var(--hdr-h) + var(--s-4)); padding-bottom: var(--s-5); }
    .u2p.is-pin .u2p__stage { max-width: calc((100vh - var(--hdr-h) - var(--s-4) - var(--s-5) - 3rem) * 1000 / 640); }
    .u2p.is-pin .u2p__prog { max-width: calc((100vh - var(--hdr-h) - var(--s-4) - var(--s-5) - 3rem) * 1000 / 640); justify-self: end; }
  }
  /* tablets and phones: title, the scene, then the three beats as tabs under it */
  @media (max-width: 1199px) {
    .u2p__pin { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .u2p__copy { display: contents; }
    .u2p .h2 { order: 1; max-width: none; }
    .u2p__clock { order: 2; margin-top: calc(var(--s-2) * -1); }
    .u2p__stage { order: 3; justify-self: center; max-width: min(100%, calc((100svh - 14rem) * 1000 / 640)); }
    .u2p__steps { order: 4; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
    .u2p__copy > .arrow { order: 6; margin-top: 0; justify-self: start; }
    .u2p__go { grid-template-columns: minmax(0, 1fr); grid-template-rows: 3px auto auto; row-gap: .6rem; padding-top: 0; align-content: start; }
    .u2p__bar { grid-row: auto; }
    .u2p__bar > i { transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
  }
  @media (max-width: 699px) {
    /* hardware shelf: one family per row, the kit full width above its name */
    .shelf { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
    .shelf__bay { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: .3rem; align-items: baseline; }
    .shelf__kit, .shelf--big .shelf__kit { grid-column: 1 / -1; --kit-ar: 3.1; margin-bottom: .35rem; }
    .shelf__in img { width: calc(var(--w, 40%) * .82); }
    .shelf__name, .shelf--big .shelf__name { font-size: 1.625rem; }
    .shelf__n { grid-column: 2; grid-row: 2; }
    .shelf__for, .shelf--big .shelf__for { grid-column: 1 / -1; font-size: .9375rem; max-width: none; }
    /* on the home page each family is one row: kit on the left, words beside it */
    .kit .shelf { row-gap: var(--s-3); }
    .kit .shelf__bay { grid-template-columns: 44% minmax(0, 1fr); row-gap: .2rem; align-items: start; }
    .kit .shelf__kit { grid-column: 1; grid-row: 1 / span 3; --kit-ar: 1.9; margin: 0; align-self: center; }
    .kit .shelf__in img { width: calc(var(--w, 40%) * 1.12); }
    .kit .shelf__name { grid-column: 2; grid-row: 1; font-size: 1.375rem; }
    .kit .shelf__for { grid-column: 2; grid-row: 2; font-size: .875rem; line-height: 1.4; }
    .kit .shelf__n { grid-column: 2; grid-row: 3; }
    .u2p__pin { padding: var(--s-5) var(--g); gap: var(--s-3); }
    .u2p__stage { aspect-ratio: 1000 / 1180; max-width: none; overflow: clip; }
    .u-laptop { left: 0; width: 100%; }
    .u-shadow { left: 0; width: 100%; top: 54%; height: 5%; }
    .u-kit--cam { top: 66%; width: 24%; }
    .u-kit--trk { left: 25%; top: 72%; width: 26%; }
    .u-phone { left: 54%; top: 51%; width: 46%; }
    .sf { width: 2.2rem; height: 2.5rem; font-size: 1.3rem; }
    .sf__h > b { height: 2.5rem; }
    .u2p__steps { gap: var(--s-2); }
    .u2p__go b { font-size: .9375rem; line-height: 1.2; }
    .u2p.is-run .u2p__go span { display: none; }
    .u2p.is-run .u2p__say { display: grid; order: 5; margin-top: calc(var(--s-1) * -1); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
    .u2p__say > span { grid-area: 1 / 1; opacity: 0; transition: opacity 240ms var(--ease-out); }
    .u2p__say > span.is-on { opacity: 1; }
  }

  /* proof */
  .quote { margin: 0; display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); align-items: end; }
  .quote__big { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.875rem, .75rem + 3.2vw, 4.25rem); line-height: .94; /* James 9 Nov: smaller */ letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
  .quote__full { margin: 0; }
  .quote__full p { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
  .quote__who { margin-top: var(--s-4); display: grid; gap: .15rem; padding-left: 1rem; border-left: 3px solid var(--blue); }
  .quote__who b { font-weight: 700; }
  .quote__who span { font-size: var(--t-small); color: var(--ink-2); }

  .stack__hint { display: none; padding: var(--s-3) var(--g) 0; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  .quote__more { display: none; align-items: center; min-height: 44px; margin-top: .25rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

  /* closing call to action */
  /* James 7 Nov: no charcoal blocks, the closing band is the brand blue and the button turns white on it */
  .close { background: var(--blue-deep); color: var(--white); padding: var(--s-8) var(--g); display: grid; grid-template-columns: 1fr auto; gap: var(--s-5) var(--s-6); align-items: end; }
  .close__title { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.5rem, .9rem + 5.8vw, 7rem); line-height: .86; /* James 9 Nov: a little smaller */ letter-spacing: -.012em; text-wrap: balance; }
  .close__text { font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; color: rgba(255,255,255,.92); }
  .close__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
  .close .btn--light { background: var(--white); color: var(--blue-ink); }
  /* Resellers (James 9 Nov, Stuart): the closing section carries its own basic form, white fields on the blue */
  .close--form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .close__side { display: grid; justify-items: start; gap: var(--s-4); }
  .rsf .fld label { color: var(--white); }
  .rsf .fld label small { color: rgba(255, 255, 255, .8); }
  .rsf .fld input, .rsf .fld textarea { border-color: transparent; }
  .rsf .fld input:focus-visible, .rsf .fld textarea:focus-visible { border-color: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
  .rsf .fld__err { color: #FFE1DC; }
  .rsf .fld [aria-invalid="true"] { border-color: #FFB4A8; box-shadow: 0 0 0 2px #FFB4A8; }
  .rsf .grid2 { margin-bottom: var(--s-3); }
  .rsf .fld { align-content: start; }
  .rsf .qf__small { color: rgba(255, 255, 255, .85); }
  .rsf__done { padding: var(--s-5) 0; border-top: 2px solid var(--white); }
  .rsf__done:focus { outline: none; }
  .rsf__done[hidden] { display: none; }
  .rsf__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: .95; }
  .rsf__done p:not(.rsf__h) { margin-top: var(--s-3); font-size: var(--t-lead); line-height: 1.45; max-width: 40ch; }
  /* "Let's talk tracking": Customer support (James 9 Nov, Stuart). The help for each platform one tap away.
     Opens upward from its button, so it stays on screen at the foot of the page, and scales from the button it came from. */
  .sos { position: relative; }
  .sos__btn { gap: .55rem; }
  .sos__btn svg { transition: transform var(--d-mid) var(--ease-out); }
  .sos.is-open .sos__btn svg { transform: rotate(180deg); }
  .sos__menu { position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 30; width: 310px; padding: .5rem; background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: 0 18px 44px -14px rgba(10, 20, 30, .5); transform-origin: 100% 100%; transform: translateY(6px) scale(.97); opacity: 0; visibility: hidden; transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out), visibility 0s 150ms; }
  .sos.is-open .sos__menu { transform: none; opacity: 1; visibility: visible; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s; }
  .sos__h { padding: .5rem .8rem .4rem; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .sos__menu a { display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .5rem .8rem; border-radius: 3px; color: var(--ink); text-decoration: none; }
  .sos__ico { flex: none; width: 26px; height: 26px; object-fit: contain; color: var(--blue-deep); }
  .sos__menu span { display: grid; gap: .1rem; }
  .sos__menu b { font-weight: 650; font-size: .9688rem; line-height: 1.2; }
  .sos__menu small { font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
  .sos__menu a:focus-visible { outline: var(--focus); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) { .sos__menu a:hover { background: var(--paper); } }

  @media (hover: hover) and (pointer: fine) { .close .btn--light:hover { background: var(--paper-2); color: var(--blue-ink); } }

  /* settle in from a faint blur, desktop only (Staggered Blur Rise Reveal) */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .motion .rise { transition: opacity 760ms var(--ease-out) var(--rd, 0ms), filter 760ms var(--ease-out) var(--rd, 0ms), transform 760ms var(--ease-out) var(--rd, 0ms); }
    .motion .rise:not(.is-in) { opacity: .78; filter: blur(1.5px); transform: translateY(14px); }
  }
  /* photos uncover left to right as they arrive (Image Wipe Reveal) */
  @media (prefers-reduced-motion: no-preference) {
    .motion [data-wipe] { clip-path: inset(0 0 0 0); transition: clip-path 1050ms cubic-bezier(.65, 0, .35, 1) var(--wd, 0ms); }
    .motion [data-wipe] img { transition: transform 1200ms cubic-bezier(.65, 0, .35, 1) var(--wd, 0ms); }
    .motion [data-wipe]:not(.is-in) { clip-path: inset(0 100% 0 0); }
    .motion [data-wipe]:not(.is-in) img { transform: scale(1.08); }
  }

  @media (max-width: 899px) {
    /* phone: the whole home page reads in ten screens or fewer on an iPhone 15 (gold Step 4.4) */
    .sec { padding: var(--s-6) var(--g); }
    .q__btn { font-size: 1.3125rem; padding: .85rem 0; }
    .pain, .kit { grid-template-columns: 1fr; gap: var(--s-5); }
    .pain__head { position: static; }
    .apps__head { grid-template-columns: 1fr; gap: 0; margin-bottom: var(--s-5); }
    .apps__head .lead { justify-self: start; margin-top: var(--s-3); }
    /* industry tiles: one wide, then pairs */
    .apps__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: var(--s-4) var(--s-2); }
    .tile--b, .tile--c, .tile--d, .tile--more { grid-column: auto; grid-row: auto; }
    .tile--a { grid-column: 1 / -1; grid-row: auto; }
    .tile__img { flex: none; aspect-ratio: 1 / 1; }
    .tile--a .tile__img { aspect-ratio: 16 / 10; }
    .tile__cap { font-size: .9375rem; font-stretch: 100%; line-height: 1.15; padding-top: .6rem; }
    .tile--more { padding: var(--s-4) var(--s-3); }
    .tile--more p { font-size: 1.0625rem; line-height: 1.2; }
    /* what changes: the three cards swipe sideways, the next one peeking in */
    .gains { padding: var(--s-6) 0 var(--s-5); }
    .card .chips { display: none; }
    .gains__title { padding: 0 var(--g); margin-bottom: var(--s-5); }
    .stack {
      display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); padding: 0 var(--g) var(--s-2); scrollbar-width: none;
    }
    .stack::-webkit-scrollbar { display: none; }
    .card { flex: 0 0 86%; scroll-snap-align: start; display: flex; }
    .card__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; }
    .card__img { aspect-ratio: 16 / 10; }
    .card__body { justify-content: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); }
    .card__h { font-size: 1.75rem; }
    .card__body p { font-size: 1rem; }
    .stack__hint { display: block; }
    /* hardware: the button moves under the shelf */
    .kit__side .btn { display: none; }
    .quote { grid-template-columns: 1fr; gap: var(--s-4); }
    /* the full testimonial folds to four lines with a Read the rest button */
    .js .quote__full.is-folded p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
    .quote__more { display: inline-flex; }
    .close { grid-template-columns: 1fr; padding: var(--s-6) var(--g); }
    .close__title { font-stretch: 70%; font-size: min(14.5vw, 6rem); line-height: .88; }
    .close__ctas { display: grid; justify-content: stretch; }
  }
}

/* ===== inner pages ===== */
@layer sections {
  /* page hero: one colour block with the page's promise, the photo beside it */
  .phero { display: grid; grid-template-columns: 5fr 7fr; min-height: clamp(560px, 84svh, 880px); padding-top: var(--hdr-h); background: var(--ink); color: var(--white); }
  .phero--ink { background: var(--ink); }
  .phero__copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s-4); padding: var(--s-7) var(--g) var(--s-6); }
  .crumb { display: flex; gap: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.76); }
  .crumb a { color: inherit; text-underline-offset: 3px; }
  .crumb span[aria-hidden] { opacity: .6; }
  .phero__title { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.5rem, .9rem + 4.4vw, 6.25rem); line-height: .9; letter-spacing: -.01em; text-wrap: balance; }
  .phero__lead { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; color: rgba(255,255,255,.92); }
  .phero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
  .phero__img { position: relative; overflow: hidden; min-height: 0; background: var(--ink-2); }
  .phero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* James 7 Nov: no charcoal left panel on any page. From 900px wide the photo is the whole hero and the
     words sit on it, top left, the same way the home page does it. --op picks the part of each photo kept. */
  @media (min-width: 900px) {
    .phero { display: block; position: relative; isolation: isolate; background: var(--ink); }
    .phero__img { position: absolute; inset: var(--hdr-h) 0 0 0; z-index: -1; }
    .phero__img img { object-position: var(--op, 50% 50%); }
    .phero__copy { justify-content: flex-start; max-width: min(48rem, 60vw); padding-top: var(--s-6);
      text-shadow: 0 1px 2px rgba(20,28,34,.55), 0 0 22px rgba(20,28,34,.45); }
    .phero__copy .btn { text-shadow: none; }
    /* a sunlit photo (Platforms: the site office window) takes dark type instead */
    .phero--lit .phero__copy { color: var(--ink); text-shadow: 0 0 2px rgba(255,255,255,.5), 0 0 24px rgba(255,255,255,.55); }
    .phero--lit .phero__lead { color: var(--ink); }
    .phero--lit .crumb { color: var(--ink-2); }
    .phero--lit .btn--line { border-color: var(--ink); color: var(--ink); }
    /* the office photo has a dark window frame down its left edge, so the words start on the glass */
    .phero--lit .phero__copy { padding-left: calc(8.6vw + var(--s-2)); }
    /* About (James 9 Nov, Stuart): the six word headline a little smaller on desktop */
    .phero--long .phero__title { font-size: clamp(2.25rem, .8rem + 3.6vw, 5.125rem); }
    /* Solutions road train photo (James 9 Nov): on laptop widths its white cab sits behind the Call button, so the button gets a dark fill */
    .phero--road .btn--line:not(:hover) { background: rgba(20,28,34,.5); border-color: rgba(255,255,255,.9); }
  }
  .is-inner .hdr { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  .is-inner .hdr__logo-w { opacity: 0; }
  .is-inner .hdr__logo-c { opacity: 1; }
  .is-inner .hdr__cta { background: var(--blue-deep); color: var(--white); }

  /* solutions: industry rail on the left, mining first and biggest */
  .sol { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s-6); padding: var(--s-7) var(--g) var(--s-8); }
  .rail { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); align-self: start; display: grid; gap: .1rem; }
  .rail__h { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: .6rem; }
  .rail a { display: flex; align-items: center; min-height: 44px; padding: .2rem 0 .2rem .9rem; border-left: 3px solid var(--line); text-decoration: none; font-weight: 600; color: var(--ink-2); transition: border-color var(--d-fast) ease, color var(--d-fast) ease; }
  .rail a.is-on { border-left-color: var(--blue-deep); color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .rail a:hover { color: var(--blue-ink); } }
  .sectors { display: grid; gap: var(--s-8); min-width: 0; }
  .sector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); align-items: start; scroll-margin-top: calc(var(--hdr-h) + var(--s-4)); }
  .sector__img { grid-column: 1 / -1; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
  .sector__img img { width: 100%; height: 100%; object-fit: cover; }
  .sector__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); line-height: .92; letter-spacing: -.01em; text-wrap: balance; }
  .sector__pain { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
  .gets { display: grid; gap: var(--s-4); }
  .gets li { padding-left: 1rem; border-left: 3px solid var(--blue); }
  .gets b { display: block; font-weight: 700; font-size: 1.0625rem; margin-bottom: .15rem; }
  .gets span { color: var(--ink-2); }
  .sector .arrow { margin-top: var(--s-3); }
  /* mining: the brief's biggest customers, so the ink block, two photos and the rugged facts as a data strip */
  /* James 7 Nov: no charcoal panels, so the mining block is a white sheet under its two photos */
  /* what we fit: the three kinds of kit, with the models inside (James 7 Nov: "no one knows what those are").
     One row each, photo, kind, models, the same in every industry and on phone. Each row opens that family on Products. */
  .fits { display: grid; gap: .5rem; margin-top: var(--s-5); }
  .fits__h { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: .1rem; }
  .fit { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 1rem; min-height: 76px; padding: .65rem 1.1rem .65rem .65rem; border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(32, 44, 52, .06), 0 10px 24px -18px rgba(32, 44, 52, .5); transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease; }
  .fit img { grid-row: 1 / 3; width: 84px; height: 56px; object-fit: contain; }
  .fit b { grid-column: 2; align-self: end; font-family: var(--f-display); font-weight: 820; text-transform: uppercase; font-size: 1.0625rem; line-height: 1.05; letter-spacing: .005em; }
  .fit span { grid-column: 2; align-self: start; margin-top: .2rem; font-size: .875rem; line-height: 1.35; color: var(--ink-2); }
  .fit::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: .55rem; height: .55rem; border-top: 2px solid var(--blue-deep); border-right: 2px solid var(--blue-deep); transform: rotate(45deg); }
  .fit:active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) { .fit:hover { box-shadow: 0 1px 2px rgba(32, 44, 52, .08), 0 16px 30px -18px rgba(32, 44, 52, .6); } .fit:hover b { color: var(--blue-ink); } }
  .sector--mine .fit { background: var(--paper); box-shadow: none; }
  .sector--mine { grid-template-columns: 1fr; gap: 0; background: var(--white); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  .mine__pics { display: grid; grid-template-columns: 7fr 5fr; gap: 3px; background: var(--white); }
  .mine__pics > span { display: block; overflow: hidden; }
  .mine__pics > span:first-child { aspect-ratio: 3 / 2; }
  .mine__pics img { width: 100%; height: 100%; object-fit: cover; }
  .mine__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); padding: clamp(1.75rem, 1rem + 3vw, 4rem); }
  .facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--paper); }
  .facts div { padding: var(--s-4) clamp(1rem, .5rem + 1.5vw, 2rem); border-right: 1px solid var(--line); }
  .facts div:last-child { border-right: 0; }
  .facts b { display: block; font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1; color: var(--ink); }
  .facts span { display: block; margin-top: .4rem; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
  .facts small { display: block; margin-top: .3rem; font-family: var(--f-mono); font-size: .75rem; color: var(--ink-2); }
  .sector--more { grid-template-columns: 1fr auto; align-items: end; padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--paper-2); border-radius: 6px; }
  .sector--more .sector__pain { margin-top: var(--s-3); }
  /* side: a tall photo beside the words, flip puts it on the right */
  .sector--side { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: var(--s-7); }
  .sector--side .sector__img { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 28rem; }
  .sector--side > div { grid-column: 2; }
  .sector--side > div + div { align-self: start; }
  #transport .sector__img img { object-position: 30% 50%; }
  #trades .sector__img img { object-position: 46% 50%; }
  .sector--flip { grid-template-columns: 1fr 1fr; }
  .sector--flip .sector__img { grid-column: 2; }
  .sector--flip > div { grid-column: 1; }
  /* kit: the actual battery trackers instead of name chips */
  .gets__more { display: none; }
  [hidden] { display: none !important; }

  /* products: three families on a shelf, sticky type tabs, one model at a time
     (Radius sticky sub-tabs and EROAD spec sheet, rebuilt; James: "just three headings") */
  .khero { padding: calc(var(--hdr-h) + var(--s-7)) var(--g) var(--s-6); }
  .khero__top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-5) var(--s-6); align-items: end; margin-bottom: var(--s-7); }
  .khero .crumb { color: var(--ink-2); margin-bottom: var(--s-4); }
  .khero .phero__title { color: var(--ink); }
  .khero .lead { margin-top: 0; }
  .shelf--big { --kit-ar: 2.4; column-gap: var(--s-6); }
  .shelf--big .shelf__name { font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); }
  .shelf--big .shelf__for { font-size: var(--t-body, 1rem); }
  .ptabs { position: sticky; top: var(--hdr-h); z-index: 30; display: flex; gap: var(--s-5); padding: 0 var(--g); background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); transition: top var(--d-mid) var(--ease-out); }
  .hdr.is-hidden ~ main .ptabs { top: 0; }
  .ptabs a { display: inline-flex; align-items: center; min-height: 54px; font-weight: 650; text-decoration: none; color: var(--ink-2); transition: color var(--d-fast) ease; }
  .ptabs a.is-on { color: var(--blue-ink); }
  .ptabs__ink { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--blue-deep); transform-origin: 0 0; transform: scaleX(0); transition: transform 340ms var(--ease-in-out); }
  @media (hover: hover) and (pointer: fine) { .ptabs a:hover { color: var(--blue-ink); } }
  .fam { padding: var(--s-7) var(--g) var(--s-5); scroll-margin-top: calc(var(--hdr-h) + 54px); }
  .fam__head { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-3) var(--s-6); align-items: end; margin-bottom: var(--s-5); }
  .fam__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.75rem); line-height: .92; letter-spacing: -.01em; }
  .fam__head p { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
  .prods { display: grid; gap: var(--s-3); }
  /* the models (James 9 Nov, Stuart): scrolling steps the side bar through the models, then the page moves on.
     .is-pin (desktop with room for the card): the stage holds still under the tabs and the model changes in place, one per stretch of scroll.
     Otherwise (phone, short screens): the models sit one under the other and the bar sticks, following the one in view. */
  .pick { --pin-top: calc(var(--hdr-h) + 54px + var(--s-3)); }
  .hdr.is-hidden ~ main .pick { --pin-top: calc(54px + var(--s-3)); }
  .pick__stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-4) var(--s-6); align-items: start; align-self: start; }
  .pick__stage > .prod, .pick__stage > .note { grid-column: 2; }
  .pick__list { position: sticky; top: var(--pin-top); grid-column: 1; grid-row: 1 / span var(--rows, 1); display: grid; align-content: start; transition: top var(--d-mid) var(--ease-out); }
  .pick.is-pin .pick__stage { position: sticky; top: var(--pin-top); grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); transition: top var(--d-mid) var(--ease-out); }
  .pick.is-pin .pick__list { position: relative; top: auto; grid-row: 1 / span var(--pin-rows, 1); }
  .pick.is-pin .pick__stage > .prod { grid-row: 1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out), visibility 0s linear 0s; }
  .pick.is-pin .pick__stage > .prod:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px); transition: opacity 200ms ease, transform 420ms var(--ease-out), visibility 0s linear 420ms; }
  .pick.is-pin .pick__stage > .prod.is-past { transform: translateY(-18px); }
  .pick.is-pin .pick__stage > .note { grid-row: 2; }
  .pick.is-pin .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick.is-pin .spec div { padding: .55rem .7rem; }
  .pick.is-pin .spec dd { font-size: .875rem; }
  .pick.is-pin .prod__body { gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); }
  .pick.is-pin .prod__img img { max-height: 240px; }
  @media (prefers-reduced-motion: reduce) { .pick.is-pin .pick__stage > .prod, .pick.is-pin .pick__stage > .prod:not(.is-on) { transform: none; transition: none; } }
  .pick__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: rgba(32,44,52,.12); }
  .pick__tab { display: grid; gap: .3rem; min-height: 44px; padding: .9rem 0 .9rem 1.25rem; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink-2); transition: color var(--d-fast) ease; }
  .pick__tab b { font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: clamp(1.125rem, .85rem + .8vw, 1.75rem); line-height: 1; letter-spacing: -.005em; }
  .pick__tab span { font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.3; }
  .pick__tab[aria-selected="true"] { color: var(--blue-ink); }
  .pick__tab:focus-visible { outline: var(--focus); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { .pick__tab:hover { color: var(--ink); } }
  .pick__ink { position: absolute; left: 0; top: 0; z-index: 1; width: 3px; height: 1px; border-radius: 2px; background: var(--blue-deep); transform-origin: 0 0; transition: transform 340ms var(--ease-in-out); }
  .prod { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); background: var(--white); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(20,28,34,.35); overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 70px); }
  .prod__img { display: grid; place-items: center; padding: var(--s-5); background: radial-gradient(70% 60% at 50% 62%, #FFFFFF 0%, var(--paper-2) 100%); }
  .prod__img img { width: 88%; height: auto; max-height: 300px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(20,28,34,.18)); }
  .prod__img--type { color: var(--blue-ink); font-family: var(--f-display); font-weight: 820; font-stretch: 125%; font-size: clamp(3rem, 2rem + 3vw, 5.5rem); line-height: 1; }
  .prod__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); }
  .prod__name { font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); line-height: 1; letter-spacing: -.005em; }
  .prod__for { color: var(--ink-2); line-height: 1.45; }
  /* the spec sheet as tiles you can scan, not a ruled list */
  .spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; }
  .spec div { display: grid; align-content: start; gap: .25rem; padding: .65rem .8rem; border-radius: var(--radius); background: var(--paper); }
  .spec dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
  .spec dd { margin: 0; font-size: var(--t-small); line-height: 1.35; font-weight: 560; }
  .prod .arrow { margin-top: auto; }
  .prods .note { padding: 0; max-width: 62ch; }
  /* "What do you run?": one box (James 7 Nov: "in one area or box so its fast and easy"). Four short questions on the left,
     the check fills in on the right as they answer: verdict, what is missing, what we'd fit, the price line, then send. */
  .match { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; margin-bottom: var(--s-7); border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -46px rgba(20,28,34,.5); }
  html:not(.js) .match { display: none; }
  .match__ask { padding: var(--s-5) var(--s-5) var(--s-5); }
  .match__h { font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -.005em; }
  .match__lead { margin-top: .6rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
  .match__q { min-width: 0; margin: var(--s-4) 0 0; padding: 0; border: 0; }
  .match__q[hidden] { display: none; }
  .match__q legend { display: block; margin-bottom: .6rem; padding: 0; font-weight: 650; font-size: .9688rem; }
  .match__q legend small, .match__ql small { display: block; margin-top: .1rem; font-weight: 400; font-size: .875rem; color: var(--ink-2); }
  .match__pay { gap: .5rem; }
  /* James 8 Nov: every box in the checker the same size, so the picker reads as one tidy set */
  .match__ask { container-type: inline-size; }
  .opts.match__gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .5rem; }
  @container (min-width: 44rem) { .opts.match__gear { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .opts.match__g4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts.match__does { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .match__does .opt span { padding-top: .5rem; padding-bottom: .5rem; line-height: 1.25; text-align: left; }
  .match__gear .opt span, .match__g4 .opt span, .match__does .opt span { height: 100%; }
  .opt--thumb em { font-style: normal; }
  @media (max-width: 374px) {
    .match .match__g4 .opt span { gap: .35rem; padding: 0 .4rem; font-size: .875rem; }
    .match .opts.match__does { grid-template-columns: minmax(0, 1fr); }
  }
  /* what it's in: a small photo of the thing in place of a tick box */
  .opt--thumb span { gap: .7rem; min-height: 54px; padding: 0 1rem 0 .4rem; }
  .opt--thumb span::before { display: none; }
  .opt--thumb img { flex: none; width: 54px; height: 40px; border-radius: 3px; object-fit: cover; }
  .opt--thumb input:checked + span { background: rgba(8,127,229,.07); color: var(--blue-ink); }
  /* the check: the right half of the same box */
  .match__fit { display: flex; flex-direction: column; padding: var(--s-5) var(--s-4) var(--s-4); border-left: 1px solid var(--line); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
  .match__fith { display: flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  .match__fith::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
  .match__empty { padding: var(--s-3) 0 var(--s-2); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
  .match__empty[hidden], .match__res[hidden] { display: none; }
  .match__kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: var(--s-3); }
  .match__kit img { width: 100%; height: 76px; padding: .6rem; border-radius: 8px; background: var(--white); object-fit: contain; }
  .match__verdict { display: flex; align-items: center; gap: .6rem; margin-top: var(--s-3); font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: clamp(1.625rem, 1.25rem + 1vw, 2.25rem); line-height: 1; }
  .match__verdict::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.6v5.2' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.25' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat; }
  .match[data-verdict="ok"] .match__verdict::before { background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
  .match[data-verdict="new"] .match__verdict::before { display: none; }
  .match__verdict.is-new { animation: mrowIn 240ms var(--ease-out) both; }
  .match__why { margin-top: .55rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
  /* yours against the best now: a short table, the short side ringed in ink, the best side ticked in blue */
  .match__cmp { width: 100%; margin-top: var(--s-3); border-collapse: collapse; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
  .match__cmp[hidden] { display: none; }
  .match__cmp caption { caption-side: top; margin: 0 0 .5rem; text-align: left; }
  .match__cmp th, .match__cmp td { padding: .6rem .7rem; text-align: left; vertical-align: middle; font-size: .875rem; line-height: 1.3; border-top: 1px solid var(--line); }
  .match__cmp thead th { padding-top: .5rem; padding-bottom: .45rem; border-top: 0; font-family: var(--f-mono); font-size: .75rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
  .match__cmp tbody th { font-weight: 650; }
  .match__cmp td { font-weight: 600; }
  .match__cmp td.is-short, .match__cmp td.is-best { white-space: nowrap; }
  .match__cmp td.is-short::before, .match__cmp td.is-best::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: .4rem; vertical-align: -.2em; border-radius: 50%; }
  .match__cmp td.is-short::before { box-shadow: inset 0 0 0 2px var(--ink); }
  .match__cmp td.is-best { color: var(--blue-ink); }
  .match__cmp td small { display: block; margin: .15rem 0 0 calc(15px + .4rem); font-weight: 400; font-size: .8125rem; white-space: normal; color: var(--ink-2); }
  .match__cmp td.is-best::before { background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
  .match__sub { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  .match__fit .mrow__img { background: var(--white); }
  .match__send { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .match__send[hidden] { display: none; }
  .match__sendh { font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: 1.125rem; line-height: 1.1; }
  .match__sendp { margin: .35rem 0 var(--s-3); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
  .match__send .grid2 { gap: var(--s-2); }
  .match__send .fld input { min-height: 48px; }
  .match__send .btn { width: 100%; margin-top: .35rem; }
  .match__done { margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--radius); background: rgba(8,127,229,.07); font-weight: 600; line-height: 1.45; color: var(--blue-ink); }
  .match__done[hidden] { display: none; }
  .match__alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem var(--s-4); margin-top: var(--s-2); }
  .match__alt a, .match__save { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 650; font-size: .9375rem; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
  .match__save:focus-visible { outline: var(--focus); outline-offset: 2px; }
  /* the saved report: on screen it never shows, on paper or PDF it is the only thing */
  .report { display: none; }
  @media print {
    @page { margin: 16mm; }
    body.is-report { background: #fff; }
    body.is-report > :not(.report) { display: none !important; }
    body.is-report .report { display: block; color: #202C34; font-family: var(--f-body); font-size: 10.5pt; line-height: 1.45; }
    .report__logo { display: block; width: auto; height: 30px; }
    .report h1 { margin: 14pt 0 2pt; font-family: var(--f-display); font-weight: 820; text-transform: uppercase; font-size: 22pt; line-height: 1; }
    .report h2 { margin: 16pt 0 6pt; font-family: var(--f-mono); font-size: 8.5pt; letter-spacing: .06em; text-transform: uppercase; color: #0A6CC4; }
    .report table { width: 100%; border-collapse: collapse; }
    .report th, .report td { padding: 5pt 8pt 5pt 0; border-top: 1px solid #D5DCE1; text-align: left; vertical-align: top; }
    .report th { font-family: var(--f-mono); font-size: 8pt; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #0A6CC4; }
    .report__date, .report__foot { font-size: 9pt; color: #33424C; }
    .report__verdict { margin: 14pt 0 3pt; font-family: var(--f-display); font-weight: 820; text-transform: uppercase; font-size: 16pt; line-height: 1; }
    .report ul { margin: 4pt 0 0 14pt; padding: 0; list-style: disc; }
    .report__foot { margin-top: 18pt; }
  }
  .match__list { margin: var(--s-2) 0 0; padding: 0; list-style: none; }
  .mrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: .9rem; padding: .8rem 0; border-top: 1px solid var(--line); }
  .mrow.is-new { animation: mrowIn 240ms var(--ease-out) both; }
  @keyframes mrowIn { from { opacity: 0; transform: translateY(6px); } }
  .mrow > :not(.mrow__img) { grid-column: 2; }
  .mrow__img { grid-row: 1 / 6; align-self: start; display: grid; place-items: center; width: 76px; height: 56px; border-radius: 8px; background: var(--paper); }
  .mrow__img img { width: 84%; height: 84%; object-fit: contain; }
  .mrow__img--ask { font-family: var(--f-display); font-weight: 820; font-size: 1.5rem; color: var(--blue-deep); }
  .mrow__for { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
  .mrow__name { justify-self: start; margin-top: .2rem; font-family: var(--f-display); font-weight: 820; font-stretch: 100%; text-transform: uppercase; font-size: 1.125rem; line-height: 1.05; color: var(--ink); text-decoration: none; }
  a.mrow__name::after { content: ""; display: inline-block; width: .42rem; height: .42rem; margin-left: .45rem; vertical-align: .14em; border-top: 2px solid var(--blue-deep); border-right: 2px solid var(--blue-deep); transform: rotate(45deg); }
  @media (hover: hover) and (pointer: fine) { a.mrow__name:hover { color: var(--blue-ink); } }
  .mrow__model { margin-top: .15rem; font-size: .8125rem; font-weight: 600; color: var(--blue-ink); }
  .mrow__why { margin-top: .3rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
  /* each device: what it is first, the model underneath, then three quick questions */
  .prod__model { margin-top: -.35rem; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; color: var(--blue-deep); }
  .qs { margin-top: var(--s-1, .25rem); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
  .prod .q__btn { padding: .8rem 0; min-height: 48px; font-family: var(--f-body); font-weight: 650; font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
  .prod .q__btn i { width: 16px; height: 16px; }
  .prod .q__btn i::before, .prod .q__btn i::after { top: 7px; height: 2px; }
  .prod .q__in p { padding-bottom: .9rem; font-size: .9375rem; line-height: 1.5; max-width: 56ch; }
  .prod .q__in a { color: var(--blue-ink); font-weight: 600; }
  .note { padding: var(--s-3) var(--g) 0; font-family: var(--f-mono); font-size: .8125rem; line-height: 1.5; color: var(--ink-2); max-width: 80ch; }
  /* Deploy once (Stuart 7 Nov): Digital Matter's battery story, the video is the picture */
  .deploy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-7); padding: var(--s-8) var(--g); background: var(--ink); color: var(--white); }
  .deploy__vid { position: relative; display: block; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #17212A; color: var(--white); text-decoration: none; }
  .deploy__vid img, .deploy__vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .deploy__vid img { object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
  .deploy__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--blue-deep); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); transition: transform 200ms var(--ease-out); }
  .deploy__play svg { width: 34px; height: 34px; margin-left: 4px; }
  .deploy__src { position: absolute; left: 1rem; bottom: .9rem; padding: .3rem .6rem; border-radius: 3px; background: rgba(23, 33, 42, .82); font-family: var(--f-mono); font-size: var(--t-micro); }
  .deploy__vid:active .deploy__play { transform: scale(.96); }
  .deploy__vid.is-on img, .deploy__vid.is-on .deploy__play, .deploy__vid.is-on .deploy__src { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .deploy__vid:hover img { transform: scale(1.02); }
    .deploy__vid:hover .deploy__play { transform: scale(1.06); }
  }
  .deploy__h { margin: 0; font-family: var(--f-display); font-weight: 820; font-stretch: 125%; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); line-height: .9; text-transform: uppercase; }
  .deploy__lead { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; color: rgba(255, 255, 255, .8); max-width: 34ch; }
  .deploy__big { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
  .deploy__big li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-3); align-items: center; }
  .deploy__big svg { grid-row: span 2; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #8EC8FF; }
  .deploy__big b { font-weight: 700; font-size: 1.125rem; }
  .deploy__big span { color: rgba(255, 255, 255, .72); font-size: var(--t-small); }
  .deploy__feats, .deploy__awards { grid-column: 1 / -1; }
  .deploy__h3 { margin: 0 0 var(--s-4); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
  .deploy__feats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .deploy__feats li { display: grid; gap: .35rem; align-content: start; }
  .deploy__feats svg { width: 30px; height: 30px; color: #8EC8FF; margin-bottom: .3rem; }
  .deploy__feats b { font-weight: 650; }
  .deploy__feats span { color: rgba(255, 255, 255, .72); font-size: var(--t-small); line-height: 1.5; }
  .deploy__fine { margin-top: var(--s-4); font-size: var(--t-micro); color: rgba(255, 255, 255, .55); }
  .deploy__awards { padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12); }
  .deploy__awards ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
  /* year, caption, badge: the caption row stretches so every badge in a row sits on one line however long its caption (James 9 Nov) */
  .deploy__awards li { display: grid; grid-template-rows: auto 1fr auto; gap: .35rem; padding-top: var(--s-3); border-top: 2px solid #8EC8FF; }
  .deploy__awards b { font-family: var(--f-display); font-weight: 820; font-stretch: 125%; font-size: 1.75rem; line-height: 1; color: var(--white); }
  .deploy__awards span { font-size: var(--t-small); line-height: 1.4; color: rgba(255, 255, 255, .8); }
  /* James 9 Nov (Stuart): each award's own badge under it, from Digital Matter's site, on a white tile so the badge colours read on the dark band */
  .deploy__awards .aw { box-sizing: border-box; width: 116px; height: 92px; margin-top: .6rem; padding: 10px 12px; object-fit: contain; background: var(--white); border-radius: var(--radius); }
  @media (max-width: 1023px) { .deploy__feats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deploy__awards ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 599px) {
    .deploy__awards ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* phone: the poster's own title sits mid-frame, so the play button moves to the corner */
    .deploy__play { left: auto; top: auto; right: .75rem; bottom: .75rem; width: 52px; height: 52px; margin: 0; }
    .deploy__play svg { width: 22px; height: 22px; margin-left: 3px; }
    .deploy__src { left: .75rem; bottom: .75rem; font-size: .6875rem; }
  }
  @media (max-width: 899px) {
    .deploy { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) var(--g); }
    .deploy__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  }
  .fam--cams .fam__photo { grid-column: 1 / -1; aspect-ratio: 21 / 8; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--s-2); }
  .fam--cams .fam__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

  /* platforms: one row per platform, the name is the type */
  .plats { padding: var(--s-7) var(--g) var(--s-6); }
  .plat { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-4) var(--s-6); padding: var(--s-6) 0; border-top: 2px solid var(--ink); }
  .plat__name { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); line-height: .92; letter-spacing: -.01em; }
  .plat__by { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-2); }
  .plat__by img { display: block; height: 30px; width: auto; margin-bottom: .5rem; filter: brightness(0); opacity: .7; }
  .plat__note { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-2); }
  .plat__what { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 42ch; }
  .plat .chips { margin-top: var(--s-4); color: var(--ink); }
  .plat__go { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); }
  /* feature by feature: heading holds still on the left while the features scroll past on the right */
  .feats { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-6); padding: var(--s-7) var(--g); background: var(--paper-2); }
  .feats__head { align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--s-5)); }
  .feats__head .lead { max-width: 30ch; }
  .feats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .feat { display: flex; flex-direction: column; gap: .55rem; padding: var(--s-4); background: var(--white); border-radius: var(--radius); }
  .feat h3 { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; letter-spacing: -.005em; }
  .feat p { color: var(--ink-2); line-height: 1.5; max-width: 40ch; }
  .feat__on { margin-top: auto; padding-top: .4rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  .feat--rv .feat__on { color: var(--blue-ink); }
  /* the card the screen is playing: blue ink (no charcoal, James 7 Nov), a blue fill line timing the autoplay (desktop only, set by JS) */
  .feat { position: relative; overflow: hidden; transition: background-color var(--d-mid) ease, color var(--d-mid) ease; }
  .feat p, .feat .feat__on { transition: color var(--d-mid) ease; }
  .feats.is-live .feat { cursor: default; }
  .feats.is-live .feat.is-on { background: var(--blue-ink); color: var(--white); }
  .feats.is-live .feat.is-on p { color: rgba(255,255,255,.78); }
  .feats.is-live .feat.is-on .feat__on { color: rgba(255,255,255,.6); }
  .feat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vis); transform: scaleX(0); transform-origin: left center; }
  .feats.is-auto .feat.is-on::after { animation: featfill var(--dwell, 4.2s) linear forwards; }
  @keyframes featfill { to { transform: scaleX(1); } }

  /* example app window: one software window, sized off its own width so it scales as one picture.
     The feature card in focus picks the screen; JS sets data-view and .is-on on the parts that belong to it. */
  .fx { margin: var(--s-5) 0 0; container: fx / inline-size; }
  html:not(.js) .fx { display: none; }
  .fx__win {
    position: relative; display: grid; grid-template-columns: 2.75em minmax(0, 1fr); grid-template-rows: 2.7em minmax(0, 1fr);
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #F3F6F8; color: var(--ink);
    font-size: clamp(9.5px, 2.15cqw, 12.5px); line-height: 1.3;
    box-shadow: 0 0 0 1px rgba(32, 44, 52, .16), 0 28px 56px -32px rgba(16, 24, 30, .5);
  }
  .fx svg { display: block; }
  .fx__cap { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--steel); }
  .fx__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: .85em; min-width: 0; padding: 0 .85em 0 .9em; background: var(--white); border-bottom: 1px solid #E1E7EC; white-space: nowrap; }
  .fx__app { font-family: var(--f-display); font-weight: 760; font-size: 1.04em; letter-spacing: -.01em; }
  .fx__rv, .fx[data-view="ai"] .fx__tg, .fx[data-view="footage"] .fx__tg { display: none; }
  .fx[data-view="ai"] .fx__rv, .fx[data-view="footage"] .fx__rv { display: inline; }
  .fx__crumb { color: var(--steel); overflow: hidden; text-overflow: ellipsis; }
  .fx__crumb::before { content: "/"; margin-right: .85em; color: #C3CDD5; }
  .fx__find { display: inline-flex; align-items: center; gap: .45em; width: 10.5em; margin-left: auto; padding: .38em .6em; border-radius: 6px; background: #F1F4F6; box-shadow: inset 0 0 0 1px #E3E8EC; color: #8794A0; }
  .fx__find svg { width: 1.05em; height: 1.05em; flex: none; }
  .fx__date { font-family: var(--f-mono); font-size: .88em; color: var(--steel); }
  .fx__rail { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .6em 0; background: var(--white); border-right: 1px solid #E1E7EC; }
  .fx__rail i { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 6px; color: #8794A0; transition: background-color 200ms ease, color 200ms ease; }
  .fx__rail i.is-on { background: #E5F0FC; color: #087FE5; }
  .fx__rail svg { width: 1.2em; height: 1.2em; }

  .fx__stage { position: relative; overflow: hidden; container: fxs / size; background: #E9EEF2; }
  /* the map covers the stage like object-fit: cover, so map pixels map straight to percentages */
  .fx__world { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw); transform: translate(-50%, -50%); transition: opacity 260ms ease, filter 260ms ease; }
  .fx__world > img { display: block; width: 100%; height: 100%; }
  .fx[data-view="scores"] .fx__world, .fx[data-view="reports"] .fx__world, .fx[data-view="ai"] .fx__world,
  .fx[data-view="footage"] .fx__world, .fx[data-view="systems"] .fx__world { opacity: 0; }
  .fx[data-view="phone"] .fx__world { opacity: .45; filter: saturate(.4); }
  .fx__night { position: absolute; inset: 0; background: #0B2540; mix-blend-mode: multiply; opacity: 0; transition: opacity 420ms ease; }
  .fx__night.is-on { opacity: .42; }
  .fx__geo { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fg, .fgm { opacity: 0; transition: opacity 240ms ease; }
  .fg.is-on, .fgm.is-on { opacity: 1; }
  .fgm { position: absolute; inset: 0; }
  .fx-route__case { fill: none; stroke: var(--white); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
  .fx-route { fill: none; stroke: #087FE5; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
  .fx-fence { fill: rgba(224, 154, 11, .2); stroke: #E09A0B; stroke-width: 5; stroke-dasharray: 14 10; stroke-linejoin: round; }
  .fx-crumbs path { fill: none; stroke: #F2D21B; stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .8; }
  .fx-crumbs circle { fill: #F2D21B; stroke: #0B2540; stroke-width: 3; opacity: calc(.35 + var(--k) * .08); }

  /* map markers: status colour, white heading arrow, the selected one carries its tag */
  .fm { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 1.45em; height: 1.45em; margin: -.725em 0 0 -.725em; border-radius: 50%; background: #1E9A57; box-shadow: 0 0 0 .17em var(--white), 0 .25em .6em rgba(16, 24, 30, .4); }
  .fm::after { content: ""; position: absolute; inset: .3em; background: var(--white); clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); transform: rotate(var(--h, 0deg)); }
  .fm--idle { background: #E09A0B; }
  .fm--idle::after { inset: .42em .44em; clip-path: none; background: linear-gradient(90deg, var(--white) 0 34%, transparent 34% 66%, var(--white) 66%); }
  .fm--stop { background: #8C99A3; }
  .fm--stop::after { inset: .47em; clip-path: none; border-radius: 50%; }
  .fm--alert { background: #D64545; }
  .fm--cl { display: grid; place-items: center; width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; background: #087FE5; color: var(--white); font: 700 .9em/1 var(--f-mono); }
  .fm--cl::after { display: none; }
  .fm b { position: absolute; left: calc(100% + .55em); top: 50%; padding: .28em .5em; border-radius: 4px; background: var(--white); box-shadow: 0 0 0 1px rgba(32, 44, 52, .12), 0 .35em .9em -.3em rgba(16, 24, 30, .4); font: 600 .86em/1.1 var(--f-mono); white-space: nowrap; color: var(--ink); transform: translateY(-50%); }
  .fm--tl b { left: auto; right: calc(100% + .55em); }
  .fm b span { margin-left: .5em; font-weight: 400; color: var(--steel); }
  .fm--sel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
  .motion .is-on > .fm--sel::before { animation: fxping 2.4s cubic-bezier(.16, .7, .3, 1) infinite; }
  .motion .is-on > .fm--fast::before { animation-duration: 1.1s; }
  @keyframes fxping { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }
  .fpin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; background: #087FE5; color: var(--white); font: 700 .82em/1 var(--f-mono); box-shadow: 0 0 0 .18em var(--white), 0 .25em .6em rgba(16, 24, 30, .35); }
  .fpin--b { background: var(--blue-ink); }
  .fev { position: absolute; left: var(--x); top: var(--y); width: .95em; height: .95em; margin: -.475em 0 0 -.475em; background: #E09A0B; box-shadow: 0 0 0 .15em var(--white); transform: rotate(45deg); }
  .fzone { position: absolute; left: var(--x); top: var(--y); padding: .22em .5em; border-radius: 4px; background: rgba(224, 154, 11, .95); color: #1B232A; font: 700 .8em/1.1 var(--f-mono); white-space: nowrap; transform: translate(-50%, 0); }

  /* screens: one panel per feature, a short crossfade and lift (emil: under 300ms, strong ease-out, no stagger soup) */
  .fv { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .fv.is-on { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease-out); }
  .fv > * { transform: translateY(.35em); transition: transform 300ms var(--ease-out); }
  .fv.is-on > * { transform: none; }
  .fp { position: absolute; left: .7em; top: .7em; bottom: .7em; display: flex; flex-direction: column; width: 38%; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(32, 44, 52, .1), 0 .7em 1.8em -.8em rgba(16, 24, 30, .45); }
  .fp--full { right: .7em; width: auto; }
  .fp__h { display: flex; align-items: center; justify-content: space-between; gap: .7em; padding: .75em .85em .6em; font-weight: 700; font-size: 1.02em; white-space: nowrap; }
  .fp__h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: .86em; color: var(--steel); }
  .fp__tabs { display: flex; gap: .35em; padding: 0 .85em .65em; font-size: .84em; white-space: nowrap; }
  .fp__tabs b, .fp__tabs span { padding: .22em .55em; border-radius: 99px; background: #F1F4F6; color: var(--steel); font-weight: 500; }
  .fp__tabs b { background: #E5F0FC; color: var(--blue-ink); font-weight: 700; }
  .fx i[class^="c-"] { display: block; width: .62em; height: .62em; border-radius: 50%; }
  .fx-units, .fx-alerts { list-style: none; margin: 0; padding: 0; }
  .fx-units li, .fx-alerts li { display: grid; grid-template-columns: .62em minmax(0, 1fr) auto; align-items: center; column-gap: .55em; row-gap: .12em; padding: .5em .85em; border-top: 1px solid #EEF2F5; }
  .fx-units li > b, .fx-alerts li > b { font: 600 .92em/1.2 var(--f-mono); }
  .fx-units em, .fx-alerts time { font: 400 .84em/1.2 var(--f-mono); font-style: normal; color: var(--ink-2); white-space: nowrap; }
  .fx-units li > span, .fx-alerts li > span { grid-column: 2 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86em; color: var(--steel); }
  .fx-units .is-sel, .fx-alerts .is-sel { background: #F0F6FD; box-shadow: inset 3px 0 0 #087FE5; }
  .fx-alerts .is-sel { background: #FDF3F3; box-shadow: inset 3px 0 0 #D64545; }
  .fx-via { display: flex; align-items: center; flex-wrap: wrap; gap: .35em; margin-top: auto; padding: .6em .85em .75em; border-top: 1px solid #EEF2F5; font-size: .84em; color: var(--steel); }
  .fx-via b { padding: .18em .5em; border-radius: 99px; background: #F1F4F6; font-weight: 600; color: var(--ink); }
  .fx-trip { list-style: none; position: relative; display: grid; gap: .55em; margin: 0; padding: .1em .85em .75em; }
  .fx-trip::before { content: ""; position: absolute; left: calc(.85em + .7em - 1px); top: .9em; bottom: 1.6em; border-left: 2px dotted #B9C5CE; }
  .fx-trip li { position: relative; display: grid; grid-template-columns: 1.4em auto minmax(0, 1fr); align-items: center; gap: .6em; }
  .fx-trip i { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #087FE5; color: var(--white); font: 700 .8em/1 var(--f-mono); font-style: normal; }
  .fx-trip li + li i { background: var(--blue-ink); }
  .fx-trip b { font: 600 .92em var(--f-mono); }
  .fx-trip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
  .fx-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: #EEF2F5; border-block: 1px solid #EEF2F5; }
  .fx-kv div { padding: .5em .85em; background: var(--white); }
  .fx-kv--1 { grid-template-columns: 1fr; }
  .fx-kv dt { font-size: .8em; color: var(--steel); }
  .fx-kv dd { margin: .1em 0 0; font: 600 .92em/1.25 var(--f-mono); }
  .fx-amb { color: #B87900; }
  .fx-spark { width: auto; height: 2.6em; margin: .7em .85em 0; }
  .fx-spark path { fill: rgba(8, 127, 229, .1); stroke: #087FE5; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .fx-evts { list-style: none; margin: 0; padding: 0; border-top: 1px solid #EEF2F5; }
  .fx-evts li { display: grid; grid-template-columns: .7em auto minmax(0, 1fr); align-items: center; gap: .6em; padding: .55em .85em; font-size: .88em; }
  .fx-evts i { width: .7em; height: .7em; background: #E09A0B; transform: rotate(45deg); }
  .fx-evts time { font-family: var(--f-mono); color: var(--ink-2); }
  .fx-evts span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
  .fx-axis { display: flex; justify-content: space-between; padding: .3em .85em .7em; font: .78em var(--f-mono); color: var(--steel); }
  .fx-tag { display: inline-block; padding: .2em .55em; border-radius: 99px; background: #F1F4F6; color: var(--ink-2); font-weight: 600; font-size: .86em; white-space: nowrap; }
  .fp__h > .fx-tag { font-size: .8em; }
  .fx-tag--red { background: #FBE7E7; color: #B02E2E; }
  .fx-tag--amb { background: #FCEFD3; color: #8A5B00; }
  .fx-btn { display: inline-flex; align-items: center; gap: .4em; padding: .42em .7em; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px #D3DCE3; font-weight: 600; font-size: .88em; color: var(--ink); white-space: nowrap; }
  .fx-btn svg { width: 1.1em; height: 1.1em; }
  .fx-btn--red { background: #D64545; box-shadow: none; color: var(--white); }
  .fx-btn--blue { background: var(--blue-deep); box-shadow: none; color: var(--white); }
  .fx-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .7em; padding: .75em .85em; }
  .fx-act small { font-size: .8em; color: var(--steel); }
  .fx-banner { position: absolute; left: calc(38% + 1.4em); right: .7em; top: .7em; display: flex; align-items: center; gap: .55em; min-width: 0; padding: .55em .75em; border-radius: 8px; background: #D64545; color: var(--white); font-weight: 700; white-space: nowrap; box-shadow: 0 .6em 1.4em -.6em rgba(16, 24, 30, .5); }
  .fx-banner i { width: .6em; height: .6em; flex: none; border-radius: 50%; background: var(--white); }
  .motion .fx-banner i { animation: livePulse 1.2s ease-in-out infinite; }
  .fx-banner span { overflow: hidden; text-overflow: ellipsis; font-weight: 400; opacity: .85; }
  .fx-toast { position: absolute; right: .7em; top: .7em; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: start; gap: .65em; width: min(54%, 25em); padding: .65em .75em; border-radius: 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 1px rgba(32, 44, 52, .08), 0 1em 2.2em -.8em rgba(16, 24, 30, .55); }
  .fx-toast img { width: 2em; height: 2em; border-radius: 22%; }
  .fx-toast p { min-width: 0; }
  .fx-toast b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .94em; }
  .fx-toast span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: .1em; font-size: .84em; color: var(--steel); }
  .fx-toast time { font-size: .78em; color: var(--steel); }
  .fx.is-play .fv.is-on .fx-toast { animation: fxdrop 420ms var(--ease-out) 380ms both; }
  @keyframes fxdrop { from { opacity: 0; transform: translateY(-.9em) scale(.97); } }
  .fx-tbl { width: 100%; border-collapse: collapse; font-size: .92em; }
  .fx-tbl th { padding: .5em .85em; border-block: 1px solid #E6EBEF; background: #F7F9FA; text-align: left; font-weight: 600; font-size: .86em; color: var(--steel); white-space: nowrap; }
  .fx-tbl td { padding: .55em .85em; border-bottom: 1px solid #EEF2F5; white-space: nowrap; }
  .fx-tbl td:nth-child(2) { font-family: var(--f-mono); font-size: .92em; color: var(--ink-2); }
  .fx-tbl .n { text-align: right; font-family: var(--f-mono); }
  .fx-score { --c: #1E9A57; display: grid; grid-template-columns: 1.9em minmax(3em, 7em); align-items: center; gap: .5em; }
  .fx-score b { font: 700 1em var(--f-mono); }
  .fx-score i { position: relative; height: .45em; overflow: hidden; border-radius: 99px; background: #E6EBEF; }
  .fx-score i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); transform: scaleX(var(--s)); transform-origin: left center; }
  .fx-score--amb { --c: #E09A0B; } .fx-score--red { --c: #D64545; }
  .fx-foot { display: flex; gap: 2em; margin-top: auto; padding: .7em .85em .8em; border-top: 1px solid #E6EBEF; background: #F7F9FA; font-size: .84em; color: var(--steel); }
  .fx-foot b { margin-left: .6em; font: 700 1.1em var(--f-mono); color: var(--ink); }
  .fx-foot b.fx-red, .fx-red { color: #B02E2E; }
  .fx.is-play .fv.is-on .fx-score i::after { animation: fxgrowx 620ms var(--ease-out) both; animation-delay: calc(var(--k) * 45ms + 140ms); }
  @keyframes fxgrowx { from { transform: scaleX(0); } }
  .fx-rep { flex-direction: row; }
  .fx-repnav { list-style: none; flex: 0 0 26%; margin: 0; padding: .75em .5em; border-right: 1px solid #EEF2F5; background: #F7F9FA; }
  .fx-repnav li { padding: .45em .55em; border-radius: 5px; font-size: .9em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-repnav .is-sel { background: #E5F0FC; color: var(--blue-ink); font-weight: 700; }
  .fx-repbody { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .fx-btns { display: flex; gap: .4em; }
  .fx-btns .fx-btn { font-size: .92em; }
  .fx-kpis { display: flex; gap: 1.6em; padding: 0 .85em .7em; font-size: .84em; color: var(--steel); white-space: nowrap; }
  .fx-kpis b { display: block; margin-top: .1em; font: 700 1.35em/1.1 var(--f-mono); color: var(--ink); }
  .fx-kpis b.fx-amb { color: #B87900; }
  .fx-chart { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); flex: 1; min-height: 0; margin: .9em .85em 0; padding-bottom: 1.5em; }
  .fx-y { display: flex; flex-direction: column; justify-content: space-between; margin: -.45em 0; font: .74em/1 var(--f-mono); color: #8794A0; }
  .fx-cols { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4em; padding: 0 .6em; border-bottom: 1px solid #C9D3DA; background: linear-gradient(#EEF2F5 0 0) 0 0 / 100% 1px no-repeat, linear-gradient(#EEF2F5 0 0) 0 25% / 100% 1px no-repeat, linear-gradient(#EEF2F5 0 0) 0 50% / 100% 1px no-repeat, linear-gradient(#EEF2F5 0 0) 0 75% / 100% 1px no-repeat; }
  .fx-cols p { position: relative; display: flex; flex-direction: column-reverse; justify-self: center; width: min(100%, 2.6em); height: 100%; }
  .fx-cols i { display: block; flex: none; transform-origin: bottom center; }
  .fx-cols i:first-child { height: calc(var(--d) * 100%); background: #087FE5; }
  .fx-cols i:nth-child(2) { height: calc(var(--i) * 100%); background: #E09A0B; border-radius: 2px 2px 0 0; }
  .fx-cols em { position: absolute; left: 50%; bottom: calc((var(--d) + var(--i)) * 100% + .35em); font: 600 .76em/1 var(--f-mono); font-style: normal; color: var(--ink-2); transform: translateX(-50%); white-space: nowrap; }
  .fx-cols span { position: absolute; left: 50%; top: calc(100% + .5em); font: .78em var(--f-mono); color: var(--steel); transform: translateX(-50%); }
  .fx.is-play .fv.is-on .fx-cols i { animation: fxgrowy 640ms var(--ease-out) both; animation-delay: calc(var(--k) * 45ms + 140ms); }
  @keyframes fxgrowy { from { transform: scaleY(0); } }
  .fx-key { display: flex; gap: 1em; padding: .55em .85em .75em; font-size: .82em; color: var(--steel); white-space: nowrap; overflow: hidden; }
  .fx-key span:last-child { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
  .fx-key span { display: inline-flex; align-items: center; gap: .4em; }
  .fx-ev { padding-bottom: .2em; }
  .fx-vid { position: relative; aspect-ratio: 800 / 447; overflow: hidden; margin: 0 .85em; border-radius: 6px; background: #59646C; }
  .fx-vid img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fx-vid::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 30%; background: linear-gradient(rgba(10, 16, 20, .4), transparent); }
  .fx-rec, .fx-ts { position: absolute; top: .55em; z-index: 2; font: 600 .78em/1 var(--f-mono); color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
  .fx-rec { left: .6em; display: inline-flex; align-items: center; gap: .4em; }
  .fx-rec::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #E5484D; }
  .fx-ts { right: .6em; }
  /* detection box on the truck ahead, in the photo's own percentages */
  .fx-box { position: absolute; left: 33.1%; top: 31.2%; width: 11.8%; height: 23.8%; z-index: 2; border: 2px solid #F2D21B; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
  .fx-box em { position: absolute; left: -2px; bottom: calc(100% + 2px); padding: .15em .4em; border-radius: 2px; background: #F2D21B; color: #1B232A; font: 700 .76em/1.1 var(--f-mono); font-style: normal; white-space: nowrap; }
  .fx.is-play .fv.is-on .fx-box { animation: fxlock 340ms var(--ease-out) 260ms both; }
  @keyframes fxlock { from { opacity: 0; transform: scale(1.35); } }
  .fx-chips { display: flex; flex-wrap: wrap; gap: .4em; padding: .7em .85em; }
  .fx-rev { flex-direction: row; }
  .fx-q { flex: 0 0 34%; min-width: 0; border-right: 1px solid #EEF2F5; }
  .fx-q ul { list-style: none; margin: 0; padding: 0; }
  .fx-q li { padding: .5em .85em; border-top: 1px solid #EEF2F5; }
  .fx-q li b { display: block; font-size: .92em; }
  .fx-q li span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: .1em; font: .8em var(--f-mono); color: var(--steel); }
  .fx-q .is-sel { background: #FDF6E8; box-shadow: inset 3px 0 0 #E09A0B; }
  .fx-pl { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-top: .85em; }
  .fx-scrub { display: flex; align-items: center; gap: .6em; padding: .6em .85em 0; }
  .fx-play { display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; background: var(--blue-deep); color: var(--white); }
  .fx-play svg { width: .95em; height: .95em; }
  .fx-track { position: relative; flex: 1; height: .38em; border-radius: 99px; background: #E6EBEF; }
  .fx-fill { position: absolute; inset: 0; border-radius: inherit; background: #087FE5; transform: scaleX(.6); transform-origin: left center; }
  .fx-mark { position: absolute; left: 62%; top: 50%; width: .8em; height: .8em; margin: -.4em 0 0 -.4em; background: #E09A0B; box-shadow: 0 0 0 .14em var(--white); transform: rotate(45deg); }
  .fx.is-play .fv.is-on .fx-fill { animation: fxplay 6s linear infinite; }
  @keyframes fxplay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .fx-scrub time { font: .8em var(--f-mono); color: var(--steel); }
  .fx-pl .fx-act { padding-top: .6em; }
  .fx-memo { margin: 0 .85em; padding: .6em .7em; border-radius: 6px; background: #F5F8FA; box-shadow: inset 3px 0 0 #087FE5; font-size: .86em; line-height: 1.4; color: var(--ink-2); }
  .fx-memo b { display: block; margin-bottom: .15em; color: var(--ink); }
  .fx-phone { position: absolute; left: 50%; top: 4%; bottom: 4%; aspect-ratio: 9 / 18.5; padding: .35em; border-radius: 1.6em; background: #10171C; box-shadow: 0 1.2em 2.4em -1em rgba(16, 24, 30, .6); transform: translateX(-50%); font-size: .82em; }
  .fv.is-on > .fx-phone { transform: translateX(-50%); }
  .fx-phone__scr { position: relative; height: 100%; overflow: hidden; border-radius: 1.3em; background: #E9EEF2; }
  .fx-phone__sb { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: .55em 1.1em 0; font: 700 .86em var(--f-body); }
  .fx-phone__sb span { display: flex; gap: .25em; }
  .fx-phone__sb svg { width: 1.05em; height: 1.05em; }
  .fx-phone__map { position: absolute; inset: 0; overflow: hidden; }
  .fx-phone__map img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: 165%; transform: translate(calc(var(--ox) * -1), calc(var(--oy) * -1)); }
  .fx-toast--ph { left: .45em; right: .45em; top: 2.1em; width: auto; grid-template-columns: 1.8em minmax(0, 1fr); padding: .55em .6em; border-radius: .9em; }
  .fx-toast--ph img { width: 1.8em; height: 1.8em; }
  .fx-phone__sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: .8em .9em 1.1em; border-radius: 1em 1em 0 0; background: var(--white); box-shadow: 0 -.4em 1.2em -.6em rgba(16, 24, 30, .4); font-size: .92em; }
  .fx-phone__sheet::before { content: ""; display: block; width: 2.4em; height: .25em; margin: 0 auto .6em; border-radius: 99px; background: #D3DCE3; }
  .fx-phone__sheet p:first-of-type { display: flex; justify-content: space-between; font-family: var(--f-mono); }
  .fx-phone__sheet p + p { margin-top: .2em; color: var(--steel); font-size: .9em; }
  .fx-api { padding-bottom: .2em; }
  .fx-code { flex: none; overflow: hidden; margin: 0 .85em; padding: .8em .9em; border-radius: 6px; background: #F5F8FA; box-shadow: inset 0 0 0 1px #E6EBEF; font: .88em/1.55 var(--f-mono); color: var(--ink); white-space: pre; }
  .fx-code s { text-decoration: none; color: var(--blue-ink); }
  .fx-code q { quotes: none; color: #1E7A47; }
  .fx-code u { text-decoration: none; color: #B4532A; }
  .fx-caret { display: inline-block; width: .55em; height: 1.1em; margin-left: .15em; vertical-align: -.2em; background: #087FE5; }
  .motion .fx-caret { animation: fxcaret 1s steps(1) infinite; }
  @keyframes fxcaret { 50% { opacity: 0; } }
  .fx-uses { padding: .8em .85em .35em; font-weight: 700; font-size: .92em; }
  .fx-log { list-style: none; margin: 0; padding: 0 0 .4em; }
  .fx-log li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: .6em; padding: .45em .85em; border-top: 1px solid #EEF2F5; font-size: .88em; }
  .fx-log time, .fx-log em { font-family: var(--f-mono); font-style: normal; color: var(--steel); white-space: nowrap; }
  .fx-log span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fx.is-play .fv.is-on .fx-route { animation: fxdraw 1.5s var(--ease-in-out) 150ms both; }
  .fx.is-play .fg.is-on .fx-route { animation: fxdraw 1.5s var(--ease-in-out) 150ms both; }
  @keyframes fxdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  /* small windows: fewer words per row, the search box goes */
  @container fx (max-width: 470px) {
    .fx__find { display: none; }
    .fx__date { margin-left: auto; }
    .fp:not(.fp--full) { width: 44%; }
    .fm b span { display: none; }
    .fx-log li:nth-child(n+3) { display: none; }
    .fx-banner { left: calc(44% + 1.4em); }
    .fx-tbl th:nth-child(5), .fx-tbl td:nth-child(5) { display: none; }
    .fx-chips .fx-tag:nth-child(3), .fx-repnav li:nth-child(n+4) { display: none; }
    .fx-q { flex-basis: 38%; }
    .fx-pl .fx-act .fx-btn:first-child { display: none; }
  }
  /* where it pays for itself: the levers in one row, the word is the type */
  .pays { padding: var(--s-7) var(--g); }
  .pays__head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-4) var(--s-6); align-items: end; }
  .pays__head .lead { margin-top: 0; max-width: 40ch; }
  .pays__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: var(--s-5) var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
  .pays__list b { display: block; font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.25rem, .95rem + .75vw, 1.625rem); line-height: .95; }
  .pays__list span { display: block; margin-top: .6rem; color: var(--ink-2); line-height: 1.45; max-width: 30ch; }
  /* picker: JS turns each lever into a tick, the button carries the ticks into the quote form */
  .pay { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); column-gap: .75rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pay b, .pay span { grid-column: 2; }
  .pay__box { grid-row: 1; position: relative; width: 1.375rem; height: 1.375rem; margin-top: -.1rem; border: 2px solid var(--ink); border-radius: 3px; transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease, transform var(--d-fast) var(--ease-out); }
  .pay__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 12px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; opacity: 0; transform: rotate(45deg) scale(.4); transition: transform 220ms var(--ease-out), opacity 120ms ease; }
  .pay[aria-pressed="true"] .pay__box { background: var(--blue-deep); border-color: var(--blue-deep); }
  .pay[aria-pressed="true"] .pay__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
  .pay[aria-pressed="true"] b { color: var(--blue-ink); }
  .pay b { transition: color var(--d-fast) ease; }
  .pay:active .pay__box { transform: scale(.9); }
  .pay:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
  @media (hover: hover) and (pointer: fine) { .pay:hover .pay__box { border-color: var(--blue-deep); } }
  .pays__go { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
  .pays__hint { color: var(--ink-2); line-height: 1.45; max-width: 52ch; }
  .pays__hint b { color: var(--ink); }
  html:not(.js) .pays__hint { display: none; }
  .qf__pick { margin-top: var(--s-2); color: var(--ink-2); }
  .qf__pick[hidden] { display: none; }
  /* integrations (Stuart 7 Nov): the record itself is the picture */
  .api { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-7); padding: var(--s-8) var(--g); background: var(--ink); color: var(--white); }
  .api__head { grid-row: span 2; }
  .api .lead { color: rgba(255, 255, 255, .78); }
  .api .btn--light { margin-top: var(--s-5); background: var(--blue-deep); color: var(--white); }
  /* James 9 Nov (Stuart): wording to request API access */
  .api__ask { margin-top: var(--s-3); max-width: 40ch; font-size: var(--t-small); line-height: 1.5; color: rgba(255, 255, 255, .78); }
  .api__rec { margin: 0; background: #17212A; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px -20px rgba(0, 0, 0, .55); overflow: hidden; }
  .api__rec figcaption { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; font-family: var(--f-mono); font-size: var(--t-micro); color: rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .api__rec figcaption b { color: var(--white); font-weight: 600; }
  .api__rec figcaption i { margin-left: auto; font-style: normal; color: rgba(255, 255, 255, .55); }
  .api__rec pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; font-family: var(--f-mono); font-size: .875rem; line-height: 1.75; color: #CFE4F7; overflow-x: auto; }
  .api__rec pre span { color: rgba(255, 255, 255, .58); }
  .api__ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
  .api__ways li { display: grid; gap: .3rem; align-content: start; padding-top: var(--s-3); border-top: 2px solid var(--blue-deep); }
  .api__ways b { font-weight: 650; }
  .api__ways span { color: rgba(255, 255, 255, .74); font-size: var(--t-small); line-height: 1.5; }
  @media (max-width: 899px) {
    .api { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) var(--g); }
    .api__head { grid-row: auto; }
    .api__ways { grid-template-columns: minmax(0, 1fr); }
    .api__rec pre { font-size: .8125rem; }
  }
  .app { display: grid; grid-template-columns: 6fr 6fr; align-items: stretch; background: var(--white); color: var(--ink); }
  /* Beyond the map (James 9 Nov, Stuart): photo and wording cards, side by side or on a diagonal, mixed row to row.
     a: photo left, card right. b: card high left, photo low right. c: photo high left, card low right. d: card left, photo right. */
  .zz { background: var(--paper-2); }
  .zz__head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-4) var(--s-6); align-items: end; }
  .zz__head .lead { margin-top: 0; max-width: 42ch; }
  .zz__rows { display: grid; gap: var(--s-8); margin-top: var(--s-7); }
  .zz__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; }
  .zz__fig { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius); background: var(--paper); }
  .zz__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .zz__card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  .zz__card--blue { background: var(--blue-deep); color: var(--white); box-shadow: none; }
  .zz__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.375rem); line-height: .95; text-wrap: balance; }
  .zz__card p { line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
  .zz__card--blue p { color: rgba(255, 255, 255, .92); }
  .zz__card .zz__tags { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
  .zz__card--blue .zz__tags { border-top-color: rgba(255, 255, 255, .3); color: var(--white); }
  @media (min-width: 900px) {
    .zz__row--a .zz__fig { grid-column: 1 / 8; grid-row: 1; }
    .zz__row--a .zz__card { grid-column: 8 / 13; grid-row: 1; }
    .zz__row--b { align-items: start; }
    .zz__row--b .zz__card { grid-column: 1 / 6; grid-row: 1; }
    .zz__row--b .zz__fig { grid-column: 6 / 13; grid-row: 1; margin-top: clamp(5rem, 9vw, 9rem); }
    .zz__row--c { align-items: start; }
    .zz__row--c .zz__fig { grid-column: 1 / 8; grid-row: 1; }
    .zz__row--c .zz__card { grid-column: 8 / 13; grid-row: 1; margin-top: clamp(7rem, 14vw, 14rem); }
    .zz__row--d .zz__card { grid-column: 1 / 6; grid-row: 1; }
    .zz__row--d .zz__fig { grid-column: 6 / 13; grid-row: 1; }
  }
  .app .btn--light { background: var(--blue-deep); color: var(--white); }
  .app .btn--line { border-color: var(--ink); color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .app .btn--light:hover { background: var(--blue-ink); } .app .btn--line:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } }
  .app__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-4); padding: var(--s-7) var(--g); }
  .app__icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgba(32,44,52,.45); }
  .app__body p { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; color: var(--ink-2); }
  .app__stores { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .app__img { min-height: 320px; position: relative; overflow: hidden; }
  .app__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* about */
  .story { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-5) var(--s-6); align-items: start; }
  .story__text { display: grid; gap: var(--s-4); max-width: 46ch; }
  .story__text p { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
  .story__text p:first-child { color: var(--ink); }
  /* the story statement's tail clause sits in steel until it scrolls into focus (Two-Tone Descriptive Statement, Web Design Lab); desktop only */
  .tt__dim { transition: color 600ms ease; }
  html.js .tt.is-dim .tt__dim { color: var(--steel); }
  /* credentials: the facts the team stands on, set in the display face */
  .creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding-top: var(--s-6); border-top: 2px solid var(--ink); margin-top: var(--s-7); }
  .creds li { display: grid; align-content: start; gap: var(--s-2); }
  .creds b { font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.75rem, 1.4rem + 4.2vw, 6.25rem); line-height: .86; letter-spacing: -.01em; color: var(--blue-deep); }
  .creds strong { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; color: var(--ink); margin-top: var(--s-2); }
  .creds span { color: var(--ink-2); max-width: 34ch; }
  /* one customer line, set large beside the story column */
  .voice { display: grid; grid-template-columns: 5fr 7fr; gap: 0 var(--s-6); margin: var(--s-7) 0 0; }
  .voice > * { grid-column: 2; }
  .voice blockquote { margin: 0; }
  .voice blockquote p { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 1rem + 1.35vw, 2.25rem); line-height: 1.22; letter-spacing: -.005em; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
  .voice figcaption { display: grid; gap: .15rem; margin-top: var(--s-4); padding-left: var(--s-3); border-left: 3px solid var(--blue-deep); }
  .voice figcaption b { font-weight: 700; color: var(--ink); }
  .voice figcaption span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-2); }
  .duo { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr auto; gap: 0 var(--s-3); margin-top: var(--s-6); }
  .duo figure { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .duo span { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
  .duo figure:last-child span { aspect-ratio: auto; height: 100%; }
  .duo img { width: 100%; height: 100%; object-fit: cover; }
  .duo figcaption { padding-top: .6rem; font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-2); }
  .partners { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-5) var(--s-6); align-items: center; background: var(--white); color: var(--ink); }
  .logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .logos li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-4) var(--s-4) 0; }
  .logos li + li { padding-left: var(--s-4); border-left: 1px solid var(--line); }
  /* James 9 Nov (Stuart): the three makers' logos a little bigger */
  .logos img { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
  .logos li:nth-child(2) img { height: 37px; margin-block: 5.5px; }
  .logos span { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
  /* the parent group, with its own logo */
  .mts { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-5) var(--s-6); align-items: center; padding: var(--s-7) var(--g); background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
  .mts__logo { width: min(100%, 360px); height: auto; }
  .mts__copy { display: grid; gap: var(--s-3); justify-items: start; max-width: 58ch; }
  .mts__title { font-family: var(--f-display); font-weight: 760; font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.75rem); line-height: 1.04; letter-spacing: -.01em; }
  .mts__copy p { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

  /* resources: FAQ with the groups as a sticky side index */
  .rhero { padding: calc(var(--hdr-h) + var(--s-7)) var(--g) var(--s-6); background: var(--paper); color: var(--ink); }
  .rhero .crumb { color: var(--ink-2); }
  .rhero .phero__lead { color: var(--ink-2); }
  .rhero .phero__lead { margin-top: var(--s-4); }
  .rhero .crumb { margin-bottom: var(--s-4); }
  .faq { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s-6); }
  .faq__groups { display: grid; gap: var(--s-6); min-width: 0; }
  .faq__h { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: .4rem; scroll-margin-top: calc(var(--hdr-h) + var(--s-4)); }
  .faq .pain__list { border-top-width: 2px; }
  .faq .q__btn { font-size: clamp(1.1875rem, .95rem + .9vw, 1.75rem); }
  .faq .q__in p { max-width: 58ch; font-size: var(--t-body); line-height: 1.6; }
  .faq .q__in p + p, .faq .q__in p + .arrow { margin-top: .6rem; }
  .faq .q__in > :last-child { margin-bottom: 1.4rem; }
  /* Resources: knowledge base, one row per platform with its help centre and log in (James 9 Nov, Stuart) */
  .kb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5) var(--s-6); align-items: start; padding: var(--s-7) var(--g); background: var(--white); }
  .kb__head { position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
  .kb__list { display: grid; gap: var(--s-2); }
  .kb__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-4); border-radius: var(--radius); background: var(--paper-2); }
  .kb__ico { box-sizing: border-box; width: 72px; height: 72px; padding: 15px; border-radius: var(--radius); background: var(--white); object-fit: contain; }
  .kb__name { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); line-height: 1; }
  .kb__body p { margin-top: .5rem; line-height: 1.45; color: var(--ink-2); max-width: 50ch; }
  .kb__go { display: grid; justify-items: start; gap: .7rem; }
  .kb__go .btn { white-space: nowrap; }
  .help { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-6); align-items: end; padding: var(--s-6) var(--g); background: var(--paper-2); }
  .help h2 { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); line-height: .95; }
  .help p { margin-top: var(--s-3); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
  .help__go { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .btn--ink { background: var(--ink); color: var(--white); }
  .btn--edge { border-color: var(--ink); color: var(--ink); }
  @media (hover: hover) and (pointer: fine) {
    .btn--ink:hover { background: var(--blue-ink); }
    .btn--edge:hover { background: var(--ink); color: var(--white); }
  }

  /* contact: the talk panel and the quote builder side by side */
  .talk { display: grid; grid-template-columns: 5fr 7fr; min-height: 100svh; padding-top: var(--hdr-h); }
  /* James 7 Nov: no charcoal left panel, the talk side is light like the form beside it */
  .talk__side { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7) var(--g) var(--s-6); background: var(--paper-2); color: var(--ink); }
  .talk__side .crumb { color: var(--ink-2); }
  .talk__side .phero__lead { color: var(--ink-2); }
  .talk__side .phero__title { font-stretch: 112%; }
  .talk__lines { display: grid; gap: .2rem; margin-top: var(--s-3); }
  .talk__tel { font-family: var(--f-mono); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); letter-spacing: .01em; color: var(--ink); text-decoration: none; }
  .talk__lines a:not(.talk__tel) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 4px; }
  .talk__note { margin-top: auto; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--vis); background: var(--white); font-size: var(--t-small); }
  .talk__note[hidden] { display: none; }
  .talk__group { font-size: var(--t-micro); color: var(--ink-2); }
  .talk__group a { color: inherit; text-underline-offset: 3px; }
  .qf { padding: var(--s-7) var(--g) var(--s-6); scroll-margin-top: var(--hdr-h); }
  /* Contact (James 9 Nov, Stuart): our details grouped by who you need, then a contact us form. The quote form has its own page. */
  .desk { display: grid; gap: var(--s-5); margin-top: var(--s-2); }
  .desk__g { display: grid; justify-items: start; gap: .1rem; }
  .desk__h { margin-bottom: .4rem; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .desk__g > a:not(.talk__tel):not(.arrow) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 4px; }
  .desk__g > .arrow { margin-top: .5rem; }
  .desk__help { display: grid; gap: .4rem; width: 100%; max-width: 440px; margin-top: .2rem; }
  .desk__help a { display: flex; align-items: center; gap: .85rem; min-height: 58px; padding: .55rem .95rem; border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--d-fast) ease, transform 140ms var(--ease-out); }
  .desk__help a:active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) { .desk__help a:hover { box-shadow: 0 0 0 1px rgba(32, 44, 52, .45); } }
  .desk__help img { flex: none; width: 26px; height: 26px; object-fit: contain; }
  .desk__help span { display: grid; gap: .1rem; }
  .desk__help b { font-weight: 650; line-height: 1.2; }
  .desk__help small { font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
  .desk__addr { line-height: 1.45; max-width: 30ch; }
  .ctf { padding: var(--s-7) var(--g) var(--s-6); scroll-margin-top: var(--hdr-h); }
  .ctf__lead { margin: var(--s-3) 0 var(--s-5); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
  .ctf .grid2 { margin-bottom: var(--s-3); }
  .ctf .fld { align-content: start; }
  .qf__title { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); line-height: .95; }
  /* quote form (James 7 Nov: "looks and feels cheap"). Geobox and Teletrac Navman ask about the gear first, with
     pictures, and show you your answers back; rebuilt here with the site's own photos, a fleet dial and a live docket */
  .qf__meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: var(--s-4) 0 var(--s-6); max-width: 42rem; }
  .qf__meter span { position: relative; padding-top: .75rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #87939C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-mid) ease; }
  .qf__meter span::before, .qf__meter span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--paper-2); }
  .qf__meter span::after { background: var(--blue-deep); transform: scaleX(0); transform-origin: 0 50%; transition: transform 460ms var(--ease-out); }
  .qf__meter span.is-on { color: var(--ink); }
  .qf__meter span.is-on::after { transform: scaleX(1); }
  .qf__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .qf__step { display: grid; gap: var(--s-5); }
  .js .qf__step:not(.is-on) { display: none; }
  .js .qf__step.is-on { animation: qfIn 320ms var(--ease-out) both; }
  @keyframes qfIn { from { opacity: 0; transform: translateY(10px); } }
  .no-js-gap { margin-top: var(--s-6); }
  .qf__q { font-family: var(--f-display); font-weight: 780; font-stretch: 100%; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.12; padding: 0; margin-bottom: var(--s-4); }
  .qf__hint { margin: calc(var(--s-3) * -1) 0 var(--s-3); font-size: var(--t-small); color: var(--ink-2); }
  .opts { display: flex; flex-wrap: wrap; gap: .5rem; }
  .opt { position: relative; display: block; }
  .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .opt span { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 50px; padding: 0 1rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px rgba(32,44,52,.18); cursor: pointer; font-weight: 600; transition: box-shadow var(--d-fast) ease, background-color var(--d-fast) ease, color var(--d-fast) ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
  .opt span:active { transform: scale(.975); }
  .opt span::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(32,44,52,.4); background: var(--white); transition: background-color var(--d-fast) ease, box-shadow var(--d-fast) ease; }
  .opt input[type="radio"] + span::before { border-radius: 50%; }
  .opt input:checked + span { box-shadow: 0 0 0 2px var(--blue-deep); }
  .opt input:checked + span::before { background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
  .opt input[type="radio"]:checked + span::before { background: var(--white); box-shadow: inset 0 0 0 6px var(--blue-deep); }
  .opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .opt span:hover { box-shadow: 0 0 0 1px var(--ink); } .opt input:checked + span:hover { box-shadow: 0 0 0 2px var(--blue-deep); } }
  /* what you track: photo tiles */
  .opts--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .opt--tile span { display: grid; gap: 0; min-height: 0; padding: 0; overflow: hidden; }
  .opt--tile img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 520ms var(--ease-out); }
  .opt--tile em { display: flex; align-items: center; min-height: 3.1rem; padding: .45rem .9rem; font-style: normal; font-weight: 650; line-height: 1.2; }
  .opt--tile span::before { position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: rgba(20,28,34,.32); box-shadow: inset 0 0 0 2px var(--white), 0 1px 4px rgba(0,0,0,.25); }
  .opt--tile input:checked + span::before { background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 2px var(--white), 0 1px 4px rgba(0,0,0,.25); }
  .opt--tile input:checked + span img { transform: scale(1.045); }
  @media (hover: hover) and (pointer: fine) { .opt--tile span:hover img { transform: scale(1.03); } }
  /* how many: a dial beside a gear list */
  .qf__fleet { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: center; }
  .opts--gears { display: grid; gap: .45rem; }
  .opt--gear span { font-family: var(--f-mono); font-weight: 500; font-size: 1rem; letter-spacing: .01em; }
  .tach svg { display: block; width: 100%; height: auto; overflow: visible; }
  .tach__arc { fill: none; stroke: #D3DBE0; stroke-width: 12; transition: stroke 300ms ease; }
  .tach__z line { stroke: #B6C0C7; stroke-width: 3; transition: stroke 300ms ease; }
  .tach__z line.maj { stroke: #87939C; stroke-width: 5; }
  .tach__z.on .tach__arc { stroke: var(--blue-deep); }
  .tach__z.on line { stroke: var(--ink); }
  .tach__l { font-family: var(--f-mono); font-size: 30px; fill: var(--ink-2); }
  .tach__n { transform-origin: 300px 300px; transform: rotate(-120deg); transition: transform .72s cubic-bezier(.3, 1.5, .5, 1); }
  .tach.sweep .tach__n { transition: transform .58s cubic-bezier(.45, .05, .3, 1); }
  .tach__n path { fill: var(--ink); }
  .tach__hub { fill: var(--ink); }
  .tach__hub2 { fill: var(--blue); }
  .tach__v { font-family: var(--f-mono); font-size: 36px; font-weight: 600; fill: var(--ink); }
  .tach__v.is-empty { font-weight: 400; fill: #87939C; }
  @media (prefers-reduced-motion: reduce) { .tach__n, .tach.sweep .tach__n { transition: none; } }
  /* what you need: the actual kit */
  .opts--kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .opt--kit span { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .9rem; min-height: 92px; padding: .6rem 3rem .6rem .6rem; }
  .opt--kit span::before { position: absolute; right: 1rem; top: 50%; margin-top: -10px; }
  .opt__kit { display: grid; place-items: center; height: 76px; border-radius: var(--radius); background: radial-gradient(70% 70% at 50% 60%, #FFFFFF, var(--paper-2)); font-style: normal; }
  .opt__kit img { max-width: 86%; max-height: 78%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(20,28,34,.18)); transition: transform 320ms var(--ease-out); }
  .opt__kit--ask { font-family: var(--f-display); font-weight: 820; font-size: 2.25rem; color: var(--blue-deep); }
  .opt--kit em { display: grid; gap: .2rem; font-style: normal; font-weight: 650; line-height: 1.2; }
  .opt--kit small { font-weight: 400; font-size: var(--t-micro); color: var(--ink-2); }
  .opt--kit input:checked + span .opt__kit img { transform: translateY(-3px); }
  /* demo: a switch, not another box */
  .opt--switch { justify-self: start; }
  .opt--switch span { gap: .8rem; min-height: 44px; padding: 0; background: none; box-shadow: none; }
  .opt--switch span::before { width: 46px; height: 28px; border-radius: 14px; background: #C5CED5; box-shadow: none; transition: background-color 200ms ease; }
  .opt--switch span::after { content: ""; position: absolute; left: 3px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(20,28,34,.3); transition: transform 240ms var(--ease-out); }
  .opt--switch input:checked + span { box-shadow: none; }
  .opt--switch input:checked + span::before { background: var(--blue-deep); box-shadow: none; }
  .opt--switch input:checked + span::after { transform: translateX(18px); }
  @media (hover: hover) and (pointer: fine) { .opt--switch span:hover, .opt--switch input:checked + span:hover { box-shadow: none; } }
  .fld { display: grid; gap: .4rem; }
  .fld label { font-weight: 650; font-size: .9688rem; }
  .fld label small { font-weight: 400; color: var(--ink-2); }
  .fld input, .fld textarea { width: 100%; min-height: 54px; padding: .8rem 1rem; border: 1px solid rgba(32,44,52,.24); border-radius: var(--radius); background: var(--white); box-shadow: inset 0 1px 2px rgba(20,28,34,.05); font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
  .fld textarea { min-height: 120px; resize: vertical; }
  @media (hover: hover) and (pointer: fine) { .fld input:hover, .fld textarea:hover { border-color: rgba(32,44,52,.45); } }
  .fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(8,127,229,.2); }
  .fld [aria-invalid="true"] { border-color: #A3261B; }
  .fld__err { font-size: var(--t-micro); color: #A3261B; min-height: 1em; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
  .qf__nav { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .qf__go { margin-left: auto; }
  .qf__go::after { content: ""; width: 1.05em; height: .72em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform var(--d-fast) var(--ease-out); }
  #qfSend::after { content: none; }
  @media (hover: hover) and (pointer: fine) { .qf__go:hover::after { transform: translateX(3px); } .qf__back:hover { color: var(--ink); } }
  .qf__back { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 .25rem; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink-2); cursor: pointer; transition: color var(--d-fast) ease; }
  .qf__back::before { content: ""; width: 1.05em; height: .72em; background: currentColor; transform: scaleX(-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; }
  .qf__back[hidden] { display: none; }
  /* the docket: your answers, written up as you go */
  .docket { margin-top: auto; padding: var(--s-4) var(--s-4) var(--s-3); max-width: 26rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 24px 44px -32px rgba(20,28,34,.45); }
  .docket[hidden] { display: none; }
  .docket__h { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  .docket__h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
  .docket__rows { margin: 0; }
  .docket__rows div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
  .docket__rows div[hidden] { display: none; }
  .docket__rows dt { padding-top: .12rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
  .docket__rows dd { margin: 0; padding: 0 .25rem; border-radius: 3px; font-weight: 600; font-size: var(--t-small); line-height: 1.35; overflow-wrap: anywhere; }
  .docket__rows dd.is-empty { font-weight: 400; color: var(--ink-2); }
  .docket__rows div.is-new dd { animation: dkIn 900ms var(--ease-out); }
  @keyframes dkIn { from { background-color: rgba(242,210,27,.55); } to { background-color: rgba(242,210,27,0); } }
  .docket__next { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-micro); line-height: 1.45; color: var(--ink-2); }
  .qf__small { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--ink-2); max-width: 52ch; }
  .qf__small a { color: inherit; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .qf__done { display: grid; gap: var(--s-4); align-content: start; }
  .qf__done[hidden] { display: none; }
  .qf__done p { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
  .qf__bad { padding: var(--s-3) var(--s-4); border-left: 3px solid #A3261B; background: var(--white); margin-bottom: var(--s-4); }
  .qf__bad[hidden] { display: none; }

  @media (max-width: 899px) {
    /* James 7 Nov: no charcoal block on phones either, the words sit on paper and the photo follows */
    .phero { grid-template-columns: 1fr; min-height: 0; background: var(--paper); color: var(--ink); }
    .phero .crumb { color: var(--ink-2); }
    .phero .phero__lead { color: var(--ink-2); }
    .phero .btn--line { border-color: var(--ink); color: var(--ink); }
    .phero__copy { padding: var(--s-6) var(--g) var(--s-5); gap: var(--s-3); }
    .phero__img { aspect-ratio: 4 / 3; }
    /* Solutions road train (James 9 Nov): zoom in on phones so the truck fills the frame, not the red dirt */
    .phero--road .phero__img img { transform: scale(1.45); transform-origin: 56% 50%; }
    .phero__ctas { display: grid; width: 100%; }
    .phero__title { font-size: clamp(2.25rem, 11vw, 3.5rem); }
    .sol { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5) 0 var(--s-6); }
    .rail { position: static; display: flex; gap: .4rem; overflow-x: auto; padding: 0 var(--g) var(--s-2); scrollbar-width: none; }
    .rail::-webkit-scrollbar { display: none; }
    .rail__h { display: none; }
    .rail a { flex: none; min-height: 40px; padding: 0 .8rem; border: 1px solid rgba(32,44,52,.3); border-radius: var(--radius); font-size: .9063rem; white-space: nowrap; }
    .rail a.is-on { border-color: var(--ink); }
    .sectors { gap: var(--s-6); padding: 0 var(--g); }
    .sector, .mine__body, .sector--side, .sector--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .sector__img, .sector--side .sector__img { grid-column: auto; grid-row: auto; aspect-ratio: 2 / 1; height: auto; min-height: 0; }
    .sector--side > div, .sector--flip > div { grid-column: auto; }
    .js .gets:not(.is-full) span { display: none; }
    .js .gets:not(.is-full) { gap: var(--s-2); }
    .gets__more { display: flex; width: max-content; align-items: center; min-height: 40px; margin-top: .25rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: var(--t-small); color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    .sector--mine .gets__more { color: var(--white); }
    .sector--mine { margin: 0 calc(var(--g) * -1); border-radius: 0; }
    .mine__pics { grid-template-columns: 1fr; }
    .mine__pics > span:first-child { aspect-ratio: 2 / 1; }
    .mine__pics > span:last-child { display: none; }
    .facts { grid-template-columns: 1fr 1fr; }
    .facts div:nth-child(2) { border-right: 0; }
    .facts div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
    .sector--more { grid-template-columns: 1fr; }
    .gets { gap: var(--s-3); }
    .khero { padding: calc(var(--hdr-h) + var(--s-5)) var(--g) var(--s-3); }
    .khero__top { grid-template-columns: 1fr; gap: var(--s-3); }
    .khero__top { margin-bottom: var(--s-5); }
    .shelf--big { --kit-ar: 2.6; }
    .ptabs { top: 0; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; }
    .ptabs::-webkit-scrollbar { display: none; }
    .ptabs a { flex: none; min-height: 50px; }
    .hdr:not(.is-hidden) ~ main .ptabs { top: var(--hdr-h); }
    .fam { padding: var(--s-6) var(--g) var(--s-3); scroll-margin-top: calc(var(--hdr-h) + 50px); }
    .fam__head { grid-template-columns: 1fr; margin-bottom: var(--s-4); }
    /* the models become a row of tabs that sticks under the page tabs; the cards sit one under the other and the row follows the one in view */
    .pick { --pin-top: calc(var(--hdr-h) + 50px); }
    .hdr.is-hidden ~ main .pick { --pin-top: 50px; }
    .pick__stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); }
    .pick__stage > .prod, .pick__stage > .note { grid-column: 1; }
    .pick__list { z-index: 20; grid-column: 1; grid-row: auto; display: flex; gap: var(--s-4); margin: 0 calc(var(--g) * -1); padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
    .prod { scroll-margin-top: calc(var(--hdr-h) + 50px + 64px); }
    .pick__list::-webkit-scrollbar { display: none; }
    .pick__list::before { left: var(--g); right: var(--g); top: auto; bottom: 0; width: auto; height: 3px; }
    .pick__tab { flex: none; padding: .55rem 0 .8rem; }
    .pick__tab b { font-size: 1.0625rem; }
    .pick__ink { width: 1px; height: 3px; top: auto; bottom: 0; }
    .prod { grid-template-columns: minmax(0, 1fr); }
    .prod__img { aspect-ratio: 16 / 9; padding: var(--s-3); }
    .prod__img img { width: auto; height: 100%; max-height: none; max-width: 80%; }
    .prod__img--type { aspect-ratio: 16 / 9; font-size: 3.5rem; }
    .prod__body { padding: var(--s-4) var(--s-3) var(--s-3); }
    .spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .spec div { grid-template-columns: 6.75rem minmax(0, 1fr); align-items: baseline; gap: 0 .75rem; padding: .75rem .9rem; }
    .spec dd { font-size: .9375rem; }
    .match { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-6); }
    .match__ask { padding: var(--s-4) var(--s-3); }
    .match__pay.grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .match__cmp th, .match__cmp td { padding: .55rem .5rem; }
    .match__cmp td small { margin-left: 0; }
    /* phone: the six gear boxes are photo tiles, three across, all one size; the tick sits on the photo */
    .match__gear .opt--thumb span { display: grid; grid-template-rows: auto 1fr; gap: 0; min-height: 0; padding: 0; overflow: hidden; }
    .match__gear .opt--thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
    .match__gear .opt--thumb em { display: flex; align-items: center; min-height: 2.75rem; padding: .3rem .6rem; font-size: .9375rem; line-height: 1.15; }
    .match__gear .opt--thumb span::before { display: block; position: absolute; top: .35rem; right: .35rem; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: rgba(20,28,34,.32); box-shadow: inset 0 0 0 2px var(--white), 0 1px 4px rgba(0,0,0,.25); }
    .match__gear .opt--thumb input:checked + span::before { background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
    .match__g4 .opt span { gap: .45rem; padding: 0 .55rem; font-size: .9375rem; }
    .match__does .opt span { gap: .5rem; padding: .45rem .65rem; font-size: .9375rem; }
    .opts.match__gear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .match__h { font-size: 1.75rem; }
    .match__kit img { height: 60px; }
    /* phone: the matcher does the picking, so the three-bay shelf below it would only repeat the tabs (keeps the page near 10 screens) */
    .js .khero .shelf--big { display: none; }
    .match__fit { padding: var(--s-4) var(--s-3) var(--s-3); border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
    .mrow { grid-template-columns: 64px minmax(0, 1fr); column-gap: .8rem; }
    .mrow__img { width: 64px; height: 48px; }
    .fam--cams .fam__photo { aspect-ratio: 16 / 9; }
    .plats { padding: var(--s-5) var(--g) var(--s-4); }
    .plat { grid-template-columns: 1fr; padding: var(--s-5) 0; }
    .feats { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--g); }
    .feats__head { position: static; }
    /* phone: the cards become a swipe row under the screen, the screen plays the card in view */
    .fx { margin-top: var(--s-4); }
    .js .feats__grid { display: flex; gap: var(--s-2); margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); overscroll-behavior-x: contain; scrollbar-width: none; }
    .js .feats__grid::-webkit-scrollbar { display: none; }
    .js .feat { flex: 0 0 84%; scroll-snap-align: start; }
    html:not(.js) .feats__grid { grid-template-columns: minmax(0, 1fr); }
    .feat { padding: var(--s-3) var(--s-4); gap: .4rem; }
    .pays__go { flex-direction: column; align-items: stretch; margin-top: var(--s-5); }
    /* phone stays inside 10 screens: the platform tag goes, the dashcam lines already say dashcam */
    .feat__on { display: none; }
    .pays { padding: var(--s-6) var(--g); }
    .pays__head { grid-template-columns: minmax(0, 1fr); }
    .pays__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); }
    .pays__list:not(.is-full) { gap: var(--s-3); }
    .pays__list:not(.is-full) .pay span { display: none; }
    .pays__list + .gets__more { margin-top: var(--s-2); }
    .app { grid-template-columns: 1fr; }
    .zz__head { grid-template-columns: minmax(0, 1fr); }
    .zz__rows { gap: var(--s-6); margin-top: var(--s-5); }
    .zz__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
    .zz__card { padding: var(--s-4); }
    .zz__fig { order: -1; }
    /* phone stays near 10 screens (James 9 Nov: "work well on mobile"): the four rows become a swipe row, photo over card, the next one peeking in */
    .js .zz__rows { display: flex; gap: var(--s-2); margin: var(--s-5) calc(var(--g) * -1) 0; padding: 0 var(--g) 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); overscroll-behavior-x: contain; scrollbar-width: none; }
    .js .zz__rows::-webkit-scrollbar { display: none; }
    .js .zz__row { display: flex; flex-direction: column; flex: 0 0 84%; scroll-snap-align: start; }
    .js .zz__row .zz__fig { flex: none; width: 100%; border-radius: var(--radius) var(--radius) 0 0; }
    .js .zz__row .zz__card { flex: 1; display: flex; flex-direction: column; border-radius: 0 0 var(--radius) var(--radius); }
    .js .zz__card .zz__tags { margin-top: auto; }
    /* fuel tax: the first point shows, the other two wait behind Read the rest */
    .js .ftc__pts.is-folded li:nth-child(n+2) { display: none; }
    .app__body { padding: var(--s-6) var(--g); }
    .app__img { min-height: 0; aspect-ratio: 2 / 1; }
    .story, .partners { grid-template-columns: 1fr; }
    .creds { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); }
    .creds li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: .35rem; align-items: baseline; }
    .creds b { font-size: 2.25rem; }
    .creds span { grid-column: 1 / -1; max-width: none; }
    .creds strong { margin-top: 0; font-size: 1.125rem; }
    .voice { grid-template-columns: 1fr; margin-top: var(--s-6); }
    .voice > * { grid-column: 1; }
    .mts { grid-template-columns: 1fr; padding: var(--s-6) var(--g); }
    .mts__logo { width: 200px; }
    .duo { grid-template-columns: 1fr 1fr; gap: 0 var(--s-2); }
    .duo figure:last-child span { aspect-ratio: 3 / 2; height: auto; }
    .duo figcaption { font-size: .75rem; }
    .logos { grid-template-columns: 1fr; }
    .logos li, .logos li + li { padding: var(--s-4) 0; border-left: 0; border-top: 1px solid var(--line); }
    .logos li:first-child { border-top: 0; }
    .rhero { padding: calc(var(--hdr-h) + var(--s-5)) var(--g) var(--s-5); }
    .faq { grid-template-columns: 1fr; gap: var(--s-4); }
    .faq > .rail { padding: 0; }
    .help { grid-template-columns: 1fr; }
    .kb { grid-template-columns: 1fr; padding: var(--s-6) var(--g); }
    .kb__head { position: static; }
    .kb__item { grid-template-columns: 48px minmax(0, 1fr); align-items: start; padding: var(--s-4) var(--s-3); }
    .kb__ico { width: 48px; height: 48px; padding: 9px; }
    .kb__go { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s-4); }
    .sos__menu { left: 0; right: auto; width: min(340px, 100%); transform-origin: 0 100%; }
    .close__ctas .sos__btn { width: 100%; justify-content: center; }
    .help__go { display: grid; }
    .talk { grid-template-columns: 1fr; min-height: 0; }
    .talk__side { padding: var(--s-5) var(--g); gap: var(--s-3); }
    .talk__note { margin-top: var(--s-2); }
    .ctf { padding: var(--s-5) var(--g) var(--s-6); }
    .close--form { grid-template-columns: 1fr; }
    .qf { padding: var(--s-5) var(--g) var(--s-6); }
    .grid2 { grid-template-columns: 1fr; }
    .qf__nav { margin-top: var(--s-5); }
    .qf__nav .btn { flex: 1; }
    .qf__meter { margin-bottom: var(--s-5); }
    .qf__meter span { font-size: .625rem; letter-spacing: .02em; }
    .opts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .opt--tile em { min-height: 2.75rem; padding: .35rem .7rem; font-size: .9375rem; }
    .qf__fleet { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
    .tach { width: min(78%, 17rem); justify-self: center; }
    .opts--kit { grid-template-columns: minmax(0, 1fr); }
    .opt--kit span { min-height: 80px; }
    .opt__kit { height: 64px; }
    .docket { margin: 0; max-width: none; box-shadow: 0 0 0 1px var(--line); }
  }
}

/* ===== 7 Nov: sector strip, footer socials, scroll on to the next page ===== */
@layer sections {
  /* Built for the gear you run: photos edge to edge, label bottom left (TrackNow strip Stuart liked).
     James 9 Nov (Stuart): plant hire, trailers and skip bins added, so it is now a row you scroll sideways, the arrows step it along
     and the line under it shows how far through you are. Snap keeps a panel's edge on the screen edge. */
  .strip { display: flex; gap: 3px; margin: 0 calc(var(--g) * -1); height: clamp(380px, 34vw, 600px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--white); }
  .strip::-webkit-scrollbar { display: none; }
  .strip:focus { outline: none; }
  .strip__p { position: relative; flex: 0 0 clamp(300px, 30vw, 520px); overflow: hidden; color: var(--white); text-decoration: none; background: var(--paper-2); scroll-snap-align: start; }
  .strip__img { position: absolute; inset: 0; overflow: hidden; }
  .strip__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
  .strip__ctl { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
  .strip__track { position: relative; flex: 1; height: 3px; margin-right: var(--s-4); border-radius: 2px; background: rgba(32, 44, 52, .12); overflow: hidden; }
  .strip__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--blue-deep); }
  .strip__btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform 140ms var(--ease-out), opacity var(--d-fast) ease; }
  .strip__btn svg { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
  .strip__btn:active:not(:disabled) { transform: scale(.94); }
  .strip__btn:disabled { opacity: .3; cursor: default; }
  .strip__btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .strip__btn:hover:not(:disabled) { background: var(--ink); color: var(--white); } }
  .strip__cap {
    position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: .4rem;
    padding: 5rem clamp(1rem, .6rem + 1.1vw, 2rem) clamp(1.1rem, .7rem + 1vw, 1.9rem);
    background: linear-gradient(to top, rgba(16, 24, 30, .58), rgba(16, 24, 30, 0));
  }
  .strip__cap b {
    display: block;
    font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase;
    font-size: clamp(1.0625rem, .8rem + .62vw, 1.625rem); line-height: 1.04; letter-spacing: .01em; max-width: 17ch; text-wrap: balance;
  }
  .strip__cap b::after {
    content: ""; display: inline-block; vertical-align: .02em; margin-left: .5em; width: .9em; height: .62em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--d-fast) var(--ease-out);
  }
  .strip__cap small { font-size: var(--t-small); line-height: 1.35; color: rgba(255, 255, 255, .9); max-width: 30ch; }
  .strip__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem var(--s-5); margin-top: var(--s-4); }
  .strip__more span { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2); max-width: 46ch; }
  .strip__p:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
  @media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .strip__cap small { opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
    .strip__p:hover .strip__cap small, .strip__p:focus-visible .strip__cap small { opacity: 1; transform: none; transition-delay: 220ms; }
    .strip__p:hover .strip__cap b::after { transform: translateX(5px); }
  }
  @media (hover: hover) and (pointer: fine) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .strip__p:hover .strip__img img { transform: scale(1.04); }
  }
  /* arrival: the four panels rise in one after the other */
  .motion .strip__p { clip-path: inset(0); transition: clip-path 1000ms var(--ease-draw) calc(var(--i) * 90ms); }
  .motion .strip:not(.is-in) .strip__p { clip-path: inset(100% 0 0 0); }
  @media (max-width: 899px) {
    .strip { height: auto; gap: 6px; padding-inline: var(--g); scroll-padding-inline: var(--g); background: none; }
    .strip__p { flex: 0 0 78%; aspect-ratio: 4 / 5; border-radius: var(--radius); }
    .strip__cap { padding: 4rem 1rem 1.1rem; }
    .strip__cap b { font-size: 1.125rem; font-stretch: 100%; line-height: 1.1; }
    .strip__cap b::after { display: none; }
    .strip__cap small { font-size: .875rem; }
    .strip__ctl { margin-top: var(--s-3); }
    .strip__btn { width: 48px; height: 48px; }
    .strip__more span { font-size: 1rem; }
  }

  /* home hero on the highway photo: a soft corner shade behind the words and buttons, the rest of the photo untouched */
  @media (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .hero__frame--wide::after {
      content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; width: 62%; height: 62%; pointer-events: none;
      background: radial-gradient(ellipse 100% 100% at 0% 100%, rgba(16, 24, 30, .52), rgba(16, 24, 30, .22) 48%, rgba(16, 24, 30, 0) 76%);
    }
  }

  /* the van at the back of the convoy sits under the words on desktop, so its pin shows on phones only */
  @media (min-width: 900px) and (min-aspect-ratio: 1/1) { .pin--m { display: none; } }

  /* Solutions: the closing industry block carries a photo now */
  /* photo fills its own column (it used to size by height, grow wide and cover the headline); words and button share the right column */
  .sector--more { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: 1fr auto; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: end; padding: 0; overflow: hidden; }
  .sector--more .sector__img { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 24rem; aspect-ratio: auto; border-radius: 0; }
  .sector--more .sector__img img { width: 100%; height: 100%; object-fit: cover; }
  .sector--more > div { grid-column: 2; padding: var(--s-6) clamp(1.5rem, 1rem + 2vw, 3rem) 0 0; }
  .sector--more .sector__h { font-size: clamp(1.9rem, 1rem + 2.1vw, 3.25rem); }
  .sector--more > .btn { grid-column: 2; justify-self: start; margin: var(--s-5) 0 var(--s-6); }
  @media (max-width: 899px) {
    .sector--more { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--s-3); padding-bottom: var(--s-4); }
    .sector--more .sector__img { grid-row: auto; min-height: 0; aspect-ratio: 2 / 1; }
    .sector--more > div, .sector--more > .btn { grid-column: auto; margin: 0 var(--s-4); padding: 0; }
    .sector--more > .btn { justify-self: start; }
  }

  /* contact: support for existing customers (warranty, activate, pause, cancel) */
  .sup { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5) var(--s-7); padding: var(--s-8) var(--g); background: var(--paper-2); border-top: 1px solid var(--line); }
  .sup__head { align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
  .sup__alt { margin-top: var(--s-4); font-weight: 650; }
  .sup__alt a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
  .sup__req { margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
  .sup__q { margin-bottom: var(--s-3); padding: 0; font-weight: 700; font-size: 1.125rem; }
  .sup__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr)); gap: .6rem; }
  .sup__opt { position: relative; display: grid; align-content: start; gap: .35rem; padding: 1rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--d-fast) ease, background-color var(--d-fast) ease, transform var(--d-fast) var(--ease-out); }
  .sup__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .sup__opt svg { color: var(--blue-deep); margin-bottom: .25rem; }
  .sup__opt b { font-weight: 700; line-height: 1.2; }
  .sup__opt span { font-size: var(--t-micro); line-height: 1.4; color: var(--ink-2); }
  .sup__opt:active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) { .sup__opt:hover { box-shadow: 0 0 0 1px rgba(32, 44, 52, .45); } }
  .sup__opt:has(input:checked) { background: #F1F7FD; box-shadow: 0 0 0 2px var(--blue-deep); }
  .sup__opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
  .sup__form .grid2 { margin-bottom: var(--s-3); }
  .sup__form .fld { align-content: start; }
  .fld__help { font-size: var(--t-micro); color: var(--ink-2); }
  .sup__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
  .sup__go .qf__small { margin: 0; max-width: 40ch; }
  .sup__bad { margin-bottom: var(--s-4); padding: .8rem 1rem; border-left: 3px solid #A3261B; background: var(--white); color: #A3261B; }
  .sup__done { padding: var(--s-5) 0; border-top: 2px solid var(--ink); }
  .sup__done:focus { outline: none; }
  .sup__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); line-height: .95; }
  .sup__done p { margin-top: var(--s-3); color: var(--ink-2); max-width: 46ch; }
  @media (max-width: 899px) {
    .sup { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--g); }
    .sup__head { position: static; }
    .sup__opts { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .sup__opt { grid-template-columns: 26px minmax(0, 1fr); column-gap: .8rem; row-gap: .15rem; padding: .85rem 1rem; }
    .sup__opt svg { grid-row: span 2; margin: 0; }
    .sup__go .btn { width: 100%; justify-content: center; }
  }

  /* platforms: what idling costs, on the visitor's own numbers */
  .idle { display: none; }
  .js .idle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-5) var(--s-7); margin-top: var(--s-7); padding: var(--s-6); border-radius: var(--radius); background: var(--white); color: var(--ink); border-top: 3px solid var(--blue-deep); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(32, 44, 52, .35); }
  .idle__h { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.5rem); line-height: .95; }
  .idle__p { margin-top: var(--s-2); color: var(--ink-2); }
  .idle__fields { margin-top: var(--s-4); }
  .idle__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: .7rem 0; border-top: 1px solid var(--line); }
  .idle__f label { font-weight: 600; line-height: 1.3; }
  .idle__f small { display: block; margin-top: .2rem; font-weight: 400; font-size: var(--t-micro); color: var(--ink-2); }
  .step { display: grid; grid-template-columns: 44px 5.5rem 44px; align-items: center; }
  .step button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(32, 44, 52, .3); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform var(--d-fast) var(--ease-out); }
  .step button:active { transform: scale(.94); }
  @media (hover: hover) and (pointer: fine) { .step button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } }
  .step__i { position: relative; width: 12px; height: 12px; }
  .step__i::before, .step__i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
  .step__i::after { transform: rotate(90deg); }
  .step__i--minus::after { display: none; }
  .step input { width: 100%; min-width: 0; padding: .4rem 0; border: 0; background: transparent; color: var(--ink); text-align: center; font-family: var(--f-mono); font-size: 1.125rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
  .step input::-webkit-outer-spin-button, .step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .step input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
  .idle__out { display: grid; align-content: start; gap: var(--s-4); }
  .idle__total span { display: block; color: var(--ink-2); }
  .idle__total b { display: block; margin: .3rem 0; font-family: var(--f-display); font-weight: 820; font-stretch: 112%; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .idle__sw { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; background: var(--paper-2); }
  .idle__sw button { min-height: 44px; padding: .45rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1); }
  .idle__sw button[aria-pressed="true"] { background: var(--blue-deep); color: var(--white); }
  .idle__bar { position: relative; height: 14px; margin-top: var(--s-2); border-radius: 99px; background: var(--paper-2); container-type: inline-size; }
  .idle__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--blue-deep); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 800ms cubic-bezier(.16, 1, .3, 1); }
  .idle__mark { position: absolute; top: -8px; bottom: -8px; left: -2px; width: 4px; border-radius: 4px; background: var(--ink); transform: translateX(calc(var(--p, 0) * 100cqw)); transition: transform 800ms cubic-bezier(.16, 1, .3, 1); }
  .idle__nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .idle__nums span { display: flex; align-items: center; gap: .5rem; font-size: var(--t-small); color: var(--ink-2); }
  .idle__nums p:first-child span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--blue-deep); }
  .idle__nums p:last-child span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
  .idle__nums b { display: block; margin-top: .3rem; font-family: var(--f-mono); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 500; font-variant-numeric: tabular-nums; }
  .idle__note { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; max-width: 52ch; }
  @media (max-width: 899px) {
    .js .idle { grid-template-columns: minmax(0, 1fr); margin: var(--s-6) calc(var(--g) * -1) 0; padding: var(--s-5) var(--g); border-radius: 0; box-shadow: none; }
    .step { grid-template-columns: 44px 4.5rem 44px; }
    .idle__sw { justify-self: stretch; } .idle__sw button { flex: 1; padding: .45rem .6rem; }
  }
  @media (prefers-reduced-motion: reduce) { .idle__fill, .idle__mark { transition: none; } }
  /* Fuel tax credits (James 9 Nov, Stuart): how it works beside a calculation table on the visitor's own litres */
  .ftc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-5) var(--s-7); margin-top: var(--s-5); padding: var(--s-6); border-radius: var(--radius); background: var(--white); color: var(--ink); border-top: 3px solid var(--blue-deep); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(32, 44, 52, .35); }
  .ftc__pts { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
  .ftc__pts li { display: grid; gap: .3rem; padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .ftc__pts b { font-weight: 700; line-height: 1.25; }
  .ftc__pts span { color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
  .ftc__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .ftc__cap { caption-side: top; padding-bottom: var(--s-3); text-align: left; color: var(--ink-2); }
  .ftc__t th, .ftc__t td { padding: .9rem .5rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
  .ftc__t th:first-child { padding-left: 0; }
  .ftc__t td:last-child, .ftc__t th:last-child { padding-right: 0; }
  .ftc__t thead th { padding-top: 0; padding-bottom: .6rem; border-top: 0; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .ftc__t tbody th { font-weight: 600; line-height: 1.3; }
  .ftc__t tbody th small { display: block; margin-top: .2rem; font-weight: 400; font-size: var(--t-micro); color: var(--ink-2); }
  .ftc__t thead th:nth-child(n+3), .ftc__t .ftc__r, .ftc__t .ftc__c, .ftc__t .ftc__tot { text-align: right; white-space: nowrap; }
  .ftc__r { font-size: var(--t-small); color: var(--ink-2); }
  .ftc__rate { font-size: 1rem; font-weight: 600; color: var(--ink); }
  .ftc__c { font-size: 1.125rem; font-weight: 600; }
  .ftc__in { width: 8.5rem; min-height: 48px; padding: .5rem .75rem; border: 1px solid rgba(32, 44, 52, .24); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; appearance: textfield; transition: border-color 160ms ease, box-shadow 160ms ease; }
  .ftc__in::-webkit-outer-spin-button, .ftc__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  @media (hover: hover) and (pointer: fine) { .ftc__in:hover { border-color: rgba(32, 44, 52, .45); } }
  .ftc__in:focus-visible { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(8, 127, 229, .2); }
  .ftc__t tfoot th, .ftc__t tfoot td { padding-top: 1rem; border-top: 2px solid var(--ink); }
  .ftc__t tfoot th { font-weight: 700; }
  .ftc__tot b { display: block; font-family: var(--f-display); font-weight: 820; font-stretch: 112%; font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); line-height: .9; letter-spacing: -.02em; }
  .ftc__tot span { display: block; margin-top: .3rem; font-size: var(--t-small); color: var(--ink-2); }
  .ftc__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ftc__fine { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
  .ftc__fine a { color: var(--blue-ink); text-underline-offset: 3px; white-space: nowrap; }
  @media (max-width: 899px) {
    .ftc { grid-template-columns: minmax(0, 1fr); margin: var(--s-4) calc(var(--g) * -1) 0; padding: var(--s-5) var(--g); border-radius: 0; box-shadow: none; }
    .ftc__t thead { display: none; }
    .ftc__t, .ftc__t tbody, .ftc__t tfoot { display: block; }
    .ftc__cap { display: block; }
    .ftc__t tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem .8rem; padding: .9rem 0; border-top: 1px solid var(--line); }
    .ftc__t th, .ftc__t td { padding: 0; border: 0; }
    .ftc__t tbody th { grid-column: 1 / -1; }
    .ftc__t .ftc__r { text-align: left; }
    .ftc__t .ftc__c { text-align: right; }
    .ftc__in { width: 7.5rem; }
    .ftc__t tfoot tr { grid-template-columns: minmax(0, 1fr) auto; border-top: 2px solid var(--ink); padding-top: 1rem; }
    .ftc__t tfoot th, .ftc__t tfoot td { padding: 0; border: 0; }
  }

  /* home: partner bar under the hero */
  /* partners, then the group they sit under, then the Google rating on its own at the right (James 7 Nov) */
  /* James 9 Nov: rating gone, so the strip spreads across the full width instead of leaving the right half empty */
  .trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding: var(--s-4) var(--g); background: var(--white); border-bottom: 1px solid var(--line); }
  .trust__lbl, .trust__grp { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
  /* the parent group with its own logo, the words in the brand blue, not grey (James 7 Nov) */
  .trust__grp { display: flex; align-items: center; gap: .75rem; padding-left: var(--s-5); border-left: 1px solid var(--line); line-height: 1.45; }
  .trust__grp span { max-width: 20ch; }
  .trust__mts { height: 46px; width: auto; flex: none; margin-block: -6px; }
  .trust__logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); }
  .trust__logos img { height: 28px; width: auto; }
  /* the makers' own colour logos (James 7 Nov: "not grey"), sized by eye so each reads the same weight */
  .trust__logos li:nth-child(1) img { height: 34px; }
  .trust__logos li:nth-child(2) img { height: 24px; }
  .rate { display: flex; align-items: center; gap: .45rem; margin-left: auto; font-size: var(--t-small); line-height: 1; color: var(--ink); white-space: nowrap; }
  .rate__g, .rate__stars { fill: currentColor; }
  .rate__g { width: 17px; height: 17px; flex: none; }
  .rate__n { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
  .rate__stars { width: 88px; height: 16px; flex: none; color: #E09B00; }
  .rate__lbl { color: var(--ink-2); }
  .rate__tag { font-style: normal; font-family: var(--f-mono); font-size: .6875rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed currentColor; border-radius: 3px; padding: .25rem .4rem .2rem; }
  .rate__tag:empty { display: none; }
  .rate:has(.rate__n:empty) { display: none; }   /* rating box set to "-" in WordPress hides the whole badge */
  @media (max-width: 899px) {
    /* phone: each part on its own line with room around it, nothing squeezed (James 7 Nov: "too crammed") */
    .trust { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) var(--g) var(--s-5); }
    .trust__lbl { margin-bottom: calc(var(--s-2) * -1); }
    .trust__grp { padding: var(--s-4) 0 0; border-left: 0; border-top: 1px solid var(--line); align-self: stretch; }
    .trust__grp span { max-width: none; }
    .rate { margin-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); align-self: stretch; }
    .trust__logos { gap: var(--s-5); flex-wrap: wrap; row-gap: var(--s-3); }
    .trust__logos img { height: 24px; } .trust__logos li:nth-child(1) img { height: 30px; } .trust__logos li:nth-child(2) img { height: 20px; }
    .trust__mts { height: 40px; margin-block: 0; }
    .rate { flex-wrap: wrap; row-gap: .4rem; }
  }

  /* ===== Platforms: example dashboard with a hotspot tour, then a card per platform ===== */
  .cons { padding: var(--s-8) var(--g); background: var(--blue-ink); color: var(--white); }
  .cons .h2 { max-width: 14ch; }
  .cons .lead { color: rgba(255, 255, 255, .78); max-width: 44ch; }
  .cons__head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-4) var(--s-7); align-items: end; }
  .cons__head .lead { margin-top: 0; }
  .cons__stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--s-5); align-items: center; margin-top: var(--s-6); }

  /* the tablet: sized in container units so the whole screen scales as one picture */
  .tab { margin: 0; container-type: inline-size; }
  .tab__screen { position: relative; padding: 1.5cqw; border-radius: 3.2cqw; background: #0E1519; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .6); }
  .tab__screen::before { content: ""; position: absolute; left: .55cqw; top: 50%; width: .5cqw; height: .5cqw; border-radius: 50%; background: #26323A; transform: translateY(-50%); }
  .tab__cap { margin-top: var(--s-3); font-size: var(--t-micro); color: rgba(255, 255, 255, .6); }
  .dash {
    display: grid; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.6cqw; padding: 1.1cqw; gap: .9cqw;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "top top" "kpi alerts" "map alerts" "map cam" "hrs cam";
    background: #EEF2F5; color: #202C34; font-size: 1.02cqw; line-height: 1.3;
  }
  .dash__top { grid-area: top; display: flex; align-items: center; gap: .8cqw; padding: .2cqw .3cqw; }
  .dash__top b { font-family: var(--f-display); font-weight: 760; font-size: 1.45cqw; margin-right: auto; }
  .dash__chip { padding: .35cqw .8cqw; border-radius: 99px; background: var(--white); box-shadow: 0 0 0 1px #D9E1E7; font-size: .9cqw; }
  .dash__time { font-family: var(--f-mono); font-size: .85cqw; color: #5D6B76; }
  .dash__p { position: relative; min-width: 0; min-height: 0; border-radius: .7cqw; background: var(--white); box-shadow: 0 0 0 1px #DCE3E8; transition: opacity 300ms ease, box-shadow 300ms ease; }
  .dash__in { height: 100%; padding: 1cqw 1.1cqw; overflow: hidden; border-radius: inherit; }
  .dash__h { display: flex; justify-content: space-between; gap: 1cqw; font-weight: 700; font-size: 1cqw; margin-bottom: .6cqw; }
  .dash__h span { font-weight: 400; color: #5D6B76; }
  .js .dash__alerts .dash__h, .js .dash__hrs .dash__h { padding-right: 34px; margin-bottom: 1.3cqw; }
  .dash i[class^="c-"], .mod__shot i[class^="c-"] { display: inline-block; flex: none; width: .75em; height: .75em; border-radius: 50%; }
  .c-mv { background: #1E9A57; } .c-idle { background: #E09A0B; } .c-stop { background: #8C99A3; } .c-off { background: #D64545; } .c-geo { background: #087FE5; }

  .dash__kpi { grid-area: kpi; }
  .dash__kpi .dash__in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1cqw 1.2cqw; }
  .dash__kpi p { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5cqw; padding: 0 1cqw; border-left: 1px solid #E6EBEF; }
  .dash__kpi p:first-child { border-left: 0; padding-left: 0; }
  .dash__kpi b { font-family: var(--f-display); font-weight: 760; font-size: 2.5cqw; line-height: 1; letter-spacing: -.02em; }
  .dash__kpi span { grid-column: 1 / -1; margin-top: .3cqw; font-size: .9cqw; color: #5D6B76; }

  .dash__map { grid-area: map; }
  .dash__map .dash__in { position: relative; padding: 0; }
  .dash__mapbox { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 3 / 2; transform: translateY(-50%); }
  .dash__mapbox img { width: 100%; height: 100%; }
  .dm { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: .4cqw; padding: .25cqw .6cqw .25cqw .45cqw; border-radius: 99px; background: #202C34; color: var(--white); font-family: var(--f-mono); font-size: .8cqw; white-space: nowrap; transform: translate(-.6cqw, -50%); box-shadow: 0 .2cqw .6cqw rgba(16, 24, 30, .35); }
  .dm::before { content: ""; width: .7cqw; height: .7cqw; border-radius: 50%; background: #1E9A57; box-shadow: 0 0 0 .2cqw rgba(255, 255, 255, .9); }
  .dm--idle::before { background: #E09A0B; } .dm--stop::before { background: #8C99A3; }
  .dash__live { position: absolute; left: .9cqw; top: .9cqw; display: inline-flex; align-items: center; gap: .45cqw; padding: .3cqw .7cqw; border-radius: 99px; background: var(--white); box-shadow: 0 0 0 1px #D9E1E7; font-weight: 700; font-size: .85cqw; }
  .dash__live i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #1E9A57; }
  .motion .dash__live i { animation: livePulse 2s ease-in-out infinite; }
  @keyframes livePulse { 50% { opacity: .35; } }

  .dash__alerts { grid-area: alerts; }
  .dash__alerts ul { list-style: none; margin: 0; padding: 0; }
  .dash__alerts li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .6cqw; padding: .75cqw 0; border-top: 1px solid #EDF1F4; }
  .dash__alerts li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #33424C; }
  .dash__alerts time, .dash__meta time { font-family: var(--f-mono); font-size: .85cqw; color: #5D6B76; }

  .dash__cam { grid-area: cam; }
  .dash__clip { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .45cqw; background: #59646C; }
  .dash__clip img { width: 100%; height: 100%; object-fit: cover; }
  .dash__clip::before, .mod__shot--cam::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%; z-index: 1; background: linear-gradient(rgba(10, 16, 20, .45), transparent); pointer-events: none; }
  .dash__rec, .ms__time, .dash__flag { z-index: 2; }
  .dash__rec { position: absolute; left: .7cqw; top: .6cqw; display: inline-flex; align-items: center; gap: .35cqw; font-family: var(--f-mono); font-size: .8cqw; color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
  .dash__rec::before { content: ""; width: .6cqw; height: .6cqw; border-radius: 50%; background: #E5484D; }
  .dash__flag { position: absolute; left: .7cqw; bottom: .7cqw; padding: .3cqw .6cqw; border-radius: 3px; background: #E09A0B; color: #1B232A; font-weight: 700; font-size: .85cqw; }
  .dash__meta { display: flex; gap: .6cqw; align-items: baseline; margin-top: .7cqw; }
  .dash__meta span { margin-right: auto; color: #33424C; }

  .dash__hrs { grid-area: hrs; }
  .dash__bar { display: grid; grid-template-columns: 4.2cqw minmax(0, 1fr) 3cqw; align-items: center; gap: .8cqw; padding: .22cqw 0; font-size: .9cqw; }
  .dash__bar span { font-family: var(--f-mono); font-size: .82cqw; color: #33424C; }
  .dash__bar i { position: relative; height: .7cqw; border-radius: 99px; background: #E6EBEF; overflow: hidden; }
  .dash__bar i::after { content: ""; position: absolute; inset: 0; background: #087FE5; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w)); }
  .dash__bar em { font-style: normal; text-align: right; color: #5D6B76; }

  /* hotspots: the plus spins and lights, the drawer card swaps (recipe values: 300ms plus, 600ms card) */
  .hs { display: none; }
  .js .hs {
    position: absolute; right: .7cqw; top: .6cqw; z-index: 3; display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(32, 44, 52, .18), 0 6px 16px -4px rgba(16, 24, 30, .45);
    transition: background-color 300ms cubic-bezier(.38, .005, .215, 1), color 300ms cubic-bezier(.38, .005, .215, 1);
  }
  .js .hs::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .js .dash__map .hs { right: auto; top: auto; left: 46%; top: 42%; }
  .js .dash__cam .hs { right: auto; top: auto; left: 50%; top: 38%; transform: translate(-50%, -50%); }
  .hs__plus { position: relative; width: 12px; height: 12px; transition: transform 300ms cubic-bezier(.38, .005, .215, 1); }
  .hs__plus::before, .hs__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; }
  .hs__plus::after { transform: rotate(90deg); }
  .hs[aria-pressed="true"] { background: var(--blue-deep); color: var(--white); }
  .hs[aria-pressed="true"] .hs__plus { transform: rotate(90deg) scale(1.1); }
  .hs:active .hs__plus { transform: scale(.9); }
  @media (hover: hover) and (pointer: fine) { .hs:hover .hs__plus { transform: rotate(90deg) scale(1.1); } }
  .hs:focus-visible { outline: 3px solid var(--vis); outline-offset: 2px; }
  .hs::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--white); opacity: 0; pointer-events: none; }
  .motion .cons__stage.is-in:not(.is-touched) .hs::after { animation: hsPing 1.8s var(--ease-out) 2 calc(var(--k, 0) * 120ms + 300ms); }
  @keyframes hsPing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
  .js .dash__p.is-on { box-shadow: 0 0 0 2px #087FE5; }
  .js .cons__stage.is-touched .dash__p:not(.is-on) { opacity: .55; }

  .cons__drawer { display: grid; gap: var(--s-4); }
  .cons__cards { display: grid; gap: var(--s-4); }
  .js .cons__cards { gap: 0; }
  .cons__card { padding-top: var(--s-3); border-top: 2px solid var(--white); }
  .js .cons__card { grid-area: 1 / 1; transition: opacity 600ms cubic-bezier(.625, .05, 0, 1), transform 600ms cubic-bezier(.625, .05, 0, 1); }
  .js .cons__card[data-s="off"] { opacity: 0; visibility: hidden; }
  .js .cons__card[data-s="on"] { opacity: 1; transform: none; }
  .js .cons__card[data-s="in-r"] { opacity: 0; transform: translateX(1em); transition: none; }
  .js .cons__card[data-s="in-l"] { opacity: 0; transform: translateX(-1em); transition: none; }
  .js .cons__card[data-s="out-r"] { opacity: 0; transform: translateX(1em); }
  .js .cons__card[data-s="out-l"] { opacity: 0; transform: translateX(-1em); }
  .cons__n { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
  .cons__card h3 { margin-top: var(--s-3); font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: .95; }
  .cons__card p:not(.cons__n) { margin-top: var(--s-2); color: rgba(255, 255, 255, .82); line-height: 1.5; }
  .cons__on { display: inline-block; margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
  .cons__nav { display: none; }
  .js .cons__nav { display: flex; gap: .5rem; }
  .cons__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform var(--d-fast) var(--ease-out); }
  .cons__btn:active { transform: scale(.95); }
  @media (hover: hover) and (pointer: fine) { .cons__btn:hover { background: var(--white); color: var(--ink); } }

  /* one card per platform, each with a slice of its own screen */
  .mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-8); }
  .mod { display: flex; flex-direction: column; padding: var(--s-3) var(--s-3) var(--s-4); border-radius: var(--radius); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
  .mod__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--white); color: #202C34; font-size: .8125rem; }
  .mod__shot--real img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .mod__shot table { width: 100%; border-collapse: collapse; }
  .mod__shot td { padding: .5rem .9rem; border-top: 1px solid #EDF1F4; white-space: nowrap; }
  .mod__shot td:last-child { text-align: right; font-family: var(--f-mono); font-size: .75rem; color: #5D6B76; }
  .mod__shot--trips td:first-child { font-family: var(--f-mono); font-size: .75rem; color: #5D6B76; width: 1%; }
  .mod__shot--trips td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 100%; }
  .mod__shot--units td:first-child { display: flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .75rem; }
  .ms__bar { display: flex; justify-content: space-between; padding: .7rem .9rem; background: #F4F6F8; font-size: .8125rem; }
  .ms__bar span { color: #5D6B76; }
  .ms__spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; }
  .ms__spark path { fill: none; stroke: #087FE5; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .mod__shot--cam img { width: 100%; height: 100%; object-fit: cover; }
  .mod__shot--cam .dash__rec, .mod__shot--cam .dash__flag, .ms__time { font-size: .75rem; }
  .mod__shot--cam .dash__rec { left: .7rem; top: .6rem; gap: .35rem; }
  .mod__shot--cam .dash__rec::before { width: 8px; height: 8px; }
  .mod__shot--cam .dash__flag { left: .7rem; bottom: .7rem; padding: .25rem .5rem; }
  .ms__time { position: absolute; right: .7rem; top: .6rem; font-family: var(--f-mono); color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
  .mod__name { margin-top: var(--s-4); font-family: var(--f-display); font-weight: 820; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); line-height: .95; }
  .mod__by { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); color: rgba(255, 255, 255, .6); }
  .mod__by img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
  .mod__what { margin-top: var(--s-3); color: rgba(255, 255, 255, .82); line-height: 1.5; }
  .mod .chips { margin-top: var(--s-3); color: var(--white); }
  .mod__go { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: auto; padding-top: var(--s-4); }
  .mod .arrow { color: var(--white); }
  .mod__note { font-family: var(--f-mono); font-size: var(--t-micro); color: rgba(255, 255, 255, .6); }

  @media (max-width: 1099px) {
    .cons__stage { grid-template-columns: minmax(0, 1fr); }
    .cons__drawer { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .mods { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  }
  @media (max-width: 899px) {
    .cons { padding: var(--s-6) var(--g); }
    .cons__head { grid-template-columns: minmax(0, 1fr); }
    .cons__stage { margin-top: var(--s-5); gap: var(--s-4); }
    .tab__screen { padding: 1.8cqw; border-radius: 4cqw; }
    .js .hs { width: 26px; height: 26px; }
    .hs__plus, .hs__plus::before, .hs__plus::after { width: 10px; }
    .hs__plus { height: 10px; } .hs__plus::before, .hs__plus::after { margin-left: -5px; }
    .mods {
      margin: var(--s-6) calc(var(--g) * -1) 0; padding: 0 var(--g) var(--s-2); max-width: none;
      grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none;
    }
    .mods::-webkit-scrollbar { display: none; }
    .mod { scroll-snap-align: start; }
    .mod__shot td { padding: .4rem .7rem; }
    .mod__shot--trips tr:nth-child(4), .mod__shot--units tr:nth-child(5) { display: none; }
    .ms__bar { padding: .55rem .7rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .cons__card { transition: opacity 150ms linear; transform: none !important; }
    .hs__plus { transition: none; }
  }

  /* ===== Resellers ===== */
  .rs-who { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-5) var(--s-7); align-items: start; }
  .rs-who__pic { margin: 0; position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
  .rs-who__pic span { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
  .rs-who__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
  .rs-who__body .lead { margin-top: var(--s-3); max-width: 40ch; }
  .rs-who__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .rs-who__i { display: grid; grid-template-columns: 48px 1fr; gap: .35rem var(--s-3); align-content: start; padding: var(--s-4); background: var(--white); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
  .rs-who__i svg { grid-row: span 2; box-sizing: content-box; width: 26px; height: 26px; padding: 11px; border-radius: var(--radius); background: var(--paper); color: var(--blue-deep); transition: background-color var(--d-fast) ease, color var(--d-fast) ease; }
  .rs-who__i b { font-family: var(--f-display); font-weight: 760; font-stretch: 106%; font-size: 1.125rem; line-height: 1.15; padding-top: .2rem; }
  .rs-who__i span { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
  @media (hover: hover) and (pointer: fine) { .rs-who__i:hover svg { background: var(--blue-deep); color: var(--white); } }

  /* The partner deal (Stuart's Reseller Partner Programme, 7 Nov) */
  .rs-deal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-7); padding: var(--s-8) var(--g); background: var(--ink); color: var(--white); }
  .rs-deal__h { margin: 0; font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem); line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
  .rs-deal__p { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; color: rgba(255, 255, 255, .8); max-width: 36ch; }
  .rs-deal__war { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .14); }
  .rs-deal__war b { font-family: var(--f-display); font-weight: 820; font-stretch: 125%; font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); line-height: .8; color: #8EC8FF; letter-spacing: -.02em; }
  .rs-deal__war span { font-size: 1.0625rem; line-height: 1.4; max-width: 18ch; color: rgba(255, 255, 255, .88); }
  .rs-deal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); align-content: start; }
  .rs-deal__list li { display: grid; gap: .45rem; align-content: start; padding-top: var(--s-4); border-top: 2px solid rgba(255, 255, 255, .14); }
  .rs-deal__list svg { width: 32px; height: 32px; color: #8EC8FF; margin-bottom: .35rem; }
  .rs-deal__list b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: 1.3125rem; line-height: 1.15; }
  .rs-deal__list span { color: rgba(255, 255, 255, .74); line-height: 1.55; max-width: 38ch; }
  .rs-deal__tags { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); border-top: 1px solid rgba(255, 255, 255, .14); }
  .rs-deal__tags li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; }
  .rs-deal__tags svg { width: 20px; height: 20px; color: #8EC8FF; flex: none; }
  @media (max-width: 899px) {
    .rs-deal { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) var(--g); }
  }
  @media (max-width: 599px) {
    .rs-deal__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .rs-deal__tags { flex-direction: column; }
  }
  /* Installer network (Stuart 7 Nov): pins land west to east, the list beside it names every city */
  .net { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-7); align-items: center; background: var(--white); }
  .net__list { margin: var(--s-5) 0 0; display: grid; gap: .55rem; }
  .net__list div { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-2); padding-top: .55rem; border-top: 1px solid var(--line); }
  .net__list dt { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; color: var(--blue-deep); padding-top: .1rem; }
  .net__list dd { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .9375rem; color: var(--ink-2); }
  .net__list dd span { cursor: default; transition: color 160ms ease; }
  .net__list dd span.is-hot { color: var(--blue-deep); }
  .net__ask { margin-top: var(--s-4); color: var(--ink-2); }
  .net__ask a { color: var(--blue-deep); font-weight: 650; text-underline-offset: 3px; }
  .net__map { position: relative; margin: 0; width: 100%; }
  .net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .net__st { fill: #DCE4EA; stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
  .net__ab { font-family: var(--f-mono); font-size: 15px; letter-spacing: .08em; fill: #8A98A3; text-anchor: middle; }
  .net__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
  .net__pin { position: absolute; width: 0; height: 0; }
  .net__pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-deep); box-shadow: 0 0 0 2.5px var(--white), 0 3px 8px rgba(10, 108, 196, .45); transition: transform 160ms var(--ease-out); }
  .net__pin i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
  .net__pin span { position: absolute; top: -.6rem; white-space: nowrap; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--ink); text-shadow: 0 0 3px var(--white), 0 0 3px var(--white), 0 0 6px var(--white); transition: color 160ms ease; }
  .net__pin--r span { left: 11px; }
  .net__pin--l span { right: 11px; }
  .net__pin--t span { left: 0; top: -1.75rem; transform: translateX(-50%); }
  .net__pin--b span { left: 2px; top: .55rem; }
  .net__pin.is-hot i { transform: scale(1.35); }
  .net__pin.is-hot span { color: var(--blue-deep); }
  .motion .net__pin i { opacity: 0; transform: translateY(-10px) scale(.6); transition: opacity 420ms var(--ease-out) var(--pd), transform 420ms var(--ease-out) var(--pd); }
  .motion .net__pin span { opacity: 0; transition: opacity 320ms ease var(--pd); }
  .motion .net__map.is-in .net__pin i { opacity: 1; transform: none; }
  .motion .net__map.is-in .net__pin span { opacity: 1; transition-delay: calc(var(--pd) + 180ms); }
  .motion .net__map.is-in .net__pin i::after { animation: netPing 1100ms var(--ease-out) calc(var(--pd) + 300ms) 1 both; }
  .motion .net__map.is-in .net__pin.is-hot i { transform: scale(1.35); transition: transform 160ms var(--ease-out); }
  @keyframes netPing { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
  @media (max-width: 1023px) { .net__pin span { font-size: .75rem; } }
  @media (max-width: 899px) {
    .net { grid-template-columns: minmax(0, 1fr); }
    .net__map { order: -1; }
    .net__pin span { display: none; }
    .net__pin i { left: -4.5px; top: -4.5px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--white), 0 2px 5px rgba(10, 108, 196, .4); }
    .net__ab { font-size: 32px; }
  }
  /* Dashcams page (Stuart 7 Nov) */
  .dc-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-7); align-items: center; min-height: clamp(560px, 84svh, 880px); padding: calc(var(--hdr-h) + var(--s-7)) var(--g) var(--s-7); background: var(--ink); color: var(--white); }
  .dc-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .dc-hero .phero__title { font-size: clamp(2.4rem, 1rem + 3.4vw, 4.75rem); }
  .dc-hero .btn--light { background: var(--blue-deep); color: var(--white); }
  @media (hover: hover) and (pointer: fine) { .dc-hero .btn--light:hover { background: var(--blue-ink); } }
  .dc-cam { margin: 0; }
  .dc-cam__frame { position: relative; aspect-ratio: 1344 / 752; overflow: hidden; border-radius: var(--radius); background: #17212A; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 70px -34px rgba(0, 0, 0, .75); }
  .dc-cam__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dc-cam__ui { position: absolute; inset: 0; font-family: var(--f-mono); color: var(--white); }
  .dc-cam__rec, .dc-cam__spd { position: absolute; top: 4.5%; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem; border-radius: 3px; background: rgba(23, 33, 42, .72); font-size: .75rem; letter-spacing: .06em; }
  .dc-cam__rec { left: 3%; }
  .dc-cam__rec i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
  .dc-cam__rec span { opacity: .8; }
  .dc-cam__spd { right: 3%; }
  .dc-cam__box { position: absolute; color: #8EC8FF; transition: color 240ms ease; }
  .dc-cam__box::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 3px;
    -webkit-mask: conic-gradient(at 12px 12px, transparent 75%, #000 0) 0 0 / calc(100% - 12px) calc(100% - 12px);
            mask: conic-gradient(at 12px 12px, transparent 75%, #000 0) 0 0 / calc(100% - 12px) calc(100% - 12px); }
  .dc-cam__box b { position: absolute; left: -2px; bottom: calc(100% + 6px); white-space: nowrap; padding: .22rem .45rem; border-radius: 3px; background: rgba(23, 33, 42, .8); color: var(--white); font-size: .6875rem; font-weight: 500; letter-spacing: .04em; transition: background-color 240ms ease; }
  .dc-cam__box--sign { left: 20.3%; top: 43.6%; width: 6.6%; height: 11.4%; }
  .dc-cam__box--truck { left: 43.3%; top: 47.6%; width: 10.7%; height: 20.2%; }
  .dc-cam__hw { display: inline-block; min-width: 2.4ch; font-variant-numeric: tabular-nums; }
  .dc-cam.is-alert .dc-cam__box--truck { color: var(--white); }
  .dc-cam.is-alert .dc-cam__box--truck b { background: var(--blue-deep); }
  .dc-cam__alert { position: absolute; left: 50%; bottom: 7%; display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem .7rem .85rem; border-radius: var(--radius); background: var(--blue-deep); font-family: var(--f-body); white-space: nowrap; transform: translateX(-50%); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6); }
  .dc-cam__alert svg { flex: none; width: 22px; height: 22px; }
  .dc-cam__alert b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; }
  .dc-cam__alert small { display: block; font-size: .75rem; opacity: .85; }
  .dc-cam__cap { margin-top: var(--s-3); font-size: var(--t-micro); color: rgba(255, 255, 255, .6); }
  .motion .dc-cam__box { opacity: 0; transform: scale(1.14); transition: opacity 260ms var(--ease-out), transform 460ms var(--ease-out), color 240ms ease; }
  .motion .dc-cam.is-play .dc-cam__box { opacity: 1; transform: none; }
  .motion .dc-cam.is-play .dc-cam__box--truck { transition-delay: 600ms, 600ms, 0ms; }
  .motion .dc-cam__alert { opacity: 0; transform: translate(-50%, 14px); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
  .motion .dc-cam.is-alert .dc-cam__alert { opacity: 1; transform: translate(-50%, 0); }

  .dc-watch { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-7); align-items: start; }
  .dc-watch__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .dc-grp__h { margin: 0 0 var(--s-4); padding-bottom: .6rem; border-bottom: 2px solid var(--ink); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
  .dc-grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
  .dc-grp li { display: grid; grid-template-columns: 28px 1fr; gap: .2rem .75rem; align-content: start; }
  .dc-grp li svg { grid-row: span 2; width: 28px; height: 28px; color: var(--blue-deep); }
  .dc-grp li b { font-family: var(--f-display); font-weight: 760; font-stretch: 106%; font-size: 1.125rem; line-height: 1.2; }
  .dc-grp li span { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
  .dc-watch__fine { margin-top: var(--s-5); padding-left: var(--s-3); border-left: 3px solid var(--blue-deep); font-size: var(--t-small); color: var(--ink-2); }

  .dc-proof { background: var(--white); }
  .dc-proof__h { margin: 0; font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.8rem, 1rem + 6vw, 7.5rem); line-height: .88; letter-spacing: -.012em; max-width: 13ch; text-wrap: balance; }
  .dc-proof__p { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
  .dc-proof__facts { margin: var(--s-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .dc-proof__facts div { padding-top: var(--s-3); border-top: 2px solid var(--ink); }
  .dc-proof__facts dt { font-family: var(--f-display); font-weight: 820; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1; color: var(--blue-deep); }
  .dc-proof__facts dd { margin: .6rem 0 0; color: var(--ink-2); line-height: 1.5; max-width: 34ch; }

  .dc-kit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-7); align-items: center; }
  .dc-kit__pic { margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-5); border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
  .dc-kit__pic img { width: min(406px, 86%); height: auto; }
  .dc-kit__spec { margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
  .dc-kit__spec div { padding: .8rem 0; border-top: 1px solid var(--line); }
  .dc-kit__spec dt { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
  .dc-kit__spec dd { margin: .25rem 0 0; font-weight: 600; line-height: 1.4; }
  .dc-kit__more { margin-top: var(--s-4); }
  .dc-kit__more a, .fam__more { color: var(--blue-deep); font-weight: 650; text-underline-offset: 3px; }

  .dc-office { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-7); align-items: start; background: var(--ink); color: var(--white); }
  .dc-office__h { margin: 0; font-family: var(--f-display); font-weight: 820; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem); line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
  .dc-office__p { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.45; color: rgba(255, 255, 255, .8); max-width: 34ch; }
  .dc-office__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
  .dc-office .btn--light { background: var(--blue-deep); color: var(--white); }
  .dc-office__tour { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: #8EC8FF; font-weight: 600; text-underline-offset: 3px; }
  .dc-office__tour svg { width: 18px; height: 18px; flex: none; }
  .dc-office__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
  .dc-office__list li { display: grid; gap: .45rem; align-content: start; padding-top: var(--s-4); border-top: 2px solid rgba(255, 255, 255, .14); }
  .dc-office__list svg { width: 30px; height: 30px; color: #8EC8FF; margin-bottom: .3rem; }
  .dc-office__list b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: 1.25rem; line-height: 1.15; }
  .dc-office__list span { color: rgba(255, 255, 255, .74); line-height: 1.55; max-width: 36ch; }

  @media (max-width: 1180px) {
    .dc-watch { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 899px) {
    .dc-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: calc(var(--hdr-h) + var(--s-6)) var(--g) var(--s-7); }
    .dc-kit, .dc-office { grid-template-columns: minmax(0, 1fr); }
    .dc-proof__facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  }
  @media (max-width: 759px) {
    .dc-watch__groups { grid-template-columns: minmax(0, 1fr); }
    .dc-office__list, .dc-kit__spec { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    .dc-cam__rec, .dc-cam__spd { font-size: .625rem; padding: .2rem .4rem; }
    .dc-cam__box b { font-size: .625rem; padding: .15rem .3rem; }
    .dc-cam__alert { gap: .5rem; padding: .45rem .7rem .45rem .55rem; bottom: 5%; }
    .dc-cam__alert svg { width: 18px; height: 18px; }
    .dc-cam__alert b { font-size: .8125rem; }
    .dc-cam__alert small { font-size: .625rem; }
  }
  .rs-how { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-6) var(--s-7); align-items: center; background: var(--white); }
  .rs-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: rs; }
  .rs-step { counter-increment: rs; display: grid; grid-template-columns: 3.25rem 1fr; gap: .3rem var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
  .rs-step:first-child { border-top: 2px solid var(--ink); }
  .rs-step::before { content: counter(rs, decimal-leading-zero); grid-row: span 2; font-family: var(--f-mono); font-size: .875rem; letter-spacing: .04em; color: var(--blue-deep); padding-top: .3rem; }
  .rs-step b { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.0625rem, .9rem + .45vw, 1.375rem); letter-spacing: .01em; line-height: 1.1; }
  .rs-step span { color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
  .rs-how__terms { margin-top: var(--s-4); padding-left: var(--s-3); border-left: 3px solid var(--blue-deep); font-size: var(--t-small); color: var(--ink-2); max-width: 46ch; }

  /* the co-branded page, drawn as a browser window */
  .rs-page { margin: 0; }
  .rs-page__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--paper-2); border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px var(--line); }
  .rs-page__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(32, 44, 52, .2); }
  .rs-page__bar span { margin-left: 12px; flex: 1; min-width: 0; padding: 4px 10px; border-radius: 4px; background: var(--white); font-family: var(--f-mono); font-size: .75rem; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-page__body { padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); background: var(--white); border-radius: 0 0 10px 10px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(32, 44, 52, .35); }
  .rs-page__brand { display: flex; align-items: center; gap: .75rem; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
  .rs-page__you { display: inline-grid; place-items: center; height: 34px; padding: 0 .85rem; border: 1.5px dashed rgba(32, 44, 52, .35); border-radius: 4px; font-family: var(--f-mono); font-size: .75rem; color: var(--steel); }
  .rs-page__x { font-family: var(--f-mono); font-size: .75rem; color: var(--steel); }
  .rs-page__brand img { width: 108px; height: auto; }
  .rs-page__h { margin-top: var(--s-5); font-family: var(--f-display); font-weight: 820; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: .98; letter-spacing: -.005em; max-width: 14ch; }
  .rs-page__p { margin-top: var(--s-3); color: var(--ink-2); max-width: 40ch; }
  .rs-page__btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); padding: 0 1.1rem; border-radius: var(--radius); background: var(--blue-deep); color: var(--white); font-weight: 650; font-size: .9375rem; }
  .rs-page__kit { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .rs-page__kit li { display: grid; gap: .15rem; padding: var(--s-3); background: var(--paper); border-radius: var(--radius); }
  .rs-page__kit img { width: 100%; height: 70px; object-fit: contain; margin-bottom: .4rem; }
  .rs-page__kit b { font-size: .875rem; line-height: 1.2; }
  .rs-page__kit small { font-size: .8125rem; color: var(--steel); }
  .rs-page__cap { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-2); }
  .motion .rs-page__kit li { transition: transform 600ms var(--ease-out) calc(var(--k, 0) * 80ms + 200ms), opacity 600ms var(--ease-out) calc(var(--k, 0) * 80ms + 200ms); }
  .motion .rs-page:not(.is-in) .rs-page__kit li { opacity: 0; transform: translateY(14px); }
  .rs-page__kit li:nth-child(2) { --k: 1; } .rs-page__kit li:nth-child(3) { --k: 2; }

  @media (max-width: 899px) {
    .rs-who, .rs-how { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .rs-who__pic { position: static; }
    .rs-who__pic span { aspect-ratio: 3 / 2; }
    .rs-who__list { grid-template-columns: 1fr; margin-top: var(--s-4); gap: var(--s-2); }
    .rs-who__i { padding: var(--s-3); }
    .rs-page__kit { gap: 6px; }
    .rs-page__kit li { padding: .6rem; }
    .rs-page__kit img { height: 48px; }
    .rs-page__kit small { display: none; }
  }

  /* footer: social icons, addresses set in Settings > Ezytrack contact */
  .ftr__social { display: flex; gap: .5rem; margin-top: var(--s-4); }
  .ftr__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: var(--white); transition: background-color var(--d-fast) ease, color var(--d-fast) ease, transform 140ms var(--ease-out); }
  .ftr__social a:active { transform: scale(.94); }
  @media (hover: hover) and (pointer: fine) { .ftr__social a:hover { background: var(--white); color: var(--ink); } }

}

/* page to page: a quick cross fade when a menu tab opens a page. Each page stands on its own, scrolling never changes page
   (James 9 Nov, Stuart: click a tab and it loads that page, no continual scroll). Chrome and Safari 18.2+, other browsers just load the page. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}