/* --- Partner bus: logos hang off a live signal wire ---------------------- */

.partners__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.partners__aside { display: grid; justify-items: start; gap: 1.5rem; }

.bus { position: relative; padding-block: clamp(1rem, 3vw, 2.5rem); }

.bus__wire {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rule-bus) 6%, var(--rule-bus) 94%, transparent);
  overflow: hidden;
}
.bus__pulse {
  position: absolute;
  top: 0; left: 0;
  width: 130px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: nz-bus 10.5s linear infinite;
  animation-delay: var(--d);
}
@keyframes nz-bus {
  from { transform: translateX(-140px); }
  to { transform: translateX(calc(100vw + 140px)); }
}

.bus__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: clamp(.5rem, 1vw, 1rem);
}
.bus__slot { position: relative; display: grid; justify-items: center; }
.bus__slot:nth-child(odd) { align-self: start; padding-bottom: 3.25rem; }
.bus__slot:nth-child(even) { align-self: end; padding-top: 3.25rem; }

/* Short trace from the card to the wire. */
.bus__stem {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(var(--line-2), var(--brand));
  transform: translateX(-50%);
}
.bus__slot:nth-child(odd) .bus__stem { bottom: .3rem; }
.bus__slot:nth-child(even) .bus__stem { top: .3rem; background: linear-gradient(var(--brand), var(--line-2)); }
.bus__stem::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateX(-50%);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent);
  animation: nz-tap 3.4s ease-out infinite;
  animation-delay: calc(var(--i) * .42s);
}
.bus__slot:nth-child(odd) .bus__stem::after { bottom: -3px; }
.bus__slot:nth-child(even) .bus__stem::after { top: -3px; }
@keyframes nz-tap {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
  80% { box-shadow: 0 0 0 9px transparent; }
}

.bus__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 92px;
  padding: 1rem .85rem;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.bus__node::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--brand-soft), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.bus__node:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: var(--shadow);
}
.bus__node:hover::before { opacity: 1; }

.bus__node img {
  position: relative;
  width: 100%;
  max-width: 118px;
  height: auto;
  filter: grayscale(1) brightness(.5) contrast(1.5);
  opacity: .72;
  transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
/*
 * The partner artwork is dark ink on transparency, drawn for a white page.
 * Brightening it on a near-black tile only lifts dark grey to lighter grey,
 * so at night the mark is inverted instead: dark ink becomes light ink.
 */
:root[data-theme='dark'] .bus__node img {
  filter: grayscale(1) invert(1) brightness(1.12) contrast(1.15);
  opacity: .95;
}
.bus__node:hover img { filter: none; opacity: 1; transform: scale(1.05); }
/* On hover the tile turns white, so the logo can show in its real colours. */
:root[data-theme='dark'] .bus__node:hover { background: #FFFFFF; }
:root[data-theme='dark'] .bus__node:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bus__pulse, .bus__stem::after { animation: none; }
}

/* --- Automated stack drawn as a hub -------------------------------------- */

/* The panel is a board seen in perspective: a ground, a glow under the
   processor, and a vignette so the field falls away at the corners. Its palette
   is scoped here so the board can be light by day and deep at night without
   every rule below needing a dark-mode twin. */
.hub,
.pipeline,
.gate {
  --board-a: #EFEEF3;
  --board-b: #DCDAE4;
  --board-ink: #0D0D10;
  --board-line: rgba(13, 13, 16, .10);
  --board-glow: color-mix(in srgb, var(--brand) 18%, transparent);
  --board-vignette: rgba(13, 13, 16, .17);
  --board-card: rgba(255, 255, 255, .8);
  --board-card-hover: rgba(255, 255, 255, .9);
  --board-card-line: rgba(13, 13, 16, .10);
  --board-pkg: #FFFFFF;
  --board-die: color-mix(in srgb, #FFFFFF 88%, var(--brand));
  --board-card-shadow: 0 16px 34px -24px rgba(13, 13, 16, .45);

  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(48% 58% at 50% 50%, var(--board-glow), transparent 72%),
    radial-gradient(120% 120% at 50% 50%, transparent 42%, var(--board-vignette) 100%),
    linear-gradient(165deg, var(--board-a), var(--board-b));
  color: var(--board-ink);
  border: 1px solid var(--board-line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
:root[data-theme='dark'] :is(.hub, .pipeline, .gate) {
  --board-a: var(--deep);
  --board-b: color-mix(in srgb, var(--deep) 88%, var(--brand));
  --board-ink: #FFFFFF;
  --board-line: rgba(255, 255, 255, .09);
  --board-glow: color-mix(in srgb, var(--brand) 32%, transparent);
  --board-vignette: rgba(0, 0, 0, .55);
  --board-card: color-mix(in srgb, var(--deep) 62%, transparent);
  --board-card-hover: color-mix(in srgb, var(--deep) 74%, transparent);
  --board-card-line: rgba(255, 255, 255, .12);
  --board-pkg: color-mix(in srgb, var(--deep) 92%, #fff);
  --board-die: color-mix(in srgb, var(--deep) 76%, var(--brand));
  --board-card-shadow: 0 18px 38px -22px rgba(0, 0, 0, .8);
}
.hub__wiring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The board has its own ground in each theme, so the spokes follow it. */
.hub__spoke { opacity: .8; stroke: color-mix(in srgb, var(--board-ink) 26%, transparent); }

/* --- Depth field ---------------------------------------------------------- */

.hub__field {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--board-ink);
  pointer-events: none;
}
.field__rule { opacity: .2; stroke-dasharray: 2 7; }
.field__node { opacity: .62; }
.field__node.is-open { opacity: .48; }
.field__bits { opacity: .4; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .06em; }
.field__mark { opacity: .42; }

/* Every seventh node runs the glint, so the board never sits completely still. */
.field__node { animation: nz-field-glint 6s ease-in-out infinite; animation-delay: calc(var(--i) * .8s); }
@keyframes nz-field-glint {
  0%, 82%, 100% { opacity: .62; }
  90%           { opacity: 1; }
}

/* Rain: columns of digits falling through the board, brightest at the head. */
.rain__col {
  animation: nz-rain linear infinite;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
}
@keyframes nz-rain {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--travel)); }
}
.rain__glyphs { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.rain { opacity: .5; }
:root[data-theme='dark'] .rain { opacity: .62; }

/* Parallax: the far layer barely moves, the near layer travels furthest. */
.field { animation: nz-field-drift linear infinite alternate; }
.field--far  { opacity: .5;  animation-duration: 42s; --dx: 10px; --dy: -6px;  }
.field--mid  { opacity: .72; animation-duration: 30s; --dx: -20px; --dy: 10px; }
.field--near { opacity: 1;   animation-duration: 22s; --dx: 32px; --dy: -16px; }
@keyframes nz-field-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}

/* --- Processor ------------------------------------------------------------ */

.hub__core {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(170px, 19vw, 240px);
  aspect-ratio: 1;
}
.hub__chip { grid-area: 1 / 1; width: 100%; height: 100%; color: var(--brand); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 45%, transparent)); }
.chipx__pkg {
  fill: var(--board-pkg);
  stroke: color-mix(in srgb, var(--brand) 60%, transparent);
  stroke-width: 2;
}
.chipx__die {
  fill: var(--board-die);
  stroke: color-mix(in srgb, var(--brand) 42%, transparent);
  stroke-width: 1.4;
}
.chipx__frame { opacity: .6; }
.chipx__pin {
  opacity: .5;
  animation: nz-pin 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s);
}
@keyframes nz-pin {
  0%, 70%, 100% { opacity: .45; }
  85%           { opacity: 1; }
}

/* The mark works while the board runs: the matrix lights in a diagonal wave,
   the brackets breathe with it, and a read head sweeps the die. */
.chipx__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: nz-die-dot 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .17s);
}
@keyframes nz-die-dot {
  0%, 62%, 100% { opacity: .5; transform: scale(1); }
  28%           { opacity: 1;  transform: scale(1.5); }
}
.chipx__brackets { animation: nz-die-brackets 2.6s ease-in-out infinite; }
@keyframes nz-die-brackets {
  0%, 100% { opacity: .72; }
  40%      { opacity: 1; }
}
.chipx__scan { animation: nz-die-scan 3.8s linear infinite; }
@keyframes nz-die-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(150px); }
}

/* The brand mark rides on the die face. */
.hub__mark { grid-area: 1 / 1; width: 29%; z-index: 1; }
.hub__mark img { width: 100%; height: auto; filter: invert(1) hue-rotate(180deg) brightness(1.4); }

.hub__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--brand);
  opacity: 0;
  animation: nz-ping 3.2s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes nz-ping {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.15); }
}

.hub__nodes {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(9rem, 17vw, 15rem) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: clamp(1rem, 2vw, 1.6rem) 0;
}
.hub__node { display: grid; }
.hub__node--l1 { grid-column: 1; grid-row: 1; }
.hub__node--l2 { grid-column: 1; grid-row: 2; }
.hub__node--l3 { grid-column: 1; grid-row: 3; }
.hub__node--r1 { grid-column: 3; grid-row: 1; }
.hub__node--r2 { grid-column: 3; grid-row: 2; }
.hub__node--r3 { grid-column: 3; grid-row: 3; }

/* Frosted modules mounted on the board, so the field shows through between
   them without ever running under the copy. */
.node {
  display: grid;
  gap: .55rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--r);
  background: var(--board-card);
  border: 1px solid var(--board-card-line);
  color: var(--board-ink);
  box-shadow: var(--board-card-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
}
.node:hover, .node:focus-visible {
  transform: translateY(-5px);
  background: var(--board-card-hover);
  border-color: color-mix(in srgb, var(--brand) 58%, transparent);
  box-shadow: var(--shadow);
}
/* The icon artwork is white line art, so the plate has to stay dark in both
   themes — a light plate in day mode leaves the icons invisible. */
.node__plate {
  display: grid;
  place-items: center;
  width: 52px; aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--deep), color-mix(in srgb, var(--deep) 74%, var(--brand)));
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.node:hover .node__plate {
  background: linear-gradient(150deg, color-mix(in srgb, var(--deep) 62%, var(--brand)), var(--brand));
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
}
.node__plate img { width: 56%; height: auto; animation: nz-float 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.node__title { font-size: var(--t-1); font-weight: 700; letter-spacing: -.022em; }
.node__text { color: color-mix(in srgb, var(--board-ink) 66%, transparent); font-size: var(--t--1); }
@keyframes nz-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

@media (prefers-reduced-motion: reduce) {
  .hub__signal, .hub__ping, .node__plate img,
  .field, .field__node, .chipx__pin,
  .chipx__dot, .chipx__brackets, .chipx__scan { animation: none; }
  .rain, .chipx__scan { display: none; }
}

/* ==========================================================================
   Newszy — deferred CSS. Contemporary media-tech.
   ========================================================================== */

/* --- Section furniture --------------------------------------------------- */

.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y); }

