/* ==========================================================================
   Videolytical Systems — site stylesheet
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset and base
   3. Typography (headings, text sizes, long-form prose)
   4. Layout (container, sections, bands, grids)
   5. Components
      5.01 Skip link, icons, logo      5.11 Fact strip        5.21 Forms
      5.02 Buttons and text links      5.12 Steps             5.22 Contact routes
      5.03 Utility bar                 5.13 Tables            5.23 Diagram
      5.04 Header and navigation       5.14 Tags              5.24 Call-to-action band
      5.05 Kicker, section heading     5.15 Note              5.25 Footer
      5.06 Heroes, breadcrumb, facts   5.16 Accordion         5.26 Page not found
      5.07 Detection frame, media      5.17 In-page sub-nav
      5.08 Media-and-copy rows         5.18 Article
      5.09 Definition rows             5.19 List rows
      5.10 Link cards                  5.20 Datasheet
   6. Utilities
   7. Print
   8. Forced colours

   Mobile first. Breakpoints: 48em (768px), 64em (1024px), 80em (1280px).
   The author's manual for these classes is src/COMPONENTS.md.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Colour: the owner-approved set. Do not add colours. */
  --ink: #0C2632;
  --ink-deep: #081921;
  --brand: #457B93;
  --brand-light: #7FB4CA;
  --action: #136386;
  --action-hover: #0E4F6C;
  --tint: #EDF5F8;
  --mist: #F4F6F7;
  --paper: #FFFFFF;
  --line: #D5DDE2;
  --line-strong: #B8C4CB;
  --text: #24343D;
  --text-quiet: #55666F;
  --on-dark: #E9F0F3;
  --on-dark-quiet: #A9BBC4;
  --alert: #B42318;
  --ok: #1F7A54;
  --warn: #A15C07;

  /* Derived from the set above: no new colours */
  --white: var(--paper);                     /* the same white, named for text and controls on dark */
  --line-on-dark: rgba(233, 240, 243, 0.2);  /* hairlines on ink (--on-dark at 20%) */

  /* Type */
  --font: "Barlow", "Barlow fallback", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;

  /* Layout */
  --container: 75rem;
  --gutter: 1.5rem;
  --gap: 2rem;
  --section-y: 4rem;
  --measure: 68ch;               /* longest line of running text: about 85 characters in Barlow */
  --header-h: 3.75rem;
  --subnav-h: 3rem;
  --sticky-top: var(--header-h); /* what the sticky header covers; 0 where the header does not stick */
  --radius: 4px;
  --radius-media: 6px;

  /* Contextual colours. Components read these; dark bands redefine them. */
  --c-heading: var(--ink);
  --c-text: var(--text);
  --c-quiet: var(--text-quiet);
  --c-rule: var(--line);
  --c-rule-strong: var(--ink);
  --c-link: var(--action);
  --c-link-hover: var(--action-hover);
  --c-accent: var(--brand);
  --c-kicker: var(--action);
  --c-focus: var(--action);
  --btn-bg: var(--action);
  --btn-bg-hover: var(--action-hover);
  --btn-fg: var(--white);
  --btn2-line: var(--action);
  --btn2-fg: var(--action);
  --btn2-bg-hover: var(--tint);
}

@media (min-width: 48em) {
  :root { --gutter: 2rem; }
}

@media (min-width: 64em) {
  :root {
    --section-y: 6rem;
    --header-h: 4.5rem;
  }
}

/* Dark surfaces: the two heroes and the footer. Nothing else is dark.
   .on-dark exists for the rare block that must sit inside one of them. */
.hero,
.page-hero,
.site-footer,
.on-dark {
  --c-heading: var(--white);
  --c-text: var(--on-dark);
  --c-quiet: var(--on-dark-quiet);
  --c-rule: var(--line-on-dark);
  --c-rule-strong: rgba(233, 240, 243, 0.45);
  --c-link: var(--white);
  --c-link-hover: var(--brand-light);
  --c-accent: var(--brand-light);
  --c-kicker: var(--brand-light);
  --c-focus: var(--white);
  --btn-bg: var(--white);
  --btn-bg-hover: var(--tint);
  --btn-fg: var(--ink);
  --btn2-line: var(--on-dark-quiet);
  --btn2-fg: var(--white);
  --btn2-bg-hover: rgba(255, 255, 255, 0.1);
  background: var(--ink);
  color: var(--c-text);
}

/* Metric-matched fallback so text does not reflow when Barlow arrives */
@font-face {
  font-family: "Barlow fallback";
  src: local("Arial");
  size-adjust: 94%;
  ascent-override: 106%;
  descent-override: 21%;
  line-gap-override: 0%;
}


/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --anchor-offset: calc(var(--sticky-top) + 0.5rem);
}

/* Pages with an in-page sub-nav need room for it too */
html:has(.subnav) {
  --anchor-offset: calc(var(--sticky-top) + var(--subnav-h) + 0.5rem);
}

/* Anchor targets and focused controls stop below the sticky bars. This is a
   margin on the targets, not scroll-padding on the page: with scroll-padding
   the browser treats the sticky bars themselves as out of view and moves the
   page every time focus enters them. */
