/* 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-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);

  /* 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
     ============================================================ */
  /* The 30px floor keeps a phone's page title above the 26px closing-band heading. */
  --lx-fs-display: clamp(30px, 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;
}

/* Every heading evens out the lines it wraps onto, so none ends on a lone word. :where() keeps
   the rule at zero specificity, so a heading that sets its own text-wrap still wins. */
:where(h1, h2, h3, h4) {
  text-wrap: balance;
}

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

/* 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;
}

/* Section titles use the same mask; a little room below keeps descenders (g, y, p)
     from being clipped while the word rises. */
.section-head-title .mtn-word {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* Word fill (motion.js): each word's --o runs 0 to 1 with the scroll. Without the
     script the spans never exist, so the statement simply shows at full strength. */
.mtn-fill .mw {
  display: inline-block;
  opacity: calc(0.16 + 0.84 * var(--o, 1));
  /* Each word also lifts a touch as it lights, so the fill has depth, not just tone. */
  transform: translate3d(0, calc((1 - var(--o, 1)) * 0.22em), 0);
}

.res-statement-inner p.mtn-fill .mw {
  opacity: calc(0.28 + 0.72 * var(--o, 1));
}

/* Pinned statement opening a section (Home): motion.js adds .is-scrolly on desktop.
     The block grows tall and the line holds a little above centre while it fills;
     when the block ends the line releases straight into the content below it, so the
     statement and that content read as one section. Without it, an ordinary block. */
.statement-pin.is-scrolly {
  height: 170vh;
}

.statement-pin.is-scrolly .mission-stick {
  position: sticky;
  top: 26vh;
}


/* Standard-page intro (/standards/*): the Home statement + pillars pattern. The
     statement holds on screen on desktop while it fills word by word, each .sl line
     starting centred and gliding left as it meets the photo and pillars (motion.js). */
.std-intro .statement-pin {
  margin-bottom: clamp(40px, 6vw, 88px);
}

.std-intro .statement-line {
  font-size: clamp(22px, 2.45vw, 42px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #071437;
  margin: 0;
  text-align: left;
}

.std-intro .statement-line .sl {
  display: block;
  width: fit-content;
  max-width: 100%;
  will-change: transform;
}

@media (min-width: 992px) {
  .std-intro .statement-line .sl {
    white-space: nowrap;
  }
}

.std-intro .statement-std {
  color: var(--color-primary);
}

.std-intro .pillar-figure {
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-subtle);
}

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

@media (max-width: 991.98px) {
  .std-intro .pillar-figure {
    aspect-ratio: 16 / 10;
  }
}

/* Side by side, the content column sets the height and the photo fills it: the image
     is taken out of flow so a tall (portrait) source cannot stretch the row. */
@media (min-width: 992px) {
  .std-intro .row > :has(> .pillar-figure) {
    display: flex;
  }

  .std-intro .pillar-figure {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
  }

  .std-intro .pillar-figure img {
    position: absolute;
    inset: 0;
  }
}

.std-intro .pillar-cards {
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
}

/* Photo morph (Home and /standards/*, photo-morph.js, desktop only): one copy of the
     intro photo flies from under the held statement into its figure. Moved and sized by
     transforms only; the photo inside is counter-scaled so it keeps one crop. */
.photo-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-text);
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}

.photo-flyer img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
}

.pillar-figure.is-morphing img {
  visibility: hidden;
}

/* The pillar cards wait while the flying photo passes over their column, then rise in a
     cascade. Scoped to .is-morph-cards so GSAP's own card entrance elsewhere is untouched. */
.pillar-cards.is-morph-cards > div {
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.pillar-cards.is-morph-cards > div:nth-child(2) {
  transition-delay: .08s;
}

.pillar-cards.is-morph-cards > div:nth-child(3) {
  transition-delay: .16s;
}

.pillar-cards.is-morph-cards > div:nth-child(4) {
  transition-delay: .24s;
}

.pillar-cards.is-morph-cards.is-held > div {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition-duration: .35s;
  transition-delay: 0s;
}

.std-intro .pillar-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.std-intro .pillar h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 4px 0 16px;
  color: #071437;
}

.std-intro .pillar p {
  font-size: 14px;
  font-weight: 400;
  color: var(--wui-text-1);
  line-height: 1.62;
  margin: 0;
}

.std-intro .pillar-ctas {
  margin-top: clamp(28px, 3vw, 40px);
}

