/* ==========================================================================
   Liria - site.css
   Ported verbatim from "Liria Home.dc.html" (Claude Design artboard).
   Values copied unchanged; only hover/active/media/state rules are new.
   ========================================================================== */

/* --- 1. Fonts ------------------------------------------------------------
   TODO(owed): generate .woff2 for all five faces and put them first in each
   src list (`url('../fonts/X.woff2') format('woff2'), url('../fonts/X.ttf')
   format('truetype')`). No woff2 toolchain was available at conversion time,
   so the TTFs ship alone rather than as a 404-then-fallback pair. */
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("../fonts/OverusedGrotesk-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  --ink: #141e28;
  --red: #ff393a;
  --mist: #f4f4f4;
  --white: #ffffff;
  --line: rgb(215, 215, 215);
  --line-soft: rgb(229, 229, 229);
  --line-softer: rgb(236, 236, 236);
  --muted: rgba(20, 30, 40, 0.7);
  --muted-60: rgba(20, 30, 40, 0.6);
  --muted-55: rgba(20, 30, 40, 0.55);
  --muted-50: rgba(20, 30, 40, 0.5);
  --muted-45: rgba(20, 30, 40, 0.45);
  --muted-40: rgba(20, 30, 40, 0.4);
  --shadow-1:
    0 2px 4px rgba(20, 30, 50, 0.03), 0 8px 8px rgba(20, 30, 50, 0.02);
  --shadow-2:
    0 7px 16px rgba(20, 30, 50, 0.05), 0 30px 30px rgba(20, 30, 50, 0.04);
  --shadow-3:
    0 2px 4px rgba(20, 30, 50, 0.04), 0 8px 8px rgba(20, 30, 50, 0.04),
    0 18px 11px rgba(20, 30, 50, 0.02);
  /* Product-mockup lift: accrual's layered-falloff technique, cool-tinted and
     at roughly a third of their opacity so the devices float without weight. */
  --shadow-mock:
    0 6px 12px rgba(20, 30, 50, 0.1), 0 24px 32px rgba(20, 30, 50, 0.07),
    0 56px 64px rgba(20, 30, 50, 0.05), 0 96px 96px rgba(20, 30, 50, 0.02);
  --pad-x: clamp(20px, 5.5vw, 80px);
  /* ~65% of the original clamp(64px, 10vw, 120px): the tiles carried too much
     vertical air once every band became its own card (18.08.2026). */
  --pad-y: clamp(42px, 6.5vw, 78px);
  /* Measured off accrual.com (19.08.2026): their page is one centred column,
     max-width 1500px with 16px padding, so every card lands at 1468px and runs
     near full-bleed below 1500px. Widened from 1280px to match (PLA-504). */
  --wrap: 1468px;
  /* Tile grammar (PLA-498): white page gap between tiles, viewport side inset
     below the --wrap cap, and the hero's radius family reused everywhere. */
  --tile-gap: 16px;
  --tile-inset: clamp(10px, 1.2vw, 16px);
  --tile-radius: clamp(18px, 2.2vw, 28px);
  /* orbit-panel scale factor (see §"Machine orbit panel" + 390px contract) */
  --orb: 1;
}

/* --- 3. Base ------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--white);
}
body {
  font-family:
    "Overused Grotesk",
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: var(--red);
  color: var(--white);
}
a {
  color: var(--ink);
  text-decoration: none;
}
a:hover {
  color: var(--red);
}
a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}
img {
  max-width: 100%;
}
h1,
h2,
h3 {
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
}
.skip-link:focus {
  left: 0;
}

/* --- 4. Keyframes (ported; liria-pulse / liria-float were dead, dropped) -- */
@keyframes liria-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* -100% / number of .marquee__group copies in the track: each group has
       identical outer width (trailing padding-right = gap), so one cycle
       shifts exactly one group and the wrap lands pixel-identical */
    transform: translateX(-25%);
  }
}
@keyframes liria-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes liria-wave {
  0% {
    r: 0;
    opacity: 0.7;
  }
  55% {
    r: 460px;
    opacity: 0;
  }
  100% {
    r: 460px;
    opacity: 0;
  }
}
@keyframes liria-ping {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }
  22% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
