/* ===================================================================
   Site v2 design system. Self-contained: reset, page shell (header,
   footer, breadcrumbs), components and utilities all live in this file;
   nothing depends on the legacy style.css any more.
   Tokens: cool-grey paper, navy ink, one accent per line at matched
   lightness. Manrope for headings, IBM Plex Sans for reading,
   IBM Plex Mono for anything that reads like a datasheet.

   Contents
     1. tokens            5. layout primitives, type scale, section rhythm
     2. reset and base    6. controls and cards
     3. header / nav      7. panels, tables, hero, misc components
     4. breadcrumbs,      8. page-specific blocks (forms, prose, contact,
        footer               blog), motion, reduced motion

   Type scale (use the variables, or the classes that carry them):
     --fs-h1-home  .v2-display            home page h1
     --fs-h1-line  .v2-display--line      h1 of a solution line
     --fs-h1-sub   .v2-display--sub       h1 of a sub page (.v2-pagehead h1)
     --fs-h2       .v2-h2 / .v2-head h2   section heading
     --fs-h3-card  .v2-h3 / .v2-card h3   card title
     --fs-lead     .v2-lead               lead paragraph
   Section rhythm: .v2-section 72px block (48px phone),
                   .v2-section--tight 40px block (32px phone).
   =================================================================== */
:root {
  --ink: #0B1526;
  --ink-2: #101E33;
  --ink-line: #1B2C47;
  --paper: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --line: #D9DEE7;
  --line-strong: #C5CCD8;      /* decorative dividers only */
  --control-border: #7C8798;   /* input and button outlines: 3.6:1 on white (WCAG 1.4.11) */
  --ink-control-border: #5271A0; /* outlines on ink: 3.7:1 */
  --text: #0B1526;
  --text-2: #3B4657;
  --muted: #5B6676;
  --on-ink: #E6EBF2;
  --on-ink-muted: #9AA7B8;
  --amber: #F2B266;

  --gpr: #B4530A;      --gpr-deep: #8A3F06;      --gpr-tint: #FBF1E4;
  --rf: #0E63A8;       --rf-deep: #0A4F87;       --rf-tint: #E6F0FA;
  --coverage: var(--rf); --coverage-deep: var(--rf-deep); --coverage-tint: var(--rf-tint);
  --sdr: #0F766E;      --sdr-deep: #0B5A54;      --sdr-tint: #E3F3F1;
  --sensing: #5546C9;  --sensing-deep: #3F339E;  --sensing-tint: #ECEAFB;

  --font-display: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-control: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --container: 1200px;
  --gutter: 20px;
  --hit: 44px;                 /* minimum touch target on phones */

  /* type scale */
  --fs-h1-home: clamp(2.4rem, 5vw, 3.75rem);
  --fs-h1-line: clamp(2.2rem, 4.5vw, 3.4rem);
  --fs-h1-sub: clamp(2rem, 3.6vw, 2.8rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h3-card: 1.25rem;
  --fs-lead: 1.125rem;

  /* section rhythm */
  --section-y: 72px;
  --section-y-tight: 40px;

  /* sticky chrome; site-v2.js overwrites both with the measured heights */
  --header-h: 72px;
  --subnav-h: 0px;
}
html:has(.v2-subnav) { --subnav-h: 47px; }
@media (max-width: 768px) {
  :root { --header-h: 60px; --section-y: 48px; --section-y-tight: 32px; }
  html:has(.v2-subnav) { --subnav-h: 46px; }
}

/* ---- 2. reset and base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* in-page anchors land below the sticky header and, on the GPR pages, the sub-navigation */
  scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 16px);
}
/* a section with no v2 padding class still gets a sensible default (zero specificity) */
:where(main > section, main > article > section) { padding-block: 56px; }

*, body { font-family: var(--font-body); }
body { background: var(--paper); color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
h1 { font-size: var(--fs-h1-line); line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3-card); font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
h5 { font-size: 1.05rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }
p { font-size: 1em; line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }
small { font-size: 0.9em; line-height: 1.6; }
ul li { margin-bottom: 10px; }
a { color: var(--rf); }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 3px solid var(--rf); outline-offset: 2px; }
.v2-panel :focus-visible, .v2-cta :focus-visible, .v2-section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--amber); }

/* Headings inherit the light text colour inside dark containers, whether
   the container is a v2 panel or an inline-styled dark block. */
.v2-panel :is(h1, h2, h3, h4), .v2-cta :is(h1, h2, h3, h4), .v2-section--ink :is(h1, h2, h3, h4),
[style*="color: white"] :is(h1, h2, h3, h4, h5, h6), [style*="color:white"] :is(h1, h2, h3, h4, h5, h6),
[style*="color: #fff"] :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

.skip-to-content { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 0 0 8px 8px; z-index: 10000; transition: top .2s ease; }
.skip-to-content:focus { top: 0; }
.skip-to-content:focus-visible { outline-color: var(--amber); }

/* ---- 3. header and navigation --------------------------------------- */
nav.main-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px;
  /* brand and links line up with the page container on wide screens */
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
nav.main-nav a { text-decoration: none; }
/* brand: logo, then a name block. The same structure on every page; a
   solution line shows the line name over "Rays Technology", other pages
   show the company name alone. */