.sec-head { max-width: 44rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-title { font-size: var(--t-4); font-weight: 800; line-height: 1.06; letter-spacing: -.032em; }
.lede { font-size: var(--t-1); color: var(--muted); max-width: 60ch; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

.panel {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.panel:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-2); }

.icon-badge {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  color: var(--brand);
  background: var(--brand-soft);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

/* --- Breadcrumbs --------------------------------------------------------- */

.crumbs { margin-bottom: 1.25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; font-size: var(--t--1); }
.crumbs li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-2);
}
.crumbs a { color: var(--faint); font-weight: 500; transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] {
  color: var(--text);
  font-weight: 600;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- About --------------------------------------------------------------- */

.about__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}
.about__title { font-size: var(--t-4); font-weight: 800; line-height: 1.06; letter-spacing: -.032em; }
.about__meta { display: grid; gap: 1.4rem; justify-items: start; }
.about__lines { display: grid; gap: .55rem; }
.about__lines span { display: flex; align-items: center; gap: .7rem; font-size: var(--t-1); font-weight: 600; }
.about__lines span:last-child { color: var(--muted); font-weight: 500; }
.about__lines span::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

.about__trusted {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  font-size: var(--t-1);
  color: var(--muted);
  /* No measure cap: on a laptop the line has room to run unbroken, and it
     wraps on its own once the viewport cannot hold it. */
  max-width: none;
  text-wrap: pretty;
}

/* --- Tribute panel + stat ------------------------------------------------ */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.tribute {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--deep), color-mix(in srgb, var(--deep) 82%, var(--brand)));
  color: var(--deep-ink);
  box-shadow: var(--shadow);
}
.tribute__media { position: relative; overflow: hidden; }
.tribute__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.tribute:hover .tribute__media img { transform: scale(1.04); filter: grayscale(.55) contrast(1.06); }
.tribute__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 45%, color-mix(in srgb, var(--deep) 94%, transparent) 100%);
}

.tribute__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.tribute__quotemark {
  position: absolute;
  top: -.28em; right: .3em;
  font-size: clamp(8rem, 16vw, 13rem);
  line-height: 1;
  font-weight: 800;
  color: var(--brand);
  opacity: .16;
  pointer-events: none;
}
.tribute__text {
  font-size: clamp(1.05rem, .72rem + .95vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.022em;
  max-width: none;
  text-wrap: nowrap;
}
.tribute__by { display: grid; gap: .15rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--deep-ink) 18%, transparent); }
.tribute__author { font-weight: 700; font-size: var(--t-1); letter-spacing: -.015em; }
.tribute__role { font-size: var(--t--1); color: color-mix(in srgb, var(--deep-ink) 62%, transparent); }

/* The counter is an instrument panel, not a card: corner ticks frame it and
   the figure sits above a field where one cell stands for one unit. */
.stat {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.6rem, 2.6vw, 2.35rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 50% 118%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 68%),
    linear-gradient(200deg, var(--deep), color-mix(in srgb, var(--deep) 88%, var(--brand)));
  color: var(--deep-ink);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Corner ticks — the frame of a readout. */
.stat__tick {
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid var(--brand);
  opacity: .55;
}
.stat__tick--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.stat__tick--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.stat__tick--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.stat__tick--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

.stat__head { position: relative; display: grid; gap: .7rem; justify-items: start; }
.stat__value {
  font-size: var(--t-5);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__rule {
  width: 3.25rem; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.stat__label {
  color: color-mix(in srgb, var(--deep-ink) 74%, transparent);
  font-weight: 600;
  font-size: var(--t-0);
  letter-spacing: -.01em;
  max-width: 26ch;
}

/* --- Accumulation field --------------------------------------------------- */

.stat__fieldwrap { position: relative; overflow: hidden; border-radius: var(--r-xs); }
.stat__field { display: block; width: 100%; height: auto; color: var(--deep-ink); }

.stat__cell {
  fill: var(--brand);
  opacity: 0;
  transform: translateY(5px);
  transform-box: fill-box;
  transform-origin: center;
}
/* The columns fill in from the left once the block is on screen. */
[data-reveal].is-visible .stat__cell {
  animation: nz-cell-in .55s var(--ease) forwards;
  animation-delay: calc(var(--c) * .06s);
}
@keyframes nz-cell-in {
  to { opacity: .92; transform: none; }
}

/* A slow highlight passes over the field, so the panel keeps breathing. */
.stat__fieldwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 58%);
  mix-blend-mode: overlay;
  transform: translateX(-115%);
  animation: nz-stat-sweep 6s var(--ease) 1.4s infinite;
  pointer-events: none;
}
@keyframes nz-stat-sweep {
  0%        { transform: translateX(-115%); }
  55%, 100% { transform: translateX(115%); }
}

@media (prefers-reduced-motion: reduce) {
  .stat__cell { opacity: .92; transform: none; animation: none; }
  .stat__fieldwrap::after { animation: none; opacity: 0; }
}

/* --- Advantage ----------------------------------------------------------- */

