/* Lumex marketing site - design tokens + page-level components.
* Bootstrap 5.3. Loads AFTER the compiled wwwroot/css/site.css (the shared
* @webority/theme chain), so plain rules here win over the library defaults
* without !important — see Pages/Shared/_Layout.cshtml for the load order.
* Brand values belong in the repo-root theme/, not here.
*/

:root {
  /* ============================================================
     Lumex brand bridge — --lx-* names alias the canonical --wui-*
     tokens (theme/_lumex-tokens.scss brand overrides + the shared
     @webority/theme base, compiled into site.css and loaded first).
     Every value below is a var() reference, never a literal — a
     library/brand-token fix flows straight through instead of being
     shadowed by a stale local copy (this is how the WCAG --wui-text-3
     fix got silently reverted before this cleanup).
     ============================================================ */
  --lx-primary: var(--wui-primary);
  --lx-primary-hover: var(--wui-primary-hover);
  --lx-primary-pressed: var(--wui-primary-pressed);
  --lx-primary-50: var(--wui-primary-50);
  --lx-primary-30: var(--wui-primary-30);
  --lx-primary-20: var(--wui-primary-20);
  --lx-primary-15: var(--wui-primary-15);
  --lx-primary-10: var(--wui-primary-10);
  --lx-primary-5: var(--wui-primary-5);

  --lx-heading: var(--wui-text-heading);
  --lx-text-1: var(--wui-text-1);
  --lx-text-2: var(--wui-text-2);
  --lx-text-3: var(--wui-text-3);
  /* AA-compliant 4.55:1 — was a hardcoded #78829D (3.5:1, failed AA) */
  --lx-text-4: var(--wui-text-4);
  --lx-text-5: var(--wui-text-5);
  --lx-white: var(--wui-bg-light);
  --lx-border-dark: var(--wui-border-light);
  --lx-border-light: var(--wui-border-soft);
  --lx-bg-dark: var(--wui-bg-muted);
  --lx-bg-light: var(--wui-bg-elevated);

  --lx-info: var(--wui-info-active);
  --lx-info-100: var(--wui-info);
  --lx-info-10: var(--wui-info-10);
  --lx-success: var(--wui-success-active);
  --lx-success-100: var(--wui-success);
  --lx-success-10: var(--wui-success-10);
  --lx-warning: var(--wui-warning-active);
  --lx-warning-100: var(--wui-warning);
  --lx-warning-10: var(--wui-warning-10);
  --lx-error: var(--wui-danger-active);
  --lx-error-100: var(--wui-danger);
  --lx-error-10: var(--wui-danger-10);

  /* ---- Consumed --color-* names (Pages/**, wwwroot/assets/*.css). Re-pointed
     onto the lx bridge above so marketing tracks the theme and can never
     drift from — or shadow a fix to — the library again. ---- */
  --color-bg: var(--wui-bg-light);
  /* marketing is flat white — not the portal's page-grey (--wui-bg-page) */
  --color-bg-subtle: var(--lx-bg-light);
  --color-bg-muted: var(--lx-bg-dark);
  --color-surface: var(--wui-bg-light);
  --color-border: var(--lx-border-dark);
  --color-border-strong: var(--lx-text-5);

  --color-text: var(--lx-text-1);
  /* body */
  --color-text-muted: var(--lx-text-2);
  /* sub-body, lead */
  --color-text-subtle: var(--lx-text-3);
  /* eyebrows, labels */

  --color-primary: var(--lx-primary);
  --color-primary-hover: var(--lx-primary-hover);
  --color-primary-soft: var(--lx-primary-10);

  --color-success: var(--lx-success-100);
  --color-success-soft: var(--lx-success-10);
  --color-warning: var(--lx-warning-100);
  --color-danger: var(--lx-error);

  /* Pin link-hover to the pressed-primary shade — the one deliberate marketing
     divergence from the compiled site.css default (--wui-accent-dark). --bs-primary /
     --bs-primary-rgb / --bs-link-color / --bs-link-color-rgb are NOT redeclared here:
     the compiled site.css already sets them to this identical brand value. */
  --bs-link-hover-color: var(--wui-primary-pressed);

  --radius-sm: var(--wui-radius-sm);
  --radius: var(--wui-radius);
  --radius-lg: var(--wui-radius-lg);
  --radius-xl: var(--wui-radius-xl);

  /* Horizontal page gutter used by full-bleed sections (.energy-hero-inner, etc.) —
     a fixed 24px, unlike the theme's responsive --wui-container-pad (24/64/88px).
     No --wui-* equivalent; marketing-only. */
  --page-pad: clamp(20px, 1.8vw, 24px);

  /* ajuni-layout aliases, bound to the Lumex palette via the lx bridge above. */
  --aj-ink: var(--lx-heading);
  /* headings, dark sections, footer */
  --aj-body: var(--lx-text-1);
  /* body text */
  --aj-muted: var(--lx-text-2);
  /* secondary text */
  --aj-bg-light: var(--lx-bg-light);
  /* alternating section background */
  --aj-border: var(--lx-border-dark);
  /* hairlines */
  --aj-blue: var(--lx-primary);
  /* marketing accent = primary royal blue */
  --aj-blue-soft: var(--lx-primary-10);

  /* Motion — ajuni's easing curves, aliased onto the identical theme tokens. */
  --aj-ease-out: var(--wui-ease-out-quart);
  /* ease-out-quart */
  --aj-ease-ui: var(--wui-ease-ui);

  /* ============================================================
     TYPE-TIER SCALE — one size per heading level, site-wide.
     Every marketing heading, lead and eyebrow references a token
     below instead of its own clamp(), so all "same level" headings
     render at exactly one size across every page. Each token is a
     single fluid clamp() (mobile floor → desktop ceiling), so the
     tiers stay consistent at every width with no per-page mobile
     cap needed. Weight / letter-spacing / colour stay per-class —
     only the SIZE is unified here.
       display  page hero headline / .h-display / legal H1
       h1       primary section title (.section-head-title)
       h2       content section headers (<h2>, dark-card titles)
       h3       card / sub-headings (feature + customer cards)
       h4       small card titles / footer headings
       lead     every intro / section-lead paragraph
       eyebrow  kicker labels above a heading
       kicker   tiny uppercase micro-labels
     ============================================================ */
  --lx-fs-display: clamp(24px, 5.5vw, 56px);
  --lx-fs-h1: clamp(22px, 4.4vw, 42px);
  --lx-fs-h2: clamp(20px, 3.4vw, 32px);
  --lx-fs-h3: clamp(18px, 2.4vw, 24px);
  --lx-fs-h4: clamp(16px, 1.6vw, 20px);
  --lx-fs-lead: clamp(14px, 1.8vw, 18px);
  --lx-fs-eyebrow: clamp(13px, 1.1vw, 14px);
  --lx-fs-kicker: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

/* Mobile hamburger button — icon size lived as an inline style="font-size:24px";
   moved here so the markup carries no inline CSS. The glyph itself is an SVG sized
   24x24 by .hamburger-btn .wui-icon in site.scss; this keeps the button's own
   font-size context unchanged. */
.hamburger-btn {
  font-size: clamp(21px, 1.9vw, 24px);
}

/* GSAP word-reveal: clip mask per word + translatable inner span. */
.mtn-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.mtn-word-i {
  display: inline-block;
  will-change: transform;
}

/* Lenis smooth scroll cooperation (onething.design-style inertia). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------- Brand mark ----------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f50e4 0%, #4764e4 50%, #97a8f2 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: linear-gradient(135deg,
      transparent 40%,
      rgba(255, 255, 255, 0.18) 60%,
      transparent 80%);
}

.brand-mark svg {
  position: relative;
  z-index: 1;
}

/* Full Lumex logo (mark + wordmark). The wordmark path uses currentColor, so it
inherits the .brand color — dark on the light nav/footer, and it flips to white
automatically on any dark background (e.g. .footer-brand .brand color override). */
/* One size for every placement of the mark: the sticky nav, the mobile nav overlay
   and the footer. It used to be 30px here with the footer overriding to 36px, so the
   two read as different logos and a change here silently missed the footer. Do not
   reintroduce a per-surface override. 44px clears the nav bar's 70px min-height with
   13px either side, so the header does not grow. */
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* ----------------- Buttons ----------------- */
/* All button chrome — including .btn-ghost (added to @webority/theme in 0.7.2) —
   now comes from the shared library, compiled into site.css. No local button
   overrides remain; marketing renders identical button chrome to the portal. */

/* Avatars (.avatar / -sm / -lg) now come from the shared library
   (@webority/theme/scss/wui-components, compiled into site.css). */

/* ----------------- Marketing pages ----------------- */
.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Same horizontal inset model as .section / .footer: the 24px lives on the
     bar, and the inner .container carries 0 padding (rule below), so the header
     content edge lines up exactly with every section's content, not 24px inboard. */
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}

