/* ==========================================================================
   FlexSim — marketing site
   Direction: Aurora / gradient-mesh on a light base.

   Type is a three-role system: Space Grotesk carries display (geometric with
   enough quirk to not read as a default), Manrope carries body, JetBrains Mono
   carries every piece of protocol data. Colour runs violet → indigo → blue →
   cyan as the signature, with teal/emerald reserved for acquirer mode so the two
   modes stay distinguishable at a glance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — faintly violet-tinted white, not neutral grey */
  --paper:        #F7F7FD;
  --paper-deep:   #EEEEFB;
  --card:         #FFFFFF;

  /* Text */
  --ink:          #0B0A1F;
  --ink-2:        #3A3557;
  --slate:        #625C84;

  /* Hue ramp. Anything used as text is >= 4.5:1 on white; the brighter
     variants below it are for fills, blobs and icon tiles only. */
  --violet:       #7C3AED;
  --violet-deep:  #6D28D9;
  --indigo:       #4F46E5;
  --indigo-deep:  #3730A3;
  --blue:         #2563EB;
  --cyan-text:    #0E7490;   /* 5.4:1 — safe for text */
  --cyan:         #06B6D4;   /* fills only */
  --teal-deep:    #0F766E;   /* 5.5:1 — safe for text */
  --teal:         #14B8A6;   /* fills only */
  --emerald:      #10B981;   /* fills only */
  --fuchsia:      #C026D3;
  --rose:         #E11D48;
  --amber:        #D97706;   /* 3.2:1 — decorative only */

  /* Semantic roles. Indigo-blue is the primary brand colour; teal marks the
     acquirer-mode side so the two mode cards read as a pair, not a hierarchy. */
  --brand:        var(--indigo);
  --brand-deep:   var(--indigo-deep);
  --brand-wash:   #EEEFFE;
  --accent:       var(--teal-deep);
  --accent-wash:  #E4FAF5;

  /* Structure */
  --line:         #E4E3F5;
  --line-2:       #C9C6E6;

  /* Signature gradients ---------------------------------------------------
     --g-text  every stop clears 4.5:1 on white, so headline text is safe
     --g-btn   every stop clears 4.5:1 against white text
     --g-fill  brighter, for surfaces that carry no text                    */
  --g-text: linear-gradient(100deg, #7C3AED 0%, #2563EB 52%, #0E7490 100%);
  --g-btn:  linear-gradient(120deg, #7C3AED 0%, #4F46E5 50%, #2563EB 100%);
  --g-fill: linear-gradient(120deg, #8B5CF6 0%, #3B82F6 50%, #06B6D4 100%);
  --g-mint: linear-gradient(120deg, #0891B2 0%, #10B981 100%);
  --g-warm: linear-gradient(120deg, #E11D48 0%, #F59E0B 100%);
  --g-plum: linear-gradient(120deg, #C026D3 0%, #7C3AED 100%);
  --g-line: linear-gradient(90deg, #7C3AED, #2563EB 40%, #06B6D4 70%, #10B981);
  --g-dark: linear-gradient(125deg, #2E1065 0%, #1E1B4B 42%, #0C4A6E 100%);

  /* Elevation — tinted violet rather than neutral black */
  --sh-1: 0 1px 2px rgba(35, 20, 90, .05), 0 10px 24px -14px rgba(35, 20, 90, .18);
  --sh-2: 0 2px 4px rgba(35, 20, 90, .05), 0 28px 64px -28px rgba(35, 20, 90, .32);
  --sh-3: 0 40px 90px -40px rgba(60, 30, 140, .45);
  --sh-glow: 0 18px 40px -18px rgba(99, 70, 229, .55);

  /* Radii */
  --r-xs: 7px;
  --r-s:  11px;
  --r-m:  18px;
  --r-l:  26px;

  /* Type */
  --f-display: "Space Grotesk", "Segoe UI Variable Display", system-ui, sans-serif;
  --f-body:    "Manrope", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(76px, 9vw, 136px);
  --nav-h: 68px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 5px;
}

::selection { background: var(--violet); color: #fff; }

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 300;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-s);
  transition: top .18s ease;
}
.skip:focus { top: 14px; color: #fff; }

/* Scroll progress — a thin gradient rule that fills as the page moves */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--g-line);
  transform-origin: left;
  transition: width .08s linear;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--paper { background: var(--paper-deep); }
.section--card  { background: var(--card); }

/* A section that carries its own soft colour wash behind the content */
.section--wash { position: relative; overflow: hidden; }
.section--wash::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 12% 20%, rgba(124, 58, 237, .13), transparent 70%),
    radial-gradient(38% 38% at 88% 70%, rgba(6, 182, 212, .13), transparent 70%);
}
.section--wash > * { position: relative; z-index: 1; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Section head: mono eyebrow left, heading right */
.shead {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(14px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.shead__body { max-width: 62ch; }
.shead .h2 { margin-bottom: 18px; }

.label {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 0;
  padding-top: .55em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--violet-deep);
}
.label::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--g-line);
  flex: none;
}
.label--blue { color: var(--brand-deep); }
.label--mint { color: var(--teal-deep); }
.label--mint::before { background: var(--g-mint); }

.h1 {
  font-size: clamp(2.8rem, 6.6vw, 5.2rem);
  letter-spacing: -0.045em;
  line-height: .97;
  font-weight: 700;
}
.h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); letter-spacing: -0.04em; }
.h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.32; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  line-height: 1.64;
}

.mono { font-family: var(--f-mono); font-size: .93em; }

/* Gradient text. Every stop in --g-text clears 4.5:1, and the @supports guard
   keeps the text visible if background-clip:text is unavailable. */
.grad { color: var(--violet-deep); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad {
    background-image: var(--g-text);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: grad-drift 9s ease-in-out infinite;
  }
}
@keyframes grad-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Highlight sweep under a word */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: "";
  position: absolute;
  left: -.04em; right: -.04em;
  bottom: .06em;
  height: .28em;
  border-radius: 3px;
  background: var(--g-line);
  opacity: .28;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: sweep 1s var(--ease-out) .55s forwards;
}
@keyframes sweep { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .25s ease,
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background-image: var(--g-btn);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--sh-glow);
  transition: transform .22s var(--ease-out), box-shadow .25s ease, background-position .5s ease;
}
.btn--primary:hover {
  color: #fff;
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -18px rgba(99, 70, 229, .7);
}
/* Sheen that crosses the button on hover */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--violet);
  color: var(--violet-deep);
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}