.advantage { background: var(--bg-2); }
.advantage__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.rotator { display: grid; gap: .25rem; }
.rotator span {
  font-size: var(--t-4);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.08;
  color: var(--faint);
  opacity: .4;
  transition: color .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.rotator span.is-active {
  opacity: 1;
  transform: translateX(.6rem);
  background-image: linear-gradient(120deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.advantage__heading { font-size: var(--t-3); margin-bottom: .85rem; }
.advantage__text { color: var(--muted); font-size: var(--t-1); }

.adv-card { display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.6rem, 3vw, 2.25rem); }
.adv-card:hover .icon-badge { background: var(--brand); color: var(--brand-ink); }
.adv-card__title { font-size: var(--t-2); }
.adv-card__text { color: var(--muted); }

/* --- Pricing ------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(.9rem, 1.6vw, 1.5rem); max-width: 74rem; margin-inline: auto; }
.plan { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.75rem, 3vw, 2.6rem); }
.plan--featured {
  background: linear-gradient(155deg, var(--deep), color-mix(in srgb, var(--deep) 78%, var(--brand)));
  color: var(--deep-ink);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.plan--featured .plan__for,
.plan--featured .plan__period,
.plan--featured .plan__text,
.plan--featured .plan__incl { color: color-mix(in srgb, var(--deep-ink) 66%, transparent); }
.plan--featured .plan__features li { border-color: color-mix(in srgb, var(--deep-ink) 18%, transparent); }
.plan--featured .btn--dark { background: #FFFFFF; color: #101014; box-shadow: none; }
.plan--featured .btn--dark:hover { background: var(--brand); color: var(--brand-ink); }
.plan__name { font-size: var(--t-2); }
.plan__for { color: var(--muted); font-size: var(--t--1); font-weight: 500; }
.plan__price { display: grid; justify-items: start; gap: .15rem; }
/* Three narrower cards, and '$6,660' is five glyphs wider than '$300'. */
.plan__price b { font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.15rem); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.plan__period { color: var(--muted); font-weight: 600; font-size: var(--t--1); letter-spacing: .01em; }
.plan__incl { font-size: var(--t--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.plan__text { color: var(--muted); }
.plan__features { display: grid; margin-top: auto; }
.plan__features li { display: flex; align-items: center; gap: .7rem; padding-block: .8rem; border-top: 1px solid var(--line); font-weight: 500; }
.plan__features .icon { color: var(--brand); flex: 0 0 auto; }

/* --- FAQs ---------------------------------------------------------------- */

.faqs__list { max-width: 52rem; margin-inline: auto; display: grid; gap: .65rem; }
.faq { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.1rem, 2.5vw, 1.75rem);
  font-weight: 600;
  font-size: var(--t-1);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__sign { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); transition: background-color .3s var(--ease); }
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq__sign { background: var(--brand); color: var(--brand-ink); }
.faq[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 clamp(1.1rem, 2.5vw, 1.75rem) 1.4rem; color: var(--muted); max-width: 70ch; }

/* --- Contact ------------------------------------------------------------- */
/* The routing board and its form card live at the foot of this file. */

/* --- Form ---------------------------------------------------------------- */

.cform { display: grid; gap: 1.15rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cform__intro { font-weight: 600; }
.cform__row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.cform__field { display: grid; gap: .4rem; }
.cform__label { font-size: var(--t--1); font-weight: 600; color: var(--muted); }
.cform input, .cform textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.cform textarea { resize: vertical; min-height: 8rem; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--faint); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__submit { justify-self: start; }
.cform.is-busy { opacity: .6; pointer-events: none; }
.cform__status { font-weight: 600; font-size: var(--t--1); min-height: 1.3em; }
.cform__status.is-ok { color: #0F8A4C; }
.cform__status.is-error { color: var(--brand); }
:root[data-theme='dark'] .cform__status.is-ok { color: #4ADE80; }

/* --- Page hero ----------------------------------------------------------- */

.page-hero { position: relative; isolation: isolate; padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem); overflow: hidden; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%; height: 160%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent);
}
.page-hero__lines { display: grid; gap: .3rem; margin-top: 1.35rem; font-size: var(--t-1); color: var(--muted); max-width: 64ch; }
.page-extra { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- Cards (shared shapes) ----------------------------------------------- */

.chip-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.chip-tag:hover { background: var(--brand); color: var(--brand-ink); }
.chip-tag--soft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.thumb { display: block; position: relative; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--surface-2); aspect-ratio: 16 / 10; }
.thumb__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.thumb--empty { background: linear-gradient(135deg, var(--surface-2), var(--bg-2)); }

.meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: var(--t--1); color: var(--faint); font-weight: 500; }

.card { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.card__media { display: block; width: 100%; overflow: hidden; border-radius: var(--r); }
.card:hover .thumb__img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.card__title { font-size: var(--t-1); font-weight: 700; line-height: 1.28; letter-spacing: -.022em; }
.card__title a { transition: color .25s var(--ease); }
.card__title a:hover { color: var(--brand); }
.card__excerpt { color: var(--muted); font-size: var(--t--1); }

.card--lead .card__title { font-size: var(--t-3); line-height: 1.14; }
.card--lead .thumb { aspect-ratio: 16 / 9; }

.card--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.card--wide .card__title { font-size: var(--t-2); }

.card--compact { gap: .7rem; }
.card--compact .thumb { aspect-ratio: 4 / 3; border-radius: var(--r-sm); }
.card--compact .card__title { font-size: var(--t-0); }

.card--portrait .thumb { aspect-ratio: 3 / 4; }
.card--portrait .card__title { font-size: var(--t-2); }

.card--row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: center; }
.card--row .thumb { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.card--row .card__title { font-size: var(--t-0); }

.card--overlay { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.card--overlay .card__media { border-radius: 0; }
.card--overlay .thumb { aspect-ratio: 4 / 3; border-radius: 0; }
.card--overlay .card__body {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .4) 58%, transparent);
  color: #fff;
}
.card--overlay .card__title a { color: #fff; }
.card--overlay .meta { color: rgba(255, 255, 255, .78); }
.card--overlay .chip-tag { background: var(--brand); color: var(--brand-ink); }
.card--overlay-lead .thumb { aspect-ratio: 16 / 11; }
.card--overlay-lead .card__title { font-size: var(--t-2); }

/* --- Newsroom ------------------------------------------------------------ */

.newsroom__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.cat { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.cat__title { font-size: var(--t-2); display: inline-flex; align-items: center; gap: .7rem; }
.cat__title::before { content: ''; width: 6px; height: 1.05em; border-radius: 3px; background: linear-gradient(var(--brand), var(--brand-2)); }
.cat__more {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  flex: 0 0 auto;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.cat__more:hover { background: var(--brand); color: var(--brand-ink); border-color: transparent; transform: translateX(3px); }

.cat__body { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

/* 1 — feature: lead story with two stacked rows beside it */
.cat--feature .cat__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cat--feature .cat__side { display: grid; gap: 1.1rem; align-content: start; }

/* 2 — trio: three equal cards */
.cat--trio .cat__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 3 — ledger: numbered headline list */
.cat--ledger .cat__ledger { display: grid; gap: 0; }
.cat--ledger li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  transition: padding-inline .3s var(--ease), background-color .3s var(--ease);
}
.cat--ledger li:last-child { border-bottom: 0; }
.cat--ledger li:hover { background: var(--surface); padding-inline: .9rem; border-radius: var(--r-sm); }
.cat__num {
  font-size: var(--t-1);
  font-weight: 800;
  letter-spacing: -.03em;
  color: transparent;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
}
.cat--ledger .card__title { font-size: var(--t-1); }

/* 4 — duo: two split cards, image beside copy */
.cat--duo .cat__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 5 — quad: four compact tiles */
.cat--quad .cat__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 6 — band: three cinematic overlay panels */
.cat--band .cat__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat--band .card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cat--band .card__media { border-radius: 0; }
.cat--band .thumb { aspect-ratio: 3 / 4; border-radius: 0; }
.cat--band .card { position: relative; }
.cat--band .card__body {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .35) 62%, transparent);
  color: #fff;
}
.cat--band .card__title a { color: #fff; }
.cat--band .meta { color: rgba(255, 255, 255, .75); }
.cat--band .chip-tag { background: var(--brand); color: var(--brand-ink); }

/* 7 — digest: portrait lead plus a clean list */
.cat--digest .cat__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
.cat__digest { display: grid; align-content: start; }
.cat__digest li { padding-block: .95rem; border-bottom: 1px solid var(--line); }
.cat__digest li:first-child { padding-top: 0; }
.cat__digest li:last-child { border-bottom: 0; }
.cat__digest .card__title { font-size: var(--t-1); margin-bottom: .3rem; }

/* --- Shell + sidebar ----------------------------------------------------- */

.shell { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.shell--wide { grid-template-columns: minmax(0, 1fr); }
.shell__main { min-width: 0; }

.sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.75rem; min-width: 0; }
.widget { padding: clamp(1.3rem, 2.5vw, 1.85rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.widget__title { font-size: var(--t-1); margin-bottom: 1.1rem; padding-left: .8rem; border-left: 4px solid var(--brand); }
.widget ul li { padding-block: .5rem; border-bottom: 1px solid var(--line); }
.widget ul li:last-child { border-bottom: 0; }
.widget a:hover { color: var(--brand); }

.post-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.post-row:last-child { border-bottom: 0; }
.post-row .thumb { aspect-ratio: 1 / 1; border-radius: var(--r-xs); }
.post-row__title { font-size: var(--t-0); font-weight: 600; line-height: 1.34; letter-spacing: -.015em; }
.post-row__title a:hover { color: var(--brand); }

.search-form { display: flex; gap: .5rem; }
.search-form input[type='search'] { flex: 1; min-width: 0; padding: .85rem 1.1rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); }
.search-form input[type='search']:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search-form button { display: grid; place-items: center; width: 48px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); transition: filter .25s var(--ease); }
.search-form button:hover { filter: brightness(1.08); }

/* --- Single -------------------------------------------------------------- */

.article__header { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.article__title { font-size: var(--t-4); font-weight: 800; line-height: 1.06; letter-spacing: -.032em; }
.article__hero { margin-bottom: 1.85rem; }
.article__hero .thumb { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }

.share { display: flex; gap: .5rem; margin-bottom: 1.85rem; }
.share__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.share__btn:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share__btn--facebook:hover { background: #1877F2; }
.share__btn--whatsapp:hover { background: #25D366; }
.share__btn--linkedin:hover { background: #0A66C2; }

.entry { font-size: var(--t-1); line-height: 1.75; max-width: 72ch; }
.entry > * + * { margin-top: 1.25em; }
.entry h2 { font-size: var(--t-3); margin-top: 2em; }
.entry h3 { font-size: var(--t-2); margin-top: 1.75em; }
.entry a { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; }
.entry ul, .entry ol { padding-left: 1.35em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: .4em; }
.entry img, .entry figure img { border-radius: var(--r); }
.entry figure { margin-block: 2em; }
.entry figcaption { margin-top: .65rem; font-size: var(--t--1); color: var(--faint); text-align: center; }

/*
 * A captioned image carries an inline width from the editor — the classic
 * [caption] shortcode writes style="width: 1210px" on the wrapper, and the
 * image inside then resolves its own max-width against that, so both spill
 * past the column. Capping the wrapper brings the pair back inside.
 */
.entry figure,
.entry .wp-caption,
.entry .wp-block-image { max-width: 100%; height: auto; }
.entry figure img,
.entry .wp-caption img,
.entry .wp-block-image img { width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.entry .wp-caption-text { margin-top: .65rem; font-size: var(--t--1); color: var(--faint); text-align: center; }

/* Wide and full alignments still have to respect the reading column. */
.entry .alignwide,
.entry .alignfull { max-width: 100%; margin-inline: auto; }
.entry .alignleft,
.entry .alignright { max-width: min(100%, 22rem); }
.entry .aligncenter { margin-inline: auto; }

/* Long unbroken strings — a raw URL in a paragraph — must not widen the page. */
.entry p, .entry li, .entry td, .entry th { overflow-wrap: anywhere; }
.entry blockquote { padding: 1.3rem 1.6rem; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--t-2); font-weight: 500; line-height: 1.4; }
.entry table { width: 100%; border-collapse: collapse; font-size: var(--t-0); }
.entry th, .entry td { padding: .8rem 1rem; border: 1px solid var(--line); text-align: left; }
.entry th { background: var(--surface-2); font-weight: 700; }
.entry pre { padding: 1.25rem; border-radius: var(--r-sm); background: var(--surface-2); overflow-x: auto; }
.entry :is(iframe, video) { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); border: 0; }
.table-scroll { overflow-x: auto; }

.article__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.5rem; }
.related { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }

/* --- Pagination ---------------------------------------------------------- */

.pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.pagination :is(a, span) { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .5rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 600; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .current { background: var(--ink); color: var(--ink-inv); border-color: transparent; }
.pagination .icon--chevron.is-prev { transform: rotate(90deg); }
.pagination .icon--chevron.is-next { transform: rotate(-90deg); }

/* --- 404 ----------------------------------------------------------------- */

/* A console panel with the circuit severed down the middle: packets run in
   from both edges and die at the break, which is what a dead URL looks like
   in this design language. */
.nf {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.4rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 50% 50%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%),
    linear-gradient(165deg, var(--deep), color-mix(in srgb, var(--deep) 87%, var(--brand)));
  color: var(--deep-ink);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.nf__circuit {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--deep-ink);
  opacity: .3;
  pointer-events: none;
}
.nf__trace { opacity: .3; }
.nf__packet {
  stroke-dasharray: 9 220;
  stroke-dashoffset: 9;
  animation: nz-nf-packet 3.6s linear infinite;
  animation-delay: calc(var(--i) * .42s);
}
/* The packet fades before the cut end — the signal never gets across. */
@keyframes nz-nf-packet {
  0%        { stroke-dashoffset: 9;    opacity: 0; }
  14%       { opacity: .95; }
  70%       { opacity: .95; }
  88%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.nf__end {
  transform-box: fill-box;
  transform-origin: center;
  animation: nz-nf-end 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * .42s);
}
@keyframes nz-nf-end {
  0%, 62%  { opacity: .25; transform: scale(1); }
  72%      { opacity: .9;  transform: scale(1.5); }
  100%     { opacity: .25; transform: scale(1); }
}

.nf__body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
  width: min(100%, 40rem);
}
/* The traces pass behind the copy, so the copy carries its own ground and the
   circuit reads as depth rather than as lines through the text. */
.nf__body::before {
  content: '';
  position: absolute;
  inset: -14% -12%;
  z-index: -1;
  background: radial-gradient(58% 62% at 50% 50%, color-mix(in srgb, var(--deep) 90%, transparent) 40%, transparent 74%);
  pointer-events: none;
}
.nf__code {
  font-size: clamp(4.5rem, 15vw, 9.5rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf__title {
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.nf__text {
  color: color-mix(in srgb, var(--deep-ink) 68%, transparent);
  font-size: var(--t-0);
  max-width: 46ch;
  text-wrap: pretty;
}

.nf__search { width: min(100%, 28rem); margin-top: .5rem; }
/* The field sits on a dark ground, so it borrows the panel's palette. */
.nf__search input[type='search'] {
  background: color-mix(in srgb, #fff 9%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
  color: var(--deep-ink);
}
.nf__search input[type='search']::placeholder { color: color-mix(in srgb, var(--deep-ink) 52%, transparent); }

.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .4rem; }
.nf__ghost {
  color: var(--deep-ink);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent);
}
.nf__ghost:hover {
  background: color-mix(in srgb, #fff 15%, transparent);
  border-color: color-mix(in srgb, #fff 34%, transparent);
  box-shadow: none;
}

/* The recovery links carry no top rule — the panel above is the divider. */
.nf__latest { border-top: 0; padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .nf__packet, .nf__end { animation: none; }
  .nf__packet { opacity: 0; }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--deep);
  color: var(--deep-ink);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.site-footer__glow {
  position: absolute;
  inset: -55% -10% auto -10%;
  height: 150%;
  z-index: -1;
  background:
    radial-gradient(34% 46% at 82% 12%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 70%),
    radial-gradient(28% 40% at 12% 4%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 72%);
}
.site-footer a { color: inherit; }

.footer__lead {
  display: grid;
  justify-items: start;
  gap: .75rem;
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-ink) 14%, transparent);
}
.footer__logo img { max-height: 44px; width: auto; filter: invert(1) hue-rotate(180deg) brightness(1.35); }
.footer__headline { font-size: var(--t-3); font-weight: 800; line-height: 1.1; letter-spacing: -.032em; max-width: 20ch; margin-top: .6rem; }
.footer__sub { color: color-mix(in srgb, var(--deep-ink) 62%, transparent); }
.footer__socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--deep-ink) 20%, transparent);
  font-size: var(--t--1);
  font-weight: 600;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.footer__socials a:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }

.footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.footer__col { min-width: 0; }

.footer__nav ul { display: grid; gap: .1rem; }
.footer__nav a {
  display: inline-block;
  padding-block: .5rem;
  color: color-mix(in srgb, var(--deep-ink) 70%, transparent);
  font-weight: 500;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer__nav a:hover { color: var(--ink-inv); transform: translateX(4px); }

.footer__cats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; }
.footer__cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .5rem;
  color: color-mix(in srgb, var(--deep-ink) 70%, transparent);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--deep-ink) 10%, transparent);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer__cats a:hover { color: var(--ink-inv); border-color: var(--brand); }
.footer__cats em { font-style: normal; font-size: var(--t--1); color: color-mix(in srgb, var(--deep-ink) 40%, transparent); }

.footer__contact { display: grid; align-content: start; gap: .65rem; }
.footer__direct {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.1rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--deep-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--deep-ink) 12%, transparent);
  font-weight: 600;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.footer__direct .icon { color: var(--brand); flex: 0 0 auto; }
a.footer__direct:hover { background: color-mix(in srgb, var(--deep-ink) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.footer__direct--static { cursor: default; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--deep-ink) 14%, transparent);
  font-size: var(--t--1);
  color: color-mix(in srgb, var(--deep-ink) 60%, transparent);
}
.to-top { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; transition: color .25s var(--ease); }
.to-top:hover { color: var(--brand); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1199px) {
  .newsroom__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsroom__top .card:first-child { grid-column: 1 / -1; }
  .cat--quad .cat__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__contact { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .about__top,
  .advantage__split,
  .partners__split { grid-template-columns: minmax(0, 1fr); }
  .feature-row { grid-template-columns: minmax(0, 1fr); }
  .cat--feature .cat__body,
  .cat--digest .cat__body { grid-template-columns: minmax(0, 1fr); }
  .cat--trio .cat__body,
  .cat--band .cat__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat--band .card:last-child { display: none; }
  .cat--duo .cat__body { grid-template-columns: minmax(0, 1fr); }
  .stack { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .tribute { grid-template-columns: minmax(0, 1fr); }
  .tribute__media { aspect-ratio: 16 / 10; }
  .tribute__media::after { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--deep) 94%, transparent) 100%); }
  .newsroom__top { grid-template-columns: minmax(0, 1fr); }
  .cat--trio .cat__body,
  .cat--band .cat__body,
  .cat--quad .cat__body { grid-template-columns: minmax(0, 1fr); }
  .cat--band .card:last-child { display: block; }
  .card--wide { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .footer__cats ul { grid-template-columns: minmax(0, 1fr); }
  .footer__contact { grid-auto-flow: row; }
}

@media (max-width: 639px) {
  :root { --header-h: 66px; }
  .post-row { grid-template-columns: 68px minmax(0, 1fr); }
  .card--row { grid-template-columns: 76px minmax(0, 1fr); }
  .footer__bottom { justify-content: center; text-align: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .about__meta .btn,
  .partners__btn,
  .cform__submit { width: 100%; }
  .cat--ledger li { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

@media print {
  .site-header, .site-footer, .sidebar, .share, .pagination, .chip, .crumbs { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Pricing period switch ----------------------------------------------- */

/* An explicit track: without it the column is content-sized, so the plans
   grid resolves its width against its own max-content and spills out of
   the container on narrow screens. */
.pricing .container { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pricing .sec-head,
.pricing .plans { justify-self: stretch; width: 100%; }

.switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(7.5rem, auto));
  padding: .3rem;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.switch__thumb {
  position: absolute;
  top: .3rem;
  left: .3rem;
  width: calc(50% - .3rem);
  height: calc(100% - .6rem);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--glow);
  transition: transform .45s var(--ease);
}
.switch.is-year .switch__thumb { transform: translateX(100%); }

.switch__opt {
  position: relative;
  z-index: 1;
  padding: .7rem 1.25rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t--1);
  color: var(--muted);
  transition: color .35s var(--ease);
}
.switch__opt[aria-pressed="true"] { color: var(--brand-ink); }

/* Both price sets ship in the HTML; the switch cross-fades between them. */
.plan__amount,
.plan__period,
.plan__swap { position: relative; display: inline-grid; }
.plan__amount > *,
.plan__period > *,
.plan__swap > * {
  grid-area: 1 / 1;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.plans .is-year { opacity: 0; transform: translateY(6px); pointer-events: none; }
.plans.is-year .is-month { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.plans.is-year .is-year { opacity: 1; transform: none; pointer-events: auto; }

/* --- Newsroom ticker ----------------------------------------------------- */

.ticker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: .55rem .55rem .55rem 1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.ticker__label {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--brand-ink);
  font-size: var(--t--1);
  font-weight: 700;
  white-space: nowrap;
}
a.ticker__label { transition: filter .25s var(--ease), transform .25s var(--ease); }
a.ticker__label:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.ticker__track { display: flex; width: max-content; gap: 2.5rem; animation: nz-ticker 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
  font-weight: 500;
  font-size: var(--t--1);
  color: var(--muted);
  transition: color .25s var(--ease);
}
.ticker__item:hover { color: var(--brand); }
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
@keyframes nz-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --- Newsroom category blocks -------------------------------------------- */

.cat__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.cat__title { font-size: var(--t-2); display: inline-flex; align-items: center; gap: .7rem; }
.cat__title::before {
  content: '';
  width: 6px;
  height: 1.05em;
  border-radius: 3px;
  background: linear-gradient(var(--brand), var(--brand-2));
}
.cat__title a:hover { color: var(--brand); }
.cat__count {
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t--1);
  font-weight: 700;
  color: var(--faint);
}
.cat__more { margin-left: auto; }

.card__idx {
  font-size: var(--t-2);
  font-weight: 800;
  letter-spacing: -.03em;
  color: transparent;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
}

/* 1 — marquee: cinematic lead over three compact cards */
.cat--marquee .cat__body { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.card--cinema { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.card--cinema .card__media { border-radius: 0; }
.card--cinema .thumb { aspect-ratio: 21 / 9; border-radius: 0; }
.card--cinema .card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .35) 62%, transparent);
  color: #fff;
}
/*
 * The wash has to reach both edges of the frame — capping the box left the
 * far side of the photograph undimmed and drew a hard vertical seam down the
 * card. The measure belongs on the copy, not on the gradient.
 */
.card--cinema .card__title,
.card--cinema .card__excerpt { max-width: 62ch; }
.card--cinema .card__title { font-size: var(--t-3); }
.card--cinema .card__title a { color: #fff; }
.card--cinema .card__excerpt { color: rgba(255, 255, 255, .82); }
.card--cinema .meta { color: rgba(255, 255, 255, .75); }
.cat__under { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }

/* 2 — rail: horizontal snap track */
.cat__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .75rem;
  scrollbar-width: thin;
}
.cat__rail > * { scroll-snap-align: start; }
.card--tall .thumb { aspect-ratio: 3 / 4; }

/* 3 — index: two numbered columns, no imagery */
.cat__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.card--index {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
  transition: padding-inline .3s var(--ease), background-color .3s var(--ease);
}
.card--index .card__body { display: contents; }
.card--index:hover { background: var(--surface); padding-inline: .9rem; border-radius: var(--r-sm); }
.card--index .meta { order: 3; grid-column: 2; }

/* 4 — split: sticky intro beside a stack */
.cat--split .cat__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.cat__intro { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; justify-items: start; gap: 1.25rem; }
.cat__kicker { font-size: var(--t-2); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.cat__list { display: grid; }
.card--mini {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.card--mini:last-child { border-bottom: 0; }
.card--mini .thumb { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.card--mini .card__title { font-size: var(--t-0); }

/* 5 — mosaic: lead spans two rows */
.cat--mosaic .cat__body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.card--feature { grid-column: span 2; grid-row: span 2; }
.card--feature .thumb { aspect-ratio: 4 / 3; }
.card--feature .card__title { font-size: var(--t-2); }

/* 6 — frieze: a run of tall panels */
.cat--frieze .cat__body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.card--panel { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.card--panel .card__media { border-radius: 0; }
.card--panel .thumb { aspect-ratio: 3 / 4.4; border-radius: 0; }
.card--panel .card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(.9rem, 1.8vw, 1.4rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .93), rgba(0, 0, 0, .3) 65%, transparent);
  color: #fff;
}
.card--panel .card__title { font-size: var(--t-0); }
.card--panel .card__title a { color: #fff; }
.card--panel .meta { color: rgba(255, 255, 255, .72); }

/* 7 — brief: three ruled text columns */
.cat--brief .cat__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.card--brief { padding: 0 clamp(1.25rem, 2.5vw, 2rem); border-left: 1px solid var(--line); }
.card--brief:first-child { padding-left: 0; border-left: 0; }
.card--brief .card__title { font-size: var(--t-1); }
.card--brief::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  margin-bottom: 1rem;
}

.footer__cta { margin-top: .4rem; }

@media (max-width: 1023px) {
  .partners__head { grid-template-columns: minmax(0, 1fr); }
  .bus__row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.5rem; }
  .bus__wire,
  .bus__stem { display: none; }
  .bus__slot { padding: 0 !important; }
  .hub__wiring,
  .hub__core { display: none; }
  .hub__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
  .hub__node { grid-column: auto !important; grid-row: auto !important; visibility: visible !important; }
  .cat--split .cat__body { grid-template-columns: minmax(0, 1fr); }
  .cat__intro { position: static; }
  .cat--mosaic .cat__body,
  .cat--frieze .cat__body,
  .cat__under { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .bus__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub__nodes { grid-template-columns: minmax(0, 1fr); }
  .cat__index { grid-template-columns: minmax(0, 1fr); }
  .cat--brief .cat__body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .card--brief { padding: 0; border-left: 0; }
  .cat--mosaic .cat__body,
  .cat--frieze .cat__body,
  .cat__under { grid-template-columns: minmax(0, 1fr); }
  .card--feature { grid-column: auto; grid-row: auto; }
  .ticker__label { display: none; }
}

/* ==========================================================================
   Page openers, footer alignment, FAQ page, newsroom refinements
   ========================================================================== */

/* --- Centred page opener -------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}
.page-hero::before { content: none; }

.page-hero__aura {
  position: absolute;
  inset: -60% 0 auto 0;
  height: 150%;
  z-index: -2;
  background:
    radial-gradient(38% 46% at 50% 34%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 68%),
    radial-gradient(26% 34% at 78% 12%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 72%);
}
.page-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(52% 62% at 50% 42%, #000, transparent 76%);
  mask-image: radial-gradient(52% 62% at 50% 42%, #000, transparent 76%);
  opacity: .45;
}

.page-hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 58rem;
  margin-inline: auto;
}
.page-hero__inner .crumbs { margin-bottom: 1.5rem; }
.page-hero__inner .crumbs ol { justify-content: center; }
.page-hero__inner .eyebrow { margin-bottom: 1.25rem; }

/* The step the pricing opener used, now the size every page opener carries.
   The measure is in ch, so it scales with the type and each title keeps the
   line breaks it had. */
.page-hero__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.028em;
  max-width: 22ch;
}
.page-hero__lines {
  display: grid;
  gap: .35rem;
  margin-top: 1.35rem;
  font-size: var(--t-1);
  color: var(--muted);
  max-width: 62ch;
}

/* Hairline that fades out either side, closing the block. */
.page-hero__rule {
  width: min(100%, 22rem);
  height: 1px;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .55;
}

.search-again { display: grid; justify-items: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.search-again .search-form { width: min(100%, 28rem); }

/* --- Footer: columns end on the same line --------------------------------- */

.footer__cols { align-items: stretch; }
.footer__col { display: flex; flex-direction: column; }
.footer__nav ul,
.footer__cats ul { flex: 1; }
.footer__nav ul { display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
.footer__cats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: space-between; gap: 0 1.5rem; }
.footer__contact { justify-content: space-between; gap: .6rem; }

/* The contact route joins the social row, in brand colour, same size. */
.footer__socials a.is-cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: var(--brand-ink);
}
.footer__socials a.is-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.footer__socials a.is-cta .icon { transition: transform .3s var(--ease); }
.footer__socials a.is-cta:hover .icon { transform: translateX(3px); }

/* --- FAQ page ------------------------------------------------------------- */

.faqs__shell {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.faqs__rail { position: sticky; top: calc(var(--header-h) + 1.75rem); }
.faqs__railcard {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--deep), color-mix(in srgb, var(--deep) 80%, var(--brand)));
  color: var(--deep-ink);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.faqs__railcard .eyebrow { background: color-mix(in srgb, var(--brand) 22%, transparent); color: #fff; margin: 0; }
.faqs__title { font-size: var(--t-2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.faqs__count {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faqs__routes { display: grid; gap: .5rem; width: 100%; margin-top: .5rem; }
.faqs__railcard .footer__direct {
  background: color-mix(in srgb, #fff 8%, transparent);
  border-color: color-mix(in srgb, #fff 14%, transparent);
  font-size: var(--t--1);
}
.faqs__railcard .footer__direct:hover { background: color-mix(in srgb, #fff 15%, transparent); }

.faqs .faqs__list { max-width: none; margin-inline: 0; gap: .6rem; }
.faq__q { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 30px; align-items: center; }
.faq__no {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--faint);
  transition: color .3s var(--ease);
}
.faq[open] .faq__no { color: var(--brand); }
.faq__label { font-weight: 600; }
.faqs .faq__a { padding-left: clamp(1.1rem, 2.5vw, 4.1rem); }
.faq { transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.faq:hover { transform: translateY(-2px); }

@media (max-width: 1023px) {
  .faqs__shell { grid-template-columns: minmax(0, 1fr); }
  .faqs__rail { position: static; }
  .faqs__railcard { justify-items: center; text-align: center; }
  .faqs__count { justify-self: center; }
}

/* --- Newsroom refinements ------------------------------------------------- */

/* 1 — marquee: lead beside a numbered stack */
.cat--marquee .cat__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
.cat--marquee .card--cinema { height: 100%; }
.cat--marquee .card--cinema .card__media,
.cat--marquee .card--cinema .thumb { height: 100%; }
.cat--marquee .card--cinema .thumb { aspect-ratio: auto; min-height: 22rem; }
.cat--marquee .card--cinema .card__title { font-size: var(--t-3); }
.cat--marquee .cat__side {
  display: grid;
  align-content: stretch;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.cat--marquee .cat__side .card--mini {
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(.85rem, 1.6vw, 1.15rem);
}
.cat--marquee .cat__side .card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .35rem .6rem;
}
.cat--marquee .cat__side .card__idx { grid-row: 1; font-size: var(--t--1); font-weight: 800; }
.cat--marquee .cat__side .meta { grid-row: 1; }
.cat--marquee .cat__side .card__title { grid-column: 1 / -1; }
.cat--marquee .cat__side .card--mini:first-child { padding-top: 0; }
.cat--marquee .cat__side .card--mini:last-child { border-bottom: 0; padding-bottom: 0; }


/* 4 — split: the rail is a filled panel, never an empty column */
.cat__intro {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: .9rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--deep), color-mix(in srgb, var(--deep) 82%, var(--brand)));
  color: var(--deep-ink);
  overflow: hidden;
  min-height: 100%;
  top: auto;
}
.cat__glow {
  position: absolute;
  inset: auto -30% -50% auto;
  width: 300px;
  height: 300px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%);
}
.cat__kicker { font-size: var(--t-3); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.cat__tally b {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat__desc { color: color-mix(in srgb, var(--deep-ink) 68%, transparent); font-size: var(--t--1); max-width: 34ch; }

/* Headline clamps keep every row in a block the same height. */
.cat--rail .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat--index .card__title,
.cat--mosaic .card__title,
.cat--split .card__title,
.cat--marquee .cat__side .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat--mosaic .card--feature .card__title { -webkit-line-clamp: 3; }
.cat--brief .card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat--frieze .card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card--cinema .card__excerpt,
.card--feature .card__excerpt,
.card--brief .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .cat--marquee .cat__body { grid-template-columns: minmax(0, 1fr); }
  .cat--marquee .card--cinema .thumb { min-height: 16rem; }
}

@media (max-width: 767px) {
  /* Two children — the thumbnail and the body — so two tracks. A third track
     here pushed the copy into the 68px column and left a dead strip beside it. */
  .cat--marquee .cat__side .card--mini { grid-template-columns: 68px minmax(0, 1fr); }
  .footer__cats ul { grid-template-columns: minmax(0, 1fr); }
  .footer__nav ul { gap: .1rem; }
}

/* ==========================================================================
   Rhythm, About chain, archive lead, newsroom latest, article typography
   ========================================================================== */

/* --- Vertical rhythm: sections were stacking two full paddings ------------ */

:root { --section-y: clamp(2.5rem, 4.5vw, 4rem); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.75rem, 3vw, 2.75rem) var(--section-y); }

/* Neighbouring bands share one gap instead of two. */
.about { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.partners { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.bus { padding-block: clamp(.5rem, 1.5vw, 1.25rem); }
.bus__slot:nth-child(odd) { padding-bottom: 2.25rem; }
.bus__slot:nth-child(even) { padding-top: 2.25rem; }
.bus__stem { height: 1.8rem; }
.process { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.features { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.hub { padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.pricing { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.logos { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.site-footer { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* The newsroom used to leave a dead band before the footer. */
.cat:last-child { margin-bottom: 0; }

/* --- FAQ page: no counter, answers use the full card --------------------- */

.faqs__count { display: none; }
.faqs .faq__a { max-width: none; padding-right: clamp(1.1rem, 2.5vw, 1.75rem); }
.faqs .faq__a p { max-width: none; }

/* --- About: the value chain ---------------------------------------------- */

.chain { position: relative; display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.chain__spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(var(--brand), var(--brand-2), transparent);
  opacity: .35;
}

.chain__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.chain__row:nth-child(odd) .chain__panel { order: 2; }
.chain__row:nth-child(odd) .chain__figure { order: 1; }

.chain__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent);
  animation: nz-tap 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * .5s);
}

.chain__panel {
  position: relative;
  display: grid;
  gap: .8rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.chain__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--brand-soft), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.chain__panel:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: var(--shadow);
}
.chain__panel:hover::after { opacity: 1; }

.chain__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  color: var(--brand);
  background: var(--brand-soft);
}
.chain__title { font-size: var(--t-2); }
.chain__text { color: var(--muted); }

.chain__figure {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%),
    var(--surface-2);
  border: 1px solid var(--line);
  color: var(--brand);
}
.chain__figure svg { width: min(100%, 190px); height: auto; }
.chain__row:hover .chain__figure svg { animation: nz-figure 1.2s var(--ease); }
@keyframes nz-figure {
  0% { transform: scale(1); }
  40% { transform: scale(1.06) rotate(-1.5deg); }
  100% { transform: scale(1); }
}

@media (max-width: 767px) {
  .chain__spine,
  .chain__node { display: none; }
  .chain__row { grid-template-columns: minmax(0, 1fr); }
  .chain__row:nth-child(odd) .chain__panel { order: 0; }
  .chain__row:nth-child(odd) .chain__figure { order: 0; }
  .chain__figure { display: none; }
}

/* --- Archive lead --------------------------------------------------------- */

.lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.lead:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lead__media { display: block; }
.lead__media .thumb { height: 100%; aspect-ratio: 16 / 10; border-radius: 0; }
.lead:hover .thumb__img { transform: scale(1.04); }
.lead__body {
  position: relative;
  display: grid;
  align-content: center;
  gap: .85rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.lead__title { font-size: var(--t-3); font-weight: 800; letter-spacing: -.032em; line-height: 1.12; }
.lead__title a:hover { color: var(--brand); }
.lead__excerpt { color: var(--muted); }
.lead__cue {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lead:hover .lead__cue { background: var(--brand); color: var(--brand-ink); transform: translateX(4px); }

.archive__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.archive__bar .cat__title { font-size: var(--t-2); font-weight: 800; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: .7rem; }
.archive__bar .cat__title::before { content: ''; width: 6px; height: 1.05em; border-radius: 3px; background: linear-gradient(var(--brand), var(--brand-2)); }

.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

@media (max-width: 767px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
}

/* --- Newsroom: latest releases ------------------------------------------- */

.latest {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.latest__item {
  position: relative;
  display: grid;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.latest__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.latest__item--lead { grid-row: span 2; }

.latest__media { display: block; height: 100%; }
.latest__media .thumb { height: 100%; aspect-ratio: auto; border-radius: 0; min-height: 11rem; }
.latest__item--lead .thumb { min-height: 24rem; }
.latest__item:hover .thumb__img { transform: scale(1.04); }

.latest__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: .5rem;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .45) 55%, transparent);
  color: #fff;
}
.latest__title { font-size: var(--t-1); font-weight: 700; line-height: 1.24; letter-spacing: -.022em; }
.latest__title a { color: #fff; }
.latest__item--lead .latest__title { font-size: var(--t-3); }
.latest__excerpt { color: rgba(255, 255, 255, .82); font-size: var(--t--1); max-width: 54ch; }
.latest__body .meta { color: rgba(255, 255, 255, .78); }
.latest__body .chip-tag { background: var(--brand); color: var(--brand-ink); }

@media (max-width: 767px) {
  .latest { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .latest__item--lead { grid-row: auto; }
  .latest__item--lead .thumb { min-height: 15rem; }
}

/* --- Article: smaller headline, no hero image, adjacent links ------------- */

/* Fixed at the client's chosen size, so it does not scale with the viewport. */
.article__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.018em;
}
.article__header { gap: .75rem; margin-bottom: 1.25rem; }

.adjacent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.adjacent__link {
  display: grid;
  gap: .45rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.adjacent__link:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: var(--shadow-sm); }
.adjacent__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t--1);
  font-weight: 700;
  color: var(--brand);
}
.adjacent__link--prev .adjacent__label .icon { transform: rotate(180deg); }
.adjacent__title {
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adjacent__link--next { text-align: right; }
.adjacent__link--next .adjacent__label { justify-self: end; }

@media (max-width: 639px) {
  .adjacent { grid-template-columns: minmax(0, 1fr); }
  .adjacent__link--next { text-align: left; }
  .adjacent__link--next .adjacent__label { justify-self: start; }
}

/* ==========================================================================
   Chip motion, partner breathing room, dispatch timeline, About spine
   ========================================================================== */

/* --- Chip: one packet per route, chip edge to landing pad ----------------- */

/*
 * Geometry is normalised with pathLength="100", so 100 units = the whole route
 * whatever its real length or bends. The dash pattern is 12 on / 300 off, which
 * guarantees exactly one packet is ever on a route, and the offset sweeps from
 * +12 (packet still behind the start) to -100 (packet clear of the end). The
 * packet is therefore invisible before the die and after the pad, and fully
 * visible for every unit in between — including the corners.
 */
.chip__pulse,
.chip__halo-line {
  stroke-dasharray: 10 300;
  stroke-dashoffset: 10;
  stroke-linecap: round;
  animation: nz-packet 3.8s linear infinite;
  animation-delay: calc(var(--i) * .3s);
}
@keyframes nz-packet {
  from { stroke-dashoffset: 10; }
  to { stroke-dashoffset: -100; }
}

/* Soft halo under the bright core reads as a glowing packet. */
.chip__halo-line {
  opacity: .22;
  filter: blur(3px);
}
.chip__pulse { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 70%, transparent)); }

/* The pad fires as the packet lands — same clock, so they cannot drift. */
.chip__pad { animation: nz-pad 3.8s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }

/* An SVG shape scales from the canvas origin unless it is told otherwise —
   without these two lines the ring shoots off across the artboard. */
.chip__pad-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: nz-pad-ring 3.8s ease-out infinite;
  animation-delay: calc(var(--i) * .3s);
}

@keyframes nz-pad {
  0%, 84%, 100% { opacity: .4; }
  95% { opacity: 1; }
}
@keyframes nz-pad-ring {
  0%, 86% { opacity: 0; transform: scale(.75); }
  93% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.chip__die { animation: nz-die 3.8s ease-in-out infinite; }
@keyframes nz-die {
  0%, 100% { filter: drop-shadow(0 32px 54px rgba(13, 13, 16, .38)); }
  50% { filter: drop-shadow(0 32px 60px rgba(253, 58, 37, .28)); }
}

/* Hub spokes carry the same packet, for the same reason. */
.hub__signal,
.hub__halo {
  stroke-dasharray: 10 300;
  stroke-dashoffset: 10;
  stroke-linecap: round;
  animation: nz-packet 3.6s linear infinite;
  animation-delay: calc(var(--i) * .4s);
}
.hub__halo { opacity: .22; filter: blur(3px); }
.hub__signal { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 70%, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .chip__pulse, .chip__halo-line,
  .hub__signal, .hub__halo { display: none; }
}

/* --- Partners: give the board room to breathe ---------------------------- */

.partners { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.partners__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.partners__aside .lede {
  text-align: justify;
  text-justify: inter-word;
}

.bus { padding-block: clamp(1.5rem, 4vw, 3.25rem); }
.bus__row { gap: clamp(.75rem, 1.4vw, 1.4rem); }
.bus__slot:nth-child(odd) { padding-bottom: 4.5rem; }
.bus__slot:nth-child(even) { padding-top: 4.5rem; }
.bus__stem { height: 3.6rem; }
.bus__node { min-height: 118px; padding: 1.4rem 1rem; }
.bus__node img { max-width: 138px; }

@media (max-width: 1023px) {
  .bus { padding-block: 1rem; }
}

/* --- From release to report: the dispatch timeline ------------------------ */

.flow { position: relative; padding-top: 3.25rem; }

.flow__rail {
  position: absolute;
  inset-inline: 12%;
  top: 26px;
  height: 2px;
  border-radius: 2px;
  overflow: visible;
}
.flow__line { position: absolute; inset: 0; background: var(--line-2); border-radius: 2px; }
.flow__fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease) .25s;
}
.flow.is-visible .flow__fill,
[data-reveal].is-visible .flow__fill { transform: scaleX(1); }

/* A charge that runs the rail once the line has drawn. */
.flow__spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 90px;
  height: 4px;
  translate: 0 -50%;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: .8;
  mix-blend-mode: overlay;
  animation: nz-flow-spark 5s linear infinite 1.8s;
}
@keyframes nz-flow-spark {
  0% { transform: translateX(-90px); opacity: 0; }
  10%, 80% { opacity: .9; }
  100% { transform: translateX(calc(100% + 90px)); opacity: 0; }
}

.flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.flow__step { position: relative; display: grid; }

/* Station marker sits on the rail, above its card. */
.flow__station {
  position: absolute;
  top: -3.25rem;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--faint);
  z-index: 1;
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.flow__station b { font-size: var(--t-0); }
.flow__step:hover .flow__station,
.flow__step:focus-within .flow__station {
  border-color: transparent;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  transform: translate(-50%, -3px) scale(1.06);
  box-shadow: var(--glow);
}

.flow__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.flow__step:hover .flow__card {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: var(--shadow);
}
.flow__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--brand-soft), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.flow__step:hover .flow__card::after { opacity: 1; }

/* Oversized ghost numeral behind the copy. */
.flow__ghost {
  position: absolute;
  top: -.35em;
  right: .05em;
  font-size: clamp(6rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--text);
  opacity: .035;
  pointer-events: none;
}

.flow__head { display: flex; align-items: center; gap: .85rem; }
.flow__dial { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.flow__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.flow__arc { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease) .35s; }
[data-reveal].is-visible .flow__arc { stroke-dashoffset: 0; }

.flow__time {
  display: inline-flex;
  align-items: center;
  padding: .45rem .95rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t--1);
  font-weight: 700;
  color: var(--muted);
}
.flow__title { font-size: var(--t-2); }
.flow__text {
  color: var(--muted);
  text-align: justify;
  text-justify: inter-word;
}

@media (max-width: 1023px) {
  .flow { padding-top: 0; }
  .flow__rail { display: none; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .flow__station { position: static; translate: none; margin-bottom: -1.75rem; justify-self: start; }
  .flow__step:hover .flow__station { transform: scale(1.06); }
  .flow__card { padding-top: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flow__spark { animation: none; opacity: 0; }
  .flow__fill { transform: scaleX(1); transition: none; }
  .flow__arc { transition: none; stroke-dashoffset: 0; }
  .chip__die { animation: none; }
}

/* --- About: supplied icons, live spine, justified copy -------------------- */

.chain__spine { overflow: hidden; }
.chain__spark {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 90px;
  translate: -50% 0;
  border-radius: 4px;
  background: linear-gradient(var(--brand), var(--brand-2), transparent);
  filter: blur(1px);
  animation: nz-spine 4.5s ease-in-out infinite;
}
@keyframes nz-spine {
  0% { top: -90px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.chain__figure { padding: clamp(1.75rem, 3.5vw, 3rem); }
.chain__plate {
  display: grid;
  place-items: center;
  width: clamp(108px, 12vw, 148px);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--deep), var(--deep-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 34px -18px rgba(13, 13, 16, .7);
  overflow: hidden;
  position: relative;
  transition: transform .5s var(--ease);
}
.chain__plate::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 64%, color-mix(in srgb, var(--brand) 70%, transparent) 80%, transparent 94%);
  opacity: .3;
  animation: nz-orbit 8s linear infinite;
  animation-delay: calc(var(--i) * -1.1s);
  transition: opacity .5s var(--ease);
}
.chain__plate::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--r-lg) - 3px);
  background: linear-gradient(150deg, var(--deep), var(--deep-2));
}
.chain__plate img {
  position: relative;
  z-index: 1;
  width: 54%;
  height: auto;
  animation: nz-float 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.7s);
}
.chain__row:hover .chain__plate { transform: rotate(-3deg) scale(1.04); }
.chain__row:hover .chain__plate::before { opacity: .9; }

.chain__text {
  text-align: justify;
  text-justify: inter-word;
}

@media (max-width: 767px) {
  .chain__figure { display: grid; justify-items: start; padding: 0 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chain__spark { animation: none; opacity: 0; }
  .chain__plate::before,
  .chain__plate img { animation: none; }
}

/* ==========================================================================
   Sidebar rebuild, headline clamps, footer headline
   ========================================================================== */

/* Latest News: three lines, so every row keeps the same rhythm. */
.sidebar .post-row__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Related News: three cards, three lines each. */
.related .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Sidebar categories --------------------------------------------------- */

.widget--cats { padding: 0; border: 0; background: none; }
.widget--cats .widget__title { padding-left: .8rem; }

.catlist { display: grid; gap: .4rem; }
.catlist__link {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.catlist__bar {
  width: 4px;
  height: 1.35em;
  border-radius: 4px;
  background: var(--line-2);
  transition: background .3s var(--ease), height .3s var(--ease);
}
.catlist__name { font-weight: 600; letter-spacing: -.012em; transition: color .3s var(--ease); }
.catlist__count {
  font-size: var(--t--1);
  font-weight: 700;
  color: var(--faint);
  padding: .15rem .55rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.catlist__link:hover,
.catlist__link.is-current {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  box-shadow: var(--shadow-sm);
}
.catlist__link:hover .catlist__bar,
.catlist__link.is-current .catlist__bar { background: linear-gradient(var(--brand), var(--brand-2)); height: 1.7em; }
.catlist__link:hover .catlist__name,
.catlist__link.is-current .catlist__name { color: var(--brand); }
.catlist__link:hover .catlist__count,
.catlist__link.is-current .catlist__count { background: var(--brand-soft); color: var(--brand); }

/* --- Footer headline on one line ------------------------------------------ */

.footer__headline { max-width: none; white-space: nowrap; }

@media (max-width: 639px) {
  .footer__headline { white-space: normal; font-size: var(--t-2); }
}

/* ==========================================================================
   Hero presence, particle field, share row, related grid, headline wrapping
   ========================================================================== */

/* --- Hero: fills the screen and carries the particle field ---------------- */

.hero {
  display: grid;
  align-items: center;
  min-height: min(92vh, 60rem);
}
.hero__inner,
.hero .container { width: 100%; }
.hero__grid { align-items: center; }

.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;
}
:root[data-theme='dark'] .hero__field { opacity: .8; }

/* A little more presence for the chip now that the hero is taller. */
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.hero .chip { max-width: none; margin-inline: auto; }
.hero__copy { gap: clamp(1.4rem, 2.8vw, 2.2rem); }

@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero .chip { max-width: 26rem; }
}

/* --- Share row: six networks plus copy ------------------------------------ */

.share { flex-wrap: wrap; gap: .45rem; }
.share__btn { width: 42px; height: 42px; }
.share__btn--x:hover { background: #0F1419; }
.share__btn--telegram:hover { background: #229ED9; }
.share__btn--mail:hover { background: var(--brand); }
.share__btn--copy { cursor: pointer; }
.share__btn--copy:hover { background: var(--ink); color: var(--ink-inv); }
.share__btn--copy.is-done {
  background: #0F8A4C;
  border-color: transparent;
  color: #fff;
}

/* --- Related: always one row --------------------------------------------- */

.related .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767px) {
  .related .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Headlines: fill the line before wrapping ----------------------------- */

/* text-wrap: balance evens out line lengths, which on a two-line article
   headline leaves an obvious gap. Long headlines should simply fill. */
.article__title,
.card__title,
.latest__title,
.post-row__title,
.lead__title,
.adjacent__title { text-wrap: pretty; }

/* ==========================================================================
   Hero presence pass two, newsroom headline scale
   ========================================================================== */

/* The chip is the anchor of the page — give it the wider half of the row. */
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.hero .chip { width: 100%; max-width: none; }
.hero__field { opacity: .85; }
:root[data-theme='dark'] .hero__field { opacity: 1; }

.hero__copy { gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.hero__lines { gap: .35rem; }
.hero__actions { margin-top: .35rem; }
.hero__scroll { margin-top: .5rem; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero .chip { max-width: 26rem; }
}

/* --- Newsroom headlines at ~65% -------------------------------------------- */

.latest__item--lead .latest__title,
.card--cinema .card__title,
.cat--marquee .card--cinema .card__title {
  font-size: clamp(1.05rem, .82rem + .78vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -.022em;
}

.latest__title { font-size: clamp(.95rem, .9rem + .18vw, 1.05rem); line-height: 1.28; }
.card--feature .card__title { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }
.cat__kicker { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }

/* ==========================================================================
   Background weight, page-hero measure, About section title
   ========================================================================== */

/* Background art sits 30% quieter behind the copy. */
.hero__field { opacity: .6; }
:root[data-theme='dark'] .hero__field { opacity: .7; }
.hero__dots { opacity: .35; }

/* Page openers: wide enough for a full sentence per line. */
.page-hero__inner { max-width: min(100%, 68rem); }
.page-hero__lines { font-size: var(--t-0); max-width: none; }

/* A section title should not compete with the page headline above it. */
.sec-head--sm .sec-title { font-size: clamp(1.25rem, .95rem + 1.05vw, 2.1rem); }

/* ==========================================================================
   Pricing headline measure, archive clamps
   ========================================================================== */

/* The pricing title is a full sentence, not a phrase: a wider measure and a
   step down in size land it on two lines instead of four. */
.pricing .sec-head { max-width: min(100%, 60rem); }
.pricing .sec-title { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.3rem); line-height: 1.18; }

/* Archive grid: two lines of headline and two of summary, so every card in a
   row is the same height and the grid stays on its baseline. */
.archive-grid .card__title,
.archive-grid .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Contact page: routing board
   ========================================================================== */

.contact__split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}

/* --- The dark board ------------------------------------------------------- */

.contact__board {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 62%),
    linear-gradient(155deg, var(--deep), color-mix(in srgb, var(--deep) 86%, var(--brand)));
  color: var(--deep-ink);
  /* A hairline keeps the board a distinct object in dark mode, where its
     ground sits close to the form card beside it. */
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* The circuit is texture, not a diagram: it sits under the copy and stays dim. */
.contact__circuit {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62%;
  height: 100%;
  color: var(--brand);
  opacity: .22;
  pointer-events: none;
}
.circuit__trace { opacity: .34; }
.circuit__packet {
  stroke-dasharray: 8 200;
  stroke-dashoffset: 8;
  animation: nz-circuit 5.2s linear infinite;
  animation-delay: calc(var(--i) * .62s);
}
@keyframes nz-circuit {
  from { stroke-dashoffset: 8; }
  to   { stroke-dashoffset: -100; }
}
.circuit__pad {
  transform-box: fill-box;
  transform-origin: center;
  animation: nz-circuit-pad 5.2s ease-out infinite;
  animation-delay: calc(var(--i) * .62s);
}
@keyframes nz-circuit-pad {
  0%, 74%  { opacity: .35; transform: scale(1); }
  84%      { opacity: 1;   transform: scale(1.9); }
  100%     { opacity: .35; transform: scale(1); }
}

.contact__intro { position: relative; }
.contact__board .eyebrow {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
  color: #fff;
  margin-bottom: 1rem;
}
.contact__title {
  font-size: clamp(1.35rem, 1rem + 1.25vw, 2.15rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.028em;
  text-wrap: pretty;
}

/* --- Routes --------------------------------------------------------------- */

/* Above the circuit, so the traces read as texture behind frosted rows. */
.routes { position: relative; z-index: 1; display: grid; gap: .55rem; margin-top: auto; }

.route__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem .95rem;
  border-radius: var(--r);
  background: color-mix(in srgb, #fff 9%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  overflow: hidden;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
a.route__link:hover {
  background: color-mix(in srgb, #fff 13%, transparent);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  transform: translateX(4px);
}
.route__link--static { cursor: default; }

.route__plate {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
a.route__link:hover .route__plate { background: var(--brand); color: var(--brand-ink); }

.route__text { display: grid; gap: .1rem; min-width: 0; }
.route__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--deep-ink) 58%, transparent);
}
.route__value {
  font-size: var(--t-0);
  font-weight: 700;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.route__cue {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--deep-ink) 45%, transparent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
a.route__link:hover .route__cue { opacity: 1; transform: none; color: var(--brand); }
/* Touch has no hover to reveal the cue, so it stays on. */
@media (hover: none) {
  .route__cue { opacity: .55; transform: none; }
}

/* A trace lights along the foot of the row on hover, echoing the circuit. */
.route__wire {
  position: absolute;
  left: .95rem; right: .95rem; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
a.route__link:hover .route__wire { transform: scaleX(1); }

/* --- Form side ------------------------------------------------------------ */

.contact__panel { display: flex; }
.contact__panel .cform {
  position: relative;
  flex: 1;
  align-content: start;
  overflow: hidden;
}
/* A brand rule across the top ties the form card to the board beside it. */
.contact__panel .cform::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), transparent);
}
.contact__panel .cform__intro {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.contact__panel .cform__submit { justify-self: stretch; text-align: center; }

@media (max-width: 899px) {
  .contact__split { grid-template-columns: minmax(0, 1fr); }
  .contact__circuit { width: 100%; opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .circuit__packet, .circuit__pad { animation: none; }
  .circuit__packet { opacity: 0; }
}


/* ==========================================================================
   Services and Editorial standards
   ========================================================================== */

.page-hero__cta { margin-top: 1.6rem; }

/* --- Services · the line -------------------------------------------------- */

/* The board palette is shared with .hub and declared with it, so this panel is
   light by day and deep at night without a second set of rules. */
.pipeline {
  --mod: 56px;

  position: relative;
  padding: clamp(1.6rem, 3.5vw, 2.75rem) clamp(1.2rem, 3vw, 2.5rem) clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 90% at 50% 0%, var(--board-glow), transparent 70%),
    linear-gradient(165deg, var(--board-a), var(--board-b));
  color: var(--board-ink);
  border: 1px solid var(--board-line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pipeline__stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.5rem);
}

/* The rail spans the row and the modules sit on it, so the two always line up
   however the columns resize. */
.pipeline__rail {
  position: absolute;
  top: calc(var(--mod) / 2);
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--board-ink) 34%, transparent);
}
.pipeline__cap {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 11px; height: 22px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--board-ink) 40%, transparent);
}
.pipeline__cap--in { left: -11px; }
.pipeline__cap--out { right: -11px; background: var(--brand); }

/* One packet runs the length of the line on an eight-second loop. */
.pipeline__packet {
  position: absolute;
  top: 50%; left: 0;
  translate: -50% -50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 85%, transparent);
  animation: nz-pipe 8s linear infinite;
}
@keyframes nz-pipe {
  from { left: 0; }
  to   { left: 100%; }
}

.stage { position: relative; padding-top: calc(var(--mod) + 2.6rem); }

.stage__module {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: var(--mod); height: var(--mod);
  border-radius: 15px;
  background: color-mix(in srgb, var(--board-ink) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--board-ink) 34%, transparent);
  /* The packet reaches module i at (12.5% + i * 25%) of the loop; the negative
     delay puts each module straight into the right phase on load. */
  animation: nz-mod 8s linear infinite;
  animation-delay: calc(var(--i) * 2s - 7s);
}
.stage__core {
  width: 40%; height: 40%;
  border-radius: 5px;
  background: color-mix(in srgb, var(--board-ink) 42%, transparent);
  animation: nz-mod-core 8s linear infinite;
  animation-delay: calc(var(--i) * 2s - 7s);
}
@keyframes nz-mod {
  0%, 7%    { border-color: var(--brand); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--brand) 80%, transparent); }
  22%, 100% { border-color: color-mix(in srgb, var(--board-ink) 34%, transparent); box-shadow: none; }
}
@keyframes nz-mod-core {
  0%, 7%    { background: var(--brand); transform: scale(1.15); }
  22%, 100% { background: color-mix(in srgb, var(--board-ink) 42%, transparent); transform: scale(1); }
}

.stage__drop {
  position: absolute;
  top: var(--mod); left: 50%;
  width: 1px; height: 2.6rem;
  translate: -50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--board-ink) 42%, transparent), transparent);
}