/* ----------------- Resource guide reading layer (article.js) -----------------
     Meta row under the hero, a reading-progress bar, and the "On this page" dock.
     Flat like the rest of the site: hairline borders and frosted white, no shadows. */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

/* The page hero is centred, so its meta row is too. */
.page-hero .art-meta {
  justify-content: center;
}

.art-meta span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--wui-primary-5);
  border: 1px solid var(--wui-primary-15);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lx-heading);
}

.art-meta span:first-child {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.art-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1080;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #6e8bff);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

.art-dock {
  /* Bottom centre: the cookie banner owns the bottom left, chat and back to top the
     bottom right, so the centre is the one corner-free spot on every page. One dark
     surface that grows upward from a pill into the contents card, so the bar and the
     list read as a single object rather than two floating boxes. */
  --dock-w: min(420px, calc(100vw - 160px));
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2vw, 28px);
  z-index: 1040;
  width: var(--dock-w);
  margin-left: calc(var(--dock-w) / -2);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.art-dock.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.art-dock-shell {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  corner-shape: round;
  -webkit-corner-shape: round;
  background: #0b0e16;
  color: #fff;
  transition: border-radius 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.art-dock.is-open .art-dock-shell {
  border-radius: 24px;
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
}

/* ---- Contents card (grows above the bar) ---- */
.art-dock-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.art-dock.is-open .art-dock-panel {
  grid-template-rows: 1fr;
}

.art-dock-panel-in {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.art-dock.is-open .art-dock-panel-in {
  opacity: 1;
  transition: opacity 0.3s ease 0.1s;
}

.art-dock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 20px 10px;
}

.art-dock-k {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.art-dock-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.art-dock-panel ol {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.art-dock-panel a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.art-dock-panel a .n {
  flex: 0 0 auto;
  width: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  padding-top: 2px;
  color: rgba(255, 255, 255, 0.35);
}

.art-dock-panel a .t {
  flex: 1 1 auto;
  min-width: 0;
}

.art-dock-panel a .s {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.art-dock-panel a .s svg {
  display: block;
  width: 18px;
  height: 18px;
}

.art-dock-panel a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.art-dock-panel a.is-past {
  color: rgba(255, 255, 255, 0.82);
}

.art-dock-panel a.is-past .s {
  opacity: 1;
  transform: none;
}

/* The section being read: a filled row with a brand rail on its left edge. */
.art-dock-panel a.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
}

.art-dock-panel a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--color-primary);
}

.art-dock-panel a.is-active .n {
  color: #8fa4ff;
}

/* ---- The bar ---- */
.art-dock-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 6px 0 6px;
}

.art-dock.is-open .art-dock-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.art-dock-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.art-dock-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.art-dock-btn:focus-visible,
.art-dock-step button:focus-visible {
  outline: 2px solid #8fa4ff;
  outline-offset: 1px;
}

.art-dock-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
}

.art-dock-ico svg {
  width: 16px;
  height: 16px;
  display: block;
}

.art-dock-txt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.art-dock-c {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

.art-dock-c b {
  color: #fff;
  font-weight: 600;
}

.art-dock-cur {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.art-dock-step {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.art-dock-step button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.art-dock-step button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.art-dock-step button:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: default;
}

.art-dock-step svg {
  width: 18px;
  height: 18px;
  display: block;
}

.art-dock-step .art-dock-next svg {
  transform: rotate(180deg);
}

/* Reading progress, a hairline along the bottom of the bar. */
.art-dock-track {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.art-dock-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #8fa4ff);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

@media (max-width: 575px) {
  /* Phones: the chat launcher sits bottom right, so the dock keeps clear of it. */
  .art-dock {
    --dock-w: calc(100vw - 104px);
    left: 16px;
    margin-left: 0;
  }

  .art-dock-step .art-dock-prev {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-dock,
  .art-dock-shell,
  .art-dock-panel,
  .art-dock-panel-in,
  .art-dock-panel a .s {
    transition: none;
  }
}

/* Resource guides (main holds a .res-hero-band and is not a standards page, which
     carries .std-intro): an article, not a landing page. Grey stays only behind card
     grids and tables, where it gives the cards their edge; text sections are white.
     A hairline separates two white sections that meet; where white meets grey the
     change of tone is the separator, so no line is drawn. */
main:has(.res-hero-band):not(:has(.std-intro)) .section-tint:not(:has(.sf-grid, .cmp-wrap, .bento-grid)) {
  background: #fff;
}

main:has(.res-hero-band):not(:has(.std-intro))
  :is(section.section:not(.section-tint):not(.bg-body-tertiary), section.section-tint:not(:has(.sf-grid, .cmp-wrap, .bento-grid)))
  + :is(section.section:not(.section-tint):not(.bg-body-tertiary), section.section-tint:not(:has(.sf-grid, .cmp-wrap, .bento-grid))) {
  border-top: 1px solid var(--color-border);
}

main:has(.res-hero-band):not(:has(.std-intro)) .section-tint:not(:has(.sf-grid, .cmp-wrap, .bento-grid)) .article-note {
  background: var(--color-bg-subtle);
}

/* "Reviewed against the standard" trust line: small mono, with a tick. */
.art-reviewed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--wui-primary-5);
  border: 1px solid var(--wui-primary-15);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lx-heading) !important;
}

.art-reviewed .ic,
.art-reviewed svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* Sticky section heading in a guide: a quiet "Section 4 of 12" marker and a line that
     fills as the section is read (article.js), so the column beside long text is not
     just empty space. */
.art-sec-prog {
  margin-top: 26px;
  max-width: 220px;
}

.art-sec-prog span {
  display: block;
  margin-bottom: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-text-3);
}

