/* =================================================================
   AnotherAgent — landing styles
   Strictly monochrome. Depth from opacity, hairlines, blur + motion.
   ================================================================= */

/* The `hidden` attribute is authoritative — author display rules
   (e.g. .iform__success { display:flex }) must never override it. */
[hidden] { display: none !important; }

:root {
  /* Palette — monochrome only */
  --black: #000000;
  --ink: #0A0A0A;
  --off-white: #F2F2F2;
  --white: #FFFFFF;
  --mute: #8C8C8C;

  /* Derived white-on-black opacity layers (the only "shading" allowed) */
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.035);
  --glow: rgba(255, 255, 255, 0.55);

  /* Type scale (fluid) */
  --fs-eyebrow: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-h2: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 5.2vw, 6rem);

  /* Spacing / layout */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5.5rem, 11vh, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 0.18s;
  --t-mid: 0.4s;
  --t-slow: 0.7s;

  --nav-h: 72px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--black);
  color: var(--off-white);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--white); color: var(--black); }

/* ---------- focus visibility ---------- */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--white);
  color: var(--black);
  padding: 0.7rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0.75rem; outline-offset: 2px; }

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section + .section::before {
  /* hairline divider that draws in on scroll */
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.section.is-divided::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .section + .section::before { transform: scaleX(1); transition: none; }
}

/* =================================================================
   Brand atoms
   ================================================================= */
.wordmark { font-size: 1.06rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--white); }
.wm-light { font-weight: 300; }
.wm-bold { font-weight: 700; }

.brand-mark { display: inline-flex; width: 30px; height: 30px; }
.brand-mark .mark-svg { width: 100%; height: 100%; overflow: visible; }
.brand-mark--sm { width: 24px; height: 24px; }
.brand-mark--lg { width: 52px; height: 52px; }
.mark-path { fill: var(--white); }

/* Eyebrow — signature tracked uppercase label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--mute);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.eyebrow__rule {
  display: inline-block;
  width: clamp(24px, 4vw, 44px);
  height: 1px;
  background: var(--line-strong);
}

/* Section titles + leads */
.section__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 18ch;
}
.section__title strong { font-weight: 600; }
.section__lead {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  max-width: 56ch;
  color: var(--mute);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
}

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  --btn-pad-y: 0.95rem;
  --btn-pad-x: 1.6rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease);
  will-change: transform;
  white-space: nowrap;
}
.btn--sm { --btn-pad-y: 0.7rem; --btn-pad-x: 1.2rem; font-size: 0.88rem; margin-top: 1.25rem; }

.btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--solid:hover { box-shadow: 0 0 0 1px var(--white), 0 18px 40px -12px rgba(255, 255, 255, 0.35); }
.btn--solid:active { transform: translateY(1px) scale(0.985); }

.btn--ghost { background: transparent; color: var(--off-white); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--white); color: var(--white); background: var(--surface-2); }
.btn--ghost:active { transform: translateY(1px) scale(0.985); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* =================================================================
   NAV
   ================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease), height var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-condensed {
  height: 60px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); margin-left: auto; }
.nav__links a {
  font-size: 0.9rem;
  color: var(--mute);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--t-fast) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { margin-left: 0; }

/* The links + CTA share one wrapper. On desktop it is transparent
   (display:contents) so the flex layout is unchanged; on mobile it
   becomes the slide-down panel revealed by the hamburger. */
.nav__menu { display: contents; }