nav.main-nav .nav-brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
nav.main-nav .brand-home { display: flex; align-items: center; justify-content: center; flex: none; min-height: var(--hit); min-width: var(--hit); margin-inline: -6px; }   /* 44 x 44 hit area around the 31 px logo */
nav.main-nav .brand-home img { display: block; height: 36px; width: auto; }
.brand-lockup { display: flex; flex-direction: column; justify-content: center; align-self: center; gap: 4px; line-height: 1.05; min-width: 0; border-left: 1px solid var(--line); padding-left: 12px; }
.brand-lockup--solo { border-left: 0; padding-left: 0; gap: 0; }
nav.main-nav .brand-line { display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
nav.main-nav .brand-line:hover { color: var(--rf); }
nav.main-nav .brand-parent { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
nav.main-nav .nav-brand--gpr .brand-line { color: var(--gpr-deep); }
nav.main-nav .nav-brand--coverage .brand-line { color: var(--rf-deep); }
nav.main-nav .nav-brand--sensing .brand-line { color: var(--sensing-deep); }
nav.main-nav .nav-brand--sdr .brand-line { color: var(--sdr-deep); }

nav.main-nav .nav-links { display: flex; align-items: center; gap: 28px; }
nav.main-nav .nav-links > a,
nav.main-nav .nav-dropdown-toggle {
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--text);
  padding: 8px 2px; background: none; border: 0; border-radius: 0; cursor: pointer;
  transition: color .15s;
}
nav.main-nav .nav-links > a:hover, nav.main-nav .nav-dropdown-toggle:hover { color: var(--rf); }
nav.main-nav .nav-links > a.active { color: var(--rf); box-shadow: inset 0 -2px 0 var(--rf); }
nav.main-nav .nav-links > a.nav-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border-radius: var(--r-control); background: var(--ink); color: #fff; font-weight: 600; box-shadow: none;
}
nav.main-nav .nav-links > a.nav-cta:hover { background: #17284a; color: #fff; }
/* marker on links that lead to an English-only page */
nav.main-nav small, .site-footer small { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; color: var(--muted); }
nav.main-nav .nav-cta small { color: inherit; opacity: .8; }
.site-footer small { color: var(--on-ink-muted); }

.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle span[aria-hidden] { font-size: .8em; margin-left: 2px; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; z-index: 1;
  min-width: 320px; margin-top: 10px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(11,21,38,.12);
}
.nav-dropdown-menu a { display: block; padding: 12px 18px; margin: 2px 0; font-weight: 500; font-size: 14.5px; color: var(--text); white-space: nowrap; border-radius: 6px; transition: background .15s, color .15s; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--surface-2); color: var(--rf); }
.nav-dropdown-menu a:focus-visible { outline-offset: -3px; }
.nav-dropdown-menu a .nav-sub { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-top: 2px; }
.nav-dropdown-menu a.nav-child { padding-left: 34px; font-size: 13.5px; color: var(--text-2); }
.nav-dropdown-menu a.nav-child::before { content: '└'; font-family: var(--font-mono); color: var(--muted); margin-left: -16px; margin-right: 6px; }
.nav-dropdown-menu .nav-divider { display: block; height: 1px; background: var(--line); margin: 6px 12px; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: var(--hit); height: var(--hit); padding: 0 9px; background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer; }
.hamburger-line { display: block; width: 100%; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* desktop: the menu fades in on hover, focus or when site-v2 marks it open */
@media (min-width: 769px) {
  nav.main-nav .nav-dropdown-menu { max-height: calc(100vh - var(--header-h, 72px) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  nav.main-nav .nav-dropdown-menu a.nav-child { padding-top: 7px; padding-bottom: 7px; margin: 0; }
  nav.main-nav .nav-dropdown-menu { display: block; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; pointer-events: none; }
  nav.main-nav .nav-dropdown.is-open .nav-dropdown-menu,
  html:not(.js) nav.main-nav .nav-dropdown:hover .nav-dropdown-menu,
  html:not(.js) nav.main-nav .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease; pointer-events: auto; }
}

/* phones: hamburger and a panel that drops from the header */
@media (max-width: 768px) {
  nav.main-nav { height: 60px; gap: 8px; padding: 0 var(--gutter); }
  .brand-lockup { padding-left: 10px; }
  nav.main-nav .brand-line { font-size: 17px; min-height: var(--hit); margin-block: -7px; }   /* 44px hit area, 30px of layout */
  .nav-toggle { display: flex; margin-right: -9px; }
  nav.main-nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px var(--gutter) 16px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(11,21,38,.12);
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  nav.main-nav .nav-links.active { display: flex; }
  nav.main-nav .nav-links > a, nav.main-nav .nav-dropdown-toggle { display: flex; align-items: center; min-height: var(--hit); padding: 10px 16px; font-size: 16px; border-radius: var(--r-control); }
  nav.main-nav .nav-links > a.active { box-shadow: none; background: var(--rf-tint); }
  nav.main-nav .nav-links > a.nav-cta { justify-content: center; height: auto; min-height: 48px; margin-top: 8px; }
  .nav-dropdown { display: block; width: 100%; }
  nav.main-nav .nav-dropdown-toggle { width: 100%; justify-content: space-between; text-align: left; }
  .nav-dropdown-menu { display: none; position: static; min-width: 0; margin: 4px 0 8px; padding: 6px; box-shadow: none; background: var(--surface-2); }
  .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { min-height: var(--hit); white-space: normal; }
  .nav-dropdown-menu a.nav-child { padding-left: 46px; }
  nav.main-nav .nav-lang { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 8px 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; }
  nav.main-nav .nav-lang__item { display: inline-flex; align-items: center; justify-content: center; min-width: var(--hit); min-height: var(--hit); padding: 0 8px; border-radius: 999px; color: var(--muted); }
  nav.main-nav .nav-lang__item:hover { color: var(--ink); background: var(--surface-2); }
  nav.main-nav .nav-lang__item[aria-current] { color: var(--ink); background: var(--surface-2); font-weight: 700; }
  /* the call to action stays in view at the bottom of the panel when the
     open Solutions list makes it scroll; the ring hides what scrolls under it */
  nav.main-nav .nav-links > a.nav-cta { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 0 0 8px var(--surface), 0 -8px 14px 6px var(--surface); }
}
/* language versions in the phone menu only; wide screens have the switch in the sub-navigation row */
@media (min-width: 769px) { nav.main-nav .nav-lang { display: none; } }

/* phones without JavaScript: no hamburger, the links wrap in the header
   and the Solutions menu is listed in flow */
@media (max-width: 768px) {
  /* tall, so it scrolls away with the page instead of pinning half the screen */
  html:not(.js) { --header-h: 0px; }
  html:not(.js) nav.main-nav { position: static; height: auto; min-height: 60px; flex-wrap: wrap; padding-block: 6px; row-gap: 0; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) nav.main-nav .nav-links { display: flex; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 4px; width: 100%; padding: 0; border: 0; box-shadow: none; max-height: none; overflow: visible; background: none; }
  html:not(.js) nav.main-nav .nav-links > a { display: inline-flex; padding: 10px 12px; }
  html:not(.js) nav.main-nav .nav-links > a.nav-cta { order: 6; width: 100%; justify-content: center; margin: 4px 0 8px; padding: 0 18px; min-height: 48px; position: static; box-shadow: none; }
  html:not(.js) nav.main-nav .nav-lang { order: 6; width: 100%; margin: 0; padding: 0; border-top: 0; }
  html:not(.js) .nav-dropdown { display: contents; }
  html:not(.js) .nav-dropdown-toggle { display: none; }
  html:not(.js) .nav-dropdown-menu { display: flex; flex-wrap: wrap; gap: 0 4px; width: 100%; order: 5; margin: 0 0 6px; padding: 4px 0 4px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  html:not(.js) .nav-dropdown-menu a { display: inline-flex; align-items: center; padding: 8px 12px; margin: 0; }
  html:not(.js) .nav-dropdown-menu a .nav-sub { display: none; }
  html:not(.js) .nav-dropdown-menu a.nav-child { padding-left: 12px; }
  html:not(.js) .nav-dropdown-menu a.nav-child::before { margin-left: 0; }
  html:not(.js) .nav-dropdown-menu .nav-divider { flex-basis: 100%; height: 0; margin: 0; }
}

/* ---- 4. breadcrumbs and footer -------------------------------------- */
.breadcrumbs { background: var(--paper); border-bottom: 1px solid #E3E7EE; padding: 12px 0; }
.breadcrumbs-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; flex-wrap: wrap; }
.breadcrumbs a, .breadcrumbs span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.breadcrumbs a { text-decoration: none; transition: color .2s; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs span { margin: 0 8px; }
.breadcrumbs .current { color: var(--text); font-weight: 500; }
@media (max-width: 768px) {
  .breadcrumbs { padding: 0; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--hit); }
  .breadcrumbs span { margin: 0 6px; }
}

.site-footer { background: var(--ink); color: var(--on-ink-muted); padding: 48px var(--gutter) 28px; margin-top: 0; text-align: left; }
.site-footer .footer-content { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; font-size: 14px; line-height: 1.7; }
.site-footer .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--on-ink); font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-bottom: 12px; }
.site-footer .footer-brand img { height: 30px; width: auto; }
.site-footer .footer-section h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--on-ink); margin-bottom: 8px; }
.site-footer .footer-section ul { list-style: none; }
.site-footer .footer-section ul li { margin-bottom: 8px; }
.site-footer .footer-section a { color: var(--on-ink-muted); text-decoration: none; transition: color .2s; }
.site-footer .footer-section a:hover { color: var(--on-ink); text-decoration: underline; }
.site-footer .footer-section a.footer-accent { color: var(--amber); }
.site-footer .footer-section a.footer-child { padding-left: 14px; }
.site-footer .footer-section p { color: var(--on-ink-muted); font-size: 14px; line-height: 1.7; margin-bottom: 4px; }
.site-footer .footer-mono { font-family: var(--font-mono); font-size: 12px; }
.site-footer .footer-bottom { max-width: var(--container); margin: 36px auto 0; border-top: 1px solid var(--ink-line); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; text-align: left; color: var(--on-ink-muted); }
.site-footer .footer-bottom a { color: var(--on-ink-muted); text-decoration: none; margin-left: 16px; }
.site-footer .footer-bottom a:hover { color: var(--on-ink); text-decoration: underline; }
@media (max-width: 900px) { .site-footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Link groups (Solutions, Company) are <details>, sent closed like
   details.v2-more: site-v2.js opens them from 720 px up, where the summary is
   just the column heading (and keeps it from toggling); below 720 px they are
   closed rows. Without JavaScript, browsers that support ::details-content
   still show them open on wide screens. */
.site-footer .footer-group > summary { list-style: none; cursor: default; }
@media (min-width: 720px) { html:not(.js) .site-footer .footer-group::details-content { content-visibility: visible; } }
.site-footer .footer-group > summary::-webkit-details-marker { display: none; }
.site-footer .footer-group > summary::marker { content: ''; }
@media (max-width: 719px) {
  .site-footer { padding: 28px var(--gutter) 20px; }
  .site-footer .footer-content { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer .footer-brand { margin-bottom: 6px; }
  .site-footer .footer-section--brand { order: 1; padding-bottom: 12px; }
  .site-footer .footer-section--contact { order: 2; padding-bottom: 12px; }
  .site-footer .footer-section--contact h3 { margin-bottom: 0; }
  .site-footer .footer-section--contact p { margin-bottom: 0; }
  .site-footer .footer-section--links { order: 3; border-top: 1px solid var(--ink-line); }
  .site-footer .footer-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; }
  .site-footer .footer-group > summary h3 { margin: 0; }
  .site-footer .footer-group > summary::after { content: "+"; font-family: var(--font-mono); font-size: 16px; color: var(--on-ink); }
  .site-footer .footer-group[open] > summary::after { content: "\2212"; }
  .site-footer .footer-group > ul { padding-bottom: 8px; }
  .site-footer .footer-bottom { margin-top: 0; padding-top: 12px; }
}
@media (max-width: 768px) {
  .site-footer .footer-section a, .site-footer .footer-bottom a { display: inline-flex; align-items: center; min-height: var(--hit); }
  .site-footer .footer-section ul li { margin-bottom: 0; }
  .site-footer .footer-section p a { display: inline-flex; }
  .site-footer .footer-bottom { align-items: center; }
  .site-footer .footer-bottom a { margin-left: 0; margin-right: 16px; }
  .site-footer .footer-bottom .footer-legal a:last-child { margin-right: 0; }
}

/* ---- 5. layout primitives, type scale, section rhythm --------------- */
/* Platform band under the three line cards (home, about) */
.v2-platform { background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: 32px 40px; display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: center; }
.v2-platform p { color: var(--on-ink-muted); margin: 0; }
.v2-platform h2 { color: var(--on-ink); margin: 6px 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.v2-platform__img { width: 100%; border-radius: 10px; background: var(--surface-2); object-fit: contain; height: 170px; }
@media (max-width: 860px) { .v2-platform { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

.v2-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.v2-section { padding: var(--section-y) 0; }
.v2-section--tight { padding: var(--section-y-tight) 0; }
.v2-section--surface { background: var(--surface); }
.v2-section--paper { background: var(--paper); }
.v2-section--ink { background: var(--ink); color: var(--on-ink); }
.v2-section--ink h2, .v2-section--ink h3 { color: var(--on-ink); }
.v2-section--ink p { color: var(--on-ink-muted); }
.v2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.v2-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; }
.v2-head p { margin: 0; max-width: 64ch; font-size: 15px; color: var(--muted); }
.v2-grid { display: grid; gap: 24px; }
.v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .v2-grid--2, .v2-grid--3, .v2-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* type helpers */
/* card titles default to the card scale; listed first so any class on the h3 (.v2-eyebrow, .v2-title, ...) wins by order */
.v2-card :where(h3) { font-size: var(--fs-h3-card); }   /* zero-specificity wrapper: any class on the h3 still wins */
.v2-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v2-mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.v2-mono--strong { color: var(--text); }
.v2-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); }
.v2-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1-home); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
.v2-display--line { font-size: var(--fs-h1-line); }
.v2-display--sub { font-size: var(--fs-h1-sub); }
.v2-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.v2-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3-card); line-height: 1.3; margin: 0; }
.v2-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; margin: 0; }
.v2-muted { color: var(--muted); }