@keyframes liria-hit {
  0% {
    transform: scale(1);
  }
  3% {
    transform: scale(1.8);
  }
  9% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* --- 5. Layout primitives ------------------------------------------------ */
/* Tile grammar (PLA-498). Every band on the page is a rounded tile capped at
   --wrap, centred, inset from the viewport below that cap, with a uniform
   --tile-gap of white page background underneath. Nothing is full-bleed any
   more - the hero and the careers band are tiles too, they just keep the ink
   ground on their own card (.hero / .careers) instead of on the wrapper. */
.hero-wrap,
.section,
.careers-wrap,
.site-footer {
  width: min(var(--wrap), calc(100% - 2 * var(--tile-inset)));
  margin-inline: auto;
  margin-bottom: var(--tile-gap);
  box-sizing: border-box;
}
.section {
  /* --pad-x/--pad-y stay the tile's INTERNAL padding, unchanged, so the
     grid tokens the location deck measures against keep their semantics. */
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--tile-radius);
  background: var(--mist);
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}
/* Redundant since every .section is mist; kept so the class stays harmless. */
.section--mist {
  background: var(--mist);
}
/* The 01 KPI band is the page's red accent tile: white rules and type. */
.section--red {
  background: var(--red);
}
.section--red .kpi {
  border-top-color: var(--white);
}
.section--red .kpi__num,
.section--red .kpi__label {
  color: var(--white);
}
/* .section--flush-top / --flush-bottom are gone: they collapsed the padding
   between adjacent same-background bands, and separate tiles are never
   adjacent. Every tile now carries its full internal --pad-y. */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
  align-items: flex-start;
}

.eyebrow {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 300px;
  /* Every tile is mist now, so the pill is unconditionally white. */
  background: var(--white);
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 700;
}
/* Redundant since .eyebrow is white everywhere; kept harmless. */
.eyebrow--onmist {
  background: var(--white);
}
.eyebrow__num {
  color: var(--red);
  margin-right: 8px;
}

.h2 {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h2--w800 {
  max-width: 800px;
}
.h2--w900 {
  max-width: 900px;
}
.lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--muted);
  max-width: 620px;
}
.lede--16 {
  font-size: 16px;
  max-width: 640px;
}

.grid {
  display: grid;
  width: 100%;
}
.grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 80vw), 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
}
.grid--map {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}
.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.cta {
  display: inline-block;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 300px;
}
.cta--primary {
  background: var(--cta1-bg, var(--red));
  color: var(--white);
}
.cta--primary:hover {
  filter: brightness(0.92);
  color: var(--white);
}
.cta--light {
  background: var(--white);
  color: var(--ink);
}
.cta--light:hover {
  filter: brightness(0.95);
  color: var(--ink);
}
.cta:active {
  transform: scale(0.98);
}

/* Shiny CTA (components/ui/shiny-button.tsx): animated conic-border pill,
   21st.dev "shiny button" adapted to the site - red accent instead of blue,
   inherited font instead of an Inter import, and .cta metrics (16px/700,
   14x28 pad) so it sits level with the .cta--light beside it. The border
   shine idles slowly; hover/focus speeds it up and lights the halo. */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}
.shiny-cta {
  --shiny-cta-bg: #10181f;
  --shiny-cta-bg-subtle: #232f3a;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: var(--red);
  --shiny-cta-highlight-subtle: #ff8a8a;
  --shiny-animation: liria-shiny-angle linear infinite;
  --shiny-duration: 3s;
  --shadow-size: 2px;
  --shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  display: inline-block;
  white-space: nowrap;
  padding: 14px 28px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 300px;
  color: var(--shiny-cta-fg);
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--shiny-transition);
  transition-property:
    --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.shiny-cta:hover {
  color: var(--shiny-cta-fg);
}
.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shiny-cta:active {
  transform: none;
  translate: 0 1px;
}
/* Dots pattern */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}
/* Inner shimmer */
.shiny-cta::after {
  --shiny-animation: liria-shiny-shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  /* 0.6 in the source design; red on this small pill floods half the face,
     so the shimmer runs quieter here. */
  opacity: 0.25;
}
.shiny-cta span {
  z-index: 1;
}
.shiny-cta span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  /* Tighter halo than the source's 2rem/4px - at .cta scale that much inset
     shadow floods the whole pill red on hover. */
  box-shadow: inset 0 -1ex 1.5rem 1px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: calc(var(--shiny-duration) * 1.5) liria-shiny-breathe linear
    infinite;
}
/* Animate: the shine idles; the reversed second track joins on hover. */
.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
  animation:
    var(--shiny-animation) var(--shiny-duration),
    var(--shiny-animation) calc(var(--shiny-duration) / 0.4) reverse paused;
  animation-composition: add;
}
.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}
.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
.shiny-cta:is(:hover, :focus-visible) span::before {
  opacity: 0.7;
}
@keyframes liria-shiny-angle {
  to {
    --gradient-angle: 360deg;
  }
}
@keyframes liria-shiny-shimmer {
  to {
    rotate: 360deg;
  }
}
@keyframes liria-shiny-breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shiny-cta,
  .shiny-cta::before,
  .shiny-cta::after,
  .shiny-cta span::before {
    animation: none !important;
  }
}

/* --- 6. Hero ------------------------------------------------------------- */
/* The wrapper carries the tile width system (§5); the ink card fills it, so
   the hero is content-width like every other tile instead of full-bleed. */
