@charset "utf-8";
/* ============================================================================
   LUCKY SYSTEMS — HOMEPAGE
   Page-scoped styles only. Tokens and components live in core.css.
   ========================================================================== */

/* ============================================================================
   0a. SHARED DIAGRAM KIT  (.figure / .dg-*)
   ---------------------------------------------------------------------------
   ART-DIRECTION §4 specifies a shared kit in core.css §9b. It is NOT present in
   the core.css this page loads — a computed-style probe returned zero `.dg-*`
   and zero `.figure` rules. Per §4 ("build it in your page CSS using the SAME
   geometry contract, named .dg-*, and report it so it can be promoted"), the
   kit is implemented here verbatim to the contract. Every diagram on this page
   now draws from it and nothing else. PROMOTE THIS BLOCK TO core.css §9b.

   Geometry contract: channel 2.5 light / 2 dark · output 3 · port r4 ·
   node r17, rings 32 and 44 · human amber 2px dashed 4 4 · labels IBM Plex
   Mono 10.5 / 1.4 tracking uppercase · plate corners 10 (chips 6).
   Colour comes only from --rf-* and theme tokens, so a band flip is free.
   ========================================================================== */

.figure {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  box-shadow: var(--shadow-card);
}
.figure--plain {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.figure > svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: visible;
}
.figure__cap {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
}