/* Scrolled state: frosted white at 60%, blurred backdrop, no shadow, no border. */
.marketing-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Smart-sticky: tuck out of view on scroll-down, glide back on scroll-up. */
.marketing-nav.is-hidden {
  transform: translateY(-100%);
}

/* Width + responsive step-downs come from Bootstrap's .container-xxl;
this layer only adds the flex layout and the vertical shrink animation. */
.marketing-nav-inner {
  min-height: 70px;
  padding-block: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: min-height 0.3s ease;
}

/* Header container carries no horizontal padding of its own (the .marketing-nav
   bar supplies the 24px), matching .section > .container so the logo/left edge
   aligns pixel-for-pixel with every section and the footer. */
.marketing-nav>.container {
  padding-left: 0;
  padding-right: 0;
}

.marketing-nav.is-scrolled .marketing-nav-inner {
  min-height: 70px;
}

.marketing-nav .brand {
  transition: transform 0.3s ease;
}

.marketing-nav-links {
  display: flex;
  gap: 6px;
}

.marketing-nav-link {
  position: relative;
  padding: 7px 14px;
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--color-text);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 400;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* Hover: the text grows a little, nothing else. */
.marketing-nav-link:hover {
  color: var(--color-primary);
  text-decoration: none;
  transform: scale(1.06);
}

.marketing-nav-link.is-active {
  color: var(--color-text);
  font-weight: 600;
}

.section {
  padding: clamp(48px, 6.2vw, 80px) var(--page-pad);
}

/* Bootstrap container → same fluid-then-capped model. styles.css loads after
Bootstrap, so this plain rule overrides Bootstrap's stepped max-width ladder.
24px side padding aligns the header/footer edges with the section content. */
.container {
  max-width: 1320px;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Inside a page section the .container carries no padding of its own — the
   gutter comes from the parent .section / .page-hero — so the header/footer
   container (which keeps its 24px) and the section container line up exactly. */
.section>.container,
.page-hero>.container {
  padding-left: 0;
  padding-right: 0;
}

/* Two-column "split" rows (text + figure) carry an inline `--bs-gutter-x:100px`
for a wide column gap. Bootstrap turns that into -50px row margins; only at
>=1440px does the centred container leave enough slack to absorb them, so below
that the row overhangs the viewport (~26px each side) and triggers horizontal
scroll on every page that uses the pattern (About, For/*). Cap the gutter on
smaller screens to a value the container's padding can absorb. The >=1440
desktop baseline keeps the full 100px gap unchanged. */

.lead {
  font-size: var(--lx-fs-lead);
  color: var(--color-text-muted);
  max-width: 620px;
  line-height: 1.6;
  margin: 18px 0 0;
}

/* ---- Global page hero (every non-home page) -------------------------
Cloned from the NextSaaS "Core features" hero: centered tinted-pill
eyebrow, large tight heading in the header colour (no accent word),
text-1 lead. Rendered by Shared/_PageHero from ViewData["Hero*"]. */
.page-hero {
  padding: clamp(72px, 9.2vw, 120px) 10px;
  text-align: center;
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 9999px;
}

.page-hero h1 {
  font-size: var(--lx-fs-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--lx-heading);
  margin: 0 auto;
  max-width: 880px;
  padding-bottom: 0.06em;
}

.page-hero .lead {
  font-size: var(--lx-fs-lead);
  color: var(--color-text);
  max-width: 800px;
  margin: 22px auto 0;
}

.page-hero .lead a {
  color: var(--color-primary);
  font-weight: 500;
}

/* ---- Ajuni eyebrows -------------------------------------------------
Accent-dot label for hero/section kickers, plus a tracked uppercase
variant for section headers. Ported from the Ajuni design system. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--lx-fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  /* brand primary #2F50E4 */
}

.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-primary);
}

.eyebrow--on-dark {
  color: rgba(255, 255, 255, 0.85);
}

.eyebrow--on-dark::before {
  background: #ffffff;
}

/* Tracked uppercase section kicker (Ajuni section-eyebrow). */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: var(--lx-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  /* brand primary #2F50E4 */
}

/* ---------------------------------------------------------------
Global section header — the canonical eyebrow + title + lead
block from the home "How it works" section, lifted into one
reusable component. Centered by default; add .section-head--start
to left-align it inside split/column layouts.
--------------------------------------------------------------- */
.section-head {
  text-align: center;
  margin: 0 auto clamp(30px, 3.8vw, 50px);
}

.section-head-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font-size: var(--lx-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  /* brand primary #2F50E4 */
}