/* Current-page indicator (subpages set aria-current="page") */
.nav__links a[aria-current="page"] { color: var(--white); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger toggle — hidden on desktop */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.nav__toggle:hover { border-color: var(--white); }
.nav__toggle-box { position: relative; width: 18px; height: 12px; }
.nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--white);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-mid) var(--ease);
}
.nav__toggle-bar:nth-child(1) { top: 0; }
.nav__toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__toggle-bar:nth-child(3) { top: 100%; transform: translateY(-100%); }
.nav.is-open .nav__toggle-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__inner { justify-content: space-between; gap: 1rem; }
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    padding: 0.5rem var(--gutter) 1.75rem;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--line);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
                visibility 0s linear var(--t-mid);
  }
  .nav.is-condensed .nav__menu { top: 60px; }
  .nav.is-open .nav__menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    width: 100%;
  }
  .nav__links a {
    font-size: 1.05rem;
    color: var(--off-white);
    padding: 1rem 0.15rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a::after { display: none; }

  .nav__cta { margin-top: 1.4rem; width: 100%; }
}

body.nav-open { overflow: hidden; }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__network { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.net-svg { width: 100%; height: 100%; }
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 35%, transparent 0%, transparent 38%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, transparent 48%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-top: 0.4rem;
  padding-bottom: 0.08em; /* guard descenders on the last line */
}
.hero__title .line { display: block; }
.hero__title strong { font-weight: 600; }

.hero__sub {
  margin-top: clamp(2.1rem, 5vw, 2.6rem);
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--off-white);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.hero__note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--mute); }

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--mute);
  transition: color var(--t-fast) var(--ease);
}
.hero__scroll:hover { color: var(--white); }
.hero__scroll-line { position: relative; width: 46px; height: 1px; background: var(--line-strong); overflow: hidden; }
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--white);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(330%); }
}

/* =================================================================
   THE PROBLEM
   ================================================================= */
.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.problem__card {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.problem__card:hover { border-color: var(--line-strong); transform: translateY(-3px); background: #0d0d0d; }
.problem__index {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.problem__card h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--white);
  margin-top: 1rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.problem__card p { color: var(--mute); font-size: 0.98rem; }

.problem__turn {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 40ch;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--off-white);
}
.problem__turn strong { font-weight: 600; color: var(--white); }

@media (max-width: 760px) {
  .problem__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   HOW IT WORKS — steps
   ================================================================= */
.steps {
  list-style: none;
  padding: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}
.step.in-view::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .step::before { transform: scaleX(1); } }

.step__num {
  position: absolute;
  top: 1.1rem;
  right: 0;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
  max-width: 14ch;
}
.step__body { color: var(--mute); font-size: 0.95rem; }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* =================================================================
   WHAT AN AGENT LOOKS LIKE
   ================================================================= */
/* Anatomy pipeline */
.anatomy {
  margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.anatomy__cap { font-size: 0.92rem; color: var(--mute); margin-bottom: 1.25rem; }
.anatomy__stage-canvas { width: 100%; }
.anatomy-svg { width: 100%; height: auto; overflow: visible; }
.anatomy__labels {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.anatomy__labels li { display: flex; flex-direction: column; gap: 0.2rem; }
.anatomy__k { font-size: 0.82rem; color: var(--white); font-weight: 500; letter-spacing: -0.005em; }
.anatomy__d { font-size: 0.78rem; color: var(--mute); line-height: 1.35; }
@media (max-width: 720px) {
  .anatomy__labels { grid-template-columns: 1fr 1fr; }
}

/* split: mock form + examples */
.agent__split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) { .agent__split { grid-template-columns: 1fr; } }

/* Mock branded agent form */
.mockform {
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    var(--ink);
  position: relative;
  overflow: hidden;
}
.mockform__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.mockform__name { font-size: 0.92rem; color: var(--white); }
.mockform__body { padding: clamp(1.4rem, 3vw, 2rem); }
.mockform__title { font-size: 1.5rem; font-weight: 400; color: var(--white); letter-spacing: -0.02em; }
.mockform__hint { font-size: 0.92rem; color: var(--mute); margin-top: 0.55rem; max-width: 38ch; }
.mockform__field {
  margin-top: 1.4rem;
  height: 92px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  position: relative;
}
.mockform__placeholder { font-size: 0.92rem; color: var(--mute); }
.mockform__caret {
  position: absolute;
  left: 1rem; top: 0.95rem;
  width: 1px; height: 1.1em;
  background: var(--white);
  opacity: 0;
}
.mockform__btn {
  margin-top: 1.1rem;
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
  padding: 0.85rem 1rem;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 0;
  transition: box-shadow var(--t-mid) var(--ease);
}
.mockform__result {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--off-white);
  opacity: 0;
  transform: translateY(6px);
}
.mockform__result-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0 var(--glow);
}
.mockform__result-text { color: var(--mute); }