.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }

.btn--sm { padding: 9px 18px; font-size: .89rem; }
.btn--lg { padding: 17px 32px; font-size: 1.04rem; }
.btn__arrow { transition: transform .25s var(--ease-out); position: relative; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 247, 253, .72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(255, 255, 255, .84); }

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 31px; height: 31px;
  border-radius: 9px;
  transition: transform .4s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  color: var(--ink-2);
  font-size: .94rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .2s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-line);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--violet-deep); }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__menu .btn { margin-left: 10px; }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px var(--gutter) 22px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-1);
    display: none;
  }
  .nav__menu.is-open { display: flex; animation: menu-in .3s var(--ease-out); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
  .nav__link { padding: 12px 4px; border-radius: var(--r-xs); }
  .nav__link::after { left: 4px; right: 4px; bottom: 6px; }
  .nav__menu .btn { margin: 10px 0 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}

/* Aurora field — five saturated blobs on independent slow paths */
.hero__aura { position: absolute; inset: -25% -12% auto -12%; height: 140%; pointer-events: none; z-index: 0; }
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
  mix-blend-mode: multiply;
}
.aura--a { width: 44vw; height: 44vw; left: 44%; top: -8%; background: radial-gradient(circle, rgba(139,92,246,.55) 0%, rgba(139,92,246,0) 68%); animation: drift-a 24s ease-in-out infinite; }
.aura--b { width: 34vw; height: 34vw; left: 63%; top: 30%; background: radial-gradient(circle, rgba(6,182,212,.5) 0%, rgba(6,182,212,0) 68%);  animation: drift-b 30s ease-in-out infinite; }
.aura--c { width: 32vw; height: 32vw; left: -6%; top: 12%; background: radial-gradient(circle, rgba(59,130,246,.45) 0%, rgba(59,130,246,0) 70%); animation: drift-c 27s ease-in-out infinite; }
.aura--d { width: 26vw; height: 26vw; left: 18%; top: 58%; background: radial-gradient(circle, rgba(16,185,129,.4) 0%, rgba(16,185,129,0) 70%);  animation: drift-b 34s ease-in-out infinite reverse; }
.aura--e { width: 22vw; height: 22vw; left: 76%; top: 4%;  background: radial-gradient(circle, rgba(192,38,211,.34) 0%, rgba(192,38,211,0) 70%); animation: drift-a 38s ease-in-out infinite reverse; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(-7%, 8%, 0) scale(1.16); }
  66%      { transform: translate3d(5%, -5%, 0) scale(.92); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1.06); }
  40%      { transform: translate3d(9%, -10%, 0) scale(.88); }
  70%      { transform: translate3d(-4%, 6%, 0) scale(1.12); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0,0,0) scale(.95); }
  50%      { transform: translate3d(8%, 10%, 0) scale(1.2); }
}

