/* Swiss Core Systems - base styles: brand tokens, typography, layout
   Per Brand & UI Spec: flat, architectural, ink-on-paper. Zero radius,
   2px borders, no shadows/gradients/blur, red is functional only. */

/* Metric-matched fallback for Archivo.
   Archivo is fetched from fonts.gstatic.com with font-display:swap, so every block
   of text is painted first in a fallback face and then repainted in Archivo. The
   two have different vertical metrics, so without this face the swap relayouts the
   whole page (a large, late Cumulative Layout Shift). The overrides below make the
   fallback occupy the same box as Archivo, turning the swap into a repaint.
   Measured, not guessed - Archivo v25 vs Arial, mean advance over [a-zA-Z ,.]:
     Archivo 400  unitsPerEm 1000, typoAsc 878, typoDesc -210, typoGap 0
                  (USE_TYPO_METRICS set); mean advance 0.57191em
     Arial        mean advance 0.56681em  -> size-adjust 100.90%
                  ascent  = (878/1000)/1.0090 = 87.02%
                  descent = (210/1000)/1.0090 = 20.81%
     Archivo 800  mean advance 0.63124em
     Arial Bold   mean advance 0.59500em    -> size-adjust 106.09%
                  ascent  = (878/1000)/1.0609 = 82.76%
                  descent = (210/1000)/1.0609 = 19.79%
   Both faces therefore resolve to the same 0.8780em ascent / 0.2100em descent.
   src is local() only: no extra request, and where the local font is missing the
   face is simply unusable and the stack falls through to system-ui as before. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');
  size-adjust: 100.90%;
  ascent-override: 87.02%;
  descent-override: 20.81%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Archivo Fallback';
  font-weight: 700 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold');
  size-adjust: 106.09%;
  ascent-override: 82.76%;
  descent-override: 19.79%;
  line-gap-override: 0%;
}

:root {
  /* Core palette (unchanged values; the design system renames them in prose) */
  --color-accent: #EC3013;         /* red: stripe, icons, rules, focus, active states */
  --color-accent-hover: #DD2B0F;   /* red-action: primary button background */
  --color-accent-active: #AE1800;  /* red-strong: links, figures, primary hover */
  --color-ink: #201E1D;
  --color-paper: #F3F2F2;          /* grey bands: hero, page head, footer, table head */
  --color-sand: #F7F6F5;           /* light fills: callouts, icon tiles, secondary hover */
  --color-white: #FFFFFF;

  /* Surfaces and text. Light theme only - there is no dark variant. */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text: #201E1D;
  --color-text-muted: #4A4644;
  --color-text-subtle: #6B6664;
  --color-border: #D6D4D3;
  --color-border-strong: #201E1D;
  --color-divider: #E2E0DF;
  --color-accent-text: #AE1800;

  --font: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --container: 80rem;
  --prose: 36rem;          /* running text never exceeds this */
  --measure-wide: 52rem;   /* headings and section heads may */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadow: warm ink, never pure black */
  --shadow-card: 0 1px 2px rgb(32 30 29 / 0.05), 0 4px 14px rgb(32 30 29 / 0.06);
  --shadow-raised: 0 2px 4px rgb(32 30 29 / 0.06), 0 14px 32px rgb(32 30 29 / 0.1);
  --shadow-panel: 0 16px 48px rgb(32 30 29 / 0.18);

  /* Motion */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Ghost grid: a faint drafting lattice so no band reads as flat white or flat grey.
     Two layers - a 32px minor cell and a 160px major line - painted under the content
     of every band. Alpha is deliberately near the threshold of visibility. */
  --ghost-cell: 32px;
  --ghost-line: rgb(32 30 29 / 0.028);
  --ghost-line-major: rgb(32 30 29 / 0.042);
  --ghost-grid:
    linear-gradient(to right, var(--ghost-line-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ghost-line-major) 1px, transparent 1px),
    linear-gradient(to right, var(--ghost-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ghost-line) 1px, transparent 1px);
  --ghost-size:
    calc(var(--ghost-cell) * 5) calc(var(--ghost-cell) * 5),
    calc(var(--ghost-cell) * 5) calc(var(--ghost-cell) * 5),
    var(--ghost-cell) var(--ghost-cell),
    var(--ghost-cell) var(--ghost-cell);
}