.section-head-title {
  margin: 0;
  font-size: var(--lx-fs-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #071437;
  /* The browser evens the lines a headline wraps onto. Several of these titles used to carry a
     hard <br> to get the same shape, which put a break inside the sentence a crawler and a screen
     reader read, and only looked right at the width it was chosen for. */
  text-wrap: balance;
}

.section-head-lead {
  max-width: 800px;
  margin: 18px auto 0;
  font-size: var(--lx-fs-lead);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Left-aligned variant for in-column headers; spacing handled by the
following element's own margin, so no forced bottom gap here. */
.section-head--start {
  text-align: left;
  margin: 0;
}

.section-head--start .section-head-lead {
  margin-left: 0;
  margin-right: 0;
}

/* ----------------- Footer (dark) ----------------- */
/* Layout (width, columns, gutters) comes from Bootstrap .container + .row/.col-*. */
.footer {
  background: #0b0e16;
  color: rgba(255, 255, 255, 0.6);
  /* 24px horizontal inset (var(--page-pad)) matches .section / .marketing-nav so
     the footer content edge aligns with the header and every section. */
  padding: clamp(48px, 6.2vw, 80px) var(--page-pad) clamp(22px, 2.8vw, 36px);
  margin-top: 0;
  border-top: 0;
}

/* Footer container carries no padding of its own at any width (the .footer wrapper
   supplies the inset), so its content spans the full 1320/1440 column like a
   section. Previously this was mobile-only, leaving the footer 24px inboard on
   desktop. */
.footer .container {
  padding-left: 0;
  padding-right: 0;
}

/* AppButton has no true "link" variant — variant="link" silently falls back
   to primary, so this uses the closest real variant (ghost: transparent,
   no border) and strips the rest of the .btn box model (padding, radius,
   inline-block, ghost's hover-fill) back to a plain inline text link. For
   triggers that open something (e.g. the cookie-settings panel) rather than
   navigate, which must be a real <button> for accessibility, not a bare
   <a href="#">, but must still READ as a link wherever it sits among them. */
.btn-ghost.link-btn {
  padding: 0;
  border-radius: 0;
  display: inline;
  vertical-align: baseline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  color: var(--color-primary);
}

.btn-ghost.link-btn:hover {
  background: none;
  color: #2440c4;
}

.footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: clamp(13px, 1.2vw, 15px);
  transition: color 0.15s ease;
}

.footer a:hover {
  color: #ffffff;
}

.footer .btn-ghost.link-btn {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: clamp(13px, 1.2vw, 15px);
  transition: color 0.15s ease;
}

.footer .btn-ghost.link-btn:hover {
  background: none;
  color: #ffffff;
}

/* Top band: brand (left) + newsletter (right) */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

/* wordmark → white (mark stays brand blue) */
.footer .footer-top>.brand {
  color: #ffffff;
}

.footer-tagline {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* Divider */
.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: clamp(24px, 3.4vw, 44px) 0;
  opacity: 1;
}

/* Link columns */
.footer h3 {
  color: #ffffff;
  font-size: var(--lx-fs-h4);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 18px;
  text-transform: none;
  letter-spacing: 0;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Column grid: 3 link columns, contact info, then the waitlist form (divided off). */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.35fr 1.25fr;
  gap: 32px;
  align-items: start;
}

.footer-contact address {
  font-style: normal;
  font-size: clamp(12px, 1.2vw, 15px);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 18px;
  max-width: none;
}

.footer-contact a {
  display: block;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.9;
}

.footer-cta {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: clamp(19px, 2.5vw, 32px);
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 24px;
  flex-wrap: wrap;
  font-size: clamp(13px, 1.1vw, 14px);
  color: rgba(255, 255, 255, 0.45);
}

.footer-copy strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.footer-copy a {
  color: inherit;
}

.footer-copy a:hover strong {
  color: #ffffff;
}

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* ----------------- Back-to-top ----------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  corner-shape: round;
  -webkit-corner-shape: round;
  background: #0b0e16;
  /* black by default */
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* hover → primary */
/* Inverted while sitting over a dark section (e.g. the footer). */
.back-to-top.on-dark {
  background: #ffffff;
  color: #0b0e16;
}

.back-to-top.on-dark:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* Smaller chevron, dead-centred. Must target `.back-to-top .wui-icon` (not `.back-to-top svg`):
     the compiled theme ships `.back-to-top .wui-icon { width:22px;height:22px }` at 0,2,0
     specificity, which out-ranks a `.back-to-top svg` (0,1,1) rule — so the size only takes
     effect from the same selector (this file loads after site.css, so it wins on order).
     `display:block` neutralises the app-icon's inline `vertical-align:-.125em`, which otherwise
     drops the glyph below centre; the flex centering on .back-to-top then lands it dead-centre. */
.back-to-top .wui-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* ----------------- AppTabs: border-0 honoured ----------------- */
/* `<app-tabs class="border-0">` lands the class on the outer .app-tabs-group, but the
     underline is on the inner .app-tabs tablist, so the utility alone doesn't remove it.
     Drop the tablist's bottom rule when its group opts out, so border-0 works as written
     (used by the Resources filter strip). */
.app-tabs-group.border-0 .app-tabs {
  border-bottom: 0;
}

/* The FAQ accordion runs full-width. (An earlier 64px right inset reserved a clear band for the
     +/- toggle icon against the fixed bottom-right overlays — back-to-top + chat launcher. It's
     removed: the whole <summary> row toggles the <details> on click, so the question text stays
     tappable even if the icon overlaps an overlay, and full-width is the product preference.) */

/* ----------------- .faq-q collision with the shared library -----------------
     @webority/theme (site.css) ships a .faq-q *button* component:
       .faq-q { display:flex; align-items:center; justify-content:space-between;
                gap:16px; width:100%; padding:16px 18px; ... }
     The marketing accordions reuse the same class name on a <details>. Inheriting a
     row flex container makes <summary> a flex ITEM, so it is shrink-to-fit instead of
     filling the row — its right-aligned .faq-toggle then lands at a different x on every
     row (measured on /Faq at 1200px: 179/361/696/690/513/361/445/318/334, against a
     content edge of 730). The 18px inline padding also indents the whole accordion out
     of line with the section heading above it.
     Restoring the native block layout for the <details> usage lets the summary — itself a
     block-level flex container with justify-content:space-between — fill the row, so every
     toggle sits on one right edge. Scoped to details.faq-q so the library's own
     <button class="faq-q"> is untouched. Fixes /Faq, /Platform and /iec-62305-software. */
details.faq-q {
  display: block;
  padding: 0;
}

/* Section tint for component bands (card grids, tables). #F9FBFC, lighter than
     Bootstrap's .bg-body-tertiary (#F5F6FA), so white cards read as panels on it. */
.section-tint {
  background: var(--color-bg-subtle);
}

/* Two component bands back to back merge into one long grey slab with no
     visible join. A hairline keeps the structure legible without reintroducing
     the alternating stripe. */
.section-tint+.section-tint {
  border-top: 1px solid var(--color-border);
}

/* ----------------- Article intro / standfirst (resource guides) -----------------
     The opening block under the hero band. It carries the article's premise, so it
     is set larger than body copy and to a tighter measure than the container, with
     a short brand rule opening it. Everything after it steps down to body size.
     Two columns, so it uses the container instead of stranding a narrow measure
     on the left: the premise as a large statement (the Home page device), the
     supporting copy beside it at body size. */
.article-intro-statement {
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.article-intro-statement p {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--lx-heading);
  margin: 0;
}

.article-intro-body>p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.72;
  color: var(--lx-text-2);
  margin: 0 0 20px;
}