/* Example agents list */
.agent__examples-eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--mute);
  margin-bottom: 1.25rem;
}
.catalogue { list-style: none; padding: 0; }
.cat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  transition: padding-left var(--t-mid) var(--ease);
}
.cat:last-child { border-bottom: 1px solid var(--line); }
.cat:hover { padding-left: 0.5rem; }
.cat__name { font-size: 1.02rem; color: var(--white); font-weight: 500; letter-spacing: -0.01em; }
.cat__io { font-size: 0.9rem; color: var(--mute); }
.cat__arrow { color: var(--white); padding: 0 0.15em; }
.agent__examples-note { margin-top: 1.25rem; font-size: 0.85rem; color: var(--mute); font-style: normal; }

/* ===== Flagship showcase: Demand forecasting agent ===== */
.showcase {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  border: 1px solid var(--line);
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(255,255,255,0.045), transparent 55%),
    var(--ink);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.showcase__head { max-width: 60ch; }
.showcase__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 300; color: var(--white); letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.showcase__lead { color: var(--mute); font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; }
.showcase__lead strong { color: var(--white); font-weight: 600; }

.forecast { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.forecast-svg { width: 100%; height: auto; overflow: visible; }
.forecast__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.forecast__legend-item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--mute); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); flex-shrink: 0; }
.dot--gate { background: var(--white); box-shadow: 0 0 12px 1px rgba(255,255,255,0.5); }

.showcase__honesty {
  margin-top: 1.75rem;
  font-size: 0.88rem;
  color: var(--mute);
  max-width: 70ch;
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
}

/* =================================================================
   THREE PILLARS
   ================================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pillar {
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
.pillar:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.pillar:hover::after { opacity: 1; }
.pillar__top { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.pillar__word {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--white);
}
.pillar__sub { display: block; margin-top: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }
.pillar__body { color: var(--mute); font-size: 0.98rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* =================================================================
   OWNERSHIP & PRIVACY
   ================================================================= */
.ownership { margin: clamp(2.5rem, 5vw, 4rem) 0; }
.ownership-svg { width: 100%; height: auto; overflow: visible; }

.ownership__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.own-card {
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.own-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.own-card--private {
  border-color: var(--line-strong);
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(255,255,255,0.05), transparent 55%),
    var(--ink);
}
.own-card__title { font-size: 1.5rem; font-weight: 400; color: var(--white); letter-spacing: -0.015em; }
.own-card__tag { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); margin-top: 0.45rem; margin-bottom: 1.1rem; }
.own-card__body { color: var(--off-white); font-size: 1rem; }
.own-card__fine { color: var(--mute); font-size: 0.88rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.ownership__honesty {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 50ch;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--off-white);
}
@media (max-width: 760px) { .ownership__cards { grid-template-columns: 1fr; } }

/* =================================================================
   HOW WE WORK — phases
   ================================================================= */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: phase;
}
.phase {
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.phase:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.phase__step {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--mute);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.phase__title { font-size: var(--fs-h3); font-weight: 400; color: var(--white); letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.phase__body { color: var(--mute); font-size: 0.96rem; }
@media (max-width: 820px) { .phases { grid-template-columns: 1fr; } }

/* =================================================================
   WHY ANOTHERAGENT — list
   ================================================================= */
.why-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.why-row {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--t-mid) var(--ease);
}
.why-row:last-child { border-bottom: 1px solid var(--line); }
.why-row:hover { background: var(--surface); }
.why-row__term {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--white);
}
.why-row__def { color: var(--mute); font-size: 1.02rem; }
@media (max-width: 720px) {
  .why-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* =================================================================
   FAQ
   ================================================================= */
.faq { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 3vw, 1.8rem) 0;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--off-white);
  transition: color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item:hover .faq__q { color: var(--white); }
.faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--mute);
  transition: transform var(--t-mid) var(--ease), background var(--t-fast) var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__item:hover .faq__icon::before, .faq__item:hover .faq__icon::after { background: var(--white); }
.faq__a { overflow: hidden; }
.faq__a p { color: var(--mute); max-width: 65ch; padding-bottom: clamp(1.3rem, 3vw, 1.8rem); font-size: 1rem; }
.faq__a .btn { margin-bottom: clamp(1.3rem, 3vw, 1.8rem); }
/* JS animates height; provide a sane non-JS open state */
.faq__item[open] .faq__a { animation: faqOpen var(--t-mid) var(--ease); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* =================================================================
   FINAL CTA + INTEREST FORM
   ================================================================= */
.section--cta {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    var(--black);
}
.cta__head { max-width: 60ch; }
.cta__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
}
.cta__title strong { font-weight: 600; }
.cta__lead { margin-top: 1.25rem; color: var(--mute); font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; max-width: 52ch; }

.formwrap {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  background: var(--ink);
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  min-height: 360px;
}
.iform__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.iform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
}
.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 0.86rem; color: var(--off-white); margin-bottom: 0.6rem; font-weight: 500; letter-spacing: -0.005em; }
.field__req { color: var(--white); }
.field__opt { color: var(--mute); font-weight: 400; }
.field__input {
  width: 100%;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.9rem 1rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field__input::placeholder { color: #6b6b6b; }
.field__input:hover { border-color: var(--mute); }
.field__input:focus {
  outline: none;
  border-color: var(--white);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 0 1px var(--white);
}
.field__textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.field__select-wrap { position: relative; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.field__select:invalid, .field__select option[value=""] { color: #6b6b6b; }
.field__chevron {
  position: absolute;
  right: 1rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--mute);
  border-bottom: 1px solid var(--mute);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.field.has-error .field__input { border-color: var(--white); box-shadow: 0 0 0 1px var(--white); }
.field__error { font-size: 0.8rem; color: var(--white); margin-top: 0.5rem; min-height: 1rem; opacity: 0.92; }

.iform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.iform__submit { min-width: 180px; }
.iform__assurance { font-size: 0.82rem; color: var(--mute); max-width: 38ch; }
.iform__spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.25);
  border-top-color: var(--black);
  border-radius: 50%;
  display: none;
}
.iform.is-sending .iform__spinner { display: inline-block; animation: spin 0.7s linear infinite; }
.iform.is-sending .iform__submit { pointer-events: none; opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

.iform__formerror {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.4);
  color: var(--off-white);
  font-size: 0.92rem;
}

/* Success */
.iform__success {
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.iform__success .brand-mark--lg { margin-bottom: 1.5rem; }
.iform__success-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 300; color: var(--white); letter-spacing: -0.02em; }
.iform__success-body { margin-top: 1rem; color: var(--mute); max-width: 44ch; }

@media (max-width: 620px) { .iform__grid { grid-template-columns: 1fr; } }

/* =================================================================
   FOOTER
   ================================================================= */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); }
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand links"
    "tag   links"
    "base  base";
  gap: 1.5rem 2rem;
  align-items: start;
}
.footer__brand { grid-area: brand; display: inline-flex; align-items: center; gap: 0.6rem; }
.footer__tag { grid-area: tag; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--mute); }
.footer__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; justify-content: flex-end; }
.footer__links a { font-size: 0.9rem; color: var(--mute); transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--white); }
.footer__cta { color: var(--white) !important; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.footer__base {
  grid-area: base;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--mute);
}
.footer__base a:hover { color: var(--white); }
@media (max-width: 680px) {
  .footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "tag" "links" "base";
  }
  .footer__links { justify-content: flex-start; }
}