:where(main, .site-footer) :where([id], a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-top: var(--anchor-offset);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

img, video {
  height: auto;
}

a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--c-link-hover);
}

strong, b {
  font-weight: 600;
}

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

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4,
.h2, .h3, .h4 {
  color: var(--c-heading);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
}

h3, .h3 {
  font-size: 1.375rem;
  line-height: 1.3;
}

h4, .h4 {
  font-size: 1.125rem;
  line-height: 1.35;
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.55;
}

.small {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Label type. Every small condensed label on the site shares this one rule;
   the components below add only colour and spacing. */
.label,
.mega-heading,
.keyfacts-term,
.frame-label,
.card-kicker,
.table thead th,
.tag,
.list-row-meta,
.route-label,
.footer-heading {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.quiet {
  color: var(--c-quiet);
}

/* Long-form text. Written with :where() so component classes placed inside
   prose keep their own spacing. Works on raw tags because CMS rich fields
   deliver plain <p>, <ul>, <h3> markup. */
.prose {
  max-width: var(--measure);
}

.prose :where(p, ul, ol, blockquote, figure, div) {
  margin-bottom: 1.25rem;
}

.prose :where(h2) {
  margin-top: 3rem;
  margin-bottom: 0.875rem;
}

.prose :where(h3) {
  margin-top: 2.25rem;
  margin-bottom: 0.625rem;
}

.prose :where(h4) {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose :where(ul, ol) {
  padding-left: 1.375rem;
}

.prose :where(ul) {
  list-style: square;
}

.prose :where(ol) {
  list-style: decimal;
}

.prose :where(li + li) {
  margin-top: 0.5rem;
}

.prose :where(li)::marker {
  color: var(--action);
  font-weight: 600;
}

.prose :where(blockquote) {
  padding-left: 1.5rem;
  border-left: 2px solid var(--brand);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.5;
}

.prose :where(figure) {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.prose :where(:first-child) {
  margin-top: 0;
}

.prose :where(:last-child) {
  margin-bottom: 0;
}

.caption {
  max-width: var(--measure);
  margin-top: 0.75rem;
  color: var(--c-quiet);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* A plain bulleted list outside prose */
.bullets {
  max-width: var(--measure);
  padding-left: 1.375rem;
  list-style: square;
}

.bullets > li + li {
  margin-top: 0.5rem;
}

.bullets > li::marker {
  color: var(--action);
}


/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* A section that follows another of the same colour: no doubled gap */
.section-join {
  padding-top: 0;
}

.band-mist {
  background: var(--mist);
}

/* Twelve columns from 1024px; one column below. Children take .span-N. */
.grid {
  display: grid;
  gap: var(--gap);
}

/* Equal columns. Three and four pass through two on tablets. */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 48em) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .span-3 { grid-column-end: span 3; }
  .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; }
  .span-6 { grid-column-end: span 6; }
  .span-7 { grid-column-end: span 7; }
  .span-8 { grid-column-end: span 8; }
  .span-9 { grid-column-end: span 9; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
}

/* Vertical rhythm for a run of mixed blocks */
.stack > * + * {
  margin-top: 1rem;
}


/* ==========================================================================
   5. Components
   ========================================================================== */

/* 5.01 Skip link, icons, logo
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  border: 2px solid var(--action);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--action);
  font-weight: 600;
}

.skip-link:focus {
  top: 1rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--c-heading);
  text-decoration: none;
}

.logo:hover {
  color: var(--c-heading);
}

.logo-mark {
  width: 2.5rem;
  height: auto;
  fill: var(--brand);
}

.logo-word {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}


/* 5.02 Buttons and text links
   Inside a dark band both buttons switch to their on-dark colours.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary {
  border-color: var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-primary:hover {
  border-color: var(--btn-bg-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
}

.btn-secondary {
  border-color: var(--btn2-line);
  background: transparent;
  color: var(--btn2-fg);
}

.btn-secondary:hover {
  background: var(--btn2-bg-hover);
  color: var(--btn2-fg);
}

.btn-small {
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.9375rem;
}

/* A button that cannot be used right now. The enquiry script sets
   aria-disabled while it sends, so the button keeps keyboard focus. */
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg-hover: var(--btn-bg);
  --btn2-bg-hover: transparent;
  opacity: 0.6;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* Text link with a chevron cue: put <svg class="icon"> after the label.
   The link stays inline, so the chevron follows the last word when the label
   wraps. The padding adds tap height without moving anything. */
.link-more {
  padding-block: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.link-more:hover {
  text-decoration: underline;
}

.link-more > .icon,
.card-link > .icon {
  display: inline-block;
  margin-left: 0.125rem;
  vertical-align: -0.125em;
}


/* 5.03 Utility bar (desktop only; its links repeat in the mobile menu)
   -------------------------------------------------------------------------- */

.utility {
  display: none;
}

@media (min-width: 64em) {
  .utility {
    display: block;
    border-bottom: 1px solid var(--line);
    background: var(--mist);
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .utility-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.75rem;
    min-height: 2.25rem;
  }

  .utility-link {
    color: var(--text-quiet);
    text-decoration: none;
  }

  .utility-link:hover {
    color: var(--action);
    text-decoration: underline;
  }
}


/* 5.04 Header and navigation
   Without JavaScript the navigation is a plain wrapping list (small screens)
   or hover/focus panels (wide screens). With it, html carries .js and the
   list becomes a toggled menu below 1024px.
   .js is set by a one-line script in the head, before first paint. The same
   script takes it away again if js/site.js has not started the menus by the
   time the page has been read, so a blocked or broken script leaves the
   plain navigation, never a dead Menu button.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.is-scrolled {
  box-shadow: 0 1px 0 var(--line-strong);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
  min-height: var(--header-h);
}

.menu-btn {
  display: none;
}

.header-cta {
  display: none;
}

@media (min-width: 30em) {
  .header-cta {
    display: inline-flex;
    align-self: center;
  }
}

.nav-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--action);
}

.nav-toggle {
  display: none;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-quiet);
}

.js .nav-toggle {
  display: grid;
}

.nav-toggle:hover {
  color: var(--action);
}

/* The button is a tall strip. Its focus ring is drawn round the chevron, so
   the ring is a small square that stays inside the header. */
.nav-toggle:focus-visible {
  outline: none;
}

.nav-toggle:focus-visible > .nav-chevron {
  outline: 2px solid var(--c-focus);
  outline-offset: 0.25rem;
  border-radius: 1px;
}

.nav-chevron {
  transition: transform 0.15s;
}

[aria-expanded="true"] > .nav-chevron {
  transform: rotate(180deg);
}

.mega {
  display: none;
}

.is-open > .mega {
  display: grid;
}

.mega-heading {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-quiet);
}

.mega-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.mega-link:hover {
  background: var(--mist);
}

.mega-title {
  display: block;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}

.mega-link:hover > .mega-title {
  color: var(--action);
}

.mega-desc {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-quiet);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Small screens: the toggled menu. The one max-width block in this file:
   these rules exist only below the desktop navigation and would otherwise
   each need undoing at 64em. */
@media (max-width: 63.9375em) {
  .logo {
    margin-right: auto;
  }

  .site-nav {
    flex-basis: 100%;
    order: 5;
    padding-bottom: 1rem;
  }

  /* Without JavaScript the list is always open, so the header must not stick */
  html:not(.js) {
    --sticky-top: 0px;
  }

  html:not(.js) .site-header {
    position: static;
    padding-top: 1rem;
  }

  .header-cta {
    order: 3;
  }

  .js .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    order: 4;
    min-height: 2.75rem;
    margin-right: -0.5rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
  }

  .menu-btn-icon {
    position: relative;
    width: 1.25rem;
    height: 0.875rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }

  /* Bars are borders, not backgrounds, so they survive forced colours */
  .menu-btn-icon::before,
  .menu-btn-icon::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    border-top: 2px solid currentColor;
    transition: transform 0.15s;
  }

  [aria-expanded="true"] > .menu-btn-icon {
    border-width: 0;
  }

  [aria-expanded="true"] > .menu-btn-icon::before {
    transform: rotate(45deg);
  }

  [aria-expanded="true"] > .menu-btn-icon::after {
    transform: rotate(-45deg);
  }

  .js .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0;
    padding: 0.5rem var(--gutter) 2.5rem;
    border-top: 1px solid var(--line);
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-open .site-nav {
    display: block;
  }

  /* Lock the page behind the open menu. On the root element only: hiding
     overflow on body as well would make body the scroll container, and the
     sticky header would scroll away with the page. */
  .nav-open {
    overflow: hidden;
  }

  .nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--line);
  }

  .nav-link {
    padding: 0.875rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .nav-toggle {
    width: 3rem;
    font-size: 1.125rem;
  }

  .mega {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
  }

  .mega-group + .mega-group {
    margin-top: 1rem;
  }

  .mega-heading {
    margin-bottom: 0.25rem;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mega-link {
    padding: 0.6875rem 0;
  }

  .nav-extra {
    padding-top: 1.5rem;
  }

  .nav-extra-cta {
    width: 100%;
  }

  @media (min-width: 30em) {
    .nav-extra-cta {
      display: none;
    }
  }

  .nav-extra-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
  }

  .nav-extra-link {
    display: inline-block;
    padding-block: 0.625rem;
    color: var(--text-quiet);
  }

  /* The current section: a bar at the left edge as well as the colour */
  [data-nav="products"] [data-nav-item="products"] > .nav-link,
  [data-nav="solutions"] [data-nav-item="solutions"] > .nav-link,
  [data-nav="industries"] [data-nav-item="industries"] > .nav-link,
  [data-nav="cases"] [data-nav-item="cases"] > .nav-link,
  [data-nav="resources"] [data-nav-item="resources"] > .nav-link,
  [data-nav="company"] [data-nav-item="company"] > .nav-link {
    padding-left: 0.75rem;
    border-left: 3px solid var(--action);
    color: var(--action);
  }
}

