/* ==========================================================================
   SynkRhino web portal — shared design system
   Built on the ust.com UI kit: teal identity, square corners, flat surfaces,
   generous whitespace, arrow affordances, banded sections.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   Palette sampled directly from the ust.com mobile UI kit. The four brand
   colors are #006e74 (primary), #003b52 (navy), #0097aa (cyan), #871d87
   (magenta); everything else is a neutral or a section band.
   -------------------------------------------------------------------------- */
:root {
  /* Brand — UST corporate teal is both --brand and the primary interactive
     color. The kit uses one teal, not a scale, so --teal === --brand. */
  --brand: #006e74;
  --teal: #006e74;
  --teal-dark: #00565b;      /* pressed / hover on solid teal */
  --teal-deep: #003b52;      /* navy — stat panels, map, deep bands */
  --teal-bright: #0097aa;    /* cyan — eyebrows, accents, active dots */
  --magenta: #871d87;        /* editorial / carousel accent */

  /* Teal supports */
  --teal-tint: #f1f7f8;      /* accordion panel, privacy bar, soft bands */
  --teal-tint-2: #e2eff0;
  --teal-line: #c3dcde;
  --teal-soft: #9ecacd;
  --teal-pale: #d8eaec;

  /* Section bands — the kit alternates these behind full-width sections */
  --band-gray: #f4f4f6;      /* component-header band */
  --band-cream: #f6f6f0;     /* multilink / content_primary */
  --band-ice: #f5fbfc;       /* navigation page */
  --band-tint: var(--teal-tint);

  /* Neutrals */
  --ink: #1c232b;            /* near-black: dark cards, footer, body text */
  --ink-2: #363d49;          /* slate: headings */
  --muted: #5a6470;
  --subtle: #8b939d;
  --bg: #ffffff;
  --surface: #fff;
  --surface-2: var(--band-gray);
  --line: #dfe1e6;
  --line-soft: #ebedf0;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm — the kit leans on whitespace, so sections breathe wider */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 7.5vw, 104px);

  /* Depth — the kit is flat. Borders and bands do all the work; these remain
     only for overlays (menus, modals) that must float above content. */
  --sh-1: none;
  --sh-2: none;
  --sh-3: 0 18px 44px -20px rgba(28, 35, 43, 0.28);

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* The DC runtime pins html/body/#dc-root to height:100%, which would trap
   position:sticky inside a viewport-tall containing block. Let them grow. */
html, body { height: auto !important; }
#dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

img { max-width: 100%; height: auto; }

a { color: var(--teal); text-decoration: none; transition: color 0.16s var(--ease); }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4 { text-wrap: balance; }

::selection { background: var(--teal-tint-2); color: var(--teal-dark); }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The kit reads as stacked full-width bands, so plain sections sit on white
   and --alt drops to the kit's gray. (Before the retheme --bg was tinted and
   --alt was white; with --bg now white the pair had collapsed to one color.) */
.section { padding: var(--section-y) 0; background: var(--surface); }
.section--alt { background: var(--band-gray); }
/* Explicit band overrides for sections that want cream or teal-tint instead. */
.section--cream { background: var(--band-cream); }
.section--ice { background: var(--band-ice); }
.section--tint { background: var(--teal-tint); }
/* Sits directly under a tinted band. Not zero: the band now ends exactly at
   its own box, so a 0 here lets card borders land on the band's edge. This is
   the clearance between the band and the first element below it. */
.section--tight-top { padding-top: clamp(28px, 3.2vw, 44px); }
.section--tight { padding: clamp(32px, 4vw, 48px) 0; }

.page-header {
  position: relative;
  background: var(--band-ice);
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(24px, 3vw, 36px);
  overflow: hidden;
}
.page-header > * { position: relative; z-index: 1; }

.narrow { max-width: 920px; margin: 0 auto; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--wide { gap: clamp(24px, 3vw, 36px); }

.split { display: grid; gap: clamp(28px, 4vw, 48px); }
.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-6-6 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }

.fcol { display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; align-items: center; gap: 10px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }

.rel { position: relative; }
.ovh { overflow: hidden; }
.pad { padding: 22px; }
.pad-lg { padding: clamp(24px, 3vw, 32px); }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: clamp(28px, 3.5vw, 40px); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
/* Kit eyebrows are plain letter-spaced uppercase — no rule, no dash. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 16px;
}
.eyebrow--sm { font-size: 11px; margin-bottom: 10px; }
.eyebrow--light { color: #fff; opacity: 0.92; }
.eyebrow--cyan { color: var(--teal-bright); }
.eyebrow--ink { color: var(--ink); }
[style*="text-align:center"] .eyebrow,
.section-head--center .eyebrow { justify-content: center; }

.page-title {
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink-2);
  margin: 0 0 20px;
}

.page-lead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 62ch;
}

.h2 {
  margin: 0 0 12px;
  font-size: clamp(25px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.026em;
  color: var(--ink-2);
}
.h2--lg { font-size: clamp(26px, 3vw, 36px); }
.h2--light { color: #fff; }

.h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.3;
  color: var(--ink-2);
}

.section-head {
  margin-bottom: clamp(28px, 3.5vw, 40px);
  max-width: 62ch;
}

.lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.lead--lg { font-size: 16.5px; }
.lead--end { align-self: end; }

.body-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.card-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.tiny { font-size: 12px; color: var(--subtle); }
.tiny-text { font-size: 12px; margin: 0; color: var(--ink-2); }
.ink { color: var(--ink); }
.teal { color: var(--teal); }

.card-title { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.card-title--sm { font-size: 15px; margin-bottom: 6px; }
.card-title--lg { font-size: 17.5px; }

.crumbs { font-size: 12.5px; color: var(--subtle); margin-bottom: 16px; }
.crumbs a { color: var(--subtle); }
.crumbs a:hover { color: var(--teal); }

.link-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-more::after {
  content: "⟶";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.18s var(--ease);
}
.link-more:hover::after { transform: translateX(5px); }

/* Flat by design — the kit has no gradients. Kept as a hook so existing
   markup that reaches for an accent word still renders on-brand. */
.grad-text { color: var(--teal); }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 20px;
  padding: 20px var(--gutter);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.site-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(20, 40, 40, 0.06), 0 10px 26px -20px rgba(28, 35, 43, 0.5);
}

/* Lockup: UST logo | SynkRhino mark + wordmark */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.brand-ust { height: 26px; width: auto; flex: none; display: block; }
.brand-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; flex: none; margin-right: -6px; }
.brand-name { white-space: nowrap; font-size: 22.5px; letter-spacing: -0.025em; line-height: 1; }

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 10px;
  transition: color 0.16s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav-link:hover { color: var(--teal); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link--active { color: var(--teal); font-weight: 600; cursor: pointer; }
.nav-link--active::after { transform: scaleX(1); }

.nav-links .btn { margin-left: 6px; }

/* Mega menu ---------------------------------------------------------------- */
/* Static, so the panel below anchors to .site-nav (sticky = positioned) rather
   than to the trigger sitting mid-bar. Flex (not inline-block) so the trigger
   box matches its sibling nav links exactly — inline-block adds descender space
   that would drop its underline a couple of pixels below the others. */
.product-dropdown { position: static; display: flex; align-items: center; }

.product-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
}
.product-dropdown:hover .product-dropdown-menu { display: block; }
/* Invisible bridge across the nav's bottom padding, so moving the pointer from
   the trigger down to the panel never leaves the hover target. */
.product-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 26px;
}

/* A full-width band under the header, so the panel always reads as part of the
   bar rather than a card floating beside the trigger. Content lines up with the
   page container on wide screens and with the nav gutter on narrow ones. */