.article-intro-body>p:last-child {
  margin-bottom: 0;
}

.article-intro-body a {
  color: var(--color-primary);
}

/* A note that sits with a card grid, in a section whose head is centred.
     Left-aligning a 68ch column under a full-width 3-up grid strands it beside a
     half-empty row; centring the block but keeping the text ragged-left just
     turns it into a floating slab. So it reads as a caption: centred text, one
     step down in size, at a measure short enough to stay comfortable.
     Left-aligning a bare 68ch column under a full-width grid strands it beside a
     half-empty row, and centring the text just turns six ragged lines into a
     floating slab. So it gets a container: a panel spanning the grid, on the
     aside device already in the language, with the text left-aligned inside it. */
.article-note {
  margin: clamp(16px, 2.2vw, 28px) 0 0;
  padding: 22px clamp(16px, 2vw, 26px);
  background: #ffffff;
  font-size: clamp(15px, 1.6vw, 16px);
  font-weight: 400;
  color: var(--lx-text-1);
}

/* Tinted variant — same panel, sitting on a .section-tint band. */
.article-note.article-note--tint {
  background: var(--color-bg-subtle);
}

/* A section head carries ONE lead. Longer set-up copy that would make a second
     centred paragraph run to five or six ragged lines becomes a panel instead:
     left-aligned, full width, sitting between the head and the grid. */
.article-note.is-intro {
  margin: 0 0 clamp(16px, 2.2vw, 28px);
}

.article-note a {
  color: var(--color-primary);
}

/* The left-aligned head carries no bottom margin by design (spacing came from
     the element that followed it). Restore the gap for the blocks that now do. */
.section-head--start+.sf-grid,
.section-head--start+.article-note:not(.is-lead),
.section-head--start+.cmp-wrap {
  margin-top: clamp(26px, 3.4vw, 44px);
}

/* ----------------- Article aside (resource guides) -----------------
     An explanatory aside inside the reading column. Replaces the old
     .why-callout treatment (12px indigo-on-lilac panel), which predates the
     brand tokens and read as a warning rather than an explanation. */
.article-aside {
  display: flex;
  gap: 16px;
  margin: 4px 0 clamp(16px, 2vw, 26px);
  padding: 20px clamp(14px, 1.8vw, 24px);
  background: #f9fbfc;
  border-left: 3px solid var(--color-primary);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: var(--lx-text-2);
}

.article-aside:last-child {
  margin-bottom: 0;
}

.article-aside strong {
  color: var(--lx-heading);
  font-weight: 600;
}

.article-aside a {
  color: var(--color-primary);
}

.article-aside-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  line-height: 0;
}

.article-aside-icon .ic,
.article-aside-icon svg {
  width: 24px;
  height: 24px;
}

/* ----------------- Article editorial split (resource guides) -----------------
     Long-form prose cannot run the full 1320px container: at that width a line is
     ~200 characters and the page reads as slabs. The reference pages never do it
     either (Platform caps .launch-lead at 44ch, .section-head-lead at 800px).
     So a prose section becomes the same two-column device used by the FAQ and the
     how-it-works steps: kicker + title held in a left column, body at a natural
     reading measure on the right.

     Paired with this, background is a MODE signal, not a per-section stripe:
     prose sections stay white (one continuous reading surface), component
     sections (card grids, tables) carry --color-bg-subtle so they read as
     inserts. Alternating every section is what produced the zebra effect. */
.article-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: start;
}

.article-split-head {
  position: sticky;
  top: 104px;
}

.article-split-head .section-head-lead {
  margin-top: 14px;
  font-size: var(--lx-fs-lead);
}

.article-split--intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.section-head+.article-split--intro {
  margin-top: 32px;
}

.article-split--intro .lx-figure {
  margin: 0;
  width: 85%;
  justify-self: center;
}

.article-prose> :first-child {
  margin-top: 0;
}

.article-prose p {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.72;
  color: var(--lx-text-1);
  margin: 0 0 20px;
}

.article-prose p:last-child {
  margin-bottom: 0;
}

.article-prose a {
  color: var(--color-primary);
}

.article-prose strong {
  color: var(--lx-heading);
  font-weight: 600;
}

/* ----------------- Feature card (canonical, every page) -----------------
     The one card device for the whole site: About, Platform, IEC 62305 and
     every resource guide render the same chrome from here. Markup:
       <div class="sf-grid is-two">
         <div class="sf-card">
           <div class="sf-head-row"><span class="sf-ic">…icon…</span><span class="sf-code">Tag</span></div>
           <h3 class="sf-title">Title</h3>
           <p class="sf-desc">Body</p>
         </div>
       </div>
     Modifiers: .is-two / .is-three on the grid (default 4-up); responsive
     step-downs live in the RESPONSIVE block below. Pages must not redefine
     .sf-card / .sf-grid locally — a page that needs a different layout adds
     a modifier here instead. :not(.card) keeps this chrome off the resource
     index's clickable app-card hybrid, which carries .sf-card only as a
     filter/JS hook and keeps the app-card component's own border and radius. */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-grid.is-three {
  grid-template-columns: repeat(3, 1fr);
}

.sf-grid.is-two {
  grid-template-columns: repeat(2, 1fr);
}

.sf-card:not(.card) {
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: clamp(14px, 1.8vw, 24px);
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Tinted variant — same card, sitting on a .section-tint band. */
.sf-card.sf-card--tint {
  background: var(--color-bg-subtle);
}

.sf-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
}

/* A card with only a tag (no icon) keeps the tag on the left rather than pushed right. */
.sf-head-row.is-tag-only {
  justify-content: flex-start;
}

.sf-ic {
  color: var(--color-primary);
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
}

.sf-ic svg,
.sf-ic .ic {
  width: 30px;
  height: 30px;
}