/* Routing marks -------------------------------------------------------- */
.dg-channel {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.band--dark .dg-channel {
  stroke-width: 2;
}
.dg-channel--soft {
  stroke: var(--rf-ch-0);
}
.dg-channel--hi {
  stroke: var(--rf-ch-2);
}
.dg-output {
  fill: none;
  stroke: var(--rf-out);
  stroke-width: 3;
  stroke-linecap: round;
}
.dg-output-f {
  fill: var(--rf-out);
}
/* Inert structure: rules, tracks, the parts that are not carrying anything. */
.dg-hair {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
}
.dg-hair-f {
  fill: var(--line-strong);
}
.dg-port {
  fill: var(--rf-port);
}
.dg-node {
  fill: var(--rf-node-1);
}
.dg-ring {
  fill: none;
  stroke: var(--rf-ring);
  stroke-width: 1.5;
  stroke-opacity: 0.55;
}
.dg-ring--outer {
  stroke-width: 1.25;
  stroke-opacity: 0.26;
}
.dg-packet {
  fill: var(--rf-pk, var(--rf-ch-2));
}

/* Amber is never decorative: it means a person is required here. */
.dg-human {
  fill: none;
  stroke: var(--rf-amber);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.dg-human-dot {
  fill: var(--rf-amber);
}

/* Boxes ---------------------------------------------------------------- */
.dg-plate {
  fill: var(--bg-card);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.dg-plate--active {
  stroke: var(--rf-ch-2);
  stroke-width: 2;
}
/* The human plate is the one place the eye is meant to land, so it is the only
   filled-and-outlined object in the kit. The dashes live on the path into it. */
.dg-plate--human {
  fill: color-mix(in srgb, var(--amber) 13%, var(--bg-card));
  stroke: var(--amber);
  stroke-width: 2;
}
.dg-plate--quiet {
  fill: var(--bg-card-2);
}
.dg-plate-label,
.dg-plate-sub,
.dg-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dg-label {
  fill: var(--rf-label);
}
.dg-plate-sub {
  fill: var(--rf-label);
}
.dg-plate-label,
.dg-label--accent {
  fill: var(--rf-out);
}
.dg-label--human {
  fill: var(--rf-amber);
}

/* NEW PRIMITIVES (not in the §4 list — same contract, promote with the rest) */
.dg-bar {
  fill: var(--rf-ch-2);
  fill-opacity: 0.3;
}
.dg-bar--human {
  fill: var(--amber);
  fill-opacity: 0.92;
}
.band--dark .dg-bar--human {
  fill-opacity: 1;
}
.dg-gate {
  fill: var(--rf-ch-2);
}
.dg-gate--human {
  fill: var(--amber);
}
.dg-pulse {
  fill: none;
  stroke: var(--rf-ch-2);
  stroke-width: 2;
  stroke-opacity: 0.3;
}
.dg-tick {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Legibility floor: a 320-unit viewBox in a one-column card at 375px renders
   10.5 units at ~8.7px. §4.6 says never below ~9px effective, so the type
   steps up on small screens rather than the diagram being squashed. */
@media (max-width: 900px) {
  .dg-plate-label,
  .dg-plate-sub,
  .dg-label {
    font-size: 12px;
    letter-spacing: 1.5px;
  }
}
@media (max-width: 560px) {
  .dg-plate-label,
  .dg-plate-sub,
  .dg-label {
    font-size: 13.5px;
    letter-spacing: 1.4px;
  }
}

/* ------------------------------------------------- 0. LIGHT-BAND RHYTHM */
/* A page of eleven light bands goes flat fast. The card grids sit on a half
   step of tint so their white plates read as objects, and the reading bands
   stay on paper. Two values only — this is rhythm, not decoration. */
.band--light.band-tint {
  --bg: #e3ecf4;
  --line: #c6d7e5;
  --line-strong: #adc4d7;
}
/* Cards on light need real edges, not a 6% hairline. */
.band--light .card,
.band--light .gap__panel,
.band--light .build__thumb {
  box-shadow: 0 1px 2px rgba(11, 33, 54, 0.05), 0 8px 22px -12px rgba(11, 33, 54, 0.16);
}
.band--light .card--link {
  transition:
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}
.band--light .card--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(11, 33, 54, 0.06), 0 20px 42px -18px rgba(11, 33, 54, 0.3);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .band--light .card--link:hover {
    transform: none;
  }
}

/* -------------------------------------------- 0b. SECTION-HEAD VARIATIONS */
/* Every band used to open with the same stamp — headline left, one paragraph
   right — and by the third band the eye stopped reading the head at all. Two
   things change here. (1) The right column of a split head gets a second,
   quieter tier (.head-note) so it no longer leaves a tall dead zone under a
   two-line paragraph. (2) Two bands drop the split entirely for a ruled stack,
   so the page alternates spine → stack → spine instead of repeating one. */
.section-head__aside {
  display: grid;
  gap: 1.125rem;
  align-content: start;
}
.head-note {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}
.head-note__k {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink);
}
.band--dark .head-note__k {
  color: #fff;
}

/* Ruled stack: the headline sits on a vertical rule and the support text runs
   beneath it in two quiet columns. Same voice, different posture. */
.section-head--stack {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  border-left: 2px solid var(--line-strong);
  /* The rule hangs in the shell gutter so the headline still starts on the same
     vertical as the grid below it — an indented head would break the spine. */
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  margin-left: calc(-1 * clamp(1rem, 0.6rem + 1.4vw, 2rem));
}
.section-head--stack .section-head__aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.25rem, 0.5rem + 2vw, 3rem);
  align-items: start;
}
.section-head--stack .lead {
  max-width: 34ch;
  margin: 0;
}
.section-head--stack .head-note {
  max-width: 66ch;
}
.section-head--stack .head-note {
  padding-top: 0;
  border-top: 0;
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 0.6rem + 1vw, 1.5rem);
}
@media (max-width: 900px) {
  .section-head--stack .section-head__aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
  }
  .section-head--stack .head-note {
    border-left: 0;
    padding-left: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- 1. HERO */

/* Block layout, not centred flex: a centred flex hero overflows its own band
   the moment the content is taller than the min-height, and the band clips it. */
.hero {
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: visible;
}
/* Full-width headline first — display type gets the whole container so the two
   lines stay two lines at 96px. The lead, CTAs and figure sit beneath it, which
   also pulls the primary CTA back above the fold at 1440. */
.hero__inner {
  width: 100%;
}
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.25rem);
  align-items: start;
  margin-top: clamp(1.25rem, 0.5rem + 1.6vw, 2rem);
}
.hero__title {
  margin-block: 0.75rem 0;
  max-width: 18ch;
  line-height: 0.95;
}
.hero__title span {
  display: block;
}
/* On light the headline accent inks DOWN into brand blue rather than glowing up
   into cyan — same gesture, opposite direction, because luminance is unavailable.
   The gradient used to reach its palest tint on the LAST word, so the line died
   at "way." The teal now happens mid-line and the final word lands on the
   deepest ink in the ramp: the sentence ends heavier than it started. */