.art-sec-prog i {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 99px;
  background: var(--wui-primary-15);
  overflow: hidden;
}

.art-sec-prog i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
}

@media (max-width: 991.98px) {
  .art-sec-prog {
    display: none;
  }
}

/* Key phrase in a statement: a brand underline that draws as the phrase lights. */
.mk {
  position: relative;
}

.mk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.07em;
  border-radius: 1em;
  background: var(--color-primary);
  transform: scaleX(var(--u, 1));
  transform-origin: left;
}

/* Comparison tables: the Lumex column fills with brand tint, row after row. */
.cmp td.mtn-lx {
  /* A whisper of brand tint (about 4%), lighter than --color-primary-soft. */
  --lx-col-tint: color-mix(in srgb, var(--color-primary) 4%, #fff);
  background-image: linear-gradient(var(--lx-col-tint), var(--lx-col-tint));
  background-repeat: no-repeat;
  background-size: 100% 0;
  transition: background-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--r, 0) * 70ms);
}

.cmp.is-lit td.mtn-lx {
  background-size: 100% 100%;
}

/* Counters keep their width while the digits roll. */
.stat-ed-num,
.energy-stat-num {
  font-variant-numeric: tabular-nums;
}

/* 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 drawer
   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 85px min-height with
   20px either side, so the header does not grow. */
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* Phones: a smaller mark, still one size across the nav, the drawer and the footer, to
   sit beside the small (35px) buttons the bar shows below the sm breakpoint. */
@media (max-width: 575.98px) {
  .brand-logo {
    height: 34px;
  }
}

/* Trademark sign added after every visible "Lumex" by TrademarkMiddleware. Inter draws its own
   trademark glyph small, at cap height and tight to the letter before it, the way the logo carries
   it, so the glyph is left at the size and position the font gives it. Bootstrap raises every sup
   by half an em and shrinks it; adding vertical-align: super on top of that lifted the mark clear
   of the word and left a gap. Hero headings that motion.js rebuilds from plain text show the bare
   glyph, so this also keeps them identical to every other placement. */
sup.tm {
  /* 0.8 of the font's own glyph, lifted back so its top still meets the capital height. */
  top: -0.18em;
  font-size: 0.8em;
  font-weight: inherit;
  line-height: 0;
  margin: 0;
  letter-spacing: 0;
}

/* ----------------- 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: 85px;
  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);
}

/* ----------------- Standards mega menu (header) -----------------
     Apple's global-nav pattern in Lumex's language. Open state is .is-open on
     .nav-mega-wrap; the header reads it with :has(), so the bar and the band turn into
     one solid white sheet (the home page's dark-hero header flips to dark text,
     see Index.cshtml). The band grows down with clip-path, its columns cascade in by
     --i, and .nav-veil (enhance.js) blurs and dims the page underneath. */