.hero-wrap {
  padding: 0;
  margin-top: var(--tile-gap);
}
.hero {
  --hero-bg: #141e28;
  --hero-nav: #ffffff;
  --hero-sub: rgba(255, 255, 255, 0.75);
  --cta1-bg: #ff393a;
  position: relative;
  overflow: hidden;
  border-radius: var(--tile-radius);
  background: var(--hero-bg);
  display: flex;
  flex-direction: column;
  min-height: max(600px, calc(100svh - 32px));
}
/* Accrual sign-off variant - one class flip away, currently unused. */
.hero--red {
  --hero-bg: #ff393a;
  --hero-nav: #141e28;
  --hero-sub: #141e28;
  --cta1-bg: #141e28;
}
.hero__canvas-wrap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 62%;
  pointer-events: none;
}
.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.5vw, 28px) clamp(18px, 3vw, 40px);
}
.hero__logo {
  display: flex;
  align-items: center;
}
.logo-mask {
  display: inline-block;
  width: 95px;
  height: 27px;
  background: var(--hero-nav, var(--white));
  -webkit-mask: url("../assets/liria-logo-white.png") left center / contain
    no-repeat;
  mask: url("../assets/liria-logo-white.png") left center / contain no-repeat;
}
.hero__nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
}
.nav-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--hero-nav);
}
.nav-link:hover {
  opacity: 0.8;
  color: var(--hero-nav);
}
.hero__spacer {
  flex: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 24px);
  padding: 0 clamp(18px, 3vw, 40px);
  max-width: 1040px;
}
.hero__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero__title em {
  font-style: italic;
}
.hero__sub {
  margin: 0;
  color: var(--hero-sub);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.45;
  font-weight: 500;
  max-width: 600px;
  text-wrap: pretty;
}
.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__backers {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 44px);
  margin-top: clamp(24px, 3.5vw, 40px);
  padding: 18px clamp(18px, 3vw, 40px) clamp(18px, 2.5vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.hero__backers-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.hero__backers img {
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.backer--bek {
  height: 18px;
}
.backer--simon {
  height: 30px;
}
.backer--atlantic {
  height: 22px;
}

/* --- 7. KPI row ---------------------------------------------------------- */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  /* The tile cap (PLA-498) freezes the KPI column at ~286px above ~1500px
     viewport while a vw-driven number keeps growing - "60,000+" then ran into
     its neighbour. Make each cell its own container so the number can be
     sized against the COLUMN, not the viewport. */
  container-type: inline-size;
}
.kpi__num {
  /* Fallback for engines without container queries: a viewport ramp capped
     below the column's carrying capacity. */
  font-size: clamp(34px, 5vw, 62px);
  /* Preferred: whichever is smaller - the viewport ramp (keeps the mobile
     scale untouched) or 25% of the column width (never overflows). */
  font-size: clamp(34px, min(6vw, 25cqi), 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kpi__label {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted);
}

/* --- 8. Map -------------------------------------------------------------- */
.map__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.map__svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* --- 9. Tiles (market / beyond / growth) --------------------------------- */
/* Every section tile is mist now, so the inner cards are white everywhere -
   .tile and .tile--onmist have collapsed into one surface. */
.tile {
  background: var(--white);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Redundant, kept harmless. */
.tile--onmist {
  background: var(--white);
}
.tile__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.tile__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}
.tile__copy--sm {
  font-size: 15px;
}
.tile__kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-50);
}
.tile__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.tile__status--live {
  color: rgb(0, 140, 0);
}
.tile__status--live .dot {
  background: rgb(0, 183, 0);
}
.tile__status--next {
  color: var(--muted-50);
}
.tile__status--next .dot {
  background: rgba(20, 30, 40, 0.25);
}
.tile__status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* --- 9b. Market scale (nested TAM/SAM/SOM, 08 Beyond inspections) --------- */
/* Deck-slide adaptation: four nested rounded layers sharing the bottom-left
   corner, largest (global TIC) to smallest (DACH core, the live market).
   Sized in % of an aspect-ratio box so the nesting scales with the section.
   The figure never splits: as the viewport narrows the box grows taller
   (landscape -> portrait) and the width steps steepen, because the font-size
   floors stop shrinking before the box does. */
.market-scale {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 560;
}
.market-scale__layer {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  border-radius: 24px;
  color: var(--white);
}
/* Each layer's copy is vertically centred in its VISIBLE strip — the part the
   next inner layer doesn't cover. Heights are the strip as a share of the
   layer's own height (strip% of container / layer% of container). */
.market-scale__text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 clamp(18px, 3vw, 44px);
}
.market-scale__layer--l1 .market-scale__text {
  height: 23.5%;
}
.market-scale__layer--l2 .market-scale__text {
  height: 29.4%;
}
.market-scale__layer--l3 .market-scale__text {
  height: 43.5%;
}
.market-scale__layer--l4 .market-scale__text {
  height: 100%;
}
.market-scale__layer--l1 {
  width: 100%;
  height: 100%;
  background: #a6061a;
}
.market-scale__layer--l2 {
  width: 78.6%;
  height: 76.5%;
  background: #dd0823;
}
/* White text on all four layers, matching the deck slide (deliberate product
   call, accepting the low contrast on the two light grounds). */