/* ---- 6. controls and cards ------------------------------------------ */
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; line-height: 1.25; text-align: center; border-radius: var(--r-control); font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: var(--font-body); transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.v2-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,21,38,.12); }
.v2-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.v2-btn--primary { background: var(--ink); color: #fff; }
.v2-btn--primary:hover { background: #17284a; color: #fff; }
.v2-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--control-border); }
.v2-btn--secondary:hover { border-color: var(--ink); color: var(--text); }
.v2-btn--amber { background: var(--amber); color: var(--ink); font-weight: 700; }
.v2-btn--amber:hover { background: #f5c084; color: var(--ink); }
.v2-btn--ghost-ink { background: transparent; color: var(--on-ink); border-color: var(--ink-control-border); }
.v2-btn--ghost-ink:hover { border-color: var(--on-ink); color: var(--on-ink); }
.v2-btn--sm { min-height: 42px; padding: 9px 18px; font-size: 15px; }   /* a label that wraps grows the button (min-height, not height) */
.v2-link { font-weight: 600; text-decoration: none; transition: color .15s; }
.v2-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: #E8ECF2; color: #3B4657; }
.v2-chip--gpr { background: var(--gpr-tint); color: var(--gpr-deep); }
.v2-chip--rf, .v2-chip--coverage { background: var(--rf-tint); color: var(--rf-deep); }
.v2-chip--sdr { background: var(--sdr-tint); color: var(--sdr-deep); }
.v2-chip--sensing { background: var(--sensing-tint); color: var(--sensing-deep); }
.v2-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.v2-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.v2-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11,21,38,.08); color: inherit; }
.v2-card__media { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--ink-2); transition: transform .35s ease; }
a.v2-card:hover .v2-card__media { transform: scale(1.03); }
.v2-card__media--contain { object-fit: contain; background: var(--surface-2); }
.v2-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.v2-card__body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.v2-card--gpr { --dot: var(--gpr); }
.v2-card--rf, .v2-card--coverage { --dot: var(--rf); }
.v2-card--sdr { --dot: var(--sdr); }
.v2-card--sensing { --dot: var(--sensing); }
.v2-card--gpr .v2-card__body { border-top: 3px solid var(--gpr); }
.v2-card--rf .v2-card__body, .v2-card--coverage .v2-card__body { border-top: 3px solid var(--rf); }
.v2-card--sdr .v2-card__body { border-top: 3px solid var(--sdr); }
.v2-card--sensing .v2-card__body { border-top: 3px solid var(--sensing); }
.v2-card__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.v2-card--gpr .v2-card__label, .v2-card--gpr .v2-card__cta { color: var(--gpr-deep); }
.v2-card--rf .v2-card__label, .v2-card--rf .v2-card__cta, .v2-card--coverage .v2-card__label, .v2-card--coverage .v2-card__cta { color: var(--rf-deep); }
.v2-card--sdr .v2-card__label, .v2-card--sdr .v2-card__cta { color: var(--sdr-deep); }
.v2-card--sensing .v2-card__label, .v2-card--sensing .v2-card__cta { color: var(--sensing-deep); }
/* category label: neutral text, the category colour only as a dot */
.v2-card .v2-card__label--dot { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.v2-card__label--dot::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted)); }
.v2-card__cta { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 15px; transition: color .15s; }
.v2-card__meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 10px; }
.v2-product { text-decoration: none; color: inherit; }
.v2-product .v2-card__media { height: 190px; }
.v2-product h3 { font-size: 18px; font-weight: 700; margin: 0; }