.product-dropdown-menu-inner {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--sh-2);
  padding-block: 20px 16px;
  /* Offset by each item's own 16px padding so the menu TEXT lines up with
     the page content, not the item's hover box. */
  padding-inline: max(
    calc(var(--gutter) - 16px),
    calc((100% - var(--container)) / 2 + var(--gutter) - 16px)
  );
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 8px;
  animation: menu-in 0.16s var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.product-mega-item {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
  transition: background 0.15s var(--ease);
}
.product-mega-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--teal);
  transform: scaleY(0);
  transition: transform 0.18s var(--ease);
}
.product-mega-item:hover { background: var(--teal-tint); }
.product-mega-item:hover::before { transform: scaleY(1); }
.product-mega-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.product-mega-item strong span { font-weight: 500; color: var(--subtle); font-size: 12.5px; }
.product-mega-item:hover strong { color: var(--teal); }
.product-mega-item p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.product-mega-all {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.product-mega-all:hover { color: var(--teal-dark); }


/* Mobile menu toggle — kit header is one row: brand left, controls right. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.site-nav.is-open .nav-toggle-bars { background: transparent; }
.site-nav.is-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Buttons, badges, chips
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 14px 18px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
/* Every kit button carries a trailing arrow that advances on hover. */
.btn::after {
  content: "⟶";
  font-size: 1.05em;
  line-height: 1;
  color: var(--teal);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn--noarrow::after { content: none; }

/* Default/outline — the kit's workhorse: white, 1px ink border, teal arrow. */
.btn--outline,
.btn--soft {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover,
.btn--soft:hover { background: var(--ink); color: #fff; }
.btn--outline:hover::after,
.btn--soft:hover::after { color: #fff; }

.btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--primary::after { color: #fff; }
.btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--teal);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  gap: 10px;
}
.btn--ghost:hover { color: var(--teal-dark); background: transparent; }

.btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white::after { color: var(--teal); }
.btn--white:hover { background: var(--teal-pale); border-color: var(--teal-pale); color: var(--ink); }

/* On teal/navy/photo surfaces the kit outlines in white, not glass. */
.btn--glass {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}
.btn--glass::after { color: #fff; }
.btn--glass:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--glass:hover::after { color: var(--teal); }

.btn--sm { font-size: 13.5px; padding: 11px 15px; gap: 14px; }

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.badge--outline { background: transparent; border: 1px solid var(--teal-line); }

.sr-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px solid var(--teal-line);
  height: fit-content;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.sr-chip:hover { background: var(--teal-tint); border-color: var(--teal); }

.dot { display: block; width: 7px; height: 7px; background: var(--teal); margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   7. Cards & tiles
   -------------------------------------------------------------------------- */
/* Kit cards are flat and square: a fill or a 1px border, never both a lift
   and a shadow. Hover shifts the border/fill only. */
.sr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none !important;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sr-card:hover { border-color: var(--teal); }
.sr-card-form:hover { border-color: var(--line); }

.sr-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sr-tile:hover { border-color: var(--teal); }

/* --- Kit card variants -------------------------------------------------- */

/* Dark expandable-text card (#1c232b, white copy). */
.sr-card--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.sr-card--dark .card-title,
.sr-card--dark .h3 { color: #fff; }
.sr-card--dark .card-text,
.sr-card--dark .body-text { color: rgba(255, 255, 255, 0.78); }
.sr-card--dark:hover { border-color: var(--teal-bright); }

/* Solid teal plain-text card. */
.sr-card--teal {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.sr-card--teal .card-title,
.sr-card--teal .h3 { color: #fff; }
.sr-card--teal .card-text,
.sr-card--teal .body-text { color: rgba(255, 255, 255, 0.82); }
.sr-card--teal:hover { border-color: #fff; }

/* Navy stat / map panel. */
.sr-card--navy {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
}
.sr-card--navy .card-title,
.sr-card--navy .h2,
.sr-card--navy .h3 { color: #fff; }
.sr-card--navy .card-text,
.sr-card--navy .body-text { color: rgba(255, 255, 255, 0.78); }

/* Cyan feature card. */
.sr-card--cyan {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: #fff;
}
.sr-card--cyan .card-title { color: #fff; }

/* Magenta editorial card. */
.sr-card--magenta {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.sr-card--magenta .card-title { color: #fff; }
.sr-card--magenta .card-text { color: rgba(255, 255, 255, 0.85); }

/* Cream multilink panel. */
.sr-card--cream { background: var(--band-cream); border-color: transparent; }
/* Pale teal panel (accordion body, privacy bar). */
.sr-card--tint { background: var(--teal-tint); border-color: transparent; }

/* Banner card: image with a teal copy block sitting over it. */
.sr-banner { position: relative; display: block; }
.sr-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-banner-body {
  background: var(--teal);
  color: #fff;
  padding: clamp(22px, 3vw, 34px);
  max-width: 420px;
}
.sr-banner--overlay .sr-banner-body {
  position: absolute;
  left: 0;
  bottom: 12%;
}
.sr-banner-body .h2, .sr-banner-body .h3 { color: #fff; }

.panel { background: var(--surface-2); border: 1px solid var(--line-soft); }

.callout {
  background: var(--teal-tint);
  border-left: 2px solid var(--teal);
  padding: 16px 18px;
  margin-top: 18px;
}
.callout-text { margin: 0; font-size: 13.5px; color: var(--teal-dark); font-weight: 500; }

.thumb { width: 100%; height: 150px; object-fit: cover; display: block; }
.thumb--sm { height: 120px; }

.step { border-top: 2px solid var(--line); padding-top: 20px; transition: border-color 0.2s var(--ease); }
.step:hover { border-top-color: var(--teal); }
.step-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* The tint sits on the element so the band is exactly as tall as the hero.
     It used to be an oversized, offset pseudo-element with a fixed height —
     fine for the soft radial wash it once held, but as a solid fill that box
     no longer tracked the content: it spilled past short heroes and stopped
     short of tall ones. */
  background: var(--band-ice);
  padding: clamp(40px, 5vw, 68px) 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0 0 24px;
  font-weight: 700;
}

.device {
  background: #1d1d1f;
  padding: 10px 10px 14px;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--sh-3);
}
.device-screen { background: #000; overflow: hidden; border-radius: 6px 6px 0 0; }

/* --------------------------------------------------------------------------
   9. Metrics
   -------------------------------------------------------------------------- */
.metric-num {
  display: block;
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metric-num--light { color: var(--teal-bright); }
.metric-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--brand);
  color: #fff;
  padding: clamp(44px, 5vw, 68px) 0;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.cta-text { margin: 0; font-size: 15.5px; color: var(--teal-pale); max-width: 52ch; line-height: 1.6; }
.cta-text--sm { font-size: 13.5px; color: var(--teal-soft); }

/* --------------------------------------------------------------------------
   Illustrated module diagrams
   -------------------------------------------------------------------------- */
.dgm { margin: 0 0 clamp(28px, 3.5vw, 40px); }
.dgm-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.dgm-svg { display: block; width: 100%; min-width: 720px; height: auto; }

/* One colour switch per stage re-tints every shape inside it. */
.dgm-stage { color: #b4cbc9; --dgm-tint: #f4f8f8; transition: color 0.4s var(--ease); }
.dgm-stage.is-active { color: var(--teal); --dgm-tint: var(--teal-tint); }

.dgm-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dgm-fill { fill: currentColor; stroke: none; }
.dgm-tint { fill: var(--dgm-tint); stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.dgm-ghost { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.8; }

.dgm-label {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--subtle);
  text-anchor: middle;
  transition: fill 0.4s var(--ease);
}
.dgm-stage.is-active .dgm-label { fill: var(--ink); }
.dgm-num {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: currentColor;
  text-anchor: middle;
}
.dgm-tag { font-family: var(--font); font-size: 10.5px; font-weight: 600; fill: currentColor; text-anchor: middle; }

.dgm-wire {
  fill: none;
  stroke: var(--teal-line);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  animation: dgm-dash 1.4s linear infinite;
}
.dgm-wire--soft { stroke-width: 1.6; opacity: 0.75; }
@keyframes dgm-dash { to { stroke-dashoffset: -12; } }
.dgm-spark { fill: var(--teal); }

.dgm-caption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  min-height: 44px;
}
.dgm-caption-label { font-size: 14.5px; font-weight: 700; color: var(--teal); letter-spacing: -0.01em; }
.dgm-caption-desc { font-size: 14px; color: var(--muted); }

@media (max-width: 520px) {
  .copy-btn-flash { left: 0; top: 100%; margin: 7px 0 0; transform: translateY(-4px); }
  .copy-btn.is-copied .copy-btn-flash { transform: none; }
}

@media (max-width: 860px) {
  .dgm-label { font-size: 17px; }
  .dgm-num { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Copy-to-clipboard row
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--teal);
  background: var(--teal-tint);
  border: 1px solid var(--teal-tint-2);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.copy-btn:hover { background: var(--teal-tint-2); border-color: var(--teal-line); color: var(--teal-dark); }

.copy-btn-ic { width: 16px; height: 16px; flex: none; }
.copy-btn-ic--done { display: none; }
.copy-btn.is-copied .copy-btn-ic--copy { display: none; }
.copy-btn.is-copied .copy-btn-ic--done { display: block; }

/* Absolutely positioned, so showing the confirmation never reflows the row. */
.copy-btn-flash {
  position: absolute;
  left: 100%;
  margin-left: 10px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.copy-btn.is-copied { background: var(--teal); border-color: var(--teal); color: #fff; }
.copy-btn.is-copied .copy-btn-flash { opacity: 1; transform: none; }
.copy-btn.is-failed { border-color: #d98b6a; }

.copy-row-label { font-size: 14px; font-weight: 600; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Screenshot & video placeholders
   -------------------------------------------------------------------------- */
.sr-shot {
  background: var(--surface);
  border: 1px dashed var(--teal-line);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9aa6a5;
  text-align: center;
  padding: 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sr-shot:hover { border-color: var(--teal); background: var(--teal-tint); }
.sr-shot svg { width: 30px; height: 30px; opacity: 0.55; }
.sr-shot span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--subtle); }
.sr-shot-cap { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; }

.sr-shot-img {
  position: relative;
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--teal-line);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
  appearance: none;
  font: inherit;
  text-align: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sr-shot-img:hover, .sr-shot-img:focus-visible { border-color: var(--teal); }
.sr-shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* A small "expand" affordance that appears on hover/focus, so the image
   still reads as clickable without cluttering the thumbnail grid. */
.sr-shot-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(28, 35, 43, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
}
.sr-shot-zoom svg { width: 15px; height: 15px; }
.sr-shot-img:hover .sr-shot-zoom, .sr-shot-img:focus-visible .sr-shot-zoom { opacity: 1; transform: none; }

/* Lightbox — a bigger view of a screenshot plus the fuller write-up of what
   it shows. Built once and reused for every gallery on the page. */
body.sr-lightbox-locked { overflow: hidden; }
.sr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 26, 27, 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}
.sr-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.22s var(--ease); }
.sr-lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1120px;
  max-height: 100%;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sh-3);
  transform: scale(0.97) translateY(6px);
  transition: transform 0.22s var(--ease);
}
.sr-lightbox.is-open .sr-lightbox-inner { transform: none; }
.sr-lightbox-media {
  background: var(--surface-2);
  max-height: min(72vh, 720px);
  overflow: auto;
  border-bottom: 1px solid var(--line-soft);
}
.sr-lightbox-media img { display: block; width: 100%; height: auto; }
.sr-lightbox-body { padding: 20px 28px 26px; overflow-y: auto; }
.sr-lightbox-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.sr-lightbox-detail { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.sr-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(28, 35, 43, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}
.sr-lightbox-close:hover, .sr-lightbox-close:focus-visible { background: rgba(28, 35, 43, 0.86); }
.sr-lightbox-close svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .sr-lightbox-body { padding: 16px 18px 20px; }
  .sr-lightbox-title { font-size: 16px; }
}

.sr-video-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-3);
}
.sr-video-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
}
.sr-play {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.sr-video-ph:hover .sr-play { transform: scale(1.08); background: rgba(255, 255, 255, 0.24); }
.sr-play::after {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.sr-video-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1;
  font-size: 12px;
  color: var(--teal-pale);
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
}
.sr-video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  box-shadow: var(--sh-3);
}

/* --------------------------------------------------------------------------
   13. Accordion
   -------------------------------------------------------------------------- */
.sr-acc { border-bottom: 1px solid var(--line); }
.sr-acc:first-of-type { border-top: 1px solid var(--line); }
.sr-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.16s var(--ease);
}
.sr-acc summary::marker { content: ""; }
.sr-acc summary::-webkit-details-marker { display: none; }
.sr-acc summary .sr-acc-ic { flex: none; width: 18px; height: 18px; position: relative; }
.sr-acc summary .sr-acc-ic::before,
.sr-acc summary .sr-acc-ic::after {
  content: "";
  position: absolute;
  background: var(--teal);
  transition: transform 0.22s var(--ease);
}
.sr-acc summary .sr-acc-ic::before { left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; }
.sr-acc summary .sr-acc-ic::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
.sr-acc[open] summary .sr-acc-ic::after { transform: scaleY(0); }
.sr-acc summary:hover { color: var(--teal); }
.sr-acc[open] summary { color: var(--teal); }
.sr-acc .sr-acc-a {
  background: var(--teal-tint);
  padding: clamp(20px, 2.4vw, 28px);
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 8px;
}
.input,
select.input,
textarea.input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 110, 116, 0.18);
}
.input::placeholder { color: #9aa6a5; }

/* Solutions filter pills --------------------------------------------------- */
.sr-filter-pill {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.sr-filter-pill:hover { border-color: var(--teal); color: var(--teal); }
.sr-filter-pill[data-active="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.sr-filter-pill[data-active="true"]:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer { padding: 0 0 32px; background: var(--ink); color: #fff; border-top: none; }
.footer-grid {
  max-width: var(--container);
  margin: 0 auto clamp(28px, 3.5vw, 40px);
  padding: clamp(36px, 4.5vw, 52px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
.footer-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-title--lg { font-size: 14px; letter-spacing: -0.01em; text-transform: none; }
.footer-about { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.64); max-width: 36ch; line-height: 1.6; }
.flink { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); transition: color 0.16s var(--ease), padding-left 0.16s var(--ease); }
.flink:hover { color: #fff; padding-left: 3px; }
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
  flex-wrap: wrap;
  gap: 10px;
}
.footer a:not(.flink):not(.btn) { color: rgba(255, 255, 255, 0.72); }
.footer a:not(.flink):not(.btn):hover { color: #fff; }
/* Cream sign-up block, per the kit footer. */
.footer-signup {
  background: var(--band-cream);
  color: var(--ink);
  padding: clamp(20px, 2.6vw, 28px);
  max-width: 420px;
}
.footer-signup .footer-title { color: var(--ink); }
.ust-logo { height: 24px; width: auto; display: block; object-fit: contain; }

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 861px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4, .grid-5,
  .split-7-5, .split-5-7, .split-6-6,
  .cta-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }

  /* Single-row header, per the kit: brand left, menu control right. The links
     move into a full-width drawer beneath the bar instead of wrapping. */
  .site-nav {
    flex-wrap: nowrap;
    row-gap: 0;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--gutter);
  }
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    min-height: calc(100vh - var(--nav-h, 56px));
    max-height: calc(100vh - var(--nav-h, 56px));
    overflow-y: auto;
  }
  .site-nav.is-open .nav-links { display: flex; }

  .nav-links .nav-link {
    /* Blockified so vertical padding and the divider actually occupy height —
       the Product link sits inside .product-dropdown, so it is not a flex item
       and would otherwise stay inline at ~27px while its siblings are 62px. */
    display: block;
    padding: 17px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links .nav-link::after { content: none; }
  .nav-links .nav-link--active { color: var(--teal); }

  /* The hover mega panel can't work on touch — the Product entry becomes a
     plain row and its six modules list out beneath it. */
  .product-dropdown { display: block; position: static; }
  .product-dropdown:hover .product-dropdown-menu { display: none; }
  .product-dropdown-menu { display: none !important; }

  .nav-links .btn {
    margin: 0;
    width: 100%;
    justify-content: space-between;
    /* Comfortable touch target — overrides .btn--sm, which is sized for the
       desktop bar and lands under the 44px minimum here. */
    padding: 15px 16px;
    font-size: 15px;
  }
  /* Adjacent-sibling, not :first-of-type: among <a> siblings the first of type
     is the "Home" link, so :first-of-type never matched a button. */
  .nav-links .nav-link + .btn { margin-top: 24px; }
  .nav-links .btn + .btn { margin-top: 10px; }

  /* Brand shrinks so the bar stays one comfortable line at 360px. */
  .brand { gap: 9px; }
  .brand-name { font-size: 19px; }
  .brand-ust, .brand-sep { height: 22px; }
  .brand-logo { width: 26px; height: 26px; }

  header, section, footer { padding-left: 0; padding-right: 0; }
  [style*="padding:0 48px"], [style*="padding: 0 48px"],
  [style*="padding:14px 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="max-width:840px"] { padding: 0 20px !important; }

  .hero-title { font-size: clamp(30px, 8vw, 38px); }
  .page-title { font-size: clamp(28px, 7.5vw, 34px); }
  h1 { font-size: 30px; line-height: 1.15; }

  a[style*="height:320px"], a[style*="height:300px"] { height: 220px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transition: none; opacity: 1; transform: none; }
  .btn:hover, .sr-card:hover, .sr-tile:hover { transform: none; }
  .dgm-wire, .dgm-ring { animation: none; }
  .product-dropdown-menu-inner { animation: none; }
}

/* --------------------------------------------------------------------------
   14. Product module pages
   -------------------------------------------------------------------------- */

/* Hero ---------------------------------------------------------------- */
.mod-hero {
  position: relative;
  overflow: hidden;
  background: var(--band-ice);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(34px, 4.2vw, 56px) 0 clamp(40px, 4.6vw, 64px);
}
.mod-hero > * { position: relative; z-index: 1; }

.mod-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.mod-hero .page-title { margin-bottom: 16px; }
.mod-hero .page-lead { margin-bottom: 24px; }
.mod-hero .badge { margin-bottom: 18px; }
.mod-hero-chips { margin-top: 26px; }

/* Browser frame for real product screenshots */
.browser-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -26px rgba(28, 35, 43, 0.42), 0 2px 8px -3px rgba(28, 35, 43, 0.16);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: #d7dfde; flex: none; }
.browser-url {
  flex: 1;
  margin-left: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--subtle);
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-body { display: block; background: var(--surface); }
.browser-body img { display: block; width: 100%; height: auto; }

/* Fallback visual when a module has no screenshot yet */
.mod-hero-panel {
  background: var(--teal-dark);
  color: #fff;
  padding: clamp(26px, 3vw, 38px);
  box-shadow: 0 26px 60px -26px rgba(28, 35, 43, 0.5);
}
.mod-hero-panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-soft);
  display: block;
  margin-bottom: 18px;
}
.mod-hero-panel-list { display: grid; gap: 14px; }
.mod-hero-panel-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mod-hero-panel-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mod-hero-panel-item svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--teal-bright); }

/* Sub-navigation ------------------------------------------------------ */
.mod-subnav {
  position: sticky;
  top: var(--nav-h, 64px);
  z-index: 800;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.mod-subnav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 54px;
}
.mod-subnav-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  flex: none;
  padding-right: 20px;
  border-right: 1px solid var(--line);
}
.mod-subnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.mod-subnav-links::-webkit-scrollbar { display: none; }
.mod-subnav-links a {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 16px 12px;
  white-space: nowrap;
  transition: color 0.16s var(--ease);
}
.mod-subnav-links a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.2s var(--ease);
}
.mod-subnav-links a:hover { color: var(--teal); }
.mod-subnav-links a.is-active { color: var(--teal); }
.mod-subnav-links a.is-active::after { transform: scaleX(1); }
.mod-subnav .btn { flex: none; }

[data-scroll-anchor] { scroll-margin-top: calc(var(--nav-h, 64px) + 62px); }

/* Spec strip ---------------------------------------------------------- */
.mod-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mod-spec-item { background: var(--surface); padding: 22px 24px; }
.mod-spec-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.mod-spec-v { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Problem cards ------------------------------------------------------- */
.prob-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid #e4b9b1;
  padding: 22px 22px 22px 19px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.prob-card:hover {
  border-left-color: #d93025;
  box-shadow: var(--sh-2);
}
.prob-ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fdeceb;
  color: #c0584a;
}
.prob-ic svg { width: 18px; height: 18px; }
.prob-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* Capability cards ---------------------------------------------------- */
.cap-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cap-card:hover { border-color: var(--teal); }
.cap-ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--teal-tint);
  color: var(--teal);
}
.cap-ic svg { width: 18px; height: 18px; }
.cap-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* Case study band ----------------------------------------------------- */
.case-band {
  background: var(--teal-dark);
  color: #fff;
  padding: clamp(44px, 5vw, 68px) 0;
}
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.case-title { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.case-desc { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.case-outcome {
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--teal-bright);
  padding: 24px;
}
.case-outcome-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 10px;
}
.case-outcome p { margin: 0; font-size: 15px; line-height: 1.65; color: #fff; }

/* Featured screenshot ------------------------------------------------- */
.shot-feature { margin-bottom: 16px; }
.shot-feature .sr-shot-img { aspect-ratio: 16 / 8.4; }

/* Other modules ------------------------------------------------------- */
.mod-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.mod-switch-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  padding: 18px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mod-switch-card:hover {
  border-color: var(--teal-line);
  border-top-color: var(--teal);
  box-shadow: var(--sh-2);
}
.mod-switch-badge {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.mod-switch-name { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.mod-switch-desc { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .mod-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mod-hero-visual { max-width: 640px; }
  .case-grid { grid-template-columns: minmax(0, 1fr); }
  .mod-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mod-spec { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .mod-subnav-label { display: none; }
  .mod-subnav .btn { display: none; }
  .mod-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mod-switch { grid-template-columns: minmax(0, 1fr); }
  .browser-url { display: none; }
}

/* --------------------------------------------------------------------------
   15. Product hub page
   -------------------------------------------------------------------------- */
.hub-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hub-map-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal-line);
  padding: 16px 16px 18px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hub-map-tile:hover {
  border-top-color: var(--teal);
  box-shadow: var(--sh-2);
}
.hub-map-badge {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 7px;
}
.hub-map-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; }
.hub-map-desc { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Module cards with a screenshot thumbnail */
.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal-line);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hub-card:hover { border-color: var(--teal); }
.hub-card-shot {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.hub-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.hub-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hub-card-badge {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--teal-line);
  color: var(--teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 7px;
  margin-bottom: 12px;
}
.hub-card-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; }
.hub-card-desc { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.hub-card-go { font-size: 13px; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.hub-card-go::after { content: "→"; transition: transform 0.18s var(--ease); }
.hub-card:hover .hub-card-go::after { transform: translateX(3px); }

/* Architecture flow */
.arch-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.arch-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 20px;
}
.arch-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: var(--teal-line);
  z-index: 1;
}
.arch-step-n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 10px;
}
.arch-step h3 { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.arch-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.arch-rail {
  margin-top: 12px;
  background: var(--teal-tint);
  border: 1px solid var(--teal-line);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.arch-rail svg { width: 20px; height: 20px; flex: none; color: var(--teal); margin-top: 1px; }
.arch-rail h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--teal-dark); }
.arch-rail p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* Enterprise trait cards */
.trait-card { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
.trait-ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--teal-tint);
  color: var(--teal);
  margin-bottom: 14px;
}
.trait-ic svg { width: 18px; height: 18px; }
.trait-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.trait-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.faq-wrap { max-width: 840px; margin: 0 auto; }
.faq-padded .sr-acc { padding: 10px; }

@media (max-width: 1080px) {
  .arch-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-step:nth-child(2)::after { display: none; }
}
@media (max-width: 860px) {
  .hub-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .arch-flow { grid-template-columns: minmax(0, 1fr); }
  .arch-step::after { display: none !important; }
  .hub-map { grid-template-columns: minmax(0, 1fr); }
}

.hub-card-shot--mark {
  display: grid;
  place-items: center;
  background: var(--teal-tint);
}
.hub-card-shot--mark span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
  opacity: 0.55;
}


/* --------------------------------------------------------------------------
   18. Section bands
   The kit alternates full-width bands behind sections rather than floating
   cards on one flat page.
   -------------------------------------------------------------------------- */
.band { background: var(--surface); }
.band--gray { background: var(--band-gray); }
.band--cream { background: var(--band-cream); }
.band--ice { background: var(--band-ice); }
.band--tint { background: var(--teal-tint); }
.band--teal { background: var(--teal); color: #fff; }
.band--navy { background: var(--teal-deep); color: #fff; }
.band--ink { background: var(--ink); color: #fff; }
.band--teal .h2, .band--teal .page-title,
.band--navy .h2, .band--navy .page-title,
.band--ink .h2, .band--ink .page-title { color: #fff; }
.band--teal .lead, .band--navy .lead, .band--ink .lead { color: rgba(255, 255, 255, 0.8); }

/* Drawer open: freeze the page behind it. */
body.nav-open { overflow: hidden; }