.market-scale__layer--l3 {
  width: 58.9%;
  height: 54%;
  background: #f8676c;
}
.market-scale__layer--l4 {
  width: 39.3%;
  height: 30.5%;
  background: #fb93a0;
}
.market-scale__num {
  font-size: clamp(24px, 3.9vw, 44px);
  line-height: 1.05;
  font-weight: 700;
}
.market-scale__layer--l2 .market-scale__num {
  font-size: clamp(22px, 3.6vw, 40px);
}
.market-scale__layer--l3 .market-scale__num {
  font-size: clamp(20px, 3.3vw, 36px);
}
.market-scale__layer--l4 .market-scale__num {
  font-size: clamp(19px, 3vw, 34px);
}
.market-scale__label {
  margin-top: clamp(6px, 1vw, 10px);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.2;
  font-weight: 700;
}
.market-scale__sub {
  margin-top: 4px;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.3;
  font-weight: 400;
  opacity: 0.85;
}
/* Lives inside .market-scale__text, whose top/right edges coincide with the
   layer's on both tagged layers — so this pins to the layer corner on wide
   screens. On phones it goes static (first row of the column) instead,
   because a pinned pill would paint over the layer copy at 320px. */
.market-scale__tag {
  position: absolute;
  top: clamp(14px, 2.4vw, 28px);
  right: clamp(18px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: 300px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.market-scale__tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
@media (max-width: 899px) {
  .market-scale {
    aspect-ratio: 1120 / 840;
  }
}
@media (max-width: 599px) {
  .market-scale {
    aspect-ratio: 320 / 500;
  }
  .market-scale__tag {
    position: static;
    margin-bottom: 8px;
  }
  /* Tagged strips (l2, l4) get taller to fit the in-flow tag row. */
  .market-scale__layer--l2 {
    width: 90%;
    height: 78%;
  }
  .market-scale__layer--l3 {
    width: 78%;
    height: 47.5%;
  }
  .market-scale__layer--l4 {
    width: 66%;
    height: 30%;
  }
  .market-scale__layer--l1 .market-scale__text {
    height: 22%;
  }
  .market-scale__layer--l2 .market-scale__text {
    height: 39.1%;
  }
  .market-scale__layer--l3 .market-scale__text {
    height: 36.8%;
  }
}

/* --- 10. Machine steps --------------------------------------------------- */
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.step__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.step__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.step__copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- 11. Mockup frames (growth stack) ------------------------------------ */
/* The lift lives on the FRAME, not on the device fragment inside it: an
   element's own box-shadow is painted outside its border box and is never
   clipped by its own `overflow: hidden`, so the browser and the phone variant
   both get the full falloff without touching the mockups' DOM. */
.mock-frame {
  border-radius: 12px;
  background: rgba(20, 30, 40, 0.05);
  margin-top: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-mock);
}
.mock-frame--16x10 {
  aspect-ratio: 16 / 10;
}
/* Overdrive: keeps the 16:10 stage so both growth cards stay the same height,
   centres a 9/19.5 device inside it. Flagged in the plan §3.2 - confirm. */
.mock-frame--phone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.mock-frame--phone > * {
  height: 100%;
  max-height: 100%;
  /* the phone fragment sizes itself from its width; derive the width from
     the frame height so the flex item doesn't collapse to 0 */
  aspect-ratio: 340 / 670;
  flex: 0 0 auto;
}

/* --- 12. Less manual work (split panel) ---------------------------------- */
.split {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  box-sizing: border-box;
}
.split__col {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.split__col--legacy {
  background: rgb(250, 250, 250);
}
.split__col--liria {
  background: var(--white);
}
.split__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--muted-55);
  text-align: center;
}
.split__label--strong {
  font-weight: 700;
  color: var(--ink);
}
.split__stage {
  position: relative;
  height: clamp(430px, 56vw, 470px);
}
.split__stage--clip {
  overflow: hidden;
}
.split__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.legacy-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 90px;
}
.legacy-node__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-60);
}
.legacy-node__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-50);
  text-align: center;
}
.legacy-bang {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chip {
  border-radius: 300px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.chip--bad {
  background: rgba(255, 57, 58, 0.1);
  color: #e1282a;
}
.chip--good {
  background: rgba(0, 183, 0, 0.1);
  color: rgb(0, 140, 0);
}

/* Orbit panel - every hard px is scaled by --orb so nothing clips at 390px. */
.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.orbit-ring--inner {
  width: calc(168px * var(--orb));
  height: calc(168px * var(--orb));
  border: 1px dashed var(--line);
}
.orbit-ring--outer {
  width: calc(364px * var(--orb));
  height: calc(364px * var(--orb));
  border: 1px dashed var(--line-soft);
}
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: liria-orbit 70s linear infinite;
}
.orbit--slow {
  animation: liria-orbit 60s linear infinite;
}
.orbit__slot {
  position: absolute;
}
.orbit__counter {
  animation: liria-orbit 70s linear infinite reverse;
}
.orbit--slow .orbit__counter {
  animation: liria-orbit 60s linear infinite reverse;
}
.orbit.is-paused,
.orbit.is-paused .orbit__counter {
  animation-play-state: paused;
}
.orbit.is-running,
.orbit.is-running .orbit__counter {
  will-change: transform;
}
.orbit-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: var(--shadow-1);
}
.orbit-card__name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.orbit-card__role {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-50);
  white-space: nowrap;
}
.orbit-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.orbit-cap__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-softer);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.orbit-cap__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(20, 30, 40, 0.65);
  white-space: nowrap;
}
/* These stay #ffffff under the tile grammar: the stage they fade is inside
   .split__col--liria, which is white - not the mist tile. */