.sf-code {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 999px;
  padding: 4px 11px;
}

.sf-title {
  font-size: var(--lx-fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--lx-heading);
  margin: 0;
}

/* Borderless variant — keeps the white card panel, drops the hairline border. */
.sf-grid.is-borderless .sf-card:not(.card) {
  border: 0;
}

/* Step variant — the home page's "how it works" treatment: no panel, a bare
     32px icon, and a brand hairline under the title so the rule and the copy
     below share one baseline across every column. Use it for an ordered set
     (stages, levels, types); the panel variant stays for unordered sets. */
.sf-grid.is-steps .sf-card {
  background: transparent;
  padding: 0;
  border: 0;
}

.sf-grid.is-steps .sf-head-row {
  margin: 0 0 clamp(14px, 1.8vw, 24px);
}

.sf-grid.is-steps .sf-ic {
  width: 32px;
  height: 32px;
}

.sf-grid.is-steps .sf-ic svg,
.sf-grid.is-steps .sf-ic .ic {
  width: 32px;
  height: 32px;
}

.sf-grid.is-steps .sf-title {
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e5fb;
  /* Two lines reserved so the rule lands on one baseline whatever the copy. */
  min-height: 2.5em;
}

.sf-grid.is-steps .sf-desc {
  margin-top: 0;
}

.sf-desc {
  font-size: clamp(15px, 1.6vw, 16px);
  font-weight: 400;
  color: var(--lx-text-1);
  margin: clamp(14px, 1.8vw, 24px) 0 0;
}

.sf-desc a {
  color: var(--color-primary);
}

/* ----------------- Statement band (resource guides) -----------------
     The home page's full-bleed image band, reused mid-article as a breather
     between long reading stretches: one line of copy over the guide's own
     photo, darkened and veiled so the text always clears AA. */
.res-statement-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  text-align: center;
  overflow: hidden;
  background: var(--color-text);
}

.res-statement-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.62);
}

.res-statement-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%,
      rgba(var(--bs-primary-rgb), 0.28) 0%,
      rgba(7, 20, 55, 0.4) 60%,
      rgba(7, 20, 55, 0.62) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.res-statement-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: clamp(34px, 4.3vw, 56px) var(--page-pad);
}

.res-statement-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
}

.res-statement-inner p {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* ----------------- Resource article hero band -----------------
     Full-width image directly under the page hero on every /resources/* article,
     emitted centrally by _Layout. Same brand treatment as the Platform band: the
     photo is desaturated and veiled in royal blue so it reads as one cohesive band. */
.res-hero-band {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background: var(--color-text);
}

.res-hero-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.6) brightness(0.9) contrast(1.03);
}

.res-hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 42%,
      rgba(var(--bs-primary-rgb), 0.34) 0%,
      rgba(var(--bs-primary-rgb), 0) 58%),
    linear-gradient(180deg,
      rgba(7, 20, 55, 0.42) 0%,
      rgba(7, 20, 55, 0) 24%,
      rgba(7, 20, 55, 0) 58%,
      rgba(7, 20, 55, 0.6) 100%),
    linear-gradient(90deg,
      rgba(7, 20, 55, 0.4) 0%,
      rgba(7, 20, 55, 0) 26%,
      rgba(7, 20, 55, 0) 74%,
      rgba(7, 20, 55, 0.4) 100%);
}

/* ----------------- FAQ accordion (canonical, every page) -----------------
     One component for /Platform, /Pricing, /Faq, /Waitlist and /iec-62305-software.
     Markup:
       <div class="faq-split">
         <div class="section-head section-head--start faq-split-head"> eyebrow + title + lead </div>
         <div class="faq-acc">
           <details class="faq-q"><summary>Q<span class="faq-toggle">…plus + cross svg…</span></summary>
             <div class="faq-body">A</div></details>
         </div>
       </div>
     Opening one item closes the rest (app.js). Page-local copies of this block are
     a deviation — extend here instead. */
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 100px;
  align-items: start;
}

.faq-split-head {
  position: sticky;
  top: 104px;
}

.faq-acc {
  interpolate-size: allow-keywords;
}

.faq-q {
  border-bottom: 1px solid #f4f6f8;
}

.faq-acc .faq-q:last-child {
  border-bottom: 0;
}

.faq-q summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  color: var(--color-text);
  transition: color 0.25s ease;
}

/* The question is a heading, so a reader moving by headings finds it and the answer under it.
   Everything the row looked like before came from the summary, so the heading inherits all of it
   and adds nothing of its own. */
.faq-q summary .faq-question {
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  min-width: 0;
}

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

.faq-q summary:hover {
  color: var(--color-primary);
}

.faq-q[open] summary {
  color: var(--color-primary);
}

/* <summary> is focusable, so a click paints the browser's default outline around the
     whole row. Drop it for pointer focus, keep a branded ring for keyboard users. */
.faq-q summary:focus {
  outline: none;
}

.faq-q summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 10px;
}

.faq-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -webkit-corner-shape: round;
  corner-shape: round;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  transition: background 0.3s ease;
}

.faq-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.faq-ico-plus {
  color: #fff;
  opacity: 1;
  transform: rotate(0deg);
}

.faq-ico-cross {
  color: #fff;
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-q[open] .faq-toggle {
  background: var(--color-primary);
}

.faq-q[open] .faq-ico-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-q[open] .faq-ico-cross {
  opacity: 1;
  transform: rotate(0deg);
}

/* Height animates 0 → auto via ::details-content + interpolate-size (Chromium today;
     other engines snap open, which degrades cleanly). */
.faq-q::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  content-visibility: hidden;
  transition:
    block-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease,
    content-visibility 0.45s allow-discrete;
}

.faq-q[open]::details-content {
  block-size: auto;
  opacity: 1;
  content-visibility: visible;
}