.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(76, 40, 180, .17) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 26%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 62% at 50% 26%, #000 20%, transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(124, 58, 237, .28);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 26px;
  box-shadow: 0 6px 18px -10px rgba(124, 58, 237, .6);
  opacity: 0;
  animation: rise .7s var(--ease-out) .05s forwards;
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .2);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(20, 184, 166, .22); }
  50%      { box-shadow: 0 0 0 7px rgba(20, 184, 166, .08); }
}

/* Headline reveals a line at a time */
.hero__title { margin-bottom: 22px; }
.hero__line {
  display: block;
  opacity: 0;
  transform: translateY(.34em);
  animation: line-up .85s var(--ease-out) forwards;
}
.hero__line:nth-child(1) { animation-delay: .12s; }
.hero__line:nth-child(2) { animation-delay: .22s; }
.hero__line:nth-child(3) { animation-delay: .32s; }
@keyframes line-up { to { opacity: 1; transform: none; } }

.hero__sub {
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.19rem);
  color: var(--ink-2);
  margin-bottom: 30px;
  opacity: 0;
  animation: rise .8s var(--ease-out) .42s forwards;
}
.hero .btn-row { margin-bottom: 18px; opacity: 0; animation: rise .8s var(--ease-out) .54s forwards; }
.hero__note { font-size: .88rem; color: var(--slate); opacity: 0; animation: rise .8s var(--ease-out) .64s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Fact strip */
.specline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
  margin-top: clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: rise .9s var(--ease-out) .8s forwards;
}
.specline__item {
  flex: 1 1 auto;
  min-width: 150px;
  padding-inline: clamp(12px, 2vw, 26px);
  border-left: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--slate);
  text-transform: uppercase;
}
.specline__item:first-child { border-left: 0; padding-left: 0; }
.specline__val {
  display: block;
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: none;
  line-height: 1.1;
  margin-bottom: 2px;
  background-image: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .specline__val { color: var(--violet-deep); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------------------
   7. Signature element — the message inspector
   -------------------------------------------------------------------------- */
.inspector {
  position: relative;
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--sh-3);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: .8rem;
  opacity: 0;
  transform: translateY(22px);
}
/* Gradient border via a masked inset ring */
.inspector::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
  padding: 1.5px;
  background: var(--g-fill);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.inspector.is-live { animation: panel-in .85s var(--ease-out) forwards; }
@keyframes panel-in { to { opacity: 1; transform: none; } }

.inspector__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  background: var(--g-dark);
  color: #D5DBF5;
}
.inspector__dots { display: flex; gap: 6px; margin-right: 4px; }
.inspector__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.24); }
.inspector__dots i:nth-child(1) { background: rgba(244, 63, 94, .8); }
.inspector__dots i:nth-child(2) { background: rgba(245, 158, 11, .8); }
.inspector__dots i:nth-child(3) { background: rgba(16, 185, 129, .8); }
/* #A5B0DC only reached 4.4:1 against the lightest stop of --g-dark (#0C4A6E) */
.inspector__title { font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: #B8C2E8; }
.inspector__mti {
  margin-left: auto;
  background: rgba(139, 92, 246, .3);
  color: #E7DDFF;
  border: 1px solid rgba(167, 139, 250, .45);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.inspector__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FCFBFF, #FFFFFF);
}

/* 8 x 8 = the 64 bits of the primary bitmap */
.bitmap { display: grid; grid-template-columns: repeat(8, 13px); gap: 4px; }
.bit {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: #E9E7F7;
  transition: background .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.bit.is-on {
  background-image: var(--g-fill);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
  transform: scale(1.1);
}

.bitmeta__label { font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.bitmeta__hex { font-size: 1.03rem; color: var(--ink); font-weight: 600; letter-spacing: .04em; margin-top: 4px; word-break: break-all; }
.bitmeta__note { font-size: .72rem; color: var(--slate); margin-top: 4px; }

.inspector__fields { padding: 6px 0; }
.frow {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 18px;
  opacity: 0;
  transform: translateX(-10px);
  transition: background .2s ease;
}
.frow.is-in { animation: row-in .5s var(--ease-out) forwards; }
@keyframes row-in { to { opacity: 1; transform: none; } }
.frow:hover { background: var(--brand-wash); }
.frow__de { color: var(--indigo); font-weight: 700; }
.frow__name { color: var(--slate); font-size: .75rem; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow__val { color: var(--ink); font-weight: 500; text-align: right; }

.inspector__resp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--accent-wash);
  border-top: 1px solid #BFEDE1;
  color: var(--teal-deep);
  opacity: 0;
  transform: translateY(12px);
}
.inspector__resp.is-in { animation: row-in .6s var(--ease-out) forwards; }
.inspector__resp strong { color: #0B5F58; letter-spacing: .06em; }
.inspector__ms { margin-left: auto; color: #2C6B60; font-size: .74rem; }

/* --------------------------------------------------------------------------
   8. Cards and grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(16px, 2vw, 22px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 28px 25px 30px;
  box-shadow: var(--sh-1);
  transition: transform .32s var(--ease-out), box-shadow .32s ease, border-color .32s ease;
  overflow: hidden;
  isolation: isolate;
}
/* Gradient hairline that draws across the top */
.card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  background: var(--g-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
/* Colour wash that blooms from the top-left corner */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(70% 60% at 0% 0%, rgba(124, 58, 237, .09), transparent 70%),
              radial-gradient(60% 60% at 100% 100%, rgba(6, 182, 212, .09), transparent 70%);
  transition: opacity .4s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.card:hover::after { transform: scaleX(1); }
.card:hover::before { opacity: 1; }

.card__ref {
  font-family: var(--f-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-deep);
  display: block;
  margin-bottom: 14px;
}
.card__title { margin-bottom: 10px; }
.card__text { font-size: .95rem; color: var(--ink-2); line-height: 1.64; }
.card__list { margin: 14px 0 0; padding: 0; list-style: none; }
.card__list li {
  position: relative;
  padding-left: 19px;
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.56;
  margin-top: 8px;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--g-mint);
}

/* Icon tiles — six gradients so a grid of cards is not one flat colour */
.icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: 18px;
  background-image: var(--g-btn);
  box-shadow: 0 10px 22px -12px rgba(99, 70, 229, .8);
  transition: transform .38s var(--ease-out);
}
.card:hover .icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.icon svg { width: 22px; height: 22px; }
.icon--v1 { background-image: var(--g-plum); box-shadow: 0 10px 22px -12px rgba(168, 40, 200, .8); }
.icon--v2 { background-image: linear-gradient(120deg, #2563EB, #0891B2); box-shadow: 0 10px 22px -12px rgba(8, 145, 178, .8); }
.icon--v3 { background-image: var(--g-mint); box-shadow: 0 10px 22px -12px rgba(13, 148, 136, .8); }
.icon--v4 { background-image: linear-gradient(120deg, #4F46E5, #7C3AED); box-shadow: 0 10px 22px -12px rgba(99, 70, 229, .8); }
.icon--v5 { background-image: var(--g-warm); box-shadow: 0 10px 22px -12px rgba(225, 29, 72, .7); }
.icon--v6 { background-image: linear-gradient(120deg, #0E7490, #10B981); box-shadow: 0 10px 22px -12px rgba(14, 116, 144, .8); }
/* Kept for existing markup */
.icon--mint { background-image: var(--g-mint); }

/* Three-step flow */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.flow__step { position: relative; padding-top: 26px; border-top: 3px solid transparent; background-origin: border-box; }
.flow__step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 2px;
}
.flow__step:nth-child(1)::before { background: linear-gradient(90deg, #7C3AED, #4F46E5); }
.flow__step:nth-child(2)::before { background: linear-gradient(90deg, #4F46E5, #0891B2); }
.flow__step:nth-child(3)::before { background: linear-gradient(90deg, #0891B2, #10B981); }
.flow__ref {
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-bottom: 10px;
}
.flow__title { margin-bottom: 10px; font-size: 1.3rem; }
.flow__text { font-size: .96rem; }

/* --------------------------------------------------------------------------
   9. Split feature blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split__body { max-width: 56ch; }
.split__body .h2 { margin-bottom: 18px; }
.split__body .lede { margin-bottom: 22px; }

.checks { margin: 0; padding: 0; list-style: none; }
.checks li {
  position: relative;
  padding-left: 32px;
  margin-top: 14px;
  font-size: .97rem;
  color: var(--ink-2);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .16em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-image: var(--g-mint);
  opacity: .18;
}
.checks li::after {
  content: "";
  position: absolute;
  left: 6.5px; top: .5em;
  width: 6px; height: 3px;
  border-left: 2px solid var(--teal-deep);
  border-bottom: 2px solid var(--teal-deep);
  transform: rotate(-45deg);
}

/* Code / data panel */
.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.panel:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #FAF9FF, #F4F7FF);
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate);
}
.panel__head .dot { width: 8px; height: 8px; border-radius: 50%; background-image: var(--g-btn); }
.panel__head .dot--mint { background-image: var(--g-mint); }
.panel__body { padding: 20px 18px; font-family: var(--f-mono); font-size: .82rem; line-height: 1.9; color: var(--ink-2); overflow-x: auto; }
.panel__body .k { color: var(--indigo); font-weight: 600; }
.panel__body .v { color: var(--ink); }
.panel__body .c { color: var(--slate); }
.panel__body .g { color: var(--teal-deep); font-weight: 700; }
.panel__foot { padding: 13px 18px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--slate); background: #FCFCFF; }

/* Track 2 strip */
.track { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--f-mono); }
.track__seg {
  border-radius: var(--r-xs);
  padding: 10px 12px;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid var(--line-2);
  background: #FBFBFF;
  color: var(--ink);
  text-align: center;
  transition: transform .25s var(--ease-out);
}
.track__seg:hover { transform: translateY(-3px); }
.track__seg small { display: block; font-size: .59rem; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); margin-top: 3px; font-weight: 700; }
.track__seg--pan { border-color: rgba(79,70,229,.45); background: var(--brand-wash); }
.track__seg--sep { border-color: var(--line-2); background: var(--paper-deep); }
.track__seg--cvv,
.track__seg--pvv { border-color: #A7E5D6; background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   10. Chips
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  transition: transform .25s var(--ease-out), border-color .2s ease, color .2s ease, box-shadow .25s ease;
}
.chip:hover {
  border-color: var(--violet);
  color: var(--violet-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, .7);
}

/* --------------------------------------------------------------------------
   11. Spec tables
   -------------------------------------------------------------------------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: 12px;
}
.spec-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0 16px 10px 0;
  border-bottom: 2px solid transparent;
  border-image: var(--g-line) 1;
}
.spec-table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.spec-table tr { transition: background .2s ease; }
.spec-table tbody tr:hover td { background: rgba(124, 58, 237, .045); }
.spec-table td:first-child {
  font-family: var(--f-mono);
  color: var(--indigo);
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
  padding-right: 26px;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   12. Notes
   -------------------------------------------------------------------------- */
.note {
  position: relative;
  border-radius: var(--r-s);
  padding: 17px 21px 17px 24px;
  font-size: .93rem;
  color: var(--ink-2);
  background: linear-gradient(120deg, rgba(124,58,237,.07), rgba(37,99,235,.05));
  overflow: hidden;
}
.note::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--g-line);
}
.note--mint { background: linear-gradient(120deg, rgba(13,148,136,.09), rgba(16,185,129,.05)); }
.note--mint::before { background: var(--g-mint); }
.note strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   13. Download page
   -------------------------------------------------------------------------- */
.dl-hero { padding-block: clamp(52px, 7vw, 96px) clamp(32px, 4vw, 48px); position: relative; overflow: hidden; }

.dl-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
  z-index: 1;
}
.dl-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
  padding: 2px;
  background: var(--g-fill);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: grad-drift 7s ease-in-out infinite;
}
.dl-primary__os { width: 58px; height: 58px; color: var(--violet-deep); }
.dl-primary__label { font-family: var(--f-mono); font-size: .69rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal-deep); }
.dl-primary__name { font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--ink); letter-spacing: -0.04em; margin-top: 3px; }
.dl-primary__meta { font-family: var(--f-mono); font-size: .79rem; color: var(--slate); margin-top: 6px; }

.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dl-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 19px 21px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .28s var(--ease-out);
}
.dl-card:hover { border-color: var(--violet); box-shadow: var(--sh-1); transform: translateY(-3px); }
.dl-card.is-detected { border-color: var(--teal-deep); box-shadow: 0 0 0 3px var(--accent-wash); }

.dl-card.is-pending { cursor: default; border-style: dashed; background: #FCFCFE; }
.dl-card.is-pending:hover { transform: none; box-shadow: none; border-color: var(--line); }
.dl-card.is-pending .dl-card__os { opacity: .45; }
.dl-card.is-pending .dl-card__name { color: var(--slate); }
.dl-card.is-pending .btn { pointer-events: none; background: transparent; border-color: var(--line-2); color: var(--slate); }

.dl-card__os { width: 30px; height: 30px; color: var(--indigo); }
.dl-card__name { font-weight: 700; color: var(--ink); font-size: .98rem; letter-spacing: -0.02em; }
.dl-card__meta { font-family: var(--f-mono); font-size: .75rem; color: var(--slate); margin-top: 2px; }
.dl-card__badge {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  /* --g-mint is too light behind white text (2.5:1); these stops clear 5.4:1 */
  background-image: linear-gradient(120deg, #0E7490, #047857);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: 2px;
}

.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  margin-top: 20px;
  font-size: .97rem;
}
.steps li:first-child { margin-top: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background-image: var(--g-btn);
  color: #fff;
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px -8px rgba(99, 70, 229, .8);
}
.steps strong { color: var(--ink); }
.steps code, .inline-code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--brand-wash);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--indigo-deep);
}

/* --------------------------------------------------------------------------
   14. Role cards
   -------------------------------------------------------------------------- */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 26px); }