/* Wide screens: one row, panels under the items */
@media (min-width: 64em) {
  .header-inner {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  .logo {
    align-self: center;
  }

  .logo-mark {
    width: 2.25rem;
  }

  .logo-word {
    font-size: 1.25rem;
  }

  .site-nav {
    display: flex;
    flex: 1;
    margin-left: 1.25rem;
  }

  .nav-list {
    display: flex;
  }

  .nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  /* Labels are editable. They never wrap; if an edit makes the row too long,
     site.js sets .header-tight and the button gives way. */
  .nav-link {
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  /* A link with a menu button after it hands the button its right padding */
  .js .nav-link:not(:only-child) {
    padding-right: 0.125rem;
  }

  /* 24px wide and the full height of the header: a fair target for a finger */
  .nav-toggle {
    width: 1.5rem;
    font-size: 0.8125rem;
  }

  .nav-extra {
    display: none;
  }

  .header-cta {
    margin-left: 0.75rem;
    white-space: nowrap;
  }

  .header-tight .header-cta {
    display: none;
  }

  .mega {
    position: absolute;
    top: 100%;
    left: -0.9375rem;
    z-index: 10;
    width: max-content;
    min-width: 16rem;
    max-width: 22rem;
    padding: 1rem 0.75rem 0.75rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-media) var(--radius-media);
    background: var(--paper);
    box-shadow: 0 18px 32px -12px rgba(12, 38, 50, 0.22);
    clip-path: inset(0 -3rem -3rem -3rem);
  }

  /* Wide enough for each description to stay on one line */
  .mega-wide {
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    width: 47rem;
    max-width: none;
  }

  .mega-heading {
    margin-inline: 0.75rem;
  }

  /* No JavaScript: panels open on hover and keyboard focus */
  html:not(.js) .nav-item:hover > .mega,
  html:not(.js) .nav-item:focus-within > .mega {
    display: grid;
  }

  /* The current section, marked on the bottom edge of the header.
     A border, not a shadow, so it survives forced colours. */
  [data-nav="products"] [data-nav-item="products"]::after,
  [data-nav="solutions"] [data-nav-item="solutions"]::after,
  [data-nav="industries"] [data-nav-item="industries"]::after,
  [data-nav="cases"] [data-nav-item="cases"]::after,
  [data-nav="resources"] [data-nav-item="resources"]::after,
  [data-nav="company"] [data-nav-item="company"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    border-bottom: 2px solid var(--brand);
    pointer-events: none;
  }
}

@media (min-width: 80em) {
  .logo-mark {
    width: 2.5rem;
  }

  .logo-word {
    font-size: 1.375rem;
  }

  .site-nav {
    margin-left: 2.25rem;
  }

  .nav-link {
    padding: 0 0.875rem;
    font-size: 1rem;
  }

  .nav-toggle {
    margin-right: 0.25rem;
  }

  .mega {
    left: -0.6875rem;
  }
}


/* 5.05 Kicker and section heading
   -------------------------------------------------------------------------- */

.kicker {
  margin-bottom: 0.75rem;
  color: var(--c-kicker);
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.section-head {
  display: grid;
  gap: 1rem var(--gap);
  margin-bottom: 2.5rem;
}

.section-intro {
  max-width: 38rem;
}

@media (min-width: 64em) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: baseline;
    margin-bottom: 3.5rem;
  }

  .section-title {
    grid-column: 1 / span 6;
  }

  .section-intro {
    grid-column: 7 / span 6;
  }
}