.faq-body {
  padding: 0 0 22px;
  color: var(--color-text);
  font-size: clamp(15px, 1.6vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  max-width: 80ch;
  transform: translateY(-8px);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-q[open] .faq-body {
  transform: none;
}

.faq-body a {
  color: var(--color-primary);
}

.roi-result {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(20px, 4.6vw, 36px);
  font-weight: 800;
  color: #059669;
  letter-spacing: -0.025em;
}

.legal-prose {
  max-width: 760px;
}

.legal-sec {
  padding: clamp(24px, 3.8vw, 50px) 0 0;
}

.legal-sec:first-child {
  padding-top: 8px;
}

.legal-sec h2 {
  font-size: var(--lx-fs-h2);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--lx-heading);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
}

.legal-num {
  display: none;
}

.legal-sec p,
.legal-sec li {
  color: var(--lx-text-1);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  line-height: 1.7;
}

.legal-sec p {
  margin: 0 0 12px;
}

.legal-sec p:last-child {
  margin-bottom: 0;
}

.legal-sec ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.legal-sec li {
  margin-bottom: 6px;
}

.legal-sec a {
  color: var(--color-primary);
  font-weight: 500;
}

.legal-sec strong {
  color: var(--color-text);
}

/* Two-column legal layout: sticky title aside (left) + prose (right) */
.legal-layout {
  display: grid;
  grid-template-columns: 3fr 7fr;
  column-gap: 100px;
  align-items: start;
}

.legal-layout .legal-prose {
  max-width: none;
}

.legal-aside {
  position: sticky;
  top: 100px;
}

.legal-aside h1 {
  font-size: var(--lx-fs-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--color-text);
  margin: 0 0 14px;
}

.legal-updated {
  font-size: clamp(13px, 1.1vw, 14px);
  color: var(--color-text-muted);
  margin: 0;
}

.legal-contact {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: var(--lx-text-1);
}

/* Mobile nav — full-screen overlay menu (shown under the lg breakpoint) */
.marketing-nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  padding: 14px 18px clamp(18px, 2.3vw, 30px);
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.marketing-nav-mobile.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

body.mkt-menu-open {
  overflow: hidden;
}

.marketing-nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

/* The mobile-nav close button is the shared <app-action-icon> library component
     (its own .u-action chrome + iconsax close-circle). app-action-icon has no colour
     prop and the glyph carries its own .wui-icon colour, so the brand-primary tint is
     applied to the glyph directly (a button-level class would not reach the svg). */
#marketingNavClose .wui-icon {
  color: var(--color-primary);
}

.marketing-nav-mobile-links {
  display: flex;
  flex-direction: column;
  margin-top: clamp(14px, 1.8vw, 24px);
  flex: 1 1 auto;
}

.marketing-nav-mobile-links>a {
  display: block;
  padding: 14px 2px;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  /* These links also carry .marketing-nav-link, whose 6px radius would curve
       the divider's ends; keep the hairline square edge to edge. */
  border-radius: 0;
}

.marketing-nav-mobile-links>a:last-child {
  border-bottom: 0;
}

.marketing-nav-mobile-links>a.is-active {
  font-weight: 700;
}

.marketing-nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: clamp(14px, 1.8vw, 24px);
}

/* ===================================================================
   Comparison table — the shared .cmp device used on Home, Pricing,
   About and IEC 62305. One definition here; each page sets only its own
   deltas (a min-width, a border tint, a header colour) in its own
   <style>, which loads after this file and therefore wins.
   =================================================================== */
.cmp-wrap {
  background: #ffffff;
  overflow-x: auto;
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.cmp th,
.cmp td {
  padding: 20px clamp(19px, 2.5vw, 32px);
  text-align: left;
  vertical-align: middle;
}

.cmp th+th,
.cmp td+td {
  border-left: 1px solid #f2f4f8;
}

/* Body cells are 16px by default (all .cmp tables) — one place. Dropped to
   12px on phones only, see the max-width:575px block below. */
.cmp td {
  font-size: 16px;
}

.cmp thead th {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lx-heading);
  padding: 22px clamp(19px, 2.5vw, 32px) 20px;
  border-bottom: 1px solid #f2f4f8;
}

.cmp thead th.lumex-col {
  color: #2f50e4;
}

.cmp tbody tr {
  border-top: 1px solid #f2f4f8;
}

.cmp tbody tr:first-child {
  border-top: 0;
}

.cmp td.demand {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--lx-text-2);
}

.cmp td.comp-code {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.cmp td.belongs {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* Row cell with a leading state icon — two icon vocabularies: .cmp-cell .ic +
   .cmp-yes/.cmp-no (Pricing), and .cmp-ic* (Home / About). */
.cmp-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--lx-text-1);
  font-weight: 400;
  line-height: 1.45;
}

.cmp-cell .ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.cmp-yes .ic {
  color: var(--color-success);
}

.cmp-no {
  color: var(--lx-text-3);
}

.cmp-no .ic {
  color: var(--lx-text-3);
}

.cmp-ic {
  flex: 0 0 auto;
  display: inline-flex;
}

.cmp-ic svg {
  width: 20px;
  height: 20px;
}

.cmp-ic-x {
  color: var(--color-danger);
}

.cmp-ic-check {
  color: var(--color-success);
}

/* ===================================================================
   Bento grid: the shared .bento-* device used on Home, Pricing and IEC 62305.
   Home and IEC 62305 also wrap it in the .bento-band aurora section below.
   =================================================================== */
/* Full-bleed aurora band: the abstract photo fits the full width, anchored to
   the bottom and blurred into a soft wash, under a light frost so the dark
   heading and white cards stay legible. */
.bento-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #ffffff;
}

.bento-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* cover, not 100% auto: at wide viewports the photo's natural height fell short of
     the section, leaving a flat grey strip of background-color along the top. */
  background: url('/assets/bento-aurora.jpg') center bottom / cover no-repeat;
  filter: blur(2px) saturate(1.05);
  transform: scale(1.06);
}

.bento-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The frost, fading up to solid white at the top edge so the band blends into
     the white section above instead of starting with a visible tinted strip. */
  background: linear-gradient(to bottom, #ffffff 0, rgba(255, 255, 255, 0.28) 160px);
}

.bento-band .bento-img {
  position: relative;
  border-radius: 0;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}

.bento-cell {
  border-radius: 0;
  overflow: hidden;
  min-height: 300px;
}

.bento-img {
  background-size: cover;
  background-position: center;
}

.bento-text {
  background: #ffffff;
  padding: clamp(14px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
}

.bento-text .code {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.bento-text h3 {
  font-size: var(--lx-fs-h3);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  /* These headings are written as two block spans rather than one line with a <br>, because the
     break is an art-direction choice and the spans keep a real space between the words for
     anything that reads the text rather than the layout. The floor holds two lines of room so a
     one-line card does not sit higher than its neighbours across the row. */
  min-height: 2.4em;
}

.bento-text h3 .d-block {
  line-height: 1.2;
}

.bento-text>p:last-child {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--color-text);
  margin: auto 0 0;
  padding-top: clamp(16px, 2.2vw, 28px);
}

/* ===================================================================
   Audience pages (/For/*) — the shared "who it's for" device: a full-bleed
   image band, a 3-up "what you get" benefits grid (borderless step cards
   with a hairline under each title), a bullet list, and a flat workflow
   figure. Was duplicated verbatim in every For/* page's own <style>;
   centralized here so those pages carry no copy. Responsive steps live in
   the RESPONSIVE block below.
   =================================================================== */
.aud-band {
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: #071437;
}

.aud-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.aud-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 64px);
}

.aud-benefit {
  display: flex;
  flex-direction: column;
}