.role {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 30px 27px 32px;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.role:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.role::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.role--acquirer::before { background: linear-gradient(90deg, #7C3AED, #2563EB); }
.role--issuer::before   { background: linear-gradient(90deg, #0891B2, #10B981); }
.role::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  filter: blur(60px);
  top: -90px; right: -90px;
  opacity: .5;
  pointer-events: none;
}
.role--acquirer::after { background: radial-gradient(circle, rgba(124,58,237,.4), transparent 70%); }
.role--issuer::after   { background: radial-gradient(circle, rgba(16,185,129,.4), transparent 70%); }

.role > * { position: relative; z-index: 1; }

.role__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 16px;
  color: #fff;
}
.role--acquirer .role__tag { background-image: linear-gradient(120deg, #7C3AED, #2563EB); }
.role--issuer   .role__tag { background-image: linear-gradient(120deg, #0E7490, #059669); }

.role__title { font-size: 1.45rem; margin-bottom: 12px; }
.role__text { font-size: .97rem; color: var(--ink-2); }

.role__path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 22px 0 20px;
  padding: 15px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-s);
  background: rgba(255,255,255,.7);
}
.role__box {
  font-family: var(--f-mono);
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
  padding: 11px 8px;
  border-radius: var(--r-xs);
  background: var(--paper-deep);
  color: var(--ink-2);
}
.role__box--self { color: #fff; font-weight: 600; }
.role--acquirer .role__box--self { background-image: linear-gradient(120deg, #6D28D9, #2563EB); }
.role--issuer   .role__box--self { background-image: linear-gradient(120deg, #0E7490, #047857); }
.role__box b { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; font-weight: 700; }
/* .8 white fell to 3.7:1 over the blue end of the acquirer gradient */
.role__box--self b { color: rgba(255,255,255,.95); }
.role__dir { font-family: var(--f-mono); font-size: .67rem; color: var(--slate); text-align: center; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--g-dark);
  background-size: 200% 200%;
  animation: cta-shift 16s ease-in-out infinite;
  border-radius: var(--r-l);
  padding: clamp(42px, 6vw, 74px) clamp(26px, 5vw, 60px);
  color: #E6E9FF;
  text-align: center;
}
@keyframes cta-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.2) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 82% 10%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 82% 10%, #000, transparent 70%);
}
/* Two colour blooms inside the band */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 8% 100%, rgba(192, 38, 211, .4), transparent 70%),
    radial-gradient(40% 60% at 95% 0%, rgba(6, 182, 212, .38), transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta .h2 { color: #fff; margin-bottom: 16px; }
.cta__sub { max-width: 54ch; margin: 0 auto 28px; color: #CBD3FA; }
.cta .btn-row { justify-content: center; }
.cta .btn--primary { background-image: none; background-color: #fff; color: var(--indigo-deep); box-shadow: 0 16px 38px -14px rgba(0,0,0,.7); }
.cta .btn--primary:hover { background-color: #EFEEFF; color: var(--indigo-deep); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cta .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.cta__foot { margin-top: 22px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #C3CCF6; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.foot { background: var(--card); border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px) 32px; position: relative; }
.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--g-line);
}
.foot__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.foot__blurb { font-size: .92rem; color: var(--slate); max-width: 40ch; margin-top: 14px; }
.foot__h { font-family: var(--f-mono); font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin-bottom: 9px; }
.foot__list a { color: var(--ink-2); font-size: .93rem; transition: color .2s ease, transform .2s ease; display: inline-block; }
.foot__list a:hover { color: var(--violet-deep); transform: translateX(3px); }
.foot__bottom {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px) scale(.985); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .shead { grid-template-columns: 1fr; }
  .label { padding-top: 0; margin-bottom: 4px; }
  .roles { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-primary { grid-template-columns: auto minmax(0, 1fr); }
  .dl-primary .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 620px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .specline__item { flex-basis: 50%; border-left: 0; padding-left: 0; padding-block: 8px; }
  .inspector { font-size: .74rem; }
  .frow { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 14px; }
  .frow__val { grid-column: 1 / -1; text-align: left; }
  .inspector__top { grid-template-columns: 1fr; }
  .role__path { grid-template-columns: 1fr; }
  .role__dir { padding-block: 2px; }
}

/* --------------------------------------------------------------------------
   19. Motion preferences

   Everything above is decorative motion. With reduced-motion on, the page
   renders in its final state with no drift, sweep, shimmer or reveal.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .inspector, .frow, .inspector__resp,
  .hero__eyebrow, .hero__line, .hero__sub, .hero .btn-row, .hero__note, .specline {
    opacity: 1;
    transform: none;
  }
  .hl::after { transform: scaleX(1); }
  .aura { animation: none; }
  .grad { animation: none; }
}

@media print {
  .nav, .cta, .hero__aura, .hero__grid-bg, .progress { display: none; }
  body { background: #fff; }
}