.hero__title-accent {
  color: transparent;
  background: linear-gradient(96deg, var(--blue) 2%, #2f9aa8 30%, var(--blue) 58%, var(--blue-deep) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}
.band--dark .hero__title-accent {
  background: linear-gradient(96deg, #9ad2ff 4%, #7ce7f0 34%, #bfe6ff 66%, #ffffff 94%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__lead {
  margin-top: 0;
  max-width: 48ch;
  color: var(--body);
}
.hero__lead strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__cta {
  margin-top: 2.25rem;
}
.hero__fine {
  margin-top: 1.125rem;
}
/* Four chips, not five, and they now name the same four capabilities the grid
   below expands — so the row is a contents line, not a laundry list. The row is
   laid out as a fixed 2×2 block rather than free-wrapping flex, because free
   wrap dropped "Custom software" alone onto a second line as an orphan. */
/* Six capabilities in an even 3x3 grid. Equal-width columns (1fr, not
   max-content) so the pills form real rows instead of a ragged edge, and the
   label is centred in each. They are LINKS — six extra entry points that route
   a visitor straight to the thing their business actually needs. */
.hero__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  max-width: 100%;
}
.hero__chips li {
  display: flex;
}
.hero__chips a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 44px; /* real touch target now that they are clickable */
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.25;
  color: var(--body);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}
.hero__chips a:hover {
  border-color: var(--blue);
  color: var(--ink);
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .hero__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The routing figure — the page's flagship graphic. It sits on a .figure plate
   so it reads as an object on the light band (no additive glow on light). */
/* The figure is the flagship, so it stretches to the full height of the hero row
   and carries a caption at its foot — it used to hang centred with a column of
   dead white beneath it, which read as an unfinished wireframe rather than a
   product. Stretched + tinted + captioned, it is an object with weight. */
.hero__figure {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem) clamp(1rem, 0.6rem + 1.4vw, 1.75rem)
    clamp(0.875rem, 0.6rem + 1vw, 1.25rem);
  background: linear-gradient(158deg, var(--bg-card-2), var(--bg-card) 62%);
}
.hero__figure svg {
  overflow: visible;
}
.hero__figure-cap {
  margin-top: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}
.hero__figure-cap b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.routefield {
  /* Packet colour must survive the band flip: cyan is illegal on white. */
  --rf-pk: var(--rf-ch-2);
}
/* Flagship weight. At 460 units in a ~620px column the contract's 2.5 channel
   renders at ~3.4 device px but reads hairline against 96px display type beside
   it, so this ONE figure steps every stroke and label up a tier. The geometry
   contract (port r4 · node r17 · rings 32/44 · amber dashed 4 4) is untouched;
   only weight and type size move, and every colour still comes from --rf-*. */
.routefield .dg-channel {
  stroke-width: 3.25;
}
.routefield .dg-output {
  stroke-width: 4;
}
.routefield .dg-human {
  stroke-width: 3;
}
.routefield .dg-ring {
  stroke-width: 2;
  stroke-opacity: 0.6;
}
.routefield .dg-ring--outer {
  stroke-width: 1.75;
  stroke-opacity: 0.34;
}
.routefield .dg-plate {
  stroke-width: 2;
}
.routefield .dg-plate--active,
.routefield .dg-plate--human {
  stroke-width: 2.75;
}
.routefield .dg-label,
.routefield .dg-plate-label,
.routefield .dg-plate-sub {
  font-size: 12.5px;
  letter-spacing: 1.4px;
}
.routefield .dg-plate-label {
  font-size: 13.5px;
}
/* The moment labels are the concrete hook — ink them harder than a caption. */
.routefield .dg-label--moment {
  fill: var(--ink);
  /* The channels now run flat across the whole label column and turn at x=190.
     At 12.5/1.3 the longest string on either page — "FORMULARIO · SÁBADO" —
     ends at x≈179, so both languages clear the turn without special-casing. */
  font-size: 12.5px;
  letter-spacing: 1.3px;
}
.routefield__ring {
  transform-origin: 243px 112px;
  animation: rf-ring 3.6s var(--e-inout) infinite;
}
@keyframes rf-ring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.38;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.08;
  }
}
/* Packets ride the real channel paths — run and turn joined back into one
   route, so a packet is never anywhere the drawn line is not. */
.pk {
  offset-rotate: 0deg;
  animation: ls-travel 7s linear infinite;
}
.pk--1 {
  offset-path: path('M12 68 L190 68 C 208 68, 208 112, 226 112');
  animation-delay: 0.4s;
}
.pk--2 {
  offset-path: path('M12 112 L226 112');
  animation-delay: 2.6s;
  animation-duration: 6.2s;
}
.pk--3 {
  offset-path: path('M12 156 L190 156 C 208 156, 208 112, 226 112');
  animation-delay: 4.4s;
  animation-duration: 7.6s;
}
@media (prefers-reduced-motion: reduce) {
  .pk {
    display: none;
  }
  .routefield__ring {
    animation: none;
    opacity: 0.3;
  }
}