:root {
  --nav-surface: #fff;
  --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Solid white while open, and no backdrop-filter: a filtered parent would stop the
     veil below from blurring the page. */
.marketing-nav:has(.nav-mega-wrap.is-open) {
  background: var(--nav-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-mega-trigger .nav-mega-chev {
  transition: transform 0.4s var(--nav-ease);
}

.nav-mega-wrap.is-open .nav-mega-chev {
  transform: rotate(180deg);
}

.nav-mega-wrap.is-open .nav-mega-trigger {
  color: var(--color-primary);
}

/* Open trigger: a primary bar draws under the label. */
.nav-mega-trigger::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.35s var(--nav-ease);
}

.nav-mega-wrap.is-open .nav-mega-trigger::after {
  transform: scaleX(1);
}

/* Hover bridge from the trigger down to the band, under the trigger only. */
.nav-mega-wrap.is-open .nav-mega-trigger::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 44px;
}

.nav-mega-trigger:focus:not(:focus-visible) {
  outline: none;
}

.nav-mega-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The band: same surface as the bar, so the two read as one sheet. */
.nav-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: 0 var(--page-pad);
  background: var(--nav-surface);
  border-bottom: 1px solid var(--color-border);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.32s var(--nav-ease), visibility 0s 0.32s;
}

.nav-mega-wrap.is-open .nav-mega {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.55s var(--nav-ease), visibility 0s;
}

.nav-mega>.container {
  padding-left: 0;
  padding-right: 0;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.85fr);
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  /* Columns carry their own padding (for the hover panel); pull the grid out by that
     much so the first column's text still lines up with the logo. */
  margin-inline: -20px;
  padding-top: clamp(18px, 2vw, 26px);
  padding-bottom: clamp(22px, 2.4vw, 32px);
}

/* Columns cascade in: each fades and drops into place, a beat after the last. */
.nav-mega-item,
.nav-mega-more {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-mega-wrap.is-open .nav-mega-item,
.nav-mega-wrap.is-open .nav-mega-more {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.6s var(--nav-ease), background-color 0.25s ease;
  transition-delay: calc(0.1s + var(--i, 0) * 0.05s), calc(0.1s + var(--i, 0) * 0.05s), 0s;
}

/* A standard: label, edition, one line, facts, and an Open link pinned to the
     bottom, so every column is the same height whatever its copy. */
.nav-mega-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: var(--lx-heading);
}

/* The site's link hover underlines text; inside the menu the panel is the hover cue. */
.nav-mega a:hover,
.nav-mega a:hover * {
  text-decoration: none;
}

.nav-mega-k {
  display: block;
    font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-text-3);
  transition: color 0.2s ease;
}

.nav-mega-name {
  display: block;
  margin-top: 10px;
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-mega-line {
  margin-top: 8px;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lx-text-2);
}

.nav-mega-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.nav-mega-facts span {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
    font-size: 12px;
  font-weight: 500;
  color: var(--lx-text-1);
  transition: border-color 0.2s ease;
}

.nav-mega-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lx-text-3);
  transition: color 0.2s ease;
}

.nav-mega-go .ic,
.nav-mega-go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s var(--nav-ease);
}

/* Hover and the current standard: a soft panel fills the column, the label and the
     edition take the brand colour, the Open link turns blue and its arrow steps on. */
.nav-mega-item:hover,
.nav-mega-item:focus-visible,
.nav-mega-item[aria-current="page"] {
  background: var(--wui-primary-5);
}

.nav-mega-item:hover .nav-mega-k,
.nav-mega-item:hover .nav-mega-name,
.nav-mega-item:hover .nav-mega-go,
.nav-mega-item:focus-visible .nav-mega-k,
.nav-mega-item:focus-visible .nav-mega-name,
.nav-mega-item:focus-visible .nav-mega-go,
.nav-mega-item[aria-current="page"] .nav-mega-k,
.nav-mega-item[aria-current="page"] .nav-mega-name {
  color: var(--color-primary);
}

.nav-mega-item:hover .nav-mega-facts span,
.nav-mega-item:focus-visible .nav-mega-facts span {
  border-color: var(--wui-primary-20);
}

.nav-mega-item:hover .nav-mega-go .ic,
.nav-mega-item:hover .nav-mega-go svg,
.nav-mega-item:focus-visible .nav-mega-go .ic,
.nav-mega-item:focus-visible .nav-mega-go svg {
  transform: translateX(4px);
}

.nav-mega-item:focus-visible,
.nav-mega-more a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Explore: the quieter column, behind a hairline, its label on the same line as
     the standards' labels so the four tops align. */
.nav-mega-more {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  /* Right padding matches the columns' 20px, so the list ends on the Contact button's edge. */
  padding: 0 20px 0 clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--color-border);
}

.nav-mega-more ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-mega-more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--lx-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-mega-more li:last-child a {
  border-bottom: 0;
}