/* =================================================================
   STANDALONE CONTENT PAGES (LLM / Machine learning / Use cases)
   Reuse the section system; only the page hero + a few atoms are new.
   ================================================================= */
.phero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 6rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  position: relative;
}
.phero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--white);
  max-width: 16ch;
  margin-top: 0.3rem;
  padding-bottom: 0.08em;
}
.phero__title strong { font-weight: 600; }
.phero__sub {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  max-width: 58ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--off-white);
}
.phero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.8rem, 4vw, 2.5rem); }

/* Quotable definition callout — clean, self-contained sentence for answer engines */
.def {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--white);
  background: var(--surface);
  max-width: 74ch;
}
.def__term {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mute);
  margin-bottom: 0.7rem;
}
.def p {
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.45rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--off-white);
}
.def p strong { color: var(--white); font-weight: 600; }

/* Plain prose under a section heading */
.prose { color: var(--mute); max-width: 68ch; margin-top: clamp(1.1rem, 2.5vw, 1.6rem); }
.prose + .prose { margin-top: 1rem; }
.prose strong { color: var(--off-white); font-weight: 600; }

/* In-content links — visible against muted body copy, hairline underline that
   strengthens on hover. Applies across the homepage and the standalone pages. */
.section__lead a,
.prose a,
.showcase__lead a,
.showcase__def a,
.pillar__body a,
.problem__card p a,
.why-row__def a,
.own-card__body a {
  color: var(--white);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease);
}
.section__lead a:hover,
.prose a:hover,
.showcase__lead a:hover,
.showcase__def a:hover,
.pillar__body a:hover,
.problem__card p a:hover,
.why-row__def a:hover,
.own-card__body a:hover { border-color: var(--white); }

/* CTA band on subpages (links to the homepage form rather than duplicating it) */
.cta-band .cta__title { max-width: 22ch; }
.cta-band .btn { margin-top: clamp(1.6rem, 3vw, 2.25rem); }

/* =================================================================
   SVG diagram shared styling (monochrome)
   ================================================================= */
.net-svg .edge,
.anatomy-svg .edge,
.forecast-svg .edge,
.ownership-svg .edge { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.diagram-node { fill: var(--ink); stroke: var(--line-strong); stroke-width: 1; }
.diagram-node-label { fill: var(--off-white); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; }
.diagram-sub { fill: var(--mute); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 400; }
.diagram-eyebrow { fill: var(--mute); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.pulse-dot { fill: var(--white); }
.gate-ring { fill: none; stroke: var(--white); stroke-width: 1.5; }

/* Hero diagram atoms shared by the standalone-page hero canvases.
   Same monochrome language as the homepage constellation. */
.net-svg .hedge { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
.net-svg .hnode { fill: var(--ink); stroke: rgba(255, 255, 255, 0.42); stroke-width: 1; }
.net-svg .hnode--hub { fill: var(--white); stroke: var(--white); }
.net-svg .hcore { fill: var(--ink); stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; }
.net-svg .hhalo { fill: rgba(255, 255, 255, 0.05); stroke: none; }
.net-svg .hpulse { fill: var(--white); }
.net-svg .hglyph { fill: rgba(255, 255, 255, 0.55); }
.net-svg .hcluster-label {
  fill: var(--mute);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.net-svg .htrend { fill: none; stroke: var(--white); stroke-linecap: round; stroke-linejoin: round; }

/* =================================================================
   STANDALONE-PAGE HERO CANVAS
   The page hero gains a full-bleed animated background behind the copy.
   Mirrors the homepage .hero__network treatment, scaled for .phero.
   ================================================================= */
.phero--canvas {
  overflow: hidden;
  /* a touch more breathing room so the canvas has somewhere to live */
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.phero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.phero--canvas .net-svg { width: 100%; height: 100%; }

/* Veil: keep the headline crisp by fading the diagram away from the copy.
   The copy sits on the left, so we darken hardest there and let the
   constellation breathe out to the right and top. */
.phero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 95% at 78% 32%, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.9) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 34%, transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 24%, transparent 64%, rgba(0,0,0,0.92) 100%);
}
/* Lift the copy above the canvas */
.phero--canvas .wrap { position: relative; z-index: 1; }

@media (max-width: 720px) {
  /* On small screens the copy fills the width — keep the canvas as a faint
     texture only, so it never competes with the headline. */
  .phero__veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.6) 46%, transparent 72%, rgba(0,0,0,0.92) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 80%);
  }
}