@media (max-width: 1024px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .hero__title {
    max-width: none;
  }
  .hero__chips {
    max-width: none;
  }
  /* Stacked, the figure must not become the biggest thing on the page. */
  .hero__figure {
    max-width: 620px;
    padding-block: 1rem;
  }
}
@media (max-width: 560px) {
  /* 460 viewBox units into ~300px is a 0.65 scale: step the flagship labels up
     so nothing lands under the ~9px legibility floor. */
  .routefield .dg-label,
  .routefield .dg-plate-label {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  /* The owner line is the longest string inside the record plate ("A CARGO ·
     DANA R." in Spanish). One step down keeps it off the plate edge and still
     lands at ~9.1px effective. */
  .routefield .dg-plate-sub {
    font-size: 13.5px;
    letter-spacing: 0.6px;
  }
  /* Stepped up for the floor, tracked in so the longest Spanish moment label
     still stops short of the turn at x=190. */
  .routefield .dg-label--moment {
    font-size: 13.5px;
    letter-spacing: 0.9px;
  }
  .hero__figure {
    padding-inline: 0.75rem;
  }
  .routefield .dg-channel {
    stroke-width: 4;
  }
  .routefield .dg-output {
    stroke-width: 4.5;
  }
}
@media (max-width: 720px) {
  .hero {
    padding-block: 2.5rem 2.5rem;
  }
  .hero__eyebrow {
    font-size: var(--t-micro);
  }
  .hero__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }
  .hero__cta .btn {
    width: 100%;
  }
  .hero__figure {
    margin-top: 0.25rem;
    padding-block: 0.5rem;
  }
  /* Stacked, the hero runs long before the figure is reached. Tighten the
     vertical steps so the diagram — the proof of craft — arrives sooner. */
  .hero__cta {
    margin-top: 1.5rem;
  }
  .hero__fine {
    margin-top: 0.875rem;
  }
  .hero__chips {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
  }
}
@media (max-width: 344px) {
  /* Below this the 2×2 block cannot hold both pills on a row without one of
     them wrapping inside itself, so it becomes a deliberate single column. */
  .hero__chips {
    grid-template-columns: minmax(0, max-content);
  }
}

/* ------------------------------------------------------- 2. BEST STATEMENT */

.best {
  padding-block: clamp(0.5rem, 0.5rem + 1vw, 1.5rem);
  display: grid;
  gap: clamp(1.75rem, 1rem + 2vw, 3rem);
}
.best__statement {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1rem + 2.3vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
  max-width: 26ch;
}
.best__statement em {
  color: var(--blue-deep);
  font-size: 1.06em;
}
.band--dark .best__statement {
  color: #fff;
}
.band--dark .best__statement em {
  color: var(--cyan-hi);
}

/* Four hard facts, mono numerals — the "expensive" beat between hero and grid. */
.best__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.best__proof-item {
  background: var(--bg);
  padding: 1.25rem 1.25rem 1.25rem 0;
  display: grid;
  gap: 0.3rem;
  align-content: start;
}
.best__proof-item + .best__proof-item {
  padding-left: 1.5rem;
}
.best__proof-num {
  font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
/* The one amber numeral on this band. It used to read as an accidental warm
   pixel in a navy palette; it now carries the same dashed amber edge and the
   same words as the hero diagram's human branch, so the colour states one thing
   consistently across the page: amber means a person is required here. */
.best__proof-item--human {
  border-left: 2px dashed var(--amber);
}
.best__proof-item--human .best__proof-num {
  color: var(--rf-amber);
}
.best__proof-tag {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--rf-amber);
}
.best__proof-lab {
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.4;
}
/* Two of these four are commitments rather than measurements. Rather than dress
   them up as results, the row says out loud what kind of number each one is. */
.best__proof-note {
  margin-top: -1rem;
  max-width: 78ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}
.best__proof-note .mono {
  display: inline-block;
  margin-right: 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 720px) {
  .best__proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .best__proof-item,
  .best__proof-item + .best__proof-item {
    padding: 1rem 1rem 1rem 0;
  }
  /* Two-up, the human cell keeps its dashed edge off the numeral. */
  .best__proof .best__proof-item--human {
    padding-left: 0.875rem;
  }
}

/* ----------------------------------------------------- 3. FOUR CAPABILITIES */