/* ===================================================================
   Benefit card — THE shared icon + hairline-title + description device.
   One design, one class, used by the For/* pages, the Customers page
   "who it fits" grid and the home "How it works" cards. Spacing is
   clamp()-scaled so the card breathes with the viewport instead of
   jumping at breakpoints.
   Title reserves two TEXT lines so the hairline rule shares one baseline
   across the columns whether the title is one or two lines.
   box-sizing:content-box is required — the site sets border-box globally,
   which would fold padding into min-height and misalign the rule.
   Desktop-only: the <=768px block releases it — the benefits stack
   single-column there, so baseline alignment is meaningless and the
   reserved second line is dead space.
   =================================================================== */
.aud-benefit h3 {
  box-sizing: content-box;
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 600;
  color: var(--lx-heading);
  margin: 0 0 clamp(18px, 1.8vw, 22px);
  padding-bottom: clamp(12px, 1.2vw, 14px);
  border-bottom: 1px solid #e0e5fb;
  min-height: calc(2 * 1.2em);
}

.aud-benefit p {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.aud-ic {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-primary);
  background: transparent;
  border-radius: 0;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
}

.aud-ic .ic {
  width: 32px;
  height: 32px;
}

.aud-list {
  list-style: disc;
  padding: 0 0 0 20px;
  margin: clamp(19px, 2.5vw, 32px) 0 0;
  display: grid;
  gap: 14px;
}

.aud-list li {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--color-text);
  line-height: 1.55;
  padding-left: 6px;
}

.aud-list li::marker {
  color: var(--color-primary);
}

/* Workflow image: flat (no border, radius, shadow or hover), capped so the columns stay balanced. */
.aud-figure {
  overflow: hidden;
  height: 500px;
}

.aud-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inline icon helper (16px glyph in a run of text) — used by For/* and other pages. */
.ic-inline {
  display: inline-flex;
  vertical-align: middle;
}

.ic-inline .ic {
  width: 16px;
  height: 16px;
}

/* ===================================================================
   RESPONSIVE — every media query for this stylesheet lives here, in ONE
   place, grouped by breakpoint. Ordering is min-width first, then
   max-width widest → narrowest (so a narrower rule overrides a wider one
   at the overlap), then prefers-reduced-motion. Base component rules stay
   above; only their responsive overrides live in this block.
   =================================================================== */

@media (min-width: 1600px) {

  .container,
  .container-xxl {
    max-width: 1440px;
  }
}

@media (max-width: 1400px) {
  .section>.container>.row[style*="--bs-gutter-x"] {
    --bs-gutter-x: 40px !important;
  }
}

@media (max-width: 1200px) {

  /* Defensive horizontal clip on the content wrapper for small/medium screens.
  The wide comparison table (.cmp, min-width:760px) lives in an `overflow-x:auto`
  box so it scrolls internally; on narrow viewports a few px of that table still
  leaked into page-level horizontal scroll (its inner scroll context didn't fully
  contain it). Clipping the section wrapper's x-axis stops the leak without
  affecting the table's own internal scroll. Scoped to <=1200px so the >=1440
  desktop baseline (where nothing overflows) is never touched. Nothing in the
  section .container bleeds horizontally by design — full-bleed blocks (e.g. the
  image marquee) are their own sections outside this wrapper. */
  .section>.container,
  .page-hero>.container {
    overflow-x: clip;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40px;
    column-gap: 10px;
  }

  .footer-cta {
    border-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
  }

  .res-hero-band {
    height: 380px;
  }

  .aud-band {
    height: 420px;
  }

  /* Tighten link padding below xl. The desktop row (brand + eight links + CTA) needs ~934px
     of intrinsic width at the full 14px padding, which is exactly the container content box at
     lg — zero slack. The reduced padding brings that to ~888px, so the lg..xl band has room. */
  .marketing-nav-link {
    padding: 7px 10px;
  }

  .article-split {
    gap: 56px;
  }
}

/* 1024 rather than the lg tier: iPad landscape is exactly 1024 wide, and the bottom bar is
   the one footer row that runs out of width there while the rest of the footer still fits.
   This is the only place the stacked direction is set; every narrower block inherits it and
   adjusts spacing only, so the copyright stays above the links at every width below 1024. */