.nav-mega-more a::after {
  content: "\2192";
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.3s var(--nav-ease);
}

.nav-mega-more a:hover,
.nav-mega-more a[aria-current="page"] {
  color: var(--color-primary);
}

.nav-mega-more a:hover::after {
  opacity: 1;
  transform: none;
}

/* The page under the open menu: a soft blur and dim, fading with the band. */
.nav-veil {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  z-index: 55;
  background: rgba(15, 23, 42, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}

.marketing-nav:has(.nav-mega-wrap.is-open) .nav-veil {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega,
  .nav-mega-item,
  .nav-mega-more,
  .nav-mega-chev,
  .nav-mega-trigger::after,
  .nav-veil {
    transition: none !important;
  }
}

.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: 500;
  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);
}

/* ---------------------------------------------------------------
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 */
}

/* The plural "s" in an acronym eyebrow (FAQs) stays lower case inside the uppercased label. */
.section-head-eyebrow .eyebrow-lc {
  text-transform: none;
}

.section-head-title {
  margin: 0;
  font-size: var(--lx-fs-h1);
  font-weight: 500;
  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;
}

.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;
}

/* 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: 36px;
  height: 36px;
  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;
}

/* ----------------- Floating "Book a demo" tab ----------------- */
/* A slim tab pinned to the right edge, mid-height. It carries .btn .btn-primary, so colour,
   hover (pressed shade, 1px lift, sheen), no-underline and the press feedback all come from
   the shared theme exactly as on every primary button; this block only reshapes it into a
   vertical tab. writing-mode turns the label to read top to bottom with the icon above it.
   It is centred with auto top/bottom margins, not translateY(-50%), because the theme's hover lift sets
   transform and would otherwise knock it off centre. Sits under the chat widget (1070).
   The three-class .btn.btn-primary.demo-tab selectors tie the theme's
   .btn:not(.btn-icon):not(.u-action) { position: relative } and win on order (this file
   loads after site.css); two classes lost to it and left the tab in the page flow. */
.btn.btn-primary.demo-tab {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  height: max-content;
  /* Physical margins: under writing-mode vertical-rl the block axis is horizontal, so
     margin-block would centre it sideways instead of vertically. */
  margin-top: auto;
  margin-bottom: auto;
  z-index: 1040;
  gap: 10px;
  padding: 18px 11px;
  writing-mode: vertical-rl;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn.btn-primary.demo-tab:hover,
.btn.btn-primary.demo-tab:focus-visible {
  text-decoration: none;
}

.btn.btn-primary.demo-tab:hover {
  box-shadow: none;
}

/* app-button's left-icon carries Bootstrap's me-2 (an !important margin-right). The tab's gap
   already spaces icon and label, and under vertical-rl that margin would sit beside the icon
   and push it off centre. */
.btn.btn-primary.demo-tab .wui-icon {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 0 !important;
}

/* Pages that name an element in data-after (the home hero) start with the tab tucked
   off-screen; app.js adds .is-visible once that element has scrolled out of view. Razor
   renders a null data-* value as data-after="" rather than dropping it, so the empty
   value is excluded explicitly. */
.btn.btn-primary.demo-tab[data-after]:not([data-after=""]):not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
}

/* Phones and tablets do not show the tab: below the lg tier it sat over the right edge of the
   content column (the FAQ toggles, form fields, the ends of text lines). Those screens reach
   the demo page from the footer and the closing banner. The id is in the selector because the
   theme's button display rule carries a long :not() chain that outranks three classes. */
@media (max-width: 991.98px) {
  #demoTab.demo-tab {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary.demo-tab {
    transition: none;
  }
}