/* The lattice is an accent, not a backdrop: it marks the three framing bands of a
   page - the opening (hero or page header), the figures, and the foot - and nothing
   else. Ordinary content sections, white and paper alike, stay plain, so the grid
   lands on roughly one section in three instead of reading as page texture.
   Add .ghost-grid to any other band that should carry it. */
.ghost-grid,
.hero,
.page-head,
.stat-band,
.footer {
  background-image: var(--ghost-grid);
  background-size: var(--ghost-size);
  background-position: center top;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Deploy gates ship markup with [hidden]; nothing in this sheet may un-hide it by accident */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font);
  color: var(--color-text);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Display and section headings are light (300); only buttons, labels and
   emphasis go to 600. Nothing on the site uses 700 or 800 any more. */
h1 {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

strong {
  font-weight: 600;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img,
svg {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

main {
  padding-top: 81px;
  /* 4px accent stripe + 76px header + 1px hairline */
}

/* The header is fixed, so an anchored section would otherwise land underneath it */
:target {
  scroll-margin-top: 81px;
}

.section {
  padding: 40px 0;
}

.section-alt {
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

/* Section heads: flush left, kicker as uppercase label over a 3px ink rule */
.section-head {
  max-width: var(--measure-wide);
  margin: 0 0 32px;
  text-align: left;
}

.kicker {
  display: block;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-subtle);
  padding-top: 14px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 48px;
  margin-bottom: 8px;
}

/* The red rule draws itself in when the section scrolls into view */
.kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  background: var(--color-accent);
  transform-origin: left center;
}

.section-head .kicker::before {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}

.section-head.aos-animate .kicker::before {
  transform: scaleX(1);
}

.section-head p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: var(--prose);
}

/* Hero: the artwork stands on the section's own full-width bottom rule */
.hero {
  position: relative;
  padding: 32px 0 0;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-divider);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
}

.hero-copy {
  padding-bottom: 80px;
}