.orbit-fade {
  position: absolute;
  pointer-events: none;
}
.orbit-fade--l {
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.orbit-fade--r {
  right: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}
.orbit-fade--t {
  left: 0;
  right: 0;
  top: 0;
  height: 20px;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
}
.orbit-fade--b {
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line-softer);
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mark-mask {
  display: inline-block;
  background: var(--red);
  -webkit-mask: url("../assets/liria-mark.png") center / contain no-repeat;
  mask: url("../assets/liria-mark.png") center / contain no-repeat;
}
.mark-mask--core {
  width: 36px;
  height: 28px;
}
.mark-mask--os {
  width: 30px;
  height: 24px;
  background: var(--white);
}
.mark-mask--fw {
  width: 28px;
  height: 22px;
  transition: transform 0.3s ease-out;
}

/* --- 13. Liria OS -------------------------------------------------------- */
.os {
  position: relative;
  width: 100%;
}
.os__wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.os__cols {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.5vw, 56px);
  align-items: stretch;
}
.os__col {
  flex: 1 1 280px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.os__col-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-45);
}
.os__center {
  flex: 0 1 300px;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.os-core {
  background: var(--ink);
  border-radius: 20px;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.os-core__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.os-core__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.os-core__tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.os-core__copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-wrap: pretty;
}

.os-card {
  --os-card-pad: 20px;
  background: var(--white);
  border-radius: 16px;
  padding: 18px var(--os-card-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.2s ease-out;
}
.os-card:hover {
  box-shadow: var(--shadow-2);
}
.os-card:focus-visible {
  box-shadow: var(--shadow-2);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.os-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.os-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.os-card__tag {
  border: 1px solid var(--line);
  border-radius: 300px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-60);
  white-space: nowrap;
}
/* Disclosure hint - tag pill and chevron travel together on the right so the
   head keeps its two-child space-between layout. The chevron nudges down on
   hover and flips while open, so the collapsed head reads as expandable on
   touch screens too. */
.os-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.os-card__chev {
  display: inline-flex;
  color: var(--muted-45);
  transition:
    transform 0.24s ease-out,
    color 0.2s ease-out;
}
.os-card:hover .os-card__chev,
.os-card:focus-visible .os-card__chev {
  color: var(--muted-60);
  transform: translateY(2px);
}
.os-card.is-open .os-card__chev {
  transform: rotate(180deg);
}
.os-card__who {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-45);
}
.os-card__copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
/* Collapsed only when JS is running - no-JS keeps every body readable. */
.has-js .os-card__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.28s ease-out,
    opacity 0.2s ease-out;
}
.has-js .os-card.is-open .os-card__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.os-card__inner {
  /* The collapse animation needs this clip, which would also cut off the mock
     slot's --shadow-mock. Bleed the box out to the card's edges (the card pads
     20px) and give it room below, so the clip lands well outside the device. */
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 calc(-1 * var(--os-card-pad));
  padding: 0 var(--os-card-pad) 18px;
}

/* Mockup slots inside the OS cards. Portrait devices (phone, widget) are
   height-capped and centered instead of aspect-locked - an aspect-locked slot
   grows with the card's width and leaves a tall empty band under the device
   (restyle pass 2026-08-18, docs/strategy/restyle-contract.md §6). */
.os-card__mock {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(20, 30, 40, 0.05);
  margin-top: 4px;
  /* Same frame-level lift as .mock-frame - see the note there. */
  box-shadow: var(--shadow-mock);
}
.os-card__mock--widget,
.os-card__mock--phone {
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}
.os-card__mock--widget > *,
.os-card__mock--phone > * {
  height: 100%;
  max-height: 100%;
  /* the fragment sizes itself from its width; derive the width from the slot
     height so the flex item doesn't collapse to 0 (same trick as the growth-
     stack phone frame) */
  flex: 0 0 auto;
}
.os-card__mock--phone > * {
  aspect-ratio: 340 / 670;
}
.os-card__mock--widget > * {
  aspect-ratio: 356 / 584;
}
.os-card__mock--browser {
  aspect-ratio: 720 / 450;
}
/* A phone never fills its slot, so the slot's own rectangle must vanish: its
   pale ground and 12px-cornered --shadow-mock poked out around the 40px device
   silhouette (the "cornered shadow" under the handsets). The lift already
   lives on the device bezel (--mk-shadow-device); overflow releases so that
   bezel shadow isn't clipped to a hard edge at the slot box. */