/* ----------------- 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 /standards/iec-62305. */
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:not(.btn) {
  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;
  border-left: 3px solid var(--wui-primary-30);
  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 white note on a white section has no edge at all and reads as stray indented
     text; there it takes the subtle tint instead. */
.section:not(.section-tint):not(.bg-body-tertiary) .article-note {
  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:not(.btn) {
  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:not(.btn) {
  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;
}

/* Text links only: a button inside prose (<app-button> renders <a class="btn">) keeps
     its own colours, or a primary button turned blue on blue. */
.article-prose a:not(.btn) {
  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);
}

/* Inspection band on the standards pages: an edge-to-edge primary band.
   Left: the point and one next step. Right: two cards side by side reading left
   to right as a short roadmap, what ships today, then what is coming. The live
   card is solid; the coming card is dashed, so its state reads before the label.
   The soft highlight is a background layer only, so the band stays flat. */
.std-soon {
  padding: clamp(36px, 4.2vw, 56px) 0;
  background:
    radial-gradient(circle at 92% -10%, rgba(255, 255, 255, .14), transparent 40%),
    var(--color-primary);
  color: #fff;
}

.std-soon-inner {
  display: grid;
  gap: 28px;
}

.std-soon-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.std-soon-title {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.std-soon-text {
  max-width: 440px;
  margin: 0 0 22px;
  text-wrap: pretty;
  color: rgba(255, 255, 255, .86);
  font-size: 15.5px;
  line-height: 1.6;
}

.std-soon-steps {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.std-soon-step {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
}

.std-soon-step:not(.is-live) {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .34);
  background: transparent;
}

.std-soon-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.std-soon-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.std-soon-step.is-live .std-soon-ic {
  background: #fff;
  color: var(--color-primary);
}

.std-soon-ic .ic,
.std-soon-ic svg {
  width: 22px;
  height: 22px;
}

.std-soon-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.std-soon-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .7);
}

.std-soon-step.is-live .std-soon-status {
  background: rgba(62, 224, 122, .16);
  color: #fff;
}

.std-soon-step.is-live .std-soon-status::before {
  border-color: #3ee07a;
  background: #3ee07a;
  box-shadow: 0 0 0 3px rgba(62, 224, 122, .25);
}

.std-soon-step-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.std-soon-step-text {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .std-soon-steps {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* "Then" arrow in the gap between the two cards. */
  .std-soon-steps::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(255, 255, 255, .6);
    border-right: 2px solid rgba(255, 255, 255, .6);
    transform: translate(-70%, -50%) rotate(45deg);
  }
}

@media (min-width: 992px) {
  .std-soon-inner {
    grid-template-columns: 4fr 7fr;
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .std-soon-step.is-live .std-soon-status::before {
    animation: std-soon-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes std-soon-pulse {
  50% { box-shadow: 0 0 0 6px rgba(62, 224, 122, 0); }
}

.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;
}

/* The tag may shrink and wrap: a long one ("International, and most national adoptions")
   otherwise held its full width and ran past the card edge on a phone. */
.sf-code {
  flex: 0 1 auto;
  min-width: 0;
  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;
}

/* On a tinted band the white panel already separates the cards, so the hairline
     goes. On a white section the hairline is the only edge, so it stays. */
.section-tint .sf-card:not(.card):not(.sf-card--tint),
.bg-body-tertiary .sf-card:not(.card):not(.sf-card--tint) {
  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:not(.btn) {
  color: var(--color-primary);
}

/* Link variant: the whole card opens a detail page. The title carries the one
     real link (Bootstrap .stretched-link spreads its hit area over the card), so
     a screen reader hears the card's name once. .sf-more is the visible cue,
     pinned to the card foot so the cues line up across a row. */
.sf-card.is-link {
  position: relative;
  transition: transform .2s ease;
}

.sf-card.is-link .sf-title a {
  color: inherit;
  text-decoration: none;
}

.sf-card.is-link .sf-title a:focus-visible {
  outline: none;
}

.sf-card.is-link:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sf-more {
  margin-top: auto;
  padding-top: clamp(16px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Arrow hidden at rest, slides in on hover or keyboard focus. It keeps its
     space while hidden so the label never shifts. */
.sf-more .ic {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}

.sf-card.is-link:hover {
  transform: translateY(-2px);
}

.sf-card.is-link:hover .sf-title {
  color: var(--color-primary);
}

.sf-card.is-link:hover .sf-more .ic,
.sf-card.is-link:has(.stretched-link:focus-visible) .sf-more .ic {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .sf-card.is-link,
  .sf-more .ic {
    transition: none;
  }

  .sf-more .ic,
  .sf-card.is-link:hover {
    transform: none;
  }
}

/* ----------------- 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%);
}

/* Product photos arrive already graded (the IEC 62305 and NFPA 780 bands): show them at
   full colour under a light edge vignette instead of the guide-band tint. */
.res-hero-band--photo img {
  filter: none;
}

.res-hero-band--photo::after {
  background: linear-gradient(180deg,
      rgba(7, 20, 55, 0.25) 0%,
      rgba(7, 20, 55, 0) 22%,
      rgba(7, 20, 55, 0) 70%,
      rgba(7, 20, 55, 0.35) 100%);
}

/* ----------------- FAQ accordion (canonical, every page) -----------------
     One component for /Platform, /Pricing, /Faq, /Waitlist and /standards/iec-62305.
     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;
  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: clamp(20px, 4.5vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lx-heading);
  /* A plain block, not a flex row: a flex row lays every child out as its own item, which pushed
     the trademark mark a full gap away from "Lumex". */
  display: block;
  margin: 0 0 16px;
}

/* Shown, because the policies refer readers to sections by number ("see section 05"). */
.legal-num {
  margin-right: 0.4em;
  color: var(--lx-text-3);
  font-variant-numeric: tabular-nums;
}

.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);
}

/* Legal layout: the shared page hero on top (Shared/_PageHero), then the policy
   as one full-width column, with links to the other legal pages at the end. */
.legal-layout {
  display: block;
}

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

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 28px);
  margin: clamp(28px, 6vw, 48px) 0 0;
  padding-top: clamp(18px, 3.5vw, 28px);
  border-top: 1px solid var(--wui-border-light);
}

.legal-links a {
  font-size: clamp(15px, 1.4vw, 16px);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.legal-links a:hover,
.legal-links a.active {
  text-decoration: underline;
}

/* On a touch screen these short text links get a full-height tap area; the text is unchanged. */
@media (pointer: coarse) {
  .legal-links a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.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);
}

/* ===================================================================
   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.
   =================================================================== */
/* Scrolls sideways on narrow screens only. overflow-y is pinned to hidden because
     overflow-x:auto would otherwise make it auto, and the rows sliding in (motion.js)
     briefly overflow and drew a vertical scrollbar. The bar itself is hidden; touch,
     trackpad and shift-wheel still scroll. position:relative keeps any screen-reader-only
     label in a cell inside the scroll box, so it cannot widen the page on a phone. */
.cmp-wrap {
  position: relative;
  background: #ffffff;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.cmp-wrap::-webkit-scrollbar {
  display: none;
}

/* With the bar hidden, a table wider than its box gives no sign the rest of it is there, so the
   edge that still has columns past it fades out. app.js sets the two classes from the scroll
   position; .pc-wrap is the Pricing plan table's own scroll box, and .res-filter-standard the
   Resources standard switch, which scrolls the same way on a phone. */
:is(.cmp-wrap, .pc-wrap, .res-filter-standard).is-clipped-end {
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

:is(.cmp-wrap, .pc-wrap, .res-filter-standard).is-clipped-start {
  mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}

:is(.cmp-wrap, .pc-wrap, .res-filter-standard).is-clipped-start.is-clipped-end {
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

/* A table's inline min-width is its phone floor. From the tablet tier up the container is wide
   enough for every table, so the floor is dropped; it otherwise forced a sideways scroll at
   768px for the sake of a few pixels. !important only because the floor is an inline style. */
@media (min-width: 768px) {
  .cmp-wrap > .cmp {
    min-width: 0 !important;
  }
}

.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 var(--lx-table-line);
}

/* Every line table (.cmp here, .pc on Pricing, .legal-table on Privacy) draws its grid in one
   colour, strong enough to read on white. On a white section the table also gets an outer
   frame; on a tinted section the white table against the tint is the frame already. */
:root {
  --lx-table-line: #e3e7ee;
}

section:not(.section-tint):not(.bento-band):not(.bg-body-tertiary) .cmp-wrap {
  border: 1px solid var(--lx-table-line);
}

/* 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 var(--lx-table-line);
}

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

.cmp tbody tr {
  border-top: 1px solid var(--lx-table-line);
}

.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: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.cmp td.belongs {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  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-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-band-waves.webp') center bottom / cover no-repeat;
  filter: blur(2px) saturate(1.05);
  transform: scale(1.06);
  /* The waves drift slowly, like a long exposure of moving light: a slow pan and zoom
     with a gentle swell in colour, alternating so it never jumps back. */
  animation: bento-band-drift 26s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform, filter;
}
@keyframes bento-band-drift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0) rotate(0deg); filter: blur(2px) saturate(1.05) hue-rotate(0deg); }
  50%  { transform: scale(1.16) translate3d(-3%, -2%, 0) rotate(.6deg); filter: blur(3px) saturate(1.25) hue-rotate(-8deg); }
  100% { transform: scale(1.12) translate3d(3%, 1.5%, 0) rotate(-.5deg); filter: blur(2px) saturate(1.12) hue-rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-band::before { animation: none; }
}