/* ---- 7. panels, tables, hero, misc components ------------------------ */
.v2-panel { background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(11,21,38,.18); }
.v2-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); }
/* the pause button sits in the bar, after the two labels */
.v2-panel__bar.has-toggle { justify-content: flex-start; }
.v2-panel__bar.has-toggle > span + span { margin-left: auto; }
.v2-panel__bar.has-toggle > span:only-of-type ~ .v2-anim-toggle { margin-left: auto; }
.v2-panel__bar.has-toggle > .v2-anim-toggle { margin-left: 12px; }
.v2-panel__bar.has-toggle > span + span ~ .v2-anim-toggle { margin-left: 12px; }
.v2-panel__img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: left center; border-radius: 8px; }
.v2-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.v2-stat { background: var(--ink-2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-stat__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--on-ink-muted); }
.v2-stat__v { font-family: var(--font-mono); font-size: 13px; color: var(--on-ink); white-space: normal; overflow-wrap: anywhere; }   /* long values wrap instead of widening the page on phones */
.v2-stat__v--amber { color: var(--amber); }
.v2-window { background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-card); overflow: hidden; }
.v2-window__bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 11px; color: var(--on-ink-muted); }
.v2-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3E5A85; display: inline-block; }
.v2-window__body { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.v2-window__side { border-right: 1px solid var(--ink-line); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--on-ink-muted); }
.v2-window__side .on { color: var(--on-ink); } .v2-window__side .hot { color: var(--amber); }
.v2-window__main { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.v2-window__main img { width: 100%; border-radius: 6px; display: block; object-fit: cover; }
@media (max-width: 680px) { .v2-window__body { grid-template-columns: minmax(0, 1fr); } .v2-window__side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--ink-line); } .v2-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-panel__img { height: 200px; } }

/* tables: the wrapper scrolls sideways; site-v2.js adds tabindex, role and
   a label while it overflows, and .has-scroll-l / .has-scroll-r, which fade
   the edge that has more content behind it. (A background-attachment shadow
   would sit under the opaque cells, so the fade is a mask instead.) */
.v2-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); -webkit-overflow-scrolling: touch; }
.v2-table-wrap.has-scroll-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.v2-table-wrap.has-scroll-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.v2-table-wrap.has-scroll-l.has-scroll-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.v2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2-table th { background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 14px 18px; font-weight: 500; }
.v2-table td { padding: 16px 18px; border-bottom: 1px solid #E8ECF2; vertical-align: middle; color: var(--text-2); }
.v2-table tr:last-child td { border-bottom: 0; }
.v2-table tr:nth-child(even) td { background: var(--surface-2); }
.v2-table td.k { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); }
.v2-table td.mono { font-family: var(--font-mono); color: var(--text); }
.v2-table td strong { color: var(--text); }