/* 5.06 Heroes, breadcrumb, key facts
   -------------------------------------------------------------------------- */

.hero {
  padding-block: 3rem 3.5rem;
}

.hero-grid {
  display: grid;
  gap: 3rem var(--gap);
  align-items: center;
}

.hero-title {
  color: var(--c-heading);
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.55;
}

.hero-actions {
  margin-top: 2rem;
}

.page-hero {
  padding-block: 1.25rem 3rem;
}

.page-hero-grid {
  display: grid;
  gap: 2.5rem var(--gap);
  margin-top: 2rem;
}

.page-lead {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: 1.25rem;
  line-height: 1.55;
}

/* Stacked under the copy (below 1024px) the image keeps a modest size */
.page-hero-media {
  max-width: 30rem;
}

@media (min-width: 64em) {
  .hero {
    padding-block: 5rem 5.5rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .page-hero {
    padding-block: 1.5rem 4.5rem;
  }

  .page-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    margin-top: 3rem;
  }

  .page-hero-copy {
    grid-column: 1 / span 7;
  }

  .page-hero-aside {
    grid-column: 9 / span 4;
  }

  .page-hero-media {
    grid-column: 8 / span 5;
    max-width: none;
  }
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  color: var(--c-quiet);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* The padding adds tap height; the negative margin keeps the row where it was */
.breadcrumb-link {
  margin-block: -0.6875rem;
  padding-block: 0.6875rem;
  color: var(--c-quiet);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--c-heading);
  text-decoration: underline;
}