.stage__card {
  height: 100%;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: var(--r);
  background: var(--board-card);
  border: 1px solid var(--board-card-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.stage:hover .stage__card { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.stage__no {
  display: block;
  font-size: var(--t--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--brand);
  margin-bottom: .45rem;
}
.stage__title { font-size: var(--t-0); font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.stage__text { font-size: var(--t--1); line-height: 1.65; color: color-mix(in srgb, var(--board-ink) 66%, transparent); }

/* --- Services · audience and requirements --------------------------------- */

.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.svc-col__head,
.svc-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid color-mix(in srgb, var(--brand) 32%, transparent);
}
.svc-col__title,
.svc-card__title {
  font-size: clamp(1.2rem, .95rem + .9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.028em;
}
.svc-col__count,
.svc-card__count {
  font-size: var(--t--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--brand);
}

.audience { display: grid; }
.audience__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem;
  padding: 1rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-0);
  line-height: 1.5;
}
.audience__no {
  font-size: var(--t--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: color .3s var(--ease);
}
.audience__row:hover .audience__no { color: var(--brand); }
/* A rule fills in under the row being read. */
.audience__bar {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.audience__row:hover .audience__bar { transform: scaleX(1); }

.svc-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%),
    linear-gradient(155deg, var(--deep), color-mix(in srgb, var(--deep) 86%, var(--brand)));
  color: var(--deep-ink);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.svc-card__tick {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--brand);
  opacity: .6;
}
.svc-card__tick--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.svc-card__tick--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.svc-card__head { border-bottom-color: color-mix(in srgb, var(--brand) 45%, transparent); }

.checklist { display: grid; }
.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding-block: .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--deep-ink) 12%, transparent);
  font-size: var(--t--1);
  line-height: 1.55;
}
.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.checklist__box {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  animation: nz-tickin .5s var(--ease) both;
  animation-delay: calc(var(--i) * .07s);
}
@keyframes nz-tickin {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* --- Editorial · the two ledgers ------------------------------------------ */

/* One sheet, two ruled columns — and a deep one. Every other page in the site
   carries a dark instrument panel; without one this page reads as a different
   site, so the requirements are set on the panel rather than beside it. */
.sheet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%),
    linear-gradient(165deg, var(--deep), color-mix(in srgb, var(--deep) 86%, var(--brand)));
  color: var(--deep-ink);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sheet__tick {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--brand);
  opacity: .55;
  pointer-events: none;
}
.sheet__tick--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.sheet__tick--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.sheet__tick--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.sheet__tick--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