.v2-hero { padding: 72px 0 56px; }
.v2-hero__grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 64px; align-items: start; }
.v2-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.v2-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-hero__facts { display: flex; gap: 12px 28px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.v2-hero__media { display: flex; flex-direction: column; gap: 14px; }
.v2-hero__media img { width: 100%; display: block; border-radius: 10px; }
.v2-hero__frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; box-shadow: 0 24px 60px rgba(11,21,38,.10); }
@media (max-width: 960px) { .v2-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.v2-band { background: #E8ECF2; border-radius: var(--r-panel); padding: 32px 40px; display: grid; grid-template-columns: 260px 1fr 1fr; gap: 32px; align-items: center; }
.v2-band__card { background: var(--surface); border-radius: var(--r-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-height: 120px; }
.v2-band__card:hover { color: inherit; box-shadow: 0 10px 26px rgba(11,21,38,.08); }
@media (max-width: 960px) { .v2-band { grid-template-columns: minmax(0, 1fr); padding: 24px; } }
/* Facts strip: real company numbers (home Why, About) */
.v2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v2-facts--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v2-fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.v2-fact__v { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-fact__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.v2-fact__note { font-size: 13px; line-height: 1.45; color: var(--text-2); margin-top: 4px; }
@media (max-width: 960px) { .v2-facts--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .v2-facts, .v2-facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-fact__v { font-size: 26px; } }

/* Language switch on translated pages */
.v2-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.v2-lang a, .v2-lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 4px 8px; border-radius: 999px; color: var(--muted); text-decoration: none; text-align: center; }
.v2-lang a:hover { color: var(--ink); background: var(--surface-2, #E8ECF2); }
.v2-lang [aria-current] { color: var(--ink); background: var(--surface-2, #E8ECF2); font-weight: 700; }
.v2-langbar { display: none; }
@media (max-width: 719px) {
  .v2-langbar { display: block; background: var(--surface); border-bottom: 1px solid var(--line); }
  .v2-langbar .v2-container { display: flex; justify-content: flex-end; }
  .v2-langbar .v2-lang { margin-left: 0; }
  .v2-langbar .v2-lang a, .v2-langbar .v2-lang span { min-height: var(--hit); padding: 0 8px; }
  .v2-subnav--gpr .v2-lang { display: none; }
}
/* Sub-navigation of a product line (Rays GPR) */
.v2-subnav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); z-index: 900; }
.v2-subnav .v2-container { display: flex; align-items: center; gap: 12px; padding-top: 0; padding-bottom: 0; min-width: 0; }
.v2-subnav__links { display: flex; align-items: center; gap: 4px; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
.v2-subnav__links::-webkit-scrollbar { display: none; }
.v2-subnav a { padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.v2-subnav a:hover { color: var(--ink); }
.v2-subnav a:focus-visible { outline-offset: -3px; }   /* inside the scrolling strip, an outer ring would be clipped */
.v2-subnav a[aria-current] { color: var(--gpr-deep); border-bottom-color: var(--gpr); }
.v2-subnav .v2-lang a { padding: 4px 8px; border-bottom: 0; font-weight: 400; }
.v2-subnav a small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.v2-facts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .v2-facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Feasibility tool */
.v2-tool { display: grid; gap: 14px; }
.v2-tool label { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); }
.v2-tool select { font: 500 15px/1.3 var(--font-body, 'IBM Plex Sans', sans-serif); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid transparent; border-radius: 8px; padding: 11px 12px; }
.v2-tool select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.v2-tool label.v2-tool__check { display: flex; grid-auto-flow: column; align-items: center; gap: 10px; font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--on-ink); }
.v2-tool__check input { width: 18px; height: 18px; accent-color: var(--amber); }
.v2-tool__out { background: rgba(255,255,255,.05); border: 1px solid var(--ink-line); border-radius: var(--r-card); padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.v2-tool__out p { margin: 4px 0 0; color: var(--on-ink); font-size: 15px; line-height: 1.55; }
.v2-tool__v { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--on-ink); margin-top: 4px; }
.v2-tool__v--amber { color: var(--amber); }
/* The engineer block and the home hero shortcut */
.v2-person { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.v2-person img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--surface-2); }
.v2-person h3 { font-size: 19px; margin: 4px 0 2px; }
.v2-person p { margin: 10px 0 8px; font-size: 14px; line-height: 1.55; }
.v2-person ul { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.v2-person li { margin-bottom: 0; }
.v2-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gpr); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 500; max-width: 560px; }
.v2-quick:hover { border-color: var(--gpr); color: var(--gpr-deep); }
.v2-quick__langs { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; margin-top: -8px; }
.v2-quick__langs a { color: var(--muted); }
.v2-price__v small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); text-align: right; margin-top: 2px; }
/* In-page form confirmation and notices */
.v2-done { border: 1px solid var(--line); border-left: 3px solid #1F7A4D; border-radius: var(--r-card); background: var(--surface); padding: 26px 28px; }
.v2-done__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E4F3EA; color: #1F7A4D; font-weight: 700; }
.v2-done h3 { font-size: 20px; margin: 12px 0 6px; }
.v2-done p { margin: 0; }
.v2-form__note { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FBEAEA; color: #9F1D1D; font-size: 14px; }
.v2-form__privacy { margin: 0; font-size: 13px; color: var(--muted); }
.v2-field__err { margin: 4px 0 0; font-size: 13px; color: #B42318; }
.v2-form__privacy a { color: inherit; text-decoration: underline; }
.v2-notice { padding: 14px 18px; border-radius: var(--r-card); background: #E4F3EA; color: #14532D; font-weight: 600; border: 1px solid #BFE3CD; }
.v2-notice--error { background: #FBEAEA; color: #9F1D1D; border-color: #F1C4C4; }

/* Sticky quote button (survey page). Phones only, and only after the
   hero button has scrolled away and until the quote form is reached.
   site-v2.js adds .is-on; without JavaScript it stays hidden. */
.v2-sticky-cta { display: none; }
@media (max-width: 680px) {
  .v2-sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; min-height: var(--hit); padding: 13px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 28px rgba(11,21,38,.32); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .v2-sticky-cta.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .v2-sticky-cta span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--amber); }
  .v2-sticky-cta:hover { color: #fff; }
}

/* Phones: denser grids, language switch and sub-navigation on one row */
@media (max-width: 680px) {
  /* the next four rules must beat inline style attributes in the templates, hence the flags */
  .v2-sticky-cta ~ section:last-of-type { padding-bottom: 96px !important; }
  .v2-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .v2-grid--dense .v2-card__body { padding: 14px 14px 16px; gap: 6px; }
  .v2-grid--dense .v2-card__body h3, .v2-grid--dense .v2-numbered h3 { font-size: 15px !important; }
  .v2-grid--dense .v2-card__body p, .v2-grid--dense .v2-numbered p { font-size: 13px !important; line-height: 1.45; }
  .v2-grid--dense .v2-card__meta { gap: 4px 10px; font-size: 11px; padding-top: 6px; }
  .v2-grid--dense .v2-card__media { height: 96px !important; }
  .v2-subnav .v2-container { gap: 8px; }
  .v2-subnav .v2-lang { flex: 0 0 auto; margin-left: 0; padding-left: 8px; border-left: 1px solid var(--line); }
  .v2-subnav .v2-lang a, .v2-subnav .v2-lang span { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 8px; }
  .v2-subnav__links a { padding: 12px 8px; font-size: 13px; }
  /* the links scroll sideways and fade out on the right; the end padding
     keeps the last link clear of the fade once scrolled to the end */
  .v2-subnav__links { padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .v2-person { padding: 18px; }
  .v2-person img { width: 64px; height: 64px; }
}
/* Price bands */
.v2-prices { display: grid; gap: 10px; }
.v2-price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; }
.v2-price__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v2-price h3 { font-size: 16px; font-weight: 700; margin: 0; }
.v2-price__v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--gpr-deep); white-space: nowrap; }
.v2-price p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.v2-numbered { display: flex; flex-direction: column; gap: 8px; }
.v2-numbered .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.v2-numbered h3 { font-size: 18px; font-weight: 700; margin: 0; }
.v2-numbered p { margin: 0; font-size: 14px; line-height: 1.55; }
.v2-industry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.v2-industry h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.v2-industry p { margin: 0; font-size: 14px; line-height: 1.5; }
.v2-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.v2-step { background: rgba(255,255,255,.08); border-radius: var(--r-card); padding: 18px 12px; text-align: center; }
.v2-step b { display: block; font-family: var(--font-display); font-size: 22px; color: #7dd3fc; }
.v2-step span { font-size: 13px; color: var(--on-ink); }
@media (max-width: 900px) { .v2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ: the padding sits on the summary, so the whole row is the tap target */
.v2-faq { max-width: 800px; }
.v2-faq__cat { font-size: 22px; margin: 40px 0 16px; }
.v2-faq__cat:first-child { margin-top: 0; }
.v2-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 22px; margin-bottom: 12px; }
.v2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hit); padding: 16px 0; list-style: none; font-weight: 600; cursor: pointer; color: var(--text); }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::marker { content: ''; }
.v2-faq details > summary::after { content: '+'; flex: none; font-family: var(--font-mono); color: var(--muted); transition: transform .2s; }
.v2-faq details[open] > summary::after { transform: rotate(45deg); }
.v2-faq details p { max-width: 68ch; margin: 0 0 18px; font-size: 15px; }
.v2-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.v2-form .full { grid-column: 1 / -1; }
.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.v2-field input, .v2-field select, .v2-field textarea { height: 46px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--r-control); font: inherit; font-size: 15px; background: var(--surface); color: var(--text); }
.v2-field textarea { height: auto; min-height: 110px; padding: 12px 14px; }
@media (max-width: 640px) { .v2-field input, .v2-field select, .v2-field textarea { font-size: 16px; } }   /* iOS zooms the page when a smaller field takes focus */
.v2-field input:focus, .v2-field select:focus, .v2-field textarea:focus { outline: 2px solid var(--rf); outline-offset: 1px; border-color: var(--rf); }
/* validation hints set by interactions.js on blur */
input.valid, textarea.valid, select.valid, .v2-field input.valid, .v2-field textarea.valid { border-color: #1F7A4D; }
input.invalid, textarea.invalid, select.invalid, .v2-field input.invalid, .v2-field textarea.invalid { border-color: #B42318; box-shadow: 0 0 0 1px #B42318; }
@media (max-width: 680px) { .v2-form { grid-template-columns: minmax(0, 1fr); } }

/* ---- 8. prose (legal pages, articles) ------------------------------- */
.v2-prose { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--text-2); overflow-wrap: break-word; }
.v2-prose h1 { font-size: var(--fs-h1-sub); font-weight: 800; margin: 0 0 8px; }
.v2-prose h2 { font-size: 24px; font-weight: 800; margin: 40px 0 12px; }
.v2-prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; color: var(--text); }
.v2-prose h4 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; color: var(--text); }
.v2-prose p { margin: 0 0 14px; font-size: inherit; }
.v2-prose ul, .v2-prose ol { margin: 0 0 16px; padding-left: 22px; }
.v2-prose li { margin-bottom: 6px; }
.v2-prose a { color: var(--rf); }
.v2-prose a[style] { color: var(--rf-deep) !important; }   /* article HTML may carry its own link colours */
.v2-prose [style*="#22c55e"] { color: #1F7A4D !important; }
.v2-prose img { max-width: 100%; height: auto; border-radius: var(--r-card); }
.v2-prose blockquote { margin: 20px 0; padding: 12px 20px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.v2-prose code { font-family: var(--font-mono); font-size: .9em; background: #E8ECF2; padding: 1px 5px; border-radius: 4px; }
.v2-prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.v2-prose th, .v2-prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.v2-prose th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v2-prose th[style], .v2-prose thead[style], .v2-prose thead tr[style] { background: var(--surface-2) !important; color: var(--muted) !important; border-bottom-color: var(--line) !important; }
.v2-prose td[style] { border-bottom-color: var(--line) !important; }
.v2-callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--r-card); padding: 20px 24px; margin: 0 0 32px; }
.v2-callout p { margin: 0; }
.v2-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.v2-toc { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.v2-toc a { color: var(--muted); text-decoration: none; padding: 4px 0; border-left: 2px solid transparent; padding-left: 10px; }
.v2-toc a:hover { color: var(--text); border-left-color: var(--line-strong); }
@media (max-width: 900px) {
  .v2-legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 14px; }
  .v2-toc a { display: inline-flex; align-items: center; min-height: var(--hit); border-left: 0; padding-left: 0; }
}

/* ---- page header (secondary pages) ---------------------------------- */
.v2-pagehead { padding: 56px 0 32px; }
.v2-pagehead h1 { font-size: var(--fs-h1-sub); font-weight: 800; margin: 10px 0 12px; letter-spacing: -0.025em; text-wrap: balance; }
.v2-pagehead p { max-width: 680px; font-size: var(--fs-lead); margin: 0; }

/* ---- filters / pills ------------------------------------------------ */
.v2-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 22px; font-size: 14px; font-weight: 500; text-decoration: none; background: var(--surface); color: var(--text-2); border: 1px solid var(--line); transition: color .15s, background .15s, border-color .15s; }
.v2-pill:hover { border-color: var(--line-strong); color: var(--text); }
.v2-pill--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.v2-pill--on:hover { color: #fff; }

/* ---- contact -------------------------------------------------------- */
.v2-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.v2-contact-card { padding: 32px; }
.v2-contact-card h2 { font-size: 22px; margin: 0 0 6px; }
.v2-contact-card > p { margin: 0 0 22px; font-size: 15px; }
@media (max-width: 860px) { .v2-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 680px) { .v2-contact-card { padding: 20px; } }
.v2-contact-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.v2-contact-item:last-child { border-bottom: 0; }
.v2-contact-item svg { color: var(--rf); }
.v2-contact-item__k { font-size: 13px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; font-weight: 500; line-height: 1.4; }
.v2-contact-item p { margin: 0; font-size: 16px; color: var(--text); }
.v2-contact-item a { color: var(--text); text-decoration: none; }
.v2-contact-item a:hover { color: var(--rf); }
/* email and phone: the whole row is the link */
a.v2-contact-item--link { color: inherit; text-decoration: none; min-height: var(--hit); border-radius: 4px; }
.v2-contact-item--link .v2-contact-item__v { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
a.v2-contact-item--link:hover .v2-contact-item__v { color: var(--rf); text-decoration-color: currentColor; }
a.v2-contact-item--link:focus-visible { outline: 2px solid var(--rf); outline-offset: 2px; }
.v2-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--r-control); font-weight: 600; z-index: 9999; box-shadow: 0 10px 30px rgba(11,21,38,.25); font-size: 15px; }
.v2-toast--error { background: #9F1D1D; }

/* ---- CTA band ------------------------------------------------------- */
.v2-cta { background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: 48px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.v2-cta h2 { color: var(--on-ink); margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
.v2-cta p { color: var(--on-ink-muted); margin: 0; }
@media (max-width: 760px) { .v2-cta { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; } }

/* ---- 404 ------------------------------------------------------------ */
.v2-404 { min-height: 60vh; display: flex; align-items: center; padding: 0; }
.v2-404 .code { font-family: var(--font-mono); font-size: 14px; letter-spacing: .14em; color: var(--muted); }

/* ---- blog index ------------------------------------------------------ */
.v2-blog-card .v2-card__body { min-height: 240px; }
.v2-blog-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-blog-card__title { font-size: 21px; line-height: 1.3; margin: 0; }
.v2-blog-card .v2-card__cta { color: var(--rf-deep); }
/* No lone card in the last row: the first card (marked in the template)
   spans as many columns as it takes. Three columns: 3n+1 cards, it takes the
   whole first row; 3n+2 cards, two columns. Two columns: an odd count, the
   whole first row. */
@media (min-width: 1001px) {
  .v2-grid > .v2-feat--3x3 { grid-column: 1 / -1; }
  .v2-grid > .v2-feat--3x2 { grid-column: span 2; }
  :is(.v2-feat--3x3, .v2-feat--3x2) .v2-card__body { min-height: 0; justify-content: center; padding: 28px 32px 30px; }
  :is(.v2-feat--3x3, .v2-feat--3x2) .v2-blog-card__title { font-size: var(--fs-h2); }
  :is(.v2-feat--3x3, .v2-feat--3x2) .v2-card__body p { font-size: 16px; max-width: 64ch; }
}
@media (min-width: 681px) and (max-width: 1000px) {
  .v2-grid > .v2-feat--2x2 { grid-column: 1 / -1; }
  .v2-feat--2x2 .v2-card__body { min-height: 0; justify-content: center; padding: 28px 32px 30px; }
  .v2-feat--2x2 .v2-blog-card__title { font-size: var(--fs-h2); }
  .v2-feat--2x2 .v2-card__body p { font-size: 16px; max-width: 64ch; }
}

/* ---- blog article: call-to-action block placed mid-article by the template ---- */
.v2-midcta { margin: 32px 0; padding: 20px 22px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--r-card); font-size: 16px; line-height: 1.55; }
.v2-midcta--gpr { border-left-color: var(--gpr); }
.v2-midcta--coverage { border-left-color: var(--coverage); }
.v2-midcta--sdr { border-left-color: var(--sdr); }

/* ---- cookie banner (base.html, js/consent.js): small, not modal, sent hidden ---- */
.cookie-banner { position: fixed; left: 16px; bottom: 16px; z-index: 1000; max-width: 420px; padding: 14px 16px; display: grid; gap: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 10px 28px rgba(11,21,38,.18); font-size: 14px; line-height: 1.5; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0; }
.cookie-banner__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner__btn { min-height: 44px; min-width: 44px; padding: 8px 18px; border-radius: var(--r-control); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 15px/1.2 var(--font-body); cursor: pointer; }
.cookie-banner__btn:hover { background: var(--ink); color: #fff; }
.cookie-banner__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 680px) { .cookie-banner { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 12px 14px; font-size: 13.5px; } }
@media print { .cookie-banner { display: none !important; } }
.v2-midcta--sensing { border-left-color: var(--sensing); }
.v2-midcta p { margin: 0; color: var(--text-2); }
.v2-midcta strong { color: var(--text); }
.v2-midcta__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.v2-prose .v2-midcta a.v2-btn { color: #fff; text-decoration: none; }
.v2-prose .v2-midcta a.v2-link { color: var(--rf-deep); text-decoration: none; }

/* ---- motion: micro-interactions ------------------------------------- */
/* stat cells in a dark panel light up one after another once the panel is in view.
   Hidden only when JavaScript runs (.js on <html>); a CSS-only safety net
   reveals them after 4 s should the script fail to mark the panel. */
.js .v2-panel:not(.is-in) .v2-stat { opacity: 0; transform: translateY(6px); animation: v2-rise-late .3s ease 4s forwards; }
.v2-panel.is-in .v2-stat { animation: v2-rise .45s ease forwards; }
.v2-panel.is-in .v2-stat:nth-child(2) { animation-delay: .08s; }
.v2-panel.is-in .v2-stat:nth-child(3) { animation-delay: .16s; }
.v2-panel.is-in .v2-stat:nth-child(4) { animation-delay: .24s; }
@keyframes v2-rise { to { opacity: 1; transform: none; } }
@keyframes v2-rise-late { to { opacity: 1; transform: none; } }

/* ---- motion: real-data animations ----------------------------------- */
.v2-cycler { position: relative; width: 100%; height: 300px; border-radius: 8px; overflow: hidden; background: var(--ink-2); }
.v2-cycler img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; opacity: 0; transition: opacity .6s ease; }
.v2-cycler img:first-child { opacity: 1; }               /* poster without JS */
.v2-cycler.is-live img:first-child { opacity: 0; }
.v2-cycler.is-live img.is-on { opacity: 1; }
.v2-cycler__label { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(11,21,38,.75); color: var(--on-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; }
.v2-canvas { display: block; width: 100%; height: 260px; border-radius: 8px; background: var(--ink-2); }
@media (max-width: 680px) { .v2-cycler, .v2-canvas { height: 200px; } }

/* ---- animation pause control (WCAG 2.2.2) ---------------------------
   Injected by site-v2.js into every looping animation. Inside a dark panel
   it joins the panel's top bar; otherwise it sits in the corner of the
   animation. 32px to look at, 44px to hit. */
.v2-anim-host { position: relative; }
.v2-anim-toggle { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--ink-control-border); background: rgba(11,21,38,.78); color: var(--on-ink); cursor: pointer; transition: background .15s, border-color .15s; }
.v2-anim-toggle::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.v2-panel__bar > .v2-anim-toggle { position: relative; top: auto; right: auto; flex: none; margin-block: -7px; background: var(--ink-2); }   /* keeps the bar at text height */
.v2-anim-toggle:hover { background: var(--ink); border-color: var(--on-ink); }
.v2-anim-toggle svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.v2-anim-toggle .i-play { display: none; }
.v2-anim-toggle[aria-pressed="true"] .i-pause { display: none; }
.v2-anim-toggle[aria-pressed="true"] .i-play { display: block; }
.v2-anim-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.v2-hero__frame [data-alt-src][role="button"] { cursor: pointer; }

/* ---- page chrome injected by interactions.js ------------------------- */
#scroll-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--amber); z-index: 9999; pointer-events: none; }
#back-to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; display: none; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--ink-control-border); background: var(--ink); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 950; box-shadow: 0 8px 22px rgba(11,21,38,.28); transition: background .15s, transform .15s; }
#back-to-top.is-visible { display: grid; }
#back-to-top:hover { background: #17284a; transform: translateY(-2px); }
#back-to-top:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 680px) { #back-to-top { bottom: 84px; right: 16px; } }   /* clear of the sticky quote bar */

/* ---- touch targets on phones ------------------------------------------
   44px high for controls that are links or buttons on their own; inline
   links inside running text keep the size of their text. */
@media (max-width: 768px) {
  .v2-btn, .v2-btn--sm { min-height: var(--hit); }
  .v2-btn--sm { min-height: var(--hit); }
  .v2-pill { height: var(--hit); }
  a.v2-card__cta, .v2-card__cta { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--hit); padding-top: 0; }
  .v2-lang a, .v2-lang span { display: inline-flex; align-items: center; min-height: var(--hit); }
  a.v2-link { display: inline-flex; align-items: center; min-height: var(--hit); }
}

/* ---- small phones: body copy, table cells and definitions at 14 px ------
   Several page styles set 12-13 px; below 480 px that is too small to read.
   "html body" outranks the page styles that load after this file; mono labels,
   captions, chips and column headers keep their small size. */
@media (max-width: 479px) {
  .v2-grid--dense .v2-card__body p, .v2-grid--dense .v2-numbered p { font-size: 14px !important; }
  main :is(p, li, dd, td):not(.v2-mono):is([style*="font-size: 12px"], [style*="font-size:12px"], [style*="font-size: 12.5px"], [style*="font-size: 13px"], [style*="font-size:13px"], [style*="font-size: 13.5px"]) { font-size: 14px !important; }
  html body .v2-table td, html body .v2-table tbody th[scope="row"], html body .grd-table--spec td, html body .grd-table--spec tbody th { font-size: 14px; }
  html body :is(.hm-eng__sub, .hm-ventures__intro p, .sdr-status__col p, .cov-fine, .cov-req, .cov-legend, .snx-fine, .snx-req, .snx-flag, .snx-legend, .snx-steps dd, .v2-fact__note) { font-size: 14px; }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .v2-panel:not(.is-in) .v2-stat, .v2-panel .v2-stat { opacity: 1; transform: none; }
  .v2-btn:hover, .v2-btn:active, a.v2-card:hover, #back-to-top:hover { transform: none; }
  a.v2-card:hover .v2-card__media { transform: none; }
}

/* Collapsible secondary content. Closed on phones, opened by script on wide screens. */
.v2-more { min-width: 0; }
.v2-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--more-color, var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.v2-more > summary::-webkit-details-marker { display: none; }
.v2-more > summary::after { content: "+"; font-family: var(--font-mono); text-decoration: none; }
.v2-more[open] > summary::after { content: "\2212"; }
/* a summary with an open-state label: <span class="v2-more__closed">Show…</span><span class="v2-more__open">Hide…</span> */
.v2-more > summary > .v2-more__open { display: none; }
.v2-more[open] > summary > .v2-more__open { display: inline; }
.v2-more[open] > summary > .v2-more__closed:has(+ .v2-more__open) { display: none; }
.v2-more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.v2-section--ink .v2-more > summary, .v2-band .v2-more > summary { color: var(--on-ink); }
.v2-more[open] > summary { margin-bottom: 10px; }
.v2-card .v2-more { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v2-card .v2-more[open] > summary { margin-bottom: 0; }
/* a details.v2-more inside the FAQ must not pick up the FAQ card look */
.v2-faq details.v2-more { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; }
.v2-faq details.v2-more > summary { display: inline-flex; justify-content: flex-start; min-height: 44px; padding: 0; font-weight: 600; color: var(--more-color, var(--ink)); }
.v2-faq details.v2-more > summary::after { content: "+"; flex: none; color: inherit; transform: none; transition: none; }
.v2-faq details.v2-more[open] > summary::after { content: "\2212"; transform: none; }
.v2-section--ink .v2-faq details.v2-more > summary, .v2-band .v2-faq details.v2-more > summary { color: var(--on-ink); }
.v2-faq details.v2-more p { max-width: none; margin: 0; }
/* row headers keep the row look, not the dark column-header look */
.v2-table tbody th[scope="row"] { background: transparent; color: var(--ink); font-weight: 600; text-align: left; font-family: inherit; text-transform: none; letter-spacing: 0; }

/* ---- 2026-10 layout round: sticky bars, touch targets, small-text floors ---- */
/* Sticky quote bar (survey page, phones): an amber edge so it stands out on
   the dark feasibility section too; the back-to-top button steps aside
   while the bar is up (site-v2.js sets html.sticky-cta-on). */
@media (max-width: 680px) {
  .v2-sticky-cta { border: 2px solid var(--amber); box-shadow: 0 0 0 3px rgba(11,21,38,.35), 0 10px 28px rgba(11,21,38,.32); }
  .sticky-cta-on #back-to-top { display: none; }
}
/* Touch targets on phones and tablets */
@media (max-width: 768px) {
  .v2-quick__langs { margin-top: -14px; gap: 0 20px; }
  .v2-quick__langs a { display: inline-flex; align-items: center; min-height: var(--hit); }
  .v2-anim-toggle { width: var(--hit); height: var(--hit); }
  .v2-anim-toggle::before { inset: 0; }
  .v2-panel__bar > .v2-anim-toggle { margin-block: -13px; }
}
/* Phones: labels and chips at 13 px at least; spec values, captions and
   sentence-length notes at 14 px. */
@media (max-width: 680px) {
  .v2-chip, .v2-card__label, .v2-eyebrow, .v2-panel__bar, .v2-stat__k, .v2-fact__k, .v2-cycler__label,
  .v2-tool label, .v2-table th, .v2-window__bar, .v2-window__side, .v2-sticky-cta span, .hm-tile__label,
  .v2-numbered .n, .v2-lang a, .v2-lang span { font-size: 13px; }
  .v2-mono, .v2-card__meta, .v2-grid--dense .v2-card__meta, .v2-stat__v, .v2-hero__facts, .v2-fact__note,
  .v2-price__v small, .v2-person ul, .v2-quick__langs, main figcaption { font-size: 14px; }
}

/* ---- 2026-10 layout round 3 ------------------------------------------- */
/* A block marked data-keep-closed stays closed at every width (site-v2.js
   skips it), so its summary must stay visible even where a page hides the
   summaries of the folds it opens on wide screens. */
details[data-keep-closed] > summary { display: inline-flex !important; }
/* English-only markers ("EN") at 11 px at least */
html body :is(.v2-btn, .v2-card__cta, .cov-chain-more, .cov-calc-card, .cov-door, .snx-demo .v2-btn, .v2-subnav a) small { font-size: 11px; }
/* iOS zooms the page when a control under 16 px takes focus */
@media (max-width: 768px) {
  .v2-tool select { font-size: 16px; }
  .nav-dropdown-menu a .nav-sub { font-size: 13px; letter-spacing: .04em; }
}
@media (max-width: 680px) {
  .v2-prose th { font-size: 13px; }
  /* diagrams that scroll sideways: the hint line, and the links of the
     coverage hub chain at 44 px (52 of 1056 units: at least 894 px wide) */
  html body .cov-dg-hint, html body .cov-dg-hint span { font-size: 13px; }
  /* step numbers and definition labels on the sensing pages */
  html body :is(.snx-steps, .snx-brief) .n, html body .snx-steps dt { font-size: 13px; }
  html body .sdr-callout strong { font-size: 13px; }
  html body .cov-dg.cov-dg--chain { min-width: 900px; }
}
/* Cookie banner on phones: the sticky quote bar and the back-to-top button
   step aside while the banner is up (consent.js sets body.cookie-banner-on) */
@media (max-width: 680px) {
  body.cookie-banner-on .v2-sticky-cta, body.cookie-banner-on #back-to-top { display: none !important; }
}
/* Article tables on small phones: each row a card, the column header before
   each value (blog_layout.stack_tables adds the class and data-label) */
@media (max-width: 479px) {
  .v2-prose table.v2-stack { display: block; overflow: visible; border: 0; font-size: 15px; }
  .v2-prose table.v2-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .v2-prose table.v2-stack tbody { display: grid; gap: 10px; }
  .v2-prose table.v2-stack tr { display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
  .v2-prose table.v2-stack td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0 !important; background: none !important; overflow-wrap: anywhere; }
  .v2-prose table.v2-stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .v2-prose table.v2-stack td:first-child { display: block; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; font-weight: 700; color: var(--text); }
  .v2-prose table.v2-stack td:first-child::before { content: none; }
}

/* ---- Review round 5 (UX) ------------------------------------------------ */
/* Solutions menu on wide screens: one column per line instead of a 740 px list,
   anchored to the header bar (not the toggle) so it never runs off screen. */
@media (min-width: 769px) {
  nav.main-nav .nav-dropdown { position: static; }
  nav.main-nav .nav-dropdown-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; width: min(640px, calc(100vw - 32px)); }
  nav.main-nav .nav-dropdown-menu a { white-space: normal; }
  nav.main-nav .nav-dropdown-menu .nav-divider { display: none; }
}
@media (min-width: 1100px) {
  nav.main-nav .nav-dropdown-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(980px, calc(100vw - 48px)); }
}
/* Phones: the same hero spacing on every line; readable menu children;
   a smaller back-to-top button that does not cover card text. */