/* A short list of labelled facts: hero aside, case summaries */
.keyfacts {
  border-top: 1px solid var(--c-rule-strong);
}

.keyfacts-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-rule);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.keyfacts-term {
  color: var(--c-quiet);
}

.keyfacts-value {
  color: var(--c-text);
}


/* 5.07 Detection frame and plain media
   The site's one signature: corner brackets just outside a key image and an
   optional label tab, drawn like the product's own bounding boxes.
   The brackets are a grid item sharing the image's cell, so they follow the
   image whether or not a label or caption is present.
   -------------------------------------------------------------------------- */

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.5rem;
}

/* Inside an article a frame keeps the spacing of any other figure */
.prose .frame {
  margin-block: 2.5rem;
}

.frame::before {
  content: "";
  grid-area: 2 / 1;
  margin: -0.5rem;
  pointer-events: none;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) left top / 18px 2px,
    linear-gradient(var(--c-accent), var(--c-accent)) left top / 2px 18px,
    linear-gradient(var(--c-accent), var(--c-accent)) right top / 18px 2px,
    linear-gradient(var(--c-accent), var(--c-accent)) right top / 2px 18px,
    linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 18px 2px,
    linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 2px 18px,
    linear-gradient(var(--c-accent), var(--c-accent)) right bottom / 18px 2px,
    linear-gradient(var(--c-accent), var(--c-accent)) right bottom / 2px 18px;
  background-repeat: no-repeat;
}

.frame > * {
  grid-area: 2 / 1;
}

.frame img {
  width: 100%;
  border-radius: 2px;
}

.frame > .frame-label {
  grid-area: 1 / 1;
  justify-self: start;
  margin: 0 0 0.5rem -0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--action);
  color: var(--white);
}

/* The caption starts on the same left edge as the label tab and the text around the frame */
.frame > .frame-caption {
  grid-area: 3 / 1;
  margin: 1.25rem -0.5rem 0;
}

/* Home hero only: the brackets settle into place once */
@media (prefers-reduced-motion: no-preference) {
  .frame-settle::before {
    animation: frame-settle 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards;
  }
}

@keyframes frame-settle {
  from {
    margin: -1.125rem;
    opacity: 0;
  }
}

/* An image that is not framed */
.media {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}


/* 5.08 Media-and-copy rows
   -------------------------------------------------------------------------- */

.media-row {
  display: grid;
  gap: 2rem var(--gap);
  align-items: center;
}

.media-row + .media-row {
  margin-top: 4rem;
}

.media-row-copy {
  max-width: var(--measure);
}

.media-row-copy > * + * {
  margin-top: 1rem;
}

@media (min-width: 64em) {
  .media-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .media-row + .media-row {
    margin-top: 6rem;
  }

  .media-row-media {
    grid-area: 1 / 1 / auto / span 7;
  }

  .media-row-copy {
    grid-area: 1 / 9 / auto / span 4;
  }

  .media-row-flip > .media-row-media {
    grid-area: 1 / 6 / auto / span 7;
  }

  .media-row-flip > .media-row-copy {
    grid-area: 1 / 1 / auto / span 4;
  }
}


/* 5.09 Definition rows: the default way to present capabilities
   -------------------------------------------------------------------------- */

.def-list {
  border-top: 1px solid var(--c-rule-strong);
}

.def-row {
  display: grid;
  gap: 0.375rem var(--gap);
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.def-term {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.def-row > dd {
  max-width: var(--measure);
}

@media (min-width: 48em) {
  .def-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    padding-block: 1.5rem;
  }
}


/* 5.10 Link cards: navigation tiles only
   The title link covers the whole card.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--paper);
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--action);
}

.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.card-kicker {
  color: var(--text-quiet);
}

.card-title {
  font-size: 1.125rem;
  line-height: 1.35;
}

/* Inline, so the chevron follows the last word of a title that wraps */
.card-link {
  color: var(--ink);
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-media);
}