.ledger { display: grid; align-content: start; padding: clamp(2.1rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.8rem, 3.5vw, 2.6rem); }
.sheet > .ledger + .ledger { border-left: 1px solid color-mix(in srgb, var(--deep-ink) 12%, transparent); }

.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: .3rem;
  border-bottom: 2px solid var(--brand);
}
.ledger__title { font-size: var(--t-1); font-weight: 800; letter-spacing: -.024em; }
.ledger__count {
  font-size: var(--t--1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--brand);
}

.ledger__rows { display: grid; }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: baseline;
  gap: .3rem;
  padding: .85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--deep-ink) 11%, transparent);
  font-size: var(--t--1);
  line-height: 1.6;
  color: color-mix(in srgb, var(--deep-ink) 74%, transparent);
  transition: color .3s var(--ease);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row:hover { color: var(--deep-ink); }
/* A brand marker rides the left edge of the row being read. */
.ledger__row::before {
  content: '';
  position: absolute;
  left: -.9rem; top: .4rem; bottom: .4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.ledger__row:hover::before { transform: scaleY(1); }
.ledger__no {
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--deep-ink) 42%, transparent);
  transition: color .3s var(--ease);
}
.ledger__row:hover .ledger__no { color: var(--brand); }

/* --- Editorial · the policy -----------------------------------------------

   A numbered statute: the contents column sticks beside the clauses and tracks
   the reader, and each clause opens on its own ruled header. The clause titles
   are the contents, so the navigation costs no extra wording.
   -------------------------------------------------------------------------- */