.mock-frame--phone,
.os-card__mock--phone {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* Stacked layout - below the width where the three columns fit side by side.
   site.js shares this 980px cutoff: the JS elbow wires only exist in the
   side-by-side layout, and this vertical dashed spine (same visual language -
   3/5 dash, red-40 stroke, travelling pulse dot) ties the stacked groups
   Customer journey -> Liria Core -> Ops & admin together instead. */
@media (max-width: 980px) {
  .os__cols {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .os__col {
    flex: none;
    min-width: 0;
  }
  .os__center {
    flex: none;
    min-width: 0;
    width: 100%;
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  .os__center::before,
  .os__center::after {
    content: "";
    width: 12px;
    height: 40px;
    background:
      radial-gradient(circle, #ff393a 2.6px, rgba(255, 57, 58, 0) 3px)
        50% -12px / 12px 12px no-repeat,
      repeating-linear-gradient(
          180deg,
          rgba(255, 57, 58, 0.4) 0 3px,
          transparent 3px 8px
        )
        50% 0 / 1.5px 100% no-repeat;
    animation: os-spine-flow 2.6s linear infinite;
  }
  .os__center::after {
    animation-delay: -1.3s;
  }
  .os-core {
    padding: 28px 24px;
  }
  .os-core__copy {
    max-width: 52ch;
  }
}
@keyframes os-spine-flow {
  0% {
    background-position:
      50% -12px,
      50% 0;
  }
  100% {
    background-position:
      50% 52px,
      50% 0;
  }
}
@media (max-width: 640px) {
  .os-card__mock--widget,
  .os-card__mock--phone {
    height: 460px;
  }
}

/* --- 14. Data flywheel --------------------------------------------------- */
.fw-panel {
  background: var(--white);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  box-sizing: border-box;
}
.fw-panel__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: min(260px, 100%);
}
.fw-panel__title {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  font-weight: 700;
}
.fw-panel__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.fw {
  --fw-ring: 230px;
  --fw-r: 115px;
  flex: 1;
  /* 100% guard: never wider than the panel, so <=349px viewports don't
     overflow; the 300px floor still forces the flex-wrap on larger phones */
  min-width: min(300px, 100%);
  height: clamp(320px, 40vw, 380px);
  position: relative;
}
.fw__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--fw-ring);
  height: var(--fw-ring);
  border: 1.5px dashed var(--line);
  border-radius: 50%;
}
.fw__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.fw__dot span {
  position: absolute;
  transform: translate(-50%, calc(-50% - var(--fw-r)));
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  display: block;
}
.fw__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-softer);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.2s ease-out;
}
.fw__btn:hover {
  box-shadow:
    0 7px 16px rgba(20, 30, 50, 0.06),
    0 30px 30px rgba(20, 30, 50, 0.05);
}
.fw__btn:active {
  transform: translate(-50%, -50%) scale(0.92);
}
.fw-step {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  /* Absolute + translate(-50%) boxes shrink-to-fit against the left/right
     offset, not the visual position - max-content sizes them to their text
     so the max-width caps below actually get used. The % term keeps a tile
     centered at left:20/80% inside the ring: 2x20% available minus the
     26px of content-box padding + border. */
  width: max-content;
  max-width: min(150px, 39% - 26px);
  z-index: 1;
  transition:
    border-color 0.25s ease-out,
    box-shadow 0.25s ease-out;
}
.fw-step.is-active {
  border-color: var(--red);
  box-shadow: var(--shadow-3);
  z-index: 2;
}
.fw-step--0 {
  left: 50%;
  top: 7%;
}
.fw-step--1 {
  left: 80%;
  top: 27%;
}
.fw-step--2 {
  left: 80%;
  top: 73%;
  max-width: min(160px, 39% - 26px);
}
.fw-step--3 {
  left: 50%;
  top: 93%;
  max-width: 160px;
}
.fw-step--4 {
  left: 20%;
  top: 73%;
  max-width: min(160px, 39% - 26px);
}
.fw-step--5 {
  left: 20%;
  top: 27%;
}