@media (max-width: 1024px) {
  .footer-bottom {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 992px) {

  /* .footer-grid / .footer-cta below md were a second copy of the identical
     rules in the max-width:1200px block above (992 < 1200, same values), so the
     duplicate 992px block was removed — the 1200px rules already cover this range. */
  /* Direction and alignment come from the 1024 block above and hold all the way down, so
     only the spacing tightens here. */
  .footer-bottom {
    gap: 10px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legal-aside {
    position: static;
  }

  .sf-grid,
  .sf-grid.is-three {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .article-split-head {
    position: static;
  }

  .article-prose {
    max-width: none;
  }

  .faq-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .faq-split-head {
    position: static;
  }

  .contact-form-wrapper {
    margin-top: 24px;
  }
}

/* Bento grids at 2 columns (sm up to the 992px break): cells 3/4 and 5/6 swap so the rows
   alternate like the desktop checkerboard. In plain page order the first two rows both opened
   the same way (text|image, text|image). Below sm the 575px block stacks them one per row and
   orders each pair by cell type, so every text cell sits above its own image. */
@media (min-width: 576px) and (max-width: 992px) {
  .bento-grid > :nth-child(1) { order: 1; }
  .bento-grid > :nth-child(2) { order: 2; }
  .bento-grid > :nth-child(3) { order: 4; }
  .bento-grid > :nth-child(4) { order: 3; }
  .bento-grid > :nth-child(5) { order: 6; }
  .bento-grid > :nth-child(6) { order: 5; }
  .bento-grid > :nth-child(7) { order: 7; }
  .bento-grid > :nth-child(8) { order: 8; }
}

/* An opted-in bento (the home page's national rules) runs 2-up at the md tier and keeps the
   checkerboard the 576-992 block sets, so the rows alternate text|image, image|text. Its own
   cells size to their content here, because a long heading clips against a fixed height. */
@media (min-width: 768px) and (max-width: 992px) {
  .bento-grid--four-up-md {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-grid--four-up-md .bento-cell {
    min-height: auto;
  }

}

@media (max-width: 768px) {
  .res-hero-band {
    height: 300px;
  }

  /* Two columns on a narrow screen leave a cell barely wider than its own text, so the
     desktop 300px floor stretches it well past what it holds. Let each cell size to its
     content instead; the 575 block does the same once the grid stacks single-column. */
  .bento-cell {
    min-height: auto;
  }

  .aud-band {
    height: 320px;
  }

  .aud-benefits {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Single-column stack: no sibling baselines to align, so release the desktop
     two-line min-height and let each title size to its own content. */
  .aud-benefit h3 {
    min-height: auto;
  }

  /* Below md the marketing FAQ accordions (Waitlist, Pricing) stack single-column
       and put their expand toggle in the page's right gutter — the same column this
       fixed button parks in. Measured overlap: 29px of a 36px toggle at 390px, 36px
       of 36px at 767px, so a toggle that scrolls into the button's band is unhittable.
       Raising z-index cannot help — whichever wins still covers the other. Nor can the
       two be separated horizontally: a button narrow enough to clear the toggle column
       would be ~24px, well under the 44px touch-target minimum. On touch widths the
       chat launcher already occupies that corner, so drop the button rather than let
       it swallow taps. It stays in the DOM, so app.js/smooth-scroll.js are unaffected. */
  .back-to-top {
    display: none;
  }

  /* ===================================================================
     Responsive button step-down. Below the md breakpoint (phones) every
     button drops one size tier so CTAs don't dominate a narrow screen:
     lg -> md, md -> sm. sm buttons stay sm; icon buttons keep their square
     sizing. Expressed through the same --bs-btn-* custom properties the
     theme sets, so only the size changes.
     =================================================================== */
  /* lg -> md */
  .btn-lg:not(.btn-icon),
  .btn-group-lg>.btn:not(.btn-icon) {
    --bs-btn-border-radius: 18px;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.5rem;
    min-height: auto;
  }

  /* md (default) -> sm */
  .btn:not(.btn-lg):not(.btn-sm):not(.btn-icon):not(.btn-pill):not(.btn-pill-sm) {
    --bs-btn-border-radius: 14px;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.25rem;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .page-hero {
    padding: 50px 10px;
  }

  .res-statement-band {
    min-height: 300px;
  }

  .cmp th,
  .cmp td {
    padding: 16px 20px;
  }

  .cmp thead th {
    font-size: 16px;
    padding: 20px;
  }

  .sf-grid,
  .sf-grid.is-three,
  .sf-grid.is-two {
    grid-template-columns: 1fr;
  }

  .sf-grid.is-steps .sf-title {
    min-height: 0;
    margin-bottom: 16px;
  }

  .sf-grid.is-steps .sf-head-row {
    margin-bottom: 16px;
  }
}

@media (max-width: 575px) {
  .sf-grid {
    gap: 1rem;
  }

  /* Comparison table on phones — tighten padding + header, and drop the body
     cell font from the 16px default (above) back to 12px. */
  .cmp th,
  .cmp td {
    padding: 12px 14px;
  }

  .cmp td {
    font-size: 12px;
  }

  .cmp thead th {
    font-size: 14px;
    padding: 14px 14px 12px;
  }

  .cmp-cell {
    gap: 10px;
  }

  /* Stack the icon above the text on phones so the long body isn't pinched into a
     narrow column beside the icon; bump the icon to 24px now that it sits on its own line. */
  .article-aside {
    flex-direction: column;
    padding: 16px 18px;
    gap: 12px;
  }

  .article-aside-icon .ic,
  .article-aside-icon svg {
    width: 24px;
    height: 24px;
  }

  /* ===================================================================
     Mobile typography. Heading tiers now floor themselves via the
     --lx-fs-* clamp() tokens (see :root), so no per-class heading cap is
     needed here — only the non-tokenized statement/number figures keep a
     phone cap.
     =================================================================== */
  .footer-tagline {
    font-size: 17px;
  }

  .plan-price {
    font-size: 26px;
  }

  .roi-result {
    font-size: 22px;
  }

  /* .section-head { margin: 0 auto 3ch; } */
  .footer .container {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-legal {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
    justify-content: center;
  }

  .footer-top {
    gap: 24px;
  }

  /* Mobile footer columns are owned by enhance.css's own max-width:560px rule
     (1fr 1fr), which loads after this file and wins. No .footer-grid override lives
     here: the old 560px `1fr` rule was always shadowed by enhance.css so it never
     rendered, and snapping it to this 575 tier would un-shadow it and produce a
     4-col → 1-col → 2-col progression between 561px and 575px. Removed instead. */
  /* Single-column stack: drop the equal-height rows so each cell sizes to its own
     content, and unpin the bento paragraph (it is bottom-pinned via margin:auto on
     desktop, which on a stretched mobile cell leaves a big gap under the title).
     Images keep a height with an explicit ratio now that the 1fr stretch is gone. */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  /* Stacked, every pair reads text first and its image directly under it. Ordering is by
     pair AND by cell type, never by position alone: the home page authors pairs 3 and 4
     image-first while Pricing and How it Works author pairs 1 and 2 that way, so a rule
     keyed on nth-child alone would correct one page and invert the other two. */
  .bento-grid > :nth-child(1).bento-text,
  .bento-grid > :nth-child(2).bento-text { order: 1; }
  .bento-grid > :nth-child(1).bento-img,
  .bento-grid > :nth-child(2).bento-img { order: 2; }
  .bento-grid > :nth-child(3).bento-text,
  .bento-grid > :nth-child(4).bento-text { order: 3; }
  .bento-grid > :nth-child(3).bento-img,
  .bento-grid > :nth-child(4).bento-img { order: 4; }
  .bento-grid > :nth-child(5).bento-text,
  .bento-grid > :nth-child(6).bento-text { order: 5; }
  .bento-grid > :nth-child(5).bento-img,
  .bento-grid > :nth-child(6).bento-img { order: 6; }
  .bento-grid > :nth-child(7).bento-text,
  .bento-grid > :nth-child(8).bento-text { order: 7; }
  .bento-grid > :nth-child(7).bento-img,
  .bento-grid > :nth-child(8).bento-img { order: 8; }

  .bento-cell {
    min-height: auto;
  }
  .bento-img {
    aspect-ratio: 25 / 10;
  }
  .bento-text > p:last-child {
    margin-top: 0;
  }

  .res-hero-band {
    height: 220px;
  }

  .aud-band {
    height: 230px;
  }

  .legal-sec h2 {
    margin: 0 0 12px;
  }

  /* FAQ accordion on phones: tighten the row spacing and shrink the toggle to 28px
     (icon 16px) — mobile only, the base stays 36px/20px on larger screens. */
  .faq-q summary {
    gap: 14px;
    padding: 16px 0;
  }

  .faq-toggle {
    width: 28px;
    height: 28px;
  }

  .faq-toggle svg {
    width: 16px;
    height: 16px;
  }

  .faq-body {
    padding: 0 0 18px;
  }

  .faq-split {
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-nav-link:hover {
    transform: none;
  }

  .faq-q::details-content,
  .faq-body,
  .faq-toggle,
  .faq-toggle svg {
    transition: none;
  }
}