.policy {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.policy__index { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.policy__index ol { display: grid; gap: .1rem; }
.policy__index a {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: .2rem;
  padding: .7rem .2rem .7rem .9rem;
  border-left: 2px solid var(--line);
  font-size: var(--t--1);
  line-height: 1.4;
  color: var(--faint);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.policy__index a:hover { color: var(--text); border-color: var(--line-2); }
.policy__index a.is-current { color: var(--text); border-color: var(--brand); font-weight: 600; }
.policy__no {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--faint);
  transition: color .3s var(--ease);
}
.policy__index a.is-current .policy__no { color: var(--brand); }

.policy__body { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); }

.clause { scroll-margin-top: calc(var(--header-h) + 2rem); }
/* Jumping from the contents marks the destination without needing script, so
   the link works even if the scroll tracking never runs. */
.clause:target .clause__no { color: var(--brand); }
.clause:target .clause__rule { background: var(--brand); }
.clause:target .clause__title { color: var(--brand); }
/* The index and a rule to the margin open every clause, the way a numbered
   section opens in print. */
.clause__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
}
.clause__no {
  font-size: var(--t-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand);
}
.clause__rule {
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, transparent), var(--line));
}
.clause__title { font-size: var(--t-2); font-weight: 800; letter-spacing: -.028em; margin-bottom: .7rem; }
.clause__text { color: var(--muted); font-size: var(--t-0); line-height: 1.78; max-width: 70ch; text-align: justify; }