.card-link:hover {
  color: var(--action);
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.card-text {
  color: var(--text-quiet);
  font-size: 0.9375rem;
  line-height: 1.5;
}


/* 5.11 Fact strip: static figures
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--gap);
}

.fact {
  padding-top: 1rem;
  border-top: 1px solid var(--c-rule-strong);
}

.fact-value {
  display: block;
  color: var(--c-heading);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.fact-label {
  display: block;
  margin-top: 0.375rem;
  color: var(--c-quiet);
  font-size: 0.9375rem;
  line-height: 1.4;
}

@media (min-width: 48em) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* 5.12 Steps: true sequences only. Numbers come from a CSS counter.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  border-top: 1px solid var(--c-rule-strong);
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  color: var(--action);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
}

.step-title {
  max-width: var(--measure);
  font-size: 1.125rem;
  line-height: 1.35;
}

.step-text {
  grid-column: 2;
  max-width: var(--measure);
}

/* Short steps side by side on wide screens */
@media (min-width: 64em) {
  .steps-across {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--gap);
    border-top: 0;
  }

  .steps-across > .step {
    display: block;
    padding-block: 1rem 0;
    border-top: 1px solid var(--c-rule-strong);
    border-bottom: 0;
  }

  .steps-across > .step::before {
    display: block;
    margin-bottom: 0.5rem;
  }

  .steps-across .step-text {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}


/* 5.13 Tables
   Always inside .table-wrap, which scrolls sideways on phones.
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-top: 1px solid var(--c-rule-strong);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

.table th,
.table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--tint);
  color: var(--ink);
  white-space: nowrap;
}

.table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.table-caption {
  padding: 0 0 0.75rem;
  color: var(--text-quiet);
  font-size: 0.9375rem;
  text-align: left;
  caption-side: top;
}

/* Spec table: two columns, the label column kept narrow. The table is capped
   so that the value column stays within the reading measure. */
.table-spec {
  max-width: 60rem;
}

.table-spec tbody th {
  width: 38%;
  padding-left: 0;
}

.table-spec td {
  padding-right: 0;
}

/* Comparison table: three or more columns; scrolls on phones */
.table-compare {
  min-width: 42rem;
}

.table-compare tbody th {
  white-space: nowrap;
}

@media (min-width: 48em) {
  .table-spec tbody th {
    width: 30%;
  }
}


/* 5.14 Status tags: a quiet outline with a small status square
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
}

.tag::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--tag-color, var(--text-quiet));
}

.tag-info { --tag-color: var(--action); }
.tag-ok { --tag-color: var(--ok); }
.tag-warn { --tag-color: var(--warn); }
.tag-alert { --tag-color: var(--alert); }


/* 5.15 Note
   -------------------------------------------------------------------------- */

.note {
  max-width: calc(var(--measure) + 3rem);
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--brand);
  background: var(--tint);
}

.note-title {
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-weight: 600;
}


/* 5.16 Accordion on native <details>
   -------------------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--c-rule-strong);
}

.accordion-item {
  border-bottom: 1px solid var(--line);
}

.accordion-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.125rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary:hover {
  color: var(--action);
}

/* Plus sign that becomes a minus when open */
.accordion-summary::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.3125rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px,
    linear-gradient(currentColor, currentColor) center / 2px 100%;
  background-repeat: no-repeat;
}

[open] > .accordion-summary::after {
  background-size: 100% 2px, 0 0;
}

.accordion-title {
  color: inherit;
  font: inherit;
}

.accordion-body {
  max-width: var(--measure);
  padding-bottom: 1.5rem;
}


/* 5.17 In-page sub-nav: sticks under the header on long pages
   -------------------------------------------------------------------------- */