@media (max-width: 768px) {
  .v2-hero { padding: 32px 0 40px; }
  .nav-dropdown-menu a.nav-child { font-size: 14.5px; }
}
@media (max-width: 600px) {
  #back-to-top { width: 44px; height: 44px; right: 8px; opacity: .85; }
}
/* The SDR H1 is longer than the other hero titles: one size step down. */
.sdr-hero-grid h1.v2-display { font-size: clamp(2rem, 3.6vw, 3.25rem); }
/* The radargram strip is very wide: show all of it instead of a crop. */
img[src*="gpr_case_pipes_strip"] { object-fit: contain; background: #0B1526; }
img[src*="gpr_case_carpark_thickness"], img[src*="gpr_case_road_collapse"], img[src*="gpr_case_road_cores_basecourse"], img[src*="gpr_case_bridge_deck_asphalt"], img[src*="gpr_case_excavation_profile"], img[src*="gpr_case_basement_slab_profile"], img[src*="gpr_case_street_pipes_depth"] { object-fit: contain; background: #FCFCFB; }
.gsv-cases-more { margin-top: 16px; }
.gsv-cases--more { margin-top: 16px; }
/* Desktop quote link in the survey subnav; hidden where the sticky bar is shown. */
.v2-subnav__cta { margin-left: auto; margin-right: 12px; white-space: nowrap; }
@media (max-width: 900px) { .v2-subnav__cta { display: none; } }