.caps__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.caps__card h3 {
  margin-top: 0.25rem;
}
.caps__list {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.caps__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.5;
}
.caps__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.7;
}
.caps__card .link-arrow {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------ 4. BROKEN HANDOFF */

.gap {
  display: grid;
  gap: 1.5rem;
}
/* This strip sits one band below a 4-up card grid. As four rounded cards it
   repeated that grid's rhythm beat for beat. It is now a segmented rail hung off
   one continuous rule — same four choices, a completely different shape, and the
   selected segment is marked by a blue bar riding the rule rather than by a
   card that looks like the cards above it. */
.gap__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--line-strong);
}
.gap__tab {
  display: grid;
  gap: 0.35rem;
  text-align: left;
  padding: 1.125rem 1.375rem 1.25rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transition:
    background var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
  min-height: 0;
  align-content: start;
  position: relative;
}
.gap__tab:first-child {
  border-left: 0;
  padding-left: 0;
}
/* This underline used to be amber on every tab, which spent the demand accent
   on four pieces of chrome. It is structural now; amber stays for the human. */
.gap__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition:
    transform var(--d-4) var(--e-out),
    opacity var(--d-2) var(--e-out);
}
.gap__tab:hover::after {
  transform: scaleX(1);
  opacity: 0.4;
}
/* Selection is carried by the rule, not by a filled box — so the first segment
   can stay flush to the shell edge and the strip reads as one rail. */
.gap__tab[aria-selected='true'] .gap__tab-note {
  color: var(--body);
}
.gap__tab[aria-selected='true']::after {
  background: var(--blue);
  transform: scaleX(1);
  opacity: 1;
}
.band--dark .gap__tab[aria-selected='true']::after {
  background: var(--blue-hi);
}
.gap__tab-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.gap__tab[aria-selected='true'] .gap__tab-eyebrow {
  color: var(--blue-deep);
}
.band--dark .gap__tab[aria-selected='true'] .gap__tab-eyebrow {
  color: var(--blue-hi);
}
.gap__tab-title {
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--body);
  transition: color var(--d-2) var(--e-out);
}
.gap__tab[aria-selected='true'] .gap__tab-title,
.gap__tab:hover .gap__tab-title {
  color: var(--ink);
}
.gap__tab-note {
  font-size: var(--t-xs);
  color: var(--muted);
}