/* --- 15. Customers ring + marquee ---------------------------------------- */
.hdp {
  /* diagonal offset of each orbit slot; radius = --hdp-d * sqrt(2) */
  --hdp-d: min(134px, 17vw);
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 880px;
  height: clamp(400px, 58vw, 470px);
  overflow: hidden;
}
.hdp__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 48vw);
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--line);
  border-radius: 50%;
}
/* An <a> since 18.08.2026: the centre logo links out to holdeineplakette.de. */
.hdp__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(110px, 20vw, 190px);
  display: block;
}
.hdp__logo img {
  width: 100%;
  height: auto;
  display: block;
}
.hdp-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow:
    0 2px 4px rgba(20, 30, 50, 0.02),
    0 8px 8px rgba(20, 30, 50, 0.02),
    0 18px 11px rgba(20, 30, 50, 0.01);
}
.hdp-card__big {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hdp-card__small {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-60);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hdp {
    /* wider orbit so cards clear the logo; ring diameter tracks 2x radius */
    --hdp-d: 20vw;
    height: clamp(270px, 78vw, 340px);
  }
  .hdp__ring {
    width: min(380px, 56vw);
  }
  .hdp__logo {
    width: clamp(64px, 20vw, 110px);
  }
  .hdp-card {
    padding: 7px 11px;
    border-radius: 12px;
  }
  .hdp-card__big {
    font-size: 14px;
  }
  .hdp-card__small {
    font-size: 11px;
  }
}

/* Embedded in the customers tile since 18.08.2026 (no tile of its own): a slim
   logo band at the bottom of section 07, separated from the ring by a hairline
   - the mist twin of the hero's backers divider. The parent tile is mist, so
   the edge overlay gradients still dissolve the logos into the tile ground
   (masking the element itself would fade to the white page instead). */
.marquee {
  position: relative;
  width: 100%;
  padding: clamp(22px, 2.8vw, 34px) 0 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 10%, 140px);
  pointer-events: none;
  z-index: 1;
}
.marquee::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--mist),
    color-mix(in srgb, var(--mist) 0%, transparent)
  );
}
.marquee::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--mist),
    color-mix(in srgb, var(--mist) 0%, transparent)
  );
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: liria-marquee 36s linear infinite;
}
.marquee__group {
  display: flex;
  gap: clamp(48px, 7vw, 84px);
  /* trailing gap so consecutive groups tile seamlessly; no gap on the track
     itself or the wrap point would be one gap short */
  padding-right: clamp(48px, 7vw, 84px);
  align-items: center;
  flex: none;
}
.marquee__track:hover {
  animation-play-state: paused;
}
.marquee__track.is-paused {
  animation-play-state: paused;
}
.marquee__track.is-running {
  will-change: transform;
}
.marquee__track img {
  width: auto;
  display: block;
}

/* --- 16. Team ------------------------------------------------------------ */
/* One 12-column grid carries both rows: founders span 4 (three across), the
   key team spans 3 (four across), so every card shares the same outer
   edges and gutter. The photos are pre-cropped to one eye line and scale
   (see Team.tsx), so equal squares line the faces up across the grid. */