.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: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  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 {
    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 {
    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;
  }

  .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;
  }

  .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;
  }

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

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

  .footer-legal {
    gap: 0px;
    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;
  }
}

/* ----------------- Lumi thinking pill -----------------
     Lumi's one loading state on the website, shared by the chat widget (assets/chat.js) and
     the home page Lumi showcase, and matching the customer portal (LumiThinking.jsx). A flat
     white pill with a hairline edge holding a Siri-like orb (a turning colour field whose
     outline slowly morphs) and either a status line a light sweeps across, or three dots. */
@property --lumi-think-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.lumi-think {
  --lumi-think-ring: conic-gradient(from var(--lumi-think-angle), #ff9f43, #ff4f8b, #b44dff, #4f7bff, #22d3ee, #ff9f43);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 6px;
  border-radius: 999px;
  -webkit-corner-shape: round;
  corner-shape: round;
  background: #fff;
  border: 1px solid rgba(7, 20, 55, .06);
  animation: lumi-think-spin 3s linear infinite;
}
.lumi-think__orb {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  -webkit-corner-shape: round;
  corner-shape: round;
  background: var(--lumi-think-ring);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  animation: lumi-orb-morph 3.2s ease-in-out infinite;
}
.lumi-think__orb::before,
.lumi-think__orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: screen;
}
.lumi-think__orb::before { inset: 3px 7px 7px 3px; background: rgba(255, 255, 255, .85); animation: lumi-orb-drift 2.4s ease-in-out infinite; }
.lumi-think__orb::after { inset: 8px 2px 2px 8px; background: #6be4ff; opacity: .8; animation: lumi-orb-drift 2.4s ease-in-out -1.2s infinite reverse; }
.lumi-think__logo { position: relative; flex: none; width: 20px; height: 20px; display: block; }
/* The real Lumi mark (Shared/_LumiMark): it breathes, and a thin colour ring turns round it. */
.lumi-think__logo .lumi-mark {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: block;
  animation: lumi-logo-breathe 1.6s ease-in-out infinite;
}
.lumi-think__logo::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  -webkit-corner-shape: round;
  corner-shape: round;
  background: var(--lumi-think-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
@keyframes lumi-logo-breathe { 50% { transform: scale(.88); } }
.lumi-think__text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  padding-right: 1px;
  color: var(--color-text-subtle);
  background: linear-gradient(90deg, var(--color-text-subtle) 0%, var(--color-text-subtle) 38%, #4f7bff 48%, #b44dff 54%, var(--color-text-subtle) 64%, var(--color-text-subtle) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lumi-think-shimmer 1.9s linear infinite;
  transition: opacity .18s ease, transform .18s ease;
}
.lumi-think__text.is-swap { opacity: 0; transform: translateY(-3px); }
.lumi-think__dots { display: inline-flex; gap: 4px; }
.lumi-think__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  -webkit-corner-shape: round;
  corner-shape: round;
  background: linear-gradient(120deg, #ff9f43, #ff4f8b, #b44dff, #4f7bff, #22d3ee, #ff9f43);
  background-size: 600% 100%;
  animation: lumi-think-dot 1.2s cubic-bezier(.45, 0, .55, 1) infinite, lumi-think-hue 3s linear infinite;
}
.lumi-think__dots i:nth-child(2) { animation-delay: .14s, -1s; }
.lumi-think__dots i:nth-child(3) { animation-delay: .28s, -2s; }
@keyframes lumi-think-spin { to { --lumi-think-angle: 360deg; } }
@keyframes lumi-orb-morph {
  0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; transform: scale(1); }
  33% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; transform: scale(1.06); }
  66% { border-radius: 42% 58% 56% 44% / 56% 42% 58% 44%; transform: scale(.95); }
}
@keyframes lumi-orb-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 4px); } }
@keyframes lumi-think-dot { 0%, 70%, 100% { transform: translateY(0) scale(.75); opacity: .55; } 35% { transform: translateY(-3px) scale(1.1); opacity: 1; } }
@keyframes lumi-think-hue { to { background-position: 100% 0; } }
@keyframes lumi-think-shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lumi-think, .lumi-think__orb, .lumi-think__orb::before, .lumi-think__orb::after, .lumi-think__logo .lumi-mark,
  .lumi-think__text, .lumi-think__dots i { animation: none; }
  .lumi-think__text { -webkit-text-fill-color: currentColor; background: none; }
}