.hero h1 {
  font-size: 30px;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: var(--prose);
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-art {
  color: var(--color-text);
  align-self: end;
}

.hero-art svg,
.page-art svg {
  display: block;
  width: 100%;
}

/* Solutions page head: three SecureStack units, one image each in the same frame, stacked on
   the section rule. They drop in from the bottom one up on load: CSS only, transform and
   opacity, no overshoot. The box keeps its size by aspect ratio, so the units can leave the
   flow (below) without the page head moving. */
.stack-art {
  position: relative;
  aspect-ratio: 680 / 697;
}

.stack-fix {
  position: absolute;
  inset: 0;
}

.stack-unit {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  animation: stack-drop 900ms var(--ease-smooth) 150ms both;
}

.stack-unit:nth-child(2) {
  animation-delay: 420ms;
}

.stack-unit:nth-child(3) {
  animation-delay: 690ms;
}

/* Solid before it lands, so a falling unit never shows the one below through it */
@keyframes stack-drop {
  0% {
    opacity: 0;
    transform: translateY(-16%);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* From 1024px the units stay where they stand while the page scrolls (main.js initStackArt
   sets .has-stack on <html> and the position). The sections decide by z-index: the one after
   the page head and everything from the questions down pass over the units, opaque; the
   Configuration band (.section-alt) passes under them. The page head itself stays unstacked,
   so the units keep their own place in the root stacking order. */
@media (min-width: 1024px) {
  .has-stack .stack-fix {
    position: fixed;
    z-index: 2;
    top: var(--stack-top);
    right: auto;
    bottom: auto;
    left: var(--stack-left);
    width: var(--stack-w);
    height: auto;
    aspect-ratio: 680 / 697;
    pointer-events: none;
  }

  .has-stack main>section:not(.page-head),
  .has-stack .footer {
    position: relative;
    z-index: 3;
  }

  .has-stack main>.section:not(.section-alt) {
    background-color: var(--color-white);
  }

  .has-stack main>section.section-alt:not(.page-head) {
    z-index: 1;
  }
}

/* Artwork entrance: each component pops in with a staggered delay (driven by
   main.js via the Web Animations API). Local transform origin so pieces scale
   in place instead of from the SVG corner. */
.hero-art svg:not(#hero-logo)>*,
.page-art svg>* {
  transform-box: fill-box;
  transform-origin: center;
}

/* Cinematic home hero: the mark assembles centered, then docks right */
.hero-cine {
  padding: 32px 0 56px;
  overflow: hidden;
}

.hero-cine .container {
  align-items: center;
}

.hero-cine .hero-copy {
  padding-bottom: 0;
}

/* Home hero copy: the second beat of the cinematic.
   The mark assembles on the right, and only once it has resolved and started
   docking does the copy rise in, line by line. That sequencing is what the
   hero is for, so it is driven from CSS rather than from AOS: AOS holds every
   [data-aos] element at opacity:0 until its script has arrived from unpkg.com,
   which put the <h1> - the Largest Contentful Paint element of the site -
   behind an uncapped third-party request on top of its own delay. Here the
   delay is bounded and starts at first paint, and the whole sequence lands at
   about 2.0s instead of 3.15s plus network.
   Only opacity and transform animate, so nothing here can shift layout.
   --hero-cue is the single number that moves the whole cascade: it is timed
   against initHeroCinematic() in assets/js/main.js (the mark starts docking at
   1200ms), so change the two together. Lowering it improves LCP. */
.hero-cine .hero-copy {
  --hero-cue: 1300ms;
  --hero-step: 80ms;
  /* The block itself is hidden until the cue. Without this the white card - its
     background, border and shadow - is painted at first paint and sits empty on
     the band for 1.3s while the mark assembles, with the lines arriving into an
     already-drawn box. Revealing the container on the same cue means the card and
     its first line appear together. */
  animation: hero-copy-reveal 280ms var(--ease-smooth) both;
  animation-delay: var(--hero-cue);
}

@keyframes hero-copy-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-cine .hero-copy>* {
  animation: hero-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--hero-cue);
}

/* The line-by-line cascade, in source order: kicker, h1, sub, CTAs, beta note */
.hero-cine .hero-copy> :nth-child(2) {
  animation-delay: calc(var(--hero-cue) + var(--hero-step));
}

.hero-cine .hero-copy> :nth-child(3) {
  animation-delay: calc(var(--hero-cue) + 2 * var(--hero-step));
}

.hero-cine .hero-copy> :nth-child(4) {
  animation-delay: calc(var(--hero-cue) + 3 * var(--hero-step));
}

.hero-cine .hero-copy> :nth-child(5) {
  animation-delay: calc(var(--hero-cue) + 4 * var(--hero-step));
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-logo-art {
  width: 100%;
  max-width: 400px;
  justify-self: end;
  align-self: center;
}

/* Logo v2 assembly (.mark-assemble: the home hero and the product-page intro).
   The mark ends as scs-mark-red: outline shield, lattice and dots all red, no
   fill anywhere. The shield arrives at .stage-unified (1000ms in main.js) with
   opacity and scale only. */
.mark-assemble .hero-shield {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(1.04);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms var(--ease-smooth), transform 260ms var(--ease-smooth);
}

.mark-assemble .hero-lattice {
  stroke: var(--color-accent);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mark-assemble .hero-dot {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
}

.mark-assemble.stage-lines .hero-lattice {
  opacity: 1;
}

.mark-assemble.stage-unified .hero-shield {
  opacity: 1;
  transform: none;
}

/* Section with artwork standing on its own bottom rule (like page heads) */
.section-grounded {
  position: relative;
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-divider);
}

/* Data pulse running along a section's full-width rule */
/* Animated artwork (hero + page heads)
   Shared vocabulary: ink structure, faint detail, red functional signals. */
.art-ink {
  stroke: var(--color-text);
  fill: none;
}

.art-faint {
  stroke: var(--color-border);
  fill: none;
}

.art-red {
  stroke: var(--color-accent);
  fill: none;
}

.art-fill-red {
  fill: var(--color-accent);
  stroke: none;
}

.screen {
  fill: var(--color-paper);
  stroke: var(--color-text);
  stroke-width: 2;
}

.flow {
  fill: none;
  stroke: var(--color-accent);
  stroke-dasharray: 5 9;
  animation: flow-dash 1.6s linear infinite;
}

.flow-slow {
  animation-duration: 3s;
}

@keyframes flow-dash {
  to {
    stroke-dashoffset: -28;
  }
}

.node {
  fill: var(--color-accent);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 2.4s ease-in-out infinite;
}

@keyframes node-pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.led {
  fill: var(--color-accent);
  stroke: none;
  animation: led-blink 1.3s steps(2, end) infinite;
}

@keyframes led-blink {
  50% {
    opacity: 0.12;
  }
}

.beacon {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: beacon 2.6s ease-out infinite;
}

@keyframes beacon {
  0% {
    transform: scale(0.25);
    opacity: 1;
  }

  75%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.scan {
  stroke: var(--color-accent);
  stroke-width: 2;
  opacity: 0;
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  8% {
    opacity: 0.55;
  }

  85% {
    opacity: 0.55;
  }

  100% {
    transform: translateY(430px);
    opacity: 0;
  }
}

/* Staggered delays for pulsing nodes/flows */
.d1 {
  animation-delay: 0.3s;
}

.d2 {
  animation-delay: 0.6s;
}

.d3 {
  animation-delay: 0.9s;
}

.d4 {
  animation-delay: 1.2s;
}

.d5 {
  animation-delay: 1.5s;
}

/* Stat band */
.stat-band {
  position: relative;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background-color: var(--color-paper);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 40px 0;
  text-align: left;
}

.stat-value {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--color-accent-active);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  color: var(--color-text-subtle);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ROI ledger: what the recovered time is worth, stated as a ledger. The 2px rules between the
   figures are the grid gap showing through, so they stay exactly 2px however the grid reflows.
   The numbers are ink and the red is only the rule under each one - the red stat band sits
   directly below this section and has to remain the louder of the two. */
.roi-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.roi-figure {
  background: var(--color-white);
  padding: 24px;
}

.roi-value {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--color-text);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 3px solid var(--color-accent);
  border-radius: 0 0 2px 2px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 40px;
}

/* Unit and currency ride with the number without competing with it: suffix (h) after, prefix
   (CHF) before, so "CHF 280'000" still fits a quarter-width column */
.roi-unit {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.3em;
}

.roi-unit:first-child {
  margin-left: 0;
  margin-right: 0.26em;
}

.roi-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--color-text-subtle);
  margin-bottom: 10px;
}

.roi-figure p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.roi-close {
  max-width: var(--prose);
  margin-top: 40px;
}

.roi-close>p {
  margin: 0;
  max-width: var(--prose);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* CTA band: ink surface, flush left, red primary action */
.cta-band {
  background-color: var(--color-white);
  color: var(--color-text);
  text-align: left;
  border-top: 1px solid var(--color-divider);
  padding: 40px 0;
}

.cta-band h2 {
  color: var(--color-text);
}

.cta-band p {
  color: var(--color-text-muted);
  max-width: var(--prose);
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.7;
}

/* Page header for subpages: animated art standing on the section rule */
.page-head {
  position: relative;
  padding: 32px 0 0;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}

.page-head-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: end;
}

.page-head-grid>div:first-child {
  padding-bottom: 32px;
}

.page-art {
  color: var(--color-text);
  justify-self: end;
  align-self: end;
  width: 100%;
  max-width: 340px;
}

/* Quote band: the deck's thesis as a full-bleed statement */
.quote-band {
  padding: 72px 0;
}

.quote-band blockquote {
  margin: 0;
  max-width: var(--measure-wide);
  border-left: 3px solid var(--color-accent);
  border-radius: 2px;
  padding-left: 20px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: pretty;
}

.page-head h1 {
  font-size: 30px;
}

.page-head p {
  color: var(--color-text-muted);
  max-width: var(--prose);
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

/* Prose blocks */
.prose {
  max-width: var(--prose);
  margin: 0;
}

.prose-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: var(--prose);
}

/* Utility */
.text-center {
  text-align: left;
  /* brand: flush left everywhere except empty states/modals */
}

.mt-2 {
  margin-top: 32px;
}

/* Responsive */
@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .grid-3,
  .grid-4,
  .roi-ledger {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 640px) {
  .hero-copy {
    padding-bottom: 40px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .roi-ledger {
    grid-template-columns: 1fr;
  }

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

  .page-head-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-art {
    justify-self: start;
    max-width: 240px;
  }
}

/* AOS 2.3.4 only ships transition-delay rules for multiples of 50ms, so the
   180 / 260 / 340 delays used by the four governance cards on the home page match
   nothing at all and the cards all fire at once. These three rules restore the
   intended stagger; they mirror the vendor sheet's own selector shape (the
   attribute is repeated to raise specificity above [data-aos=fade-up]).
   Delete them if those delays are ever changed to multiples of 50. */
[data-aos][data-aos][data-aos-delay="180"],
[data-aos][data-aos][data-aos-delay="260"],
[data-aos][data-aos][data-aos-delay="340"] {
  transition-delay: 0s;
}

[data-aos][data-aos][data-aos-delay="180"].aos-animate {
  transition-delay: 0.18s;
}

[data-aos][data-aos][data-aos-delay="260"].aos-animate {
  transition-delay: 0.26s;
}

[data-aos][data-aos][data-aos-delay="340"].aos-animate {
  transition-delay: 0.34s;
}

/* Accessibility: reduce motion when requested */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  .section-head .kicker::before {
    transform: none !important;
    transition: none !important;
  }

  /* The global rule above shortens animation-duration but not animation-delay,
     which would leave the hero copy at opacity:0 for 1.3s. Cancel the whole
     cascade outright so the text is simply there. */
  .hero-cine .hero-copy,
  .hero-cine .hero-copy>* {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Show the assembled mark immediately */
  .hero-logo-art {
    transform: none !important;
  }

  .mark-assemble .hero-shield {
    opacity: 1 !important;
    transform: none !important;
  }

  .mark-assemble .hero-lattice {
    opacity: 1 !important;
  }

  .stack-unit {
    animation: none !important;
  }
}

/* ================================================================
   Design system - typography, surfaces and steps up from 768px.
   Mobile-first: the base rules above are the phone values.
   ================================================================ */

.heading-display {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.heading-section {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: var(--prose);
}

.text-ui {
  font-size: 15px;
  line-height: 1.5;
}

.eyebrow {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.figure {
  font-size: 48px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--color-accent-active);
}

.prose-width {
  max-width: var(--prose);
}

/* The accent rule: a 3px rounded red bar left of key text. */
.accent-rule {
  border-left: 3px solid var(--color-accent);
  border-radius: 2px;
  padding-left: 16px;
}

/* Icon tile: one component, never hand-built a second time. */
.icon-tile {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-sand);
  color: var(--color-accent);
}

/* Callout: sand fill, never a red background. */
.callout {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Home hero: from 640px the copy sits on a white card over the paper band. */
@media (min-width: 640px) {
  .hero-copy {
    background: var(--color-white);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px;
  }

  .hero-cine .hero-copy {
    padding-bottom: 32px;
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: 32px;
  }

  h1,
  .heading-display {
    font-size: 40px;
    line-height: 1.15;
  }

  h2,
  .heading-section {
    font-size: 28px;
  }

  .section {
    padding: 56px 0;
  }

  .hero {
    padding: 56px 0 0;
  }

  .hero-cine {
    padding: 56px 0 88px;
  }

  .hero-copy {
    padding: 36px;
  }

  .hero-cine .hero-copy {
    padding-bottom: 36px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .page-head {
    padding: 48px 0 0;
  }

  .page-head h1 {
    font-size: 40px;
  }

  .page-head-grid>div:first-child {
    padding-bottom: 48px;
  }

  .cta-band {
    padding: 48px 0;
  }

  .stat-grid {
    padding: 56px 0;
  }

  .section-head p,
  .page-head p,
  .lead,
  .hero-sub,
  .cta-band p {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 48px;
  }
}


/* ----------------------------------------------------------------
   No horizontal page scroll.

   A `1fr` grid track is min-content sized by default, so an artwork SVG with a
   wide intrinsic size prises the track - and with it the container - open past
   the viewport. min-width: 0 lets these tracks shrink, and img/svg are already
   capped at 100% of the track.
   ---------------------------------------------------------------- */

.hero .container>*,
.page-head-grid>*,
.grid-2>*,
.grid-3>*,
.grid-4>*,
.stat-grid>*,
.roi-ledger>*,
.steps>*,
.price-flow>*,
.footer-grid>* {
  min-width: 0;
}

.hero-art,
.hero-logo-art,
.page-art {
  max-width: 100%;
}

@media (min-width: 640px) {
  .hero-logo-art {
    max-width: 400px;
  }

  .page-art {
    max-width: 340px;
  }
}

/* The header row is brand + controls on a phone; let the name shrink rather
   than push the language select off the screen. */
@media (max-width: 520px) {
  .nav-brand {
    font-size: 15px;
    gap: 8px;
    min-width: 0;
  }

  .nav-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-brand img {
    height: 28px;
  }

  .nav-inner {
    padding: 0 16px;
    gap: 8px;
  }

  .container {
    padding-inline: 16px;
  }
}