.std-cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 1023px) {
  .pipeline__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.25rem); }
  /* Two columns means the rail no longer describes the row, so it steps back
     and each module keeps only its own drop line. */
  .pipeline__rail { display: none; }
}

@media (max-width: 899px) {
  .svc-split { grid-template-columns: minmax(0, 1fr); }
  .policy { grid-template-columns: minmax(0, 1fr); }
  /* On a narrow screen the contents column is navigation the reader does not
     need: the clauses are already the next thing on the page. */
  .policy__index { display: none; }
  .sheet { grid-template-columns: minmax(0, 1fr); }
  /* --line is a light-mode token and the sheet is deep, so the stacked
     divider follows the panel's own ink. */
  .sheet > .ledger + .ledger { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--deep-ink) 12%, transparent); padding-top: clamp(1.6rem, 4vw, 2.2rem); }
}

@media (max-width: 619px) {
  .pipeline__stages { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline__packet, .stage__module, .stage__core, .checklist__box { animation: none; }
  .pipeline__packet { opacity: 0; }
}

/* A page whose title is a full sentence rather than a phrase: the 22ch measure
   that suits "Editorial standards" turns the pricing line into five lines, so
   this variant widens the measure and steps the size down. */
/* A title that is a full sentence needs a wider measure than a phrase does;
   the size is the same as every other opener. */
.page-hero--sentence .page-hero__title { max-width: 38ch; }

/* ==========================================================================
   Justified body copy
   ========================================================================== */

/*
 * Every running paragraph is justified at every width. Narrow columns are the
 * hard case — without hyphenation a justified phone column opens rivers of
 * white space between words — so each of these also hyphenates, which the
 * <html lang="en"> on the page lets the browser do correctly.
 */
.advantage__text,
.adv-card__text,
.stage__text,
.flow__text,
.chain__text,
.clause__text,
.partners__aside .lede,
.faqs .faq__a p,
.node__text,
.plan__text {
  text-align: justify;
  text-justify: inter-word;
}

/* Three plans never divide evenly into the two columns a tablet can fit, so
   below the desktop breakpoint they stack rather than leaving one alone on a
   second row. */
@media (max-width: 1023px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
}

/* The trusted-by line measures 1192px against a 1192px column — right on the
   boundary, so it wrapped. A little tracking and a 6% step down give it the
   room to run unbroken on a laptop; below that it wraps as before. */
@media (min-width: 1200px) {
  .about__trusted {
    font-size: 1.18rem;
    letter-spacing: -.012em;
    white-space: nowrap;
  }
}