.subnav {
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.subnav-list {
  display: flex;
  gap: 1.75rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.subnav-list::-webkit-scrollbar {
  display: none;
}

/* When the list is wider than the screen, site.js names the clipped side
   and that edge fades out: the cue that the bar scrolls sideways. */
.subnav-list[data-clip="end"] {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem);
  mask-image: linear-gradient(to left, transparent, #000 3rem);
}

.subnav-list[data-clip="start"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem);
  mask-image: linear-gradient(to right, transparent, #000 3rem);
}

.subnav-list[data-clip="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* The links live in a sticky bar: focus must never scroll the page to them */
.subnav-link {
  display: block;
  height: var(--subnav-h);
  scroll-margin-top: 0;
  color: var(--text-quiet);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: calc(var(--subnav-h) + 2px);
  text-decoration: none;
}

.subnav-link:hover {
  color: var(--ink);
}

.subnav-link:focus-visible {
  outline-offset: -2px;
}

.subnav-link[aria-current] {
  border-bottom: 2px solid var(--action);
  color: var(--ink);
}


/* 5.18 Article
   -------------------------------------------------------------------------- */

/* A rule divides the items. Every item draws its rule at its own left edge,
   and the paragraph clips that edge, so the first item on a line (also after
   a wrap) starts clean. */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  margin-top: 1.5rem;
  overflow: hidden;
  color: var(--c-quiet);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.article-meta-item {
  margin: 0 2rem 0 calc(-1rem - 1px);
  padding-left: 1rem;
  border-left: 1px solid var(--c-rule);
}

.related {
  padding-top: 1rem;
  border-top: 1px solid var(--c-rule-strong);
}

.related-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

.related-item {
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* The link fills its row, so the whole row is the tap target */
.related-link {
  display: block;
  padding-block: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}

.related-link:hover {
  text-decoration: underline;
}


/* 5.19 List rows: articles and resources
   The title link covers the whole row.
   -------------------------------------------------------------------------- */

.list-rows {
  border-top: 1px solid var(--c-rule-strong);
}

.list-row {
  position: relative;
  display: grid;
  gap: 0.375rem var(--gap);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.list-row-meta {
  color: var(--text-quiet);
}

.list-row-title {
  font-size: 1.375rem;
  line-height: 1.3;
}

.list-row-link {
  color: var(--ink);
  text-decoration: none;
}

.list-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.list-row-link:hover {
  color: var(--action);
}

.list-row-link:focus-visible {
  outline: none;
}

.list-row-link:focus-visible::after {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.list-row-text {
  max-width: var(--measure);
  margin-top: 0.375rem;
  color: var(--text-quiet);
}

.list-row-cue {
  display: none;
}

@media (min-width: 48em) {
  .list-row {
    grid-template-columns: 9rem minmax(0, 1fr) 1.5rem;
    padding-block: 1.75rem;
  }

  .list-row-meta {
    padding-top: 0.5rem;
  }

  .list-row-cue {
    display: block;
    align-self: center;
    justify-self: end;
    color: var(--brand);
    font-size: 1.125rem;
  }
}


/* 5.20 Datasheet: the block a product page prints (see 7. Print)
   -------------------------------------------------------------------------- */

/* The head is as wide as the spec table under it (5.13) */
.datasheet-head {
  display: grid;
  gap: 1.5rem var(--gap);
  max-width: 60rem;
  margin-bottom: 2.5rem;
}

.datasheet-summary {
  max-width: var(--measure);
  margin-top: 0.875rem;
}

.datasheet-contact {
  display: none;
}

/* The print button needs the script */
html:not(.js) [data-print] {
  display: none;
}

@media (min-width: 64em) {
  .datasheet-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}


/* 5.21 Forms
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  gap: 1.25rem var(--gap);
}

@media (min-width: 48em) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-full {
    grid-column: 1 / -1;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.field-label {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.field-optional {
  margin-left: 0.25em;
  color: var(--text-quiet);
  font-weight: 400;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--text-quiet);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

.textarea {
  min-height: 9rem;
  resize: vertical;
}

.select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2324343D' stroke-width='1.75'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  appearance: none;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ink);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--action);
  outline-offset: 0;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: inset 0 0 0 1px var(--alert);
}

.field-help {
  color: var(--text-quiet);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.field-error {
  color: var(--alert);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
}

.form-status {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--text-quiet);
  background: var(--mist);
  color: var(--ink);
}

/* Empty, the region takes no space but stays rendered: a live region that is
   display:none when its text arrives is not announced reliably. */
.form-status:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.form-status-ok {
  border-left-color: var(--ok);
}

.form-status-error {
  border-left-color: var(--alert);
}


/* 5.22 Contact routes
   -------------------------------------------------------------------------- */

.routes {
  display: grid;
  gap: 1.75rem var(--gap);
}

.route {
  padding-top: 1rem;
  border-top: 1px solid var(--c-rule-strong);
}

.route-label {
  color: var(--c-quiet);
}

.route-value {
  margin-top: 0.25rem;
  color: var(--c-heading);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The padding adds tap height; the negative margin keeps the text where it was */
.route-link {
  display: inline-block;
  margin-block: -0.6875rem;
  padding-block: 0.6875rem;
  text-decoration: none;
}

.route-link:hover {
  text-decoration: underline;
}

.route-note {
  margin-top: 0.375rem;
  color: var(--c-quiet);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 48em) {
  .routes-across {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .routes-across {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }
}


/* 5.23 Diagram: inline SVG drawn with the tokens
   A diagram is drawn 960 units wide and always shown 60rem wide, so one unit
   is one pixel and its text is exactly the size set here. It is never scaled
   down to fit. Below 1024px the figure scrolls sideways instead.
   -------------------------------------------------------------------------- */

.diagram {
  overflow-x: auto;
}

.diagram-svg {
  width: 60rem;
  max-width: none;
  height: auto;
  font-family: var(--font);
}

.d-box {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.d-box-key {
  fill: var(--tint);
  stroke: var(--brand);
}

.d-box-side {
  fill: var(--mist);
  stroke: var(--line-strong);
  stroke-dasharray: 4 3;
}

.d-title {
  fill: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.d-text {
  fill: var(--text-quiet);
  font-size: 15px;
}

.d-label {
  fill: var(--text-quiet);
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.d-arrow {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
}

.d-arrowhead {
  fill: var(--brand);
}


/* 5.24 Call-to-action band: light, left-aligned, last block before the footer
   -------------------------------------------------------------------------- */

.cta {
  padding-block: 3.5rem;
  border-top: 1px solid var(--line);
  background: var(--tint);
}

.cta-inner {
  display: grid;
  gap: 1.75rem var(--gap);
}

.cta-text {
  max-width: 38rem;
  margin-top: 0.75rem;
}

@media (min-width: 64em) {
  .cta {
    padding-block: 4.5rem;
  }

  .cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4rem;
  }
}


/* 5.25 Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 3.5rem 2rem;
  background: var(--ink-deep);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-top {
  display: grid;
  gap: 2.5rem var(--gap);
}

.footer-tagline {
  max-width: 22rem;
  margin-top: 1.25rem;
  color: var(--on-dark);
}

.footer-address {
  max-width: 16rem;
  margin-top: 1rem;
  color: var(--on-dark-quiet);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--gap);
}

.footer-heading {
  margin-bottom: 0.75rem;
  color: var(--on-dark-quiet);
}

.footer-link {
  display: inline-block;
  padding-block: 0.3125rem;
  color: var(--on-dark);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Finger-sized rows on touch screens */
@media (pointer: coarse) {
  .footer-link {
    padding-block: 0.6875rem;
  }
}

.footer-contact {
  margin-top: 3rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  color: var(--on-dark-quiet);
}

@media (min-width: 48em) {
  .footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Always three routes: one row from tablets up */
  .footer-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .site-footer {
    padding-block: 5rem 2rem;
  }

  .footer-top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / span 4;
  }

  .footer-nav {
    grid-column: 5 / span 8;
  }

  .footer-contact {
    margin-top: 4rem;
  }
}


/* 5.26 Page not found
   .notfound marks the decorative frame so that print can leave it out.
   -------------------------------------------------------------------------- */

.notfound-code {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--ink-deep);
  color: var(--on-dark-quiet);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}


/* ==========================================================================
   6. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.measure {
  max-width: var(--measure);
}

/* Space above a block that follows another inside one section */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }


/* ==========================================================================
   7. Print
   Every page prints without site chrome. A page that contains #datasheet
   prints only that block: logo, product name, summary, spec table, contact
   line. site.js adds .has-datasheet to <html>; a product page also sets it
   as bodyClass so printing works without JavaScript.
   ========================================================================== */

@media print {
  @page {
    margin: 16mm 15mm;
  }

  :root {
    --section-y: 1.5rem;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .skip-link,
  .utility,
  .site-nav,
  .menu-btn,
  .header-cta,
  .subnav,
  .cta,
  .site-footer,
  .breadcrumb,
  .actions,
  .form-actions,
  [data-print] {
    display: none !important;
  }

  .site-header {
    position: static;
    margin-bottom: 1.25rem;
    border-bottom: 1.5pt solid var(--ink);
    box-shadow: none;
  }

  .header-inner {
    min-height: 0;
    padding-bottom: 0.75rem;
  }

  .container {
    max-width: none;
    padding-inline: 0;
  }

  .hero,
  .page-hero,
  .on-dark {
    --c-heading: var(--ink);
    --c-text: var(--text);
    --c-quiet: var(--text-quiet);
    --c-rule: var(--line);
    --c-rule-strong: var(--ink);
    --c-link: var(--ink);
    --c-accent: var(--brand);
    --c-kicker: var(--text-quiet);
    padding-block: 0 1rem;
    background: none;
  }

  .band-mist {
    background: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  h1 { font-size: 22pt; }
  h2, .h2 { font-size: 16pt; }
  h3, .h3 { font-size: 12.5pt; }

  h2, h3, h4,
  figure,
  .frame,
  .def-row,
  .step,
  .card,
  .list-row,
  .table tr {
    break-inside: avoid;
  }

  h2, h3, h4 {
    break-after: avoid;
  }

  .table-wrap,
  .diagram {
    overflow: visible;
  }

  .table-compare {
    min-width: 0;
  }

  .table-spec,
  .datasheet-head {
    max-width: none;
  }

  .diagram-svg {
    width: 100%;
  }

  /* Paper is narrower than a tablet, so the screen rules would stack
     everything in one column. Set the columns for paper. */
  .grid-2,
  .footer-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .def-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  .media,
  .frame {
    max-width: 70%;
  }

  /* Backgrounds are not printed: the frame loses its brackets and its label
     becomes plain dark text. */
  .frame {
    margin: 0;
  }

  .frame::before,
  .notfound {
    display: none;
  }

  .frame > .frame-label {
    margin-left: 0;
    padding-left: 0;
    background: none;
    color: var(--ink);
  }

  .frame > .frame-caption {
    margin-inline: 0;
  }

  .table thead th {
    background: none;
    border-bottom: 1pt solid var(--ink);
  }

  /* Datasheet pages: only the datasheet block */
  .has-datasheet main > :not(#datasheet) {
    display: none;
  }

  .has-datasheet .datasheet {
    padding: 0;
    background: none;
  }

  .datasheet-head {
    margin-bottom: 1.25rem;
  }

  .datasheet-title {
    font-size: 22pt;
  }

  .datasheet .table {
    font-size: 10pt;
  }

  .datasheet .table th,
  .datasheet .table td {
    padding-block: 0.4rem;
  }

  .datasheet-contact {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1pt solid var(--ink);
    font-size: 9.5pt;
    line-height: 1.5;
  }
}


/* ==========================================================================
   8. Forced colours (Windows high contrast)
   The browser drops background images and gradients and repaints the rest in
   system colours. Most components already draw their cues with borders and
   text; these two do not.
   ========================================================================== */

@media (forced-colors: active) {
  /* The drawn arrow would be dark on a dark field: use the native control */
  .select {
    padding-right: 0.75rem;
    background-image: none;
    appearance: auto;
  }

  /* The plus and minus are drawn with gradients: use characters instead */
  .accordion-summary::after {
    content: "+";
    width: auto;
    height: auto;
    margin-top: 0;
    background: none;
    font-weight: 400;
    line-height: 1.35;
  }

  [open] > .accordion-summary::after {
    content: "\2212";
  }
}