/* Scroll-driven hairline draw-ins for capability catalogues and grids.
   Reuses the established idiom from .step::before — the existing hairline that
   already separates each item wipes in from the left as it enters view. No new
   layout elements; we animate the rule the item already has. JS adds .drawn to
   the group; composes to full when reduced or no-JS. */

/* Catalogue rows: replace the static border-top with an animatable rule so the
   list "draws itself" line by line as you scroll into it. */
.catalogue .cat { position: relative; }
.catalogue.connect .cat { border-top-color: transparent; }
.catalogue.connect .cat::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.catalogue.connect.drawn .cat::before { transform: scaleX(1); }
/* staggered: each successive row draws a beat later */
.catalogue.connect.drawn .cat:nth-child(1)::before { transition-delay: 0.00s; }
.catalogue.connect.drawn .cat:nth-child(2)::before { transition-delay: 0.08s; }
.catalogue.connect.drawn .cat:nth-child(3)::before { transition-delay: 0.16s; }
.catalogue.connect.drawn .cat:nth-child(4)::before { transition-delay: 0.24s; }
.catalogue.connect.drawn .cat:nth-child(5)::before { transition-delay: 0.32s; }
.catalogue.connect.drawn .cat:nth-child(6)::before { transition-delay: 0.40s; }

/* Problem cards: a hairline accent that wipes across the top edge of each card
   as the grid enters view — a light "connecting" beat over the boxed grid. */
.problem__grid .problem__card::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--ease);
  pointer-events: none;
}
.problem__grid.drawn .problem__card::after { transform: scaleX(1); }
.problem__grid.drawn .problem__card:nth-child(1)::after { transition-delay: 0.00s; }
.problem__grid.drawn .problem__card:nth-child(2)::after { transition-delay: 0.07s; }
.problem__grid.drawn .problem__card:nth-child(3)::after { transition-delay: 0.14s; }
.problem__grid.drawn .problem__card:nth-child(4)::after { transition-delay: 0.21s; }
.problem__grid.drawn .problem__card:nth-child(5)::after { transition-delay: 0.28s; }
.problem__grid.drawn .problem__card:nth-child(6)::after { transition-delay: 0.35s; }

/* No-JS / reduced-motion: show the final composed state, no motion. */
.no-js .catalogue.connect .cat { border-top-color: var(--line); }
.no-js .catalogue.connect .cat::before,
.no-js .problem__grid .problem__card::after { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .catalogue.connect .cat { border-top-color: var(--line) !important; }
  .catalogue.connect .cat::before,
  .problem__grid .problem__card::after { transform: scaleX(1) !important; transition: none !important; }
}

/* =================================================================
   Reveal animation base states (JS adds .reveal-in; reduced-motion shows all)
   ================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].reveal-in { opacity: 1; transform: none; }

/* The hero lines get their own slightly tighter rise */
.hero__title .line[data-reveal] { transform: translateY(34px); }

/* When JS is absent or fails, never leave content hidden:
   `.no-js` is set on <html> by default and removed by JS immediately. */
.no-js [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__scroll-line::after { animation: none; }
  .mockform__caret { opacity: 0 !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}