.team {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 36px;
}
.person--founder {
  grid-column: span 4;
}
.person--member {
  grid-column: span 3;
}
.team__label {
  grid-column: 1 / -1;
  margin: 12px 0 -12px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-50);
}
.team__label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
@media (max-width: 899px) {
  .team {
    column-gap: 14px;
  }
}
@media (max-width: 599px) {
  .person--founder {
    grid-column: 1 / -1;
  }
  .person--member {
    grid-column: span 6;
  }
}
.person {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.person img {
  width: 100%;
  /* No preflight: without this the height attribute wins over the ratio. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: #0b1520;
}
.person--member {
  gap: 12px;
}
.person--member img {
  border-radius: 12px;
}
.person--member .person__name {
  font-size: 17px;
}
.person__dept {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-50);
}
.person__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.person__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
}
.person__role {
  font-weight: 500;
  color: var(--muted-50);
}
.person__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}
.li-link {
  display: inline-flex;
  color: rgba(20, 30, 40, 0.35);
}
.li-link:hover {
  color: var(--red);
}

/* --- 17. Careers band + footer ------------------------------------------- */
/* Wrapper carries the tile width system (§5); the ink card fills it. */
.careers-wrap {
  padding: 0;
}
.careers {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--tile-radius);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.careers__motif {
  position: absolute;
  right: -14%;
  top: 50%;
  transform: translateY(-50%);
  width: min(720px, 72vw);
  height: auto;
  pointer-events: none;
}
.careers__title {
  position: relative;
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 760px;
}
.careers .cta {
  position: relative;
}

/* The footer is a mist tile too, not ink - it sits directly under the ink
   careers band, and the page has to end on a white --tile-gap. The old
   full-width border-top is gone with the full-bleed grammar. */
.site-footer {
  padding: clamp(28px, 3vw, 40px) var(--pad-x);
  border-radius: var(--tile-radius);
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer__logo {
  display: inline-block;
  width: 74px;
  height: 21px;
  background: var(--ink);
  -webkit-mask: url("../assets/liria-logo-white.png") left center / contain
    no-repeat;
  mask: url("../assets/liria-logo-white.png") left center / contain no-repeat;
}
.site-footer__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}
.site-footer__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

/* --- 18. Responsive ------------------------------------------------------ */
@media (max-width: 560px) {
  :root {
    /* Bigger ring than the old 0.58 - the pieces below shrink to make room,
       so the stage fills out instead of full-size pieces piling up. */
    --orb: 0.68;
  }
  .split__col--liria .split__stage {
    height: 344px;
    /* bleed into the column padding so the ring's widest moments
       (cap at 3 / 9 o'clock, ±163px) fit without clipping label text */
    margin: 0 -24px;
  }
  .orbit-core {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }
  .mark-mask--core {
    width: 26px;
    height: 20px;
  }
  .orbit-card {
    padding: 4px 7px;
    border-radius: 8px;
  }
  .orbit-card__name {
    font-size: 11px;
  }
  .orbit-card__role {
    font-size: 9px;
  }
  .orbit-ring--inner {
    /* matches the widened card pentagon below (r 84 -> 90 pre-scale) */
    width: calc(180px * var(--orb));
    height: calc(180px * var(--orb));
  }
  .orbit-cap {
    gap: 3px;
  }
  .orbit-cap__icon {
    width: 30px;
    height: 30px;
  }
  .orbit-cap__label {
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    width: 78px;
  }
  /* Push the product-card pentagon out (r 84 -> 90 pre-scale) so cards
     clear the shrunken core at every rotation phase. Same angles as the
     inline desktop positions. */
  .split__stage .orbit > .orbit__slot:nth-child(1) {
    /* PitLane, -90° */
    transform: translate(
      calc(-50% + 0px),
      calc(-50% - 90px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(2) {
    /* CarAssist, -18° */
    transform: translate(
      calc(-50% + 86px * var(--orb)),
      calc(-50% - 28px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(3) {
    /* FleetHub, 54° */
    transform: translate(
      calc(-50% + 53px * var(--orb)),
      calc(-50% + 73px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(4) {
    /* QCAI Inspect, 126° */
    transform: translate(
      calc(-50% - 53px * var(--orb)),
      calc(-50% + 73px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(5) {
    /* OrbitControl, 198° */
    transform: translate(
      calc(-50% - 86px * var(--orb)),
      calc(-50% - 28px * var(--orb))
    ) !important;
  }
  /* Re-space the 8 capability slots evenly (45° apart) on the outer ring.
     The desktop angles cluster three labels only 27° apart, which collides
     at this radius. Slots 1-5 are the product cards (pentagon, above),
     6-13 the capability caps, in index.html order. !important is required
     to beat the inline desktop transforms. Keep the .split__stage scope:
     the section-07 customers ring shares .orbit/.orbit__slot classes and
     must not inherit these positions. */
  .split__stage .orbit > .orbit__slot:nth-child(6) {
    /* Online booking, -100° */
    transform: translate(
      calc(-50% - 32px * var(--orb)),
      calc(-50% - 179px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(7) {
    /* Appointment reminders, -55° */
    transform: translate(
      calc(-50% + 104px * var(--orb)),
      calc(-50% - 149px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(8) {
    /* Live tracking, -10° */
    transform: translate(
      calc(-50% + 179px * var(--orb)),
      calc(-50% - 32px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(9) {
    /* Fleet self-service, 35° */
    transform: translate(
      calc(-50% + 149px * var(--orb)),
      calc(-50% + 104px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(10) {
    /* Digital reports, 80° */
    transform: translate(
      calc(-50% + 32px * var(--orb)),
      calc(-50% + 179px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(11) {
    /* Vehicle ops, 125° */
    transform: translate(
      calc(-50% - 104px * var(--orb)),
      calc(-50% + 149px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(12) {
    /* AI documentation, 170° */
    transform: translate(
      calc(-50% - 179px * var(--orb)),
      calc(-50% + 32px * var(--orb))
    ) !important;
  }
  .split__stage .orbit > .orbit__slot:nth-child(13) {
    /* Auto scheduling, 215° */
    transform: translate(
      calc(-50% - 149px * var(--orb)),
      calc(-50% - 104px * var(--orb))
    ) !important;
  }
}
@media (max-width: 480px) {
  .fw {
    --fw-ring: 180px;
    --fw-r: 90px;
    height: clamp(300px, 80vw, 380px);
  }
  .fw-step {
    font-size: 11px;
    /* side tiles sit at left:22/78%: 2x22% available minus 22px padding+border */
    max-width: min(112px, 43% - 22px);
    padding: 6px 10px;
  }
  .fw-step--1,
  .fw-step--2 {
    left: 78%;
  }
  .fw-step--4,
  .fw-step--5 {
    left: 22%;
  }
}

/* --- 19. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-orbit-anim] {
    animation: none !important;
  }
  [data-pulse] {
    animation: none !important;
  }
  .marquee {
    overflow-x: auto;
  }
  .marquee__track {
    animation: none !important;
  }
  .has-js .os-card__body {
    transition: none;
  }
  .os__center::before,
  .os__center::after {
    animation: none;
    /* park the pulse mid-line, like the JS wires' park() */
    background-position:
      50% 14px,
      50% 0;
  }
  .os-card,
  .os-card__chev,
  .fw-step,
  .fw__btn,
  .mark-mask--fw {
    transition: none;
  }
}