.gap__panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: ls-rise var(--d-4) var(--e-out);
}
.gap__panel > div {
  background: var(--bg-card);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.gap__panel p:not(.gap__k) {
  color: var(--body);
  font-size: var(--t-sm);
}
.gap__fix {
  background: color-mix(in srgb, var(--blue) 12%, var(--bg-card)) !important;
}
.gap__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.gap__fix .gap__k {
  color: var(--blue-deep);
}
/* The fix panel tints its own background, so the standard link blue lands at
   3.99:1 on it. Ink the link down to navy inside this panel only (6.6:1). */
.band--light .gap__fix .link-arrow {
  color: var(--blue-deep);
}
.band--dark .gap__fix .gap__k {
  color: var(--blue-hi);
}
@media (max-width: 900px) {
  .gap__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gap__tab:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .gap__tab:nth-child(n + 3) {
    border-top: 1px solid var(--line);
    padding-top: 1.125rem;
  }
  .gap__tab:nth-child(n + 3)::after {
    top: -1px;
  }
  .gap__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .gap__tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .gap__tab {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .gap__tab:nth-child(n + 2) {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
  .gap__tab:nth-child(n + 2)::after {
    top: -1px;
  }
}

/* ----------------------------------------------------------------- 5. RUN */

.run {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.run__rail .rail__step[data-run-state='future'] {
  opacity: 0.42;
}
.run__rail .rail__step {
  transition: opacity var(--d-3) var(--e-out);
}
.run__rail .rail__step[data-run-state='current'] .rail__marker {
  border-color: var(--blue-hi);
  background: color-mix(in srgb, var(--blue) 26%, var(--bg));
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
.rail__marker {
  cursor: pointer;
}
.run__stage {
  display: grid;
  gap: 1.25rem;
}
.run__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.run__col {
  background: var(--bg-card);
  padding: 1.125rem 1.25rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.run__col--human {
  background: color-mix(in srgb, var(--amber) 9%, var(--bg-card));
}
.run__col--human .gap__k {
  color: var(--amber);
}
.run__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.run__controls .mono {
  margin-left: auto;
}
/* The page's one disclosure. It used to be an amber caution slab — the loudest
   object in the system spent on a footnote, three times over. Amber means "a
   person is required here"; a note about where demo data comes from is not
   that. Hairline rule, muted text, stated once, sitting with the record it
   describes so it is in frame if anyone screenshots the panel. */
.run__note {
  margin-top: 0.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
/* The record owner's initials sit in a small round chip. It was rendering at
   10px — under the 11px floor — so it steps up and the chip grows with it. */
.record .owner__avatar {
  font-size: 11.5px;
  min-width: 25px;
  min-height: 25px;
}
@media (max-width: 1024px) {
  .run {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Touch sizing. On a phone the whole run is driven by these two clusters: seven
   numbered stage markers and five transport buttons. Both were built at desktop
   pointer sizes (33x33 and 40 tall) and neither reached the 44px floor. The
   markers grow into full 44px discs; the transport buttons gain height only,
   since they are already wider than 44. */
@media (max-width: 900px) {
  .run__rail .rail__marker {
    min-width: 44px;
    min-height: 44px;
  }
  .run__controls .btn {
    min-height: 44px;
  }
}
@media (max-width: 560px) {
  .run__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Four transport buttons wrapping freely at 375 left a ragged orphan row.
     A 2x2 block instead — every cell past the touch floor, nothing stranded. */
  .run__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .run__controls .btn {
    width: 100%;
  }
  .run__controls .mono {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

.never {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}
.never__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.never__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-sm);
  color: var(--body);
}
.never__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
}

/* -------------------------------------------------------------- 6. BUILDS */

.build {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.build .card__index {
  margin-top: 0.25rem;
}

/* --- Build thumbnails ---------------------------------------------------- */
/* Each card gets its own drawn diagram, all six built from the §0a kit only —
   no local palette, no inline hex, so a band flip costs nothing. */
.build__thumb {
  margin: -0.35rem 0 0.25rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
  overflow: hidden;
  transition:
    border-color var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out);
}
.card--link:hover .build__thumb {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  transform: translateY(-2px);
}
.build__for {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.6;
}
.build__for .mono {
  display: block;
  margin-bottom: 0.25rem;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  font-size: var(--t-micro);
}

/* ---------------------------------------------------------- 7. INDUSTRIES */

.ind {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.ind .badge {
  align-self: flex-start;
  margin-bottom: 0.25rem;
}
.ind__bound {
  margin-top: auto;
  padding-top: 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --rf-amber is the inked amber (#8A5D05 light, #E7A63A dark) — ≥4.5:1 both. */
  color: var(--rf-amber);
}

/* ------------------------------------------------ 8. ENTERPRISE + SMB FIT */

.fit__fig {
  margin-bottom: 1.5rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
}

/* --------------------------------------------------------- 8. TICK LISTS */

.ticks {
  display: grid;
  gap: 0.75rem;
}
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-sm);
  color: var(--body);
  line-height: 1.55;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.62em;
  width: 5px;
  height: 2.5px;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------- 9. PROCESS */

.proc__step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem 0;
  border-top: 2px solid var(--line-strong);
  display: grid;
  gap: 0.5rem;
  align-content: start;
  transition: border-color var(--d-3) var(--e-out);
}
.proc__step::before {
  content: '';
  position: absolute;
  inset: -2px auto auto 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  transition: width var(--d-4) var(--e-out);
}
.proc__step:hover::before {
  width: 100%;
}
.band--dark .proc__step::before {
  background: var(--blue-hi);
}
.proc__commit {
  margin-top: 0.75rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
/* A node sits on each step's rule so the four steps read as one timeline
   rather than four unrelated columns. All four are blue — nothing here is a
   human gate, and amber is reserved for the places that are. */
.proc__step::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--blue);
  transition: box-shadow var(--d-3) var(--e-out);
}
.proc__step:hover::after {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 16%, transparent);
}
.proc {
  position: relative;
}
.proc__step .card__index {
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------ 10. TRUST */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: start;
}
.chips li {
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--body);
}

.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-3) var(--e-out);
}
.faq__item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.faq__item p {
  padding-bottom: 1.5rem;
  max-width: 62ch;
  color: var(--body);
  font-size: var(--t-sm);
}
.lowrisk {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
@media (max-width: 1024px) {
  .lowrisk {
    position: static;
  }
}

/* ----------------------------------------------------------- 11. FINAL CTA */

.cta {
  padding-block: clamp(5rem, 3rem + 7vw, 9rem);
}
.cta .section-head {
  max-width: 60ch;
}