/* ---------------------------------------------------------
   SWISS COMPONENT LIBRARY — TOKENS
   Strict 12-col grid · Inter · hairline 1px lines · agnostic
   --------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Geometry */
  --max: 1440px;
  --cols: 12;
  --gutter: 24px;
  --pad-x: 32px;
  --hairline: 1px;
  --tap: 44px;

  /* Type scale */
  --t-label: 11px;     /* uppercase mono-ish labels */
  --t-eyebrow: 12px;
  --t-body-s: 13px;
  --t-body: 15px;
  --t-body-l: 17px;
  --t-h6: 18px;
  --t-h5: 22px;
  --t-h4: 28px;
  --t-h3: 36px;
  --t-h2: 56px;
  --t-h1: 88px;

  /* Weights */
  --w-r: 400;
  --w-m: 500;
  --w-s: 600;

  /* Theme — LIGHT default */
  --bg: #ffffff;
  --bg-2: #fafafa;
  --bg-3: #f4f4f4;
  --fg: #0a0a0a;
  --fg-2: #1a1a1a;
  --muted: #6b6b6b;
  --muted-2: #9a9a9a;
  --line: #e6e6e6;
  --line-2: #d4d4d4;
  --line-strong: #0a0a0a;
  --placeholder-bg: #ededed;
  --placeholder-fg: #9a9a9a;
  --placeholder-line: #d8d8d8;
  --chip-bg: #ffffff;
  --chip-fg: #0a0a0a;
  --chip-line: #e6e6e6;
  --chip-active-bg: #0a0a0a;
  --chip-active-fg: #ffffff;
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum";
  font-weight: var(--w-r);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: var(--hairline) solid var(--line); margin: 0; }
input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
}

/* ---- The grid container ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 0 var(--gutter);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* When .grid is nested inside .wrap, it should NOT add its own
   max-width / padding — .wrap already supplies them. This makes
   grids inside wraps align flush with other direct children of .wrap. */
.wrap .grid {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  width: 100%;
}

/* Column spans — set only the END so .s-N can drive START independently */
.c-1 { grid-column-end: span 1; } .c-2 { grid-column-end: span 2; }
.c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; }
.c-5 { grid-column-end: span 5; } .c-6 { grid-column-end: span 6; }
.c-7 { grid-column-end: span 7; } .c-8 { grid-column-end: span 8; }
.c-9 { grid-column-end: span 9; } .c-10 { grid-column-end: span 10; }
.c-11 { grid-column-end: span 11; } .c-12 { grid-column-end: span 12; }

/* Starts */
.s-1 { grid-column-start: 1; } .s-2 { grid-column-start: 2; }
.s-3 { grid-column-start: 3; } .s-4 { grid-column-start: 4; }
.s-5 { grid-column-start: 5; } .s-6 { grid-column-start: 6; }
.s-7 { grid-column-start: 7; } .s-8 { grid-column-start: 8; }
.s-9 { grid-column-start: 9; } .s-10 { grid-column-start: 10; }

/* Typography helpers */
.label {
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-m);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.muted { color: var(--muted); }
.h1 { font-size: var(--t-h1); font-weight: var(--w-r); letter-spacing: -0.035em; line-height: 0.98; margin: 0; }
.h2 { font-size: var(--t-h2); font-weight: var(--w-r); letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
.h3 { font-size: var(--t-h3); font-weight: var(--w-r); letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.h4 { font-size: var(--t-h4); font-weight: var(--w-m); letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
.h5 { font-size: var(--t-h5); font-weight: var(--w-m); letter-spacing: -0.005em; line-height: 1.2; margin: 0; }
.h6 { font-size: var(--t-h6); font-weight: var(--w-m); line-height: 1.3; margin: 0; }
.lead { font-size: var(--t-body-l); line-height: 1.5; color: var(--muted); }

/* Hairlines (used everywhere) */
.line-t { border-top: var(--hairline) solid var(--line); }
.line-b { border-bottom: var(--hairline) solid var(--line); }
.line-l { border-left: var(--hairline) solid var(--line); }
.line-r { border-right: var(--hairline) solid var(--line); }
.line-all { border: var(--hairline) solid var(--line); }

/* Buttons — minimal swiss */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: var(--hairline) solid var(--fg);
  color: var(--fg);
  background: transparent;
  font-size: var(--t-body-s);
  font-weight: var(--w-m);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn-solid {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-solid:hover { background: transparent; color: var(--fg); }
.btn-ghost {
  border-color: var(--line);
  color: var(--fg);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--fg); }
.btn-link {
  border: 0;
  padding: 0;
  height: auto;
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--fg);
  padding-bottom: 2px;
  background: none;
}
.btn-link:hover { background: none; color: var(--muted); border-color: var(--muted); }

/* Placeholder boxes */
.ph {
  position: relative;
  background: var(--placeholder-bg);
  border: var(--hairline) solid var(--placeholder-line);
  color: var(--placeholder-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.ph::before, .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ph::before {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--placeholder-line) calc(50% - 0.5px),
      var(--placeholder-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.ph::after {
  background:
    linear-gradient(to top left,
      transparent calc(50% - 0.5px),
      var(--placeholder-line) calc(50% - 0.5px),
      var(--placeholder-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.ph > .ph-label {
  position: relative;
  z-index: 1;
  background: var(--placeholder-bg);
  padding: 4px 8px;
  border: var(--hairline) solid var(--placeholder-line);
}

/* ---- Section chrome (the variant cycler bar) ---- */
.section-shell {
  padding-block: 32px;
}
.section-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  padding-inline: 16px;
  border-bottom: var(--hairline) solid var(--line);
}
.section-meta .left {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.section-meta .num-tag {
  font-size: var(--t-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.section-meta .title {
  font-size: var(--t-body);
  font-weight: var(--w-m);
  letter-spacing: 0;
}
.section-meta .desc {
  font-size: var(--t-body-s);
  color: var(--muted);
}

.variant-cycler {
  display: inline-flex;
  border: var(--hairline) solid var(--chip-line);
}
.variant-cycler button {
  height: 30px;
  padding: 0 12px;
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  border-right: var(--hairline) solid var(--chip-line);
  background: var(--chip-bg);
  color: var(--chip-fg);
  min-width: 44px;
}
.variant-cycler button:last-child { border-right: 0; }
.variant-cycler button[aria-pressed="true"] {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
}

/* PickBox — the per-section "pick this for step 2" toggle.
   Reads as a Swiss-style filled-square checkbox with a mono label. */
.pick-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 8px;
  border: var(--hairline) solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
  margin-left: 8px;
}
.pick-box:hover { background: var(--bg-3); }
.pick-box .pick-mark {
  width: 14px;
  height: 14px;
  border: var(--hairline) solid var(--fg);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.pick-box.is-picked {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.pick-box.is-picked .pick-mark {
  background: var(--fg);
  border-color: var(--bg);
  color: var(--bg);
}
.pick-box.is-picked:hover { background: var(--fg-2); }
.pick-box .pick-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pick-box .pick-variant {
  font-size: var(--t-label);
  opacity: 0.6;
}

/* Section gets a left-edge accent + tint when picked */
.section-shell.is-picked .section-meta {
  background: var(--bg-2);
  box-shadow: inset 3px 0 0 0 var(--fg);
}

/* App-level chrome */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--line);
  backdrop-filter: saturate(180%);
}
.app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding-inline: var(--pad-x);
  max-width: var(--max);
  margin-inline: auto;
}
.app-bar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
}
.app-bar .brand .mark {
  width: 16px; height: 16px;
  border: var(--hairline) solid var(--fg);
}
.app-bar .right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.theme-switch {
  display: inline-flex;
  border: var(--hairline) solid var(--line);
}
.theme-switch button {
  height: 28px;
  padding: 0 10px;
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  border-right: var(--hairline) solid var(--line);
}
.theme-switch button:last-child { border-right: 0; }
.theme-switch button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

/* App-bar step indicator */
.app-bar-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}
.app-bar-step-dot {
  width: 6px;
  height: 6px;
  background: var(--fg);
  display: inline-block;
}
@media (max-width: 720px) {
  .app-bar-step { display: none; }
}

/* ---------------------------------------------------------
   PICK SUMMARY BAR — sticky bottom drawer
   --------------------------------------------------------- */
.pick-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--bg);
  border-top: var(--hairline) solid var(--fg);
  box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.25);
}
.pick-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.pick-bar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  flex: 1 1 auto;
  text-align: left;
}
.pick-bar-toggle .label { color: var(--muted); }
.pick-bar-count {
  font-size: var(--t-h6);
  font-weight: var(--w-m);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.pick-bar-caret {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--hairline) solid var(--line);
  font-size: 14px;
  color: var(--fg);
  margin-left: 4px;
}
.pick-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pick-bar-list {
  max-height: 40dvh;
  overflow-y: auto;
  border-top: var(--hairline) solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--pad-x);
}
.pick-bar-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 12px 0;
  border-bottom: var(--hairline) solid var(--line);
  border-right: var(--hairline) solid var(--line);
}
.pick-bar-item .num-tag {
  font-size: var(--t-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.pick-bar-item .pick-bar-name {
  font-size: var(--t-body-s);
  color: var(--fg);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-bar-item .label { color: var(--fg); }
@media (max-width: 720px) {
  .pick-bar-inner { height: auto; padding-block: 12px; flex-wrap: wrap; }
  .pick-bar-actions .btn { padding: 0 10px; }
}

/* ---------------------------------------------------------
   SLIDERS — Embla viewport, controls, dots, arrows.
   Plus the logos marquee.
   --------------------------------------------------------- */
.embla {
  position: relative;
  overflow: hidden;
}
.embla__container {
  display: flex;
  backface-visibility: hidden;
  touch-action: pan-y pinch-zoom;
}
.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  padding-right: var(--gutter);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: var(--hairline) solid var(--line);
  margin-top: 24px;
}
.slider-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  flex: 0 0 auto;
}
.slider-counter {
  font-size: var(--t-body);
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
  color: var(--fg);
}
.slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}
.slider-dot {
  width: 22px;
  height: 6px;
  background: var(--line);
  transition: background .25s ease, width .25s ease;
}
.slider-dot.is-active {
  background: var(--fg);
  width: 36px;
}
.slider-arrows {
  display: inline-flex;
  gap: 0;
  flex: 0 0 auto;
  border: var(--hairline) solid var(--fg);
}
.slider-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.slider-arrow + .slider-arrow { border-left: var(--hairline) solid var(--fg); }
.slider-arrow:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.slider-arrow:disabled { opacity: 0.25; cursor: not-allowed; }

@media (max-width: 720px) {
  .slider-controls { flex-wrap: wrap; gap: 16px; }
  .slider-dots { order: 3; width: 100%; justify-content: flex-start; }
}

/* ---------- Logos marquee (auto-scrolling client wall) ---------- */
.logos-marquee {
  position: relative;
  overflow: hidden;
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  --marquee-fade: 96px;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--marquee-fade),
    black calc(100% - var(--marquee-fade)),
    transparent 100%
  );
}
.logos-marquee__track {
  display: flex;
  width: max-content;
  animation: logos-marquee 40s linear infinite;
}
.logos-marquee:hover .logos-marquee__track { animation-play-state: paused; }
.logos-marquee__item {
  flex: 0 0 auto;
  width: 200px;
  padding: 28px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--hairline) solid var(--line);
  color: var(--fg);
}
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-marquee__track { animation: none; }
}

/* ---------- Pick-bar entrance spring ---------- */
.pick-bar {
  animation: pick-bar-in 400ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes pick-bar-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.pick-bar-list {
  animation: pick-bar-list-in 350ms cubic-bezier(.4, 0, .2, 1);
  transform-origin: top;
}
@keyframes pick-bar-list-in {
  from { opacity: 0; transform: scaleY(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* Honor user motion preferences globally */
@media (prefers-reduced-motion: reduce) {
  .pick-bar, .pick-bar-list { animation: none; }
}

/* ---------------------------------------------------------
   MARQUEE — reusable infinite scroller, horizontal + vertical
   --------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  --marquee-speed: 40s;
  --marquee-gap: 48px;
  --marquee-fade: 96px;
}
.marquee:not(.marquee--vertical) {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--marquee-fade),
    black calc(100% - var(--marquee-fade)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--marquee-fade),
    black calc(100% - var(--marquee-fade)),
    transparent 100%
  );
}
.marquee.marquee--vertical {
  height: 100%;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--marquee-fade),
    black calc(100% - var(--marquee-fade)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--marquee-fade),
    black calc(100% - var(--marquee-fade)),
    transparent 100%
  );
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.marquee--vertical .marquee__track {
  flex-direction: column;
  width: 100%;
  height: max-content;
  align-items: stretch;
}
.marquee__item {
  flex: 0 0 auto;
  margin-right: var(--marquee-gap);
}
.marquee--vertical .marquee__item {
  margin-right: 0;
  margin-bottom: var(--marquee-gap);
}
.marquee--forward:not(.marquee--vertical) .marquee__track {
  animation: marquee-x var(--marquee-speed) linear infinite;
}
.marquee--reverse:not(.marquee--vertical) .marquee__track {
  animation: marquee-x var(--marquee-speed) linear infinite reverse;
}
.marquee--forward.marquee--vertical .marquee__track {
  animation: marquee-y var(--marquee-speed) linear infinite;
}
.marquee--reverse.marquee--vertical .marquee__track {
  animation: marquee-y var(--marquee-speed) linear infinite reverse;
}
.marquee--pause-hover:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-y {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
}

/* ---------------------------------------------------------
   ROULETTE / ODOMETER NUMBER
   --------------------------------------------------------- */
.reel-num {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
}
.reel-num .reel {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}
.reel-num .reel__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}
.reel-num .reel__digit {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.reel-num .reel-static,
.reel-num .reel-suffix {
  display: inline-block;
  line-height: 1;
}

/* ---------------------------------------------------------
   HERO E — inline plates that "stretch open" on reveal.
   Initial state set here; GSAP animates width back to size.
   --------------------------------------------------------- */
.hero-inline-plates .ph-inline {
  /* keep the rendered widths; the animation only needs an origin */
  transform-origin: left center;
}

/* HERO F — collage plates floating (GSAP infinite tween).
   Just give the plates a transform origin so rotation feels right. */
.hero-collage .plate {
  transform-origin: center center;
  will-change: transform;
}

/* HERO J — bottom rows replaced by full-bleed marquees */
.hero-stack .stack-marquees {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* HERO line-clip — used by HeroD lines-up reveal.
   Each line in the editorial H1 is wrapped in <span.hero-line> with overflow
   hidden; the inner span translates up from below the mask. */
.hero-line {
  display: block;
  overflow: hidden;
  line-height: inherit;
}
.hero-line-inner {
  display: block;
  will-change: transform;
}

/* HERO word-clip — used by HeroA center-rise split-text reveal.
   Each word in the H1 is wrapped in <span.hero-word> with overflow hidden;
   the inner translates from below its mask, staggered. */
.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.08;
  padding-bottom: 0.08em; /* descender clearance so g/y/p don't clip */
}
.hero-word-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* HERO char-split — used by HeroF reveal.
   Per-character spans, words stay inline-block to keep word-wrapping intact. */
.hero-word-keep {
  display: inline-block;
  white-space: nowrap;
}
.hero-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* HeroG — make sure the bg scale doesn't push the scrim out of frame */
.hero-bleed .bg {
  will-change: transform;
}

/* ---------------------------------------------------------
   ACCORDION — FAQ V05: rotating plus, sliding body
   --------------------------------------------------------- */
.acc-item {
  border-bottom: var(--hairline) solid var(--line);
}
.acc-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  transition: padding .25s ease;
}
.acc-trigger:hover .acc-q { color: var(--fg); }
.acc-num { color: var(--muted); }
.acc-q {
  font-size: var(--t-h5);
  font-weight: var(--w-m);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg);
  text-wrap: pretty;
}
.acc-plus {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  justify-self: end;
}
.acc-plus__bar {
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--fg);
  transition: transform 400ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease;
}
.acc-plus__bar--h {
  width: 22px;
  height: 2px;
}
.acc-plus__bar--v {
  width: 2px;
  height: 22px;
}
.acc-item.is-open .acc-plus__bar--v { transform: rotate(90deg); opacity: 0; }
.acc-item.is-open .acc-plus__bar--h { transform: rotate(180deg); }

.acc-body {
  overflow: hidden;
  height: 0;
  transition: height 400ms cubic-bezier(.2, .8, .2, 1);
}
.acc-body-inner {
  padding: 0 0 28px 0;
}
.acc-item.is-open .acc-trigger { padding-bottom: 16px; }

@media (max-width: 720px) {
  .acc-trigger { grid-template-columns: 32px 1fr 28px; gap: 14px; }
  .acc-q { font-size: var(--t-h6); }
}

/* ---------------------------------------------------------
   PRICING — hover affordance across siblings
   - .pricing-group is the wrapper of N .pricing-card siblings.
   - On group-hover, non-hovered cards dim + recede slightly.
   - Hovered card lifts, gains a subtle border emphasis and a
     bottom rule that wipes left-to-right.
   --------------------------------------------------------- */
.pricing-card {
  position: relative;
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    opacity 320ms ease,
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}
.pricing-card-rule {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.pricing-card-rule--strip {
  bottom: 0;
}
.pricing-card:hover .pricing-card-rule { transform: scaleX(1); }

/* Card grid (PricingA): hovered card lifts; siblings fade & recede */
.pricing-group:hover .pricing-card:not(:hover) {
  opacity: 0.42;
  transform: scale(0.985);
}
.pricing-group .pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--fg) !important;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

/* Strips (PricingD): horizontal slide of an inset rail + faint tint */
.pricing-strips .pricing-card { padding-inline: 16px; }
.pricing-strips:hover .pricing-strip:not(:hover) {
  opacity: 0.45;
}
.pricing-strips .pricing-strip:hover {
  background: var(--bg-2) !important;
  transform: translateX(8px);
}
.pricing-strips .pricing-strip:hover .btn:not(.btn-solid) {
  background: var(--fg);
  color: var(--bg);
}

/* Featured plan: keep its emphasis even when another is hovered (lower the dim) */
.pricing-group:hover .pricing-card.is-featured:not(:hover) {
  opacity: 0.65;
}

/* Buttons inside cards: subtle hover-color swap (already styled globally but
   we want them to feel reactive when the card lifts) */
.pricing-card .btn { transition: background 220ms ease, color 220ms ease, transform 220ms ease; }

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card-rule,
  .pricing-strip {
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   BLOG HEADER — hover affordances
   - V02 (BlogHeaderB): big featured card on the left, latest list on right
   - V04 (BlogHeaderD): category index rows on the right
   --------------------------------------------------------- */

/* V02 — Featured card: image zooms, title becomes underlined */
.bh-feature { transition: opacity .3s ease; }
.bh-feature__media {
  overflow: hidden;
  margin-bottom: 12px;
}
.bh-feature__media .ph {
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
  transform-origin: center;
}
.bh-feature:hover .ph { transform: scale(1.04); }
.bh-feature__title {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 500ms cubic-bezier(.2, .8, .2, 1);
  padding-bottom: 4px;
}
.bh-feature:hover .bh-feature__title { background-size: 100% 1px; }

/* V02 — Latest list: row slides, gains arrow, title underlines, siblings dim */
.bh-list { /* container */ }
.bh-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 20px 36px 20px 0;
  border-bottom: var(--hairline) solid var(--line);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 320ms ease, padding 320ms ease;
}
.bh-list__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bh-list__title {
  font-size: var(--t-h6);
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
  color: var(--fg);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 500ms cubic-bezier(.2, .8, .2, 1);
  padding-bottom: 2px;
  width: max-content;
  max-width: 100%;
}
.bh-list__arrow {
  position: absolute;
  right: 0;
  bottom: 22px;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.bh-list:hover .bh-list__item:not(:hover) { opacity: 0.45; }
.bh-list__item:hover {
  transform: translateX(6px);
  padding-left: 8px;
}
.bh-list__item:hover .bh-list__title { background-size: 100% 1px; }
.bh-list__item:hover .bh-list__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* V04 — Category index: arrow slides in, label translates right */
.bh-cats { /* the panel */ }
.bh-cat {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 14px 4px;
  border-top: var(--hairline) solid var(--line);
  color: var(--fg);
  transition: background 280ms ease;
}
.bh-cat__arrow {
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.bh-cat__name {
  font-size: var(--t-body);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
  transform-origin: left center;
}
.bh-cat__count {
  font-variant-numeric: tabular-nums;
  transition: color 280ms ease;
}
.bh-cats:hover .bh-cat:not(:hover) { opacity: 0.5; }
.bh-cat:hover {
  background: var(--bg-2);
}
.bh-cat:hover .bh-cat__arrow {
  opacity: 1;
  transform: translateX(0);
}
.bh-cat:hover .bh-cat__name {
  transform: translateX(4px);
}
.bh-cat:hover .bh-cat__count {
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .bh-feature__media .ph,
  .bh-feature__title,
  .bh-list__item,
  .bh-list__title,
  .bh-list__arrow,
  .bh-cat,
  .bh-cat__arrow,
  .bh-cat__name {
    transition: none !important;
  }
}

/* =========================================================
   GLOBAL HOVER LAYER — additive rules that style existing
   markup patterns across all sections. No component file
   edits required.
   ========================================================= */

/* Reusable transition envelope on placeholders.
   .ph elements get overflow:hidden inside link cards so the
   scale animation is clipped to the frame. */
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .ph {
  overflow: hidden;
  transition: filter 320ms ease;
}
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .ph::after {
  /* The Placeholder uses a CSS-painted background — the safest scaling target
     is the whole element. Use a child wrapper if needed. */
}
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) {
  --link-img-scale: 1;
  transition: opacity 320ms ease;
}
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .ph {
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
  transform-origin: center;
  will-change: transform;
}
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):hover .ph {
  transform: scale(1.035);
}

/* Heading underline-sweep on link hover.
   Applies to h3-h6 utility classes inside anchor cards. */
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .h3,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .h4,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .h5,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2) .h6 {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 320ms ease;
}
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):hover .h3,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):hover .h4,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):hover .h5,
.section-body a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):hover .h6 {
  text-decoration-color: currentColor;
}

/* Row links — anchors that ARE a grid (table-style listings).
   Used by: BlogSectionsB, CareersA "Open ↗" rows, CareersD, BlogHeader filter rows. */
.section-body .line-t > a.grid,
.section-body .line-t > .line-t > a.grid {
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    background 320ms ease,
    opacity 320ms ease,
    padding-inline 320ms ease;
  position: relative;
}
.section-body .line-t:hover > a.grid:not(:hover) { opacity: 0.45; }
.section-body .line-t > a.grid:hover {
  background: var(--bg-2);
  padding-inline: 12px !important;
}
/* Reveal a small "→" indicator on the right edge of hovered grid rows that
   don't already have one. Inserted via ::after; we mark it as a hover-only
   affordance. */
.section-body .line-t > a.grid::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  font-size: 16px;
  color: var(--fg);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.section-body .line-t > a.grid:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* List-style stacked links (block anchors inside .line-t containers, NOT grid).
   Used by: BlogSectionsA/C/D, CareersB/C, BlogHeader latest writing, FAQ links etc.
   We avoid the bh-list (already styled) and the btn-link family. */
.section-body .line-t > a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):not(.grid):not(.bh-list__item) {
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    background 320ms ease,
    opacity 320ms ease,
    padding-left 320ms cubic-bezier(.2, .8, .2, 1);
}
.section-body .line-t:hover > a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):not(.grid):not(:hover):not(.bh-list__item) {
  opacity: 0.5;
}
.section-body .line-t > a:not(.btn):not(.btn-solid):not(.btn-link):not(.btn-link2):not(.grid):not(.bh-list__item):hover {
  padding-left: 8px;
  background: var(--bg-2);
}

/* Card grid anchors that AREN'T inside a .line-t (e.g. Gallery 3-up,
   BlogSectionsA grid cards): subtle lift + image scale already applied above.
   Add a soft shadow on hover. */
.section-body .grid > a.c-4:not(.btn):not(.btn-solid):not(.btn-link),
.section-body .grid > a.c-3:not(.btn):not(.btn-solid):not(.btn-link),
.section-body .grid > a.c-6:not(.btn):not(.btn-solid):not(.btn-link),
.section-body .grid > a.c-7:not(.btn):not(.btn-solid):not(.btn-link) {
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 320ms ease,
    opacity 320ms ease;
}
.section-body .grid:hover > a.c-4:not(:hover),
.section-body .grid:hover > a.c-3:not(:hover),
.section-body .grid:hover > a.c-6:not(:hover),
.section-body .grid:hover > a.c-7:not(:hover) {
  opacity: 0.55;
}
.section-body .grid > a.c-4:hover,
.section-body .grid > a.c-3:hover,
.section-body .grid > a.c-6:hover,
.section-body .grid > a.c-7:hover {
  transform: translateY(-4px);
}

/* btn-link sweep — refine the existing affordance so hovering it
   draws the underline left to right. */
.section-body .btn-link {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 420ms cubic-bezier(.2, .8, .2, 1), color .2s ease;
  text-decoration: none;
}
.section-body .btn-link:hover { background-size: 100% 1px; }

/* Blog post B sidebar marginalia — the originally-commented element.
   Notes are <div>s, not links — give them a soft hover-highlight to
   show the relationship to the article body. */
.section-body .col-rail-pl > div,
.section-body .col-rail-pr > div {
  transition: background 240ms ease, padding 240ms ease;
}
.section-body .col-rail-pl > div:hover,
.section-body .col-rail-pr > div:hover {
  background: var(--bg-2);
  padding-inline: 12px;
}

/* Modals close buttons / inline buttons that aren't .btn: subtle bg pulse */
.section-body button:not(.btn):not(.btn-solid):not(.btn-link):not(.pick-box):not(.slider-arrow):not(.slider-dot):not(.acc-trigger):not([aria-pressed]) {
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

/* Footer columns — heading + list pattern: links inside footer get the
   global underline-sweep too. */
footer a:not(.btn):not(.btn-solid):not(.btn-link) {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 300ms ease, color 250ms ease;
}
footer a:not(.btn):not(.btn-solid):not(.btn-link):hover {
  text-decoration-color: currentColor;
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .section-body a,
  .section-body .ph,
  .section-body .btn-link,
  .col-rail-pl > div,
  .col-rail-pr > div,
  footer a {
    transition: none !important;
  }
  .section-body .line-t > a.grid::after { display: none; }
}

/* Intro block */
.intro {
  padding-block: 64px;
  border-bottom: var(--hairline) solid var(--line);
}
.intro .grid > .head { grid-column: 1 / span 12; }
.intro .meta-row {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.intro .meta-row .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.intro .meta-row .item .k { font-size: var(--t-label); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.intro .meta-row .item .v { font-size: var(--t-body); color: var(--fg); }

/* Padding helpers */
.pad-v-xl { padding-block: 96px; }
.pad-v-l  { padding-block: 72px; }
.pad-v-m  { padding-block: 48px; }
.pad-v-s  { padding-block: 32px; }

/* Optional grid overlay (toggleable) */
[data-grid="on"] .grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 0 var(--gutter);
}
[data-grid="on"] .grid-overlay > span {
  background: rgba(255, 80, 80, 0.06);
  border-left: 1px dashed rgba(255, 80, 80, 0.3);
  border-right: 1px dashed rgba(255, 80, 80, 0.3);
}

/* ---------------------------------------------------------
   COMPONENT-SPECIFIC LAYOUTS
   --------------------------------------------------------- */

/* NAVBAR */
.nav-box { width: 100%; }
.nav-row {
  display: flex;
  align-items: center;
  height: 64px;
  padding-inline: var(--pad-x);
  gap: 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
  font-size: var(--t-body);
}
.nav-logo .mark {
  width: 18px; height: 18px;
  border: var(--hairline) solid var(--fg);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a {
  font-size: var(--t-body-s);
  color: var(--fg);
}
.nav-links a:hover { color: var(--muted); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* NAV — dropdown triggers ----------------------------------------------- */
.nav-link {
  font-size: var(--t-body-s);
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--muted); }
.nav-link--trigger .nav-caret {
  width: 8px;
  height: 8px;
  border-right: var(--hairline) solid currentColor;
  border-bottom: var(--hairline) solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-link--trigger.is-open .nav-caret {
  transform: translateY(1px) rotate(-135deg);
}
.nav-link--trigger.is-open {
  color: var(--fg);
}
.nav-link--trigger.is-open::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -22px;
  height: 2px;
  background: var(--fg);
}

/* NAV — dropdown panel base --------------------------------------------- */
.nav-dd {
  background: var(--bg);
  animation: nav-dd-in 280ms cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes nav-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dd-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 32px var(--pad-x);
}
.nav-dd-grid {
  display: grid;
  gap: 0;
}
.nav-dd-col {
  padding-right: 24px;
}
.nav-dd-col + .nav-dd-col {
  padding-left: 24px;
  border-left: var(--hairline) solid var(--line);
}
.nav-dd-col-head {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.nav-dd-col-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* dropdown items -------------------------------------------------------- */
.nav-dd-item,
.nav-dd-flat {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 8px 10px 0;
  color: var(--fg);
  transition: background .2s ease, padding .2s ease, opacity .2s ease;
}
.nav-dd-item:hover,
.nav-dd-flat:hover {
  background: var(--bg-2);
  padding-left: 8px;
}
.nav-dd-col-items:hover .nav-dd-item:not(:hover),
.nav-dd-grid--c:hover .nav-dd-flat:not(:hover) { opacity: 0.55; }

.nav-dd-icon {
  width: 28px;
  height: 28px;
  border: var(--hairline) solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--bg);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.nav-dd-item:hover .nav-dd-icon,
.nav-dd-flat:hover .nav-dd-icon {
  border-color: var(--fg);
  color: var(--fg);
}

.nav-dd-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-dd-item-name {
  font-size: var(--t-body-s);
  font-weight: var(--w-m);
  color: var(--fg);
  letter-spacing: -0.005em;
}
.nav-dd-item-desc {
  font-size: var(--t-label);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Dropdown A — 2 groups + featured journal */
.nav-dd-grid--a {
  grid-template-columns: 1fr 1fr 1.15fr;
}
.nav-dd-feature {
  padding-left: 28px;
}
.nav-dd-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.nav-dd-feat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--fg);
}
.nav-dd-feat-card .ph { width: 100%; }
.nav-dd-feat-meta {
  margin-top: 10px;
}
.nav-dd-feat-title {
  font-size: var(--t-body);
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.nav-dd-feat-excerpt {
  font-size: var(--t-label);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}
.nav-dd-feat-all {
  display: inline-block;
  margin-top: 18px;
  color: var(--fg) !important;
}

/* Dropdown B — 4 page groups + footer CTA strip */
.nav-dd-grid--b {
  grid-template-columns: repeat(4, 1fr);
}
.nav-dd-strip {
  background: var(--bg-2);
}
.nav-dd-strip-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-dd-strip--quiet { background: transparent; }

/* Dropdown C — flat 4-column */
.nav-dd-grid--c {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.nav-dd-grid--c .nav-dd-flat {
  padding: 14px;
  border: var(--hairline) solid var(--line);
  background: var(--bg);
}
.nav-dd-grid--c .nav-dd-flat:hover {
  border-color: var(--fg);
  background: var(--bg);
}

/* Dropdown D — categories rail + featured articles */
.nav-dd-grid--d {
  grid-template-columns: 1fr 2.2fr;
}
.nav-dd-rail {
  padding-right: 28px;
}
.nav-dd-rail-list {
  display: flex;
  flex-direction: column;
}
.nav-dd-rail-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 4px;
  border-top: var(--hairline) solid var(--line);
  color: var(--fg);
  transition: padding-left .2s ease, background .2s ease;
}
.nav-dd-rail-item:last-child { border-bottom: var(--hairline) solid var(--line); }
.nav-dd-rail-item:hover {
  padding-left: 12px;
  background: var(--bg-2);
}
.nav-dd-rail-name { font-size: var(--t-body-s); }
.nav-dd-rail-count { font-size: var(--t-label); color: var(--muted); }

.nav-dd-articles {
  padding-left: 28px;
}
.nav-dd-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.nav-dd-art { color: var(--fg); }
.nav-dd-art .ph { width: 100%; }
.nav-dd-art-title {
  font-size: var(--t-body-s);
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-top: 4px;
}

/* Dropdown E — link columns + image promos on the right */
.nav-dd-grid--e {
  grid-template-columns: 1fr 1fr 1.9fr;
}
.nav-dd-promo {
  padding-left: 32px;
}
.nav-dd-promo-head { margin-bottom: 18px; }
.nav-dd-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.nav-dd-promo-card {
  display: flex;
  flex-direction: column;
  color: var(--fg);
}
.nav-dd-promo-card .ph { width: 100%; }
.nav-dd-promo-meta { margin-top: 12px; }
.nav-dd-promo-title {
  font-size: var(--t-body);
  font-weight: var(--w-m);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 6px;
}
.nav-dd-promo-all {
  display: inline-block;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .nav-dd-inner { padding: 20px var(--pad-x); }
  .nav-dd-grid--a,
  .nav-dd-grid--b,
  .nav-dd-grid--c,
  .nav-dd-grid--d,
  .nav-dd-grid--e { grid-template-columns: 1fr; }
  .nav-dd-col + .nav-dd-col { padding-left: 0; border-left: 0; border-top: var(--hairline) solid var(--line); padding-top: 18px; margin-top: 18px; }
  .nav-dd-feature, .nav-dd-articles, .nav-dd-rail, .nav-dd-promo { padding-left: 0; }
  .nav-dd-feature-list, .nav-dd-articles-grid { grid-template-columns: 1fr 1fr; }
  .nav-dd-promo { border-left: 0; border-top: var(--hairline) solid var(--line); padding-top: 18px; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dd, .nav-link--trigger .nav-caret { animation: none; transition: none; }
}

/* HERO */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--fg);
  border-radius: 50%;
}

/* Hero — inline-in-heading placeholder (sized in em, scales with type) */
.ph-inline {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1.4em;
  height: 0.86em;
  margin: 0 0.18em;
  background: var(--placeholder-bg);
  border: var(--hairline) solid var(--placeholder-line);
  position: relative;
  overflow: hidden;
}
.ph-inline::before, .ph-inline::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ph-inline::before {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--placeholder-line) calc(50% - 0.5px),
      var(--placeholder-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.ph-inline::after {
  background:
    linear-gradient(to top left,
      transparent calc(50% - 0.5px),
      var(--placeholder-line) calc(50% - 0.5px),
      var(--placeholder-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.ph-inline.wide { width: 1.8em; }
.ph-inline.tall { width: 1em; height: 1em; vertical-align: -0.2em; }

/* Hero — scattered collage stage (centered card + drifting plates) */
.hero-collage {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-collage .card {
  position: relative;
  z-index: 3;
  padding: 48px 56px;
  max-width: 820px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-collage .plate {
  position: absolute;
  z-index: 1;
}
.hero-collage .plate.z-2 { z-index: 2; }

/* Hero — full-bleed image background */
.hero-bleed {
  position: relative;
  height: clamp(560px, 78dvh, 820px);
  display: flex;
  align-items: end;
  --bleed-bg: #1a1a1a;
  --bleed-line: #4a4a4a;
  --bleed-label-fg: #c4c4c4;
}
.hero-bleed .bg {
  position: absolute;
  inset: 0;
  background: var(--bleed-bg);
  border-bottom: var(--hairline) solid var(--bleed-line);
  overflow: hidden;
}
.hero-bleed .bg::before, .hero-bleed .bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hero-bleed .bg::before {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--bleed-line) calc(50% - 0.5px),
      var(--bleed-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.hero-bleed .bg::after {
  background:
    linear-gradient(to top left,
      transparent calc(50% - 0.5px),
      var(--bleed-line) calc(50% - 0.5px),
      var(--bleed-line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
.hero-bleed .bg .ph-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--bleed-bg);
  border: var(--hairline) solid var(--bleed-line);
  padding: 8px 14px;
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bleed-label-fg);
}
.hero-bleed .bg .corner-tag {
  position: absolute;
  top: 24px;
  left: 32px;
  z-index: 2;
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleed-label-fg);
  font-variant-numeric: tabular-nums;
}
.hero-bleed .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.78) 100%);
  z-index: 2;
}
.hero-bleed .content {
  position: relative;
  z-index: 3;
  width: 100%;
  color: #fafafa;
  padding-block: 48px;
}
.hero-bleed .content .h1,
.hero-bleed .content .lead,
.hero-bleed .content .label { color: #fafafa; }
.hero-bleed .content .lead { color: rgba(250,250,250,0.78); }
.hero-bleed .content .btn { border-color: #fafafa; color: #fafafa; }
.hero-bleed .content .btn:hover { background: #fafafa; color: #0a0a0a; }
.hero-bleed .content .btn-solid { background: #fafafa; color: #0a0a0a; border-color: #fafafa; }
.hero-bleed .content .btn-solid:hover { background: transparent; color: #fafafa; }

/* Hero — bento cluster (text left, image grid right) */
.hero-bento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.hero-bento .bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 90px;
  gap: 12px;
}
.hero-bento .bento-grid .ph { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-bento .b1 { grid-column: span 3; grid-row: span 3; }
.hero-bento .b2 { grid-column: span 3; grid-row: span 2; }
.hero-bento .b3 { grid-column: span 2; grid-row: span 2; }
.hero-bento .b4 { grid-column: span 4; grid-row: span 2; }
.hero-bento .b5 { grid-column: span 2; grid-row: span 2; }
.hero-bento .b6 { grid-column: span 4; grid-row: span 2; }

@media (max-width: 900px) {
  .hero-collage { min-height: 480px; }
  .hero-collage .card { padding: 32px 24px; max-width: 100%; }
  .hero-collage .plate { display: none; }
  .hero-collage .plate.keep { display: block; }
  .hero-bento { grid-template-columns: 1fr; gap: 32px; }
  .hero-bento .bento-grid { grid-auto-rows: 70px; }
  .hero-bleed { height: clamp(440px, 70dvh, 600px); }
}

/* Hero — frame gallery (text card centered, image grid wraps around as frame) */
.hero-frame {
  position: relative;
  background: transparent;
  padding: 32px;
}
.hero-frame .frame-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 20px;
}
.hero-frame .frame-grid .ph { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-frame .frame-grid .card {
  grid-column: 2 / span 5;
  grid-row: 2 / span 3;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  align-self: center;
  z-index: 2;
}
/* Frame tiles: arrange a ring of 12 plates around the card */
.hero-frame .f1  { grid-column: 1  / span 3; grid-row: 1 / span 1; }
.hero-frame .f2  { grid-column: 4  / span 4; grid-row: 1 / span 1; }
.hero-frame .f3  { grid-column: 8  / span 3; grid-row: 1 / span 2; }
.hero-frame .f4  { grid-column: 11 / span 2; grid-row: 1 / span 1; }
.hero-frame .f5  { grid-column: 7  / span 2; grid-row: 2 / span 2; }
.hero-frame .f6  { grid-column: 9  / span 2; grid-row: 3 / span 2; }
.hero-frame .f7  { grid-column: 11 / span 2; grid-row: 2 / span 3; }
.hero-frame .f8  { grid-column: 1  / span 3; grid-row: 5 / span 1; }
.hero-frame .f9  { grid-column: 4  / span 3; grid-row: 5 / span 1; }
.hero-frame .f10 { grid-column: 7  / span 3; grid-row: 5 / span 1; }
.hero-frame .f11 { grid-column: 10 / span 3; grid-row: 5 / span 1; }

/* Hero — stacked gallery (centered card on top, wide image rows below) */
.hero-stack {
  background: transparent;
  padding: 64px 32px 32px;
}
.hero-stack .stack-card {
  background: var(--bg);
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 48px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.hero-stack .stack-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-stack .stack-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  grid-auto-rows: 160px;
}
.hero-stack .stack-row .ph { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-stack .stack-row.row-a .a1 { grid-column: span 5; grid-row: span 1; }
.hero-stack .stack-row.row-a .a2 { grid-column: span 4; grid-row: span 1; }
.hero-stack .stack-row.row-a .a3 { grid-column: span 3; grid-row: span 1; }
.hero-stack .stack-row.row-b .b1 { grid-column: span 3; grid-row: span 1; }
.hero-stack .stack-row.row-b .b2 { grid-column: span 5; grid-row: span 1; }
.hero-stack .stack-row.row-b .b3 { grid-column: span 4; grid-row: span 1; }

@media (max-width: 900px) {
  .hero-frame { padding: 20px; }
  .hero-frame .frame-grid { grid-auto-rows: 70px; gap: 12px; }
  .hero-frame .frame-grid .card { grid-column: 1 / -1; grid-row: auto; padding: 28px 24px; }
  .hero-frame .f1, .hero-frame .f2, .hero-frame .f3, .hero-frame .f4,
  .hero-frame .f5, .hero-frame .f6, .hero-frame .f7, .hero-frame .f8,
  .hero-frame .f9, .hero-frame .f10, .hero-frame .f11 {
    grid-column: span 6; grid-row: auto;
  }
  .hero-stack { padding: 32px 16px; }
  .hero-stack .stack-card { padding: 28px 24px; }
  .hero-stack .stack-row { grid-auto-rows: 110px; gap: 12px; }
  .hero-stack .stack-row.row-a .a1, .hero-stack .stack-row.row-a .a2, .hero-stack .stack-row.row-a .a3,
  .hero-stack .stack-row.row-b .b1, .hero-stack .stack-row.row-b .b2, .hero-stack .stack-row.row-b .b3 {
    grid-column: span 6;
  }
}

/* FEATURES */
.feature-cell {
  padding: 32px 24px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-cell .num {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.feature-cell .ttl {
  font-size: var(--t-h6);
  font-weight: var(--w-m);
  letter-spacing: -0.005em;
}
.feature-cell .body {
  font-size: var(--t-body-s);
  color: var(--muted);
}

/* GALLERY */
.gal-cap {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 8px;
}

/* CONTACT */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 16px;
  border-bottom: var(--hairline) solid var(--line);
}
.field label {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  font-size: var(--t-body-l);
  color: var(--fg);
  padding: 4px 0;
  width: 100%;
}
.field textarea { resize: none; min-height: 64px; }

/* FOOTER */
.foot-link {
  font-size: var(--t-body-s);
  color: var(--fg);
  display: block;
  padding-block: 6px;
}
.foot-link:hover { color: var(--muted); }
.foot-h {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Placeholder fill mode (used for bento + uniform-height rows) */
.ph.fill { width: 100%; height: 100%; aspect-ratio: auto; }

/* Full-bleed breakout (escapes the .wrap max-width to span 100dvw) */
.full-bleed {
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
}

/* Giant edge-to-edge wordmark — fills the viewport horizontally */
.wordmark-bleed {
  font-size: 17.1dvw;
  letter-spacing: -0.06em;
  line-height: 0.86;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  display: block;
}

/* Bento grid container */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: var(--gutter);
}

/* Uniform-height row utility — children fill the row's height */
.row-uniform {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}
.row-uniform > * { display: flex; flex-direction: column; }
.row-uniform .ph { flex: 1 1 auto; aspect-ratio: auto; }

/* Six-up timeline rail — collapses cleanly */
.t-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Column-divider rail — vertical hairline between columns on desktop,
   drops to a top hairline (or nothing) when the grid collapses to a stack. */
.col-rail-r { border-right: var(--hairline) solid var(--line); }
.col-rail-pl { padding-left: 24px; }
.col-rail-pr { padding-right: 24px; }

/* Sticky TOC sidebar — releases on mobile so it doesn't jam at the top */
.toc-sticky {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* Mid breakpoint — keep grid, soften padding */
@media (max-width: 1100px) {
  :root { --pad-x: 24px; }
}

/* Small screens — collapse 12-col into a single stack */
@media (max-width: 900px) {
  :root { --pad-x: 20px; --gutter: 16px; }
  .h1 { font-size: 56px; }
  .h2 { font-size: 40px; }
  .h3 { font-size: 28px; }
  /* Every column span collapses to full width */
  .c-1, .c-2, .c-3, .c-4, .c-5, .c-6,
  .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 {
    grid-column: 1 / -1;
  }
  /* Reset every column start */
  .s-2, .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10 {
    grid-column-start: auto;
  }
  /* Section meta toolbar wraps */
  .section-meta { flex-wrap: wrap; }
  .bento { grid-auto-rows: 140px; }
  /* Six-up timeline rail collapses to a 2-col grid */
  .t-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Column-rail dividers don't make sense when columns are stacked.
     Strip the vertical hairline + the offset padding. */
  .col-rail-r { border-right: 0; }
  .col-rail-pl { padding-left: 0; }
  .col-rail-pr { padding-right: 0; }
  .toc-sticky { position: static; }
  /* Same idea for utility .line-r / .line-l on collapsed columns */
  .grid > .line-r { border-right: 0; }
  .grid > .line-l { border-left: 0; }
}

/* Tiny — make the section meta vertical */
@media (max-width: 640px) {
  .section-meta { flex-direction: column; align-items: stretch; }
  .section-meta .left { flex-wrap: wrap; }
}

/* ---------------------------------------------------------
   LOADING PAGES — 4 variants
   Full-bleed, high-motion. Each variant wraps in .loader and
   takes 100dvw × ~92dvh. V02 + V04 invert to a dark surface.
   --------------------------------------------------------- */
.loader {
  position: relative;
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
  min-height: 92dvh;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --hair: var(--hairline) solid var(--fg);
  --hair-mute: var(--hairline) solid var(--line);
}
.loader .label .dot,
.loader .num .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Shared hairline progress bar */
.loader-counter-bar {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader-counter-bar--thin { height: 1px; }
.loader-counter-bar--fat  { height: 3px; background: var(--line-2); }
.loader-counter-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: left center;
}

/* Top + bottom meta rows */
.loader-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  border-bottom: var(--hair-mute);
  gap: 24px;
}

/* ============== V01 — MEGA COUNTER ============== */
.loader-counter {
  background: var(--bg);
}
.loader-counter .loader-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px var(--pad-x);
  text-align: center;
}
.loader-overline {
  letter-spacing: 0.12em;
}
.loader-counter-stack {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  line-height: 0.82;
}
.loader-counter-num {
  font-size: clamp(180px, 26dvw, 460px);
  font-weight: var(--w-r);
  letter-spacing: -0.06em;
  line-height: 0.82;
}
.loader-counter-pct {
  font-size: clamp(40px, 5dvw, 90px);
  letter-spacing: -0.03em;
  margin-top: 0.4em;
  margin-left: 0.12em;
  color: var(--muted);
}
.loader-counter .loader-counter-bar {
  width: min(80dvw, 980px);
  height: 2px;
}
.loader-counter .loader-counter-bar__fill { background: var(--fg); }

.loader-status {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
}
.loader-status-mask {
  display: inline-block;
  overflow: hidden;
  font-size: var(--t-h5);
  height: 1.45em;
  line-height: 1.45;
  vertical-align: bottom;
  min-width: 9ch;
  text-align: left;
}
.loader-status-word {
  display: inline-block;
  font-size: var(--t-h5);
  font-weight: var(--w-m);
  letter-spacing: 0.04em;
  will-change: transform, opacity;
}

.loader-bottom {
  border-top: var(--hair-mute);
  padding: 22px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loader-bottom-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.loader-bottom-num {
  font-size: var(--t-h5);
  font-weight: var(--w-r);
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* ============== V02 — BUILD LOG (dark) ============== */
.loader-log {
  background: #0a0a0a;
  color: #fafafa;
  --hair-mute: var(--hairline) solid #1f1f1f;
  --hair: var(--hairline) solid #fafafa;
  --log-mute: #9a9a9a;
  --log-faint: #5a5a5a;
}
.loader-log .label { color: var(--log-mute); }
.loader-log .label.muted,
.loader-log .num.muted { color: var(--log-faint); }
.loader-log .loader-counter-bar { background: #1f1f1f; }
.loader-log .loader-counter-bar__fill { background: #fafafa; }

.loader-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  border-bottom: var(--hair-mute);
  gap: 24px;
}
.loader-log-head-left, .loader-log-head-right {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.loader-log-dot {
  width: 8px; height: 8px;
  background: #00cc77;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 204, 119, 0.18);
  animation: loader-log-dot 1.4s ease-in-out infinite;
}
@keyframes loader-log-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(0, 204, 119, 0.18); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 8px rgba(0, 204, 119, 0); }
}

.loader-log-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-bottom: var(--hair-mute);
  min-height: 0;
}

.loader-log-stream {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: var(--hair-mute);
}
.loader-log-stream-mask {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.loader-log-stream-mask::before,
.loader-log-stream-mask::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 96px;
  pointer-events: none;
  z-index: 2;
}
.loader-log-stream-mask::before {
  top: 0;
  background: linear-gradient(180deg, #0a0a0a, transparent);
}
.loader-log-stream-mask::after {
  bottom: 0;
  background: linear-gradient(0deg, #0a0a0a, transparent);
}
.loader-log-stream-inner {
  will-change: transform;
}
.loader-log-row {
  display: grid;
  grid-template-columns: 60px 100px 1fr 64px;
  align-items: center;
  gap: 16px;
  padding: 7px 32px;
  font-size: var(--t-body-s);
  color: var(--log-mute);
  border-bottom: var(--hairline) solid #131313;
  white-space: nowrap;
  overflow: hidden;
}
.loader-log-row-num { color: var(--log-faint); }
.loader-log-row-tag {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--log-faint);
}
.loader-log-row-path {
  color: #c4c4c4;
  text-overflow: ellipsis;
  overflow: hidden;
}
.loader-log-row-size {
  color: var(--log-faint);
  text-align: right;
  font-size: var(--t-label);
}
.loader-log-row.is-active {
  background: #131313;
  color: #fafafa;
}
.loader-log-row.is-active .loader-log-row-num,
.loader-log-row.is-active .loader-log-row-tag,
.loader-log-row.is-active .loader-log-row-path,
.loader-log-row.is-active .loader-log-row-size {
  color: #fafafa;
}
.loader-log-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-top: var(--hair-mute);
  font-size: var(--t-body-s);
  color: #ededed;
  background: #050505;
}
.loader-cursor {
  display: inline-block;
  width: 9px;
  height: 1em;
  background: #fafafa;
  vertical-align: -2px;
  animation: loader-blink 1s steps(2, end) infinite;
}
@keyframes loader-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.loader-log-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px;
  min-width: 0;
}
.loader-log-job {
  font-size: clamp(140px, 18dvw, 280px);
  letter-spacing: -0.06em;
  line-height: 0.86;
  font-weight: var(--w-r);
  color: #fafafa;
  margin-top: -10px;
}
.loader-phase-block { display: flex; flex-direction: column; gap: 10px; }
.loader-phase-mask {
  overflow: hidden;
  height: 1.1em;
  font-size: var(--t-h4);
  line-height: 1.1;
}
.loader-phase-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.loader-phase-word {
  display: block;
  height: 1.1em;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fafafa;
  font-weight: var(--w-m);
}
.loader-log-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  border-top: var(--hair-mute);
}
.loader-log-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.loader-log-stat .num {
  font-size: var(--t-h4);
  font-weight: var(--w-r);
  letter-spacing: -0.01em;
  color: #fafafa;
}

.loader-log-foot {
  padding: 18px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loader-log-foot-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ============== V03 — GRID CONSTRUCTION ============== */
.loader-grid {
  background: var(--bg);
}
.loader-grid .bp-tick {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
}
.loader-grid .bp-tick--tl { top: 16px; left: 16px; border-top: var(--hair); border-left: var(--hair); }
.loader-grid .bp-tick--tr { top: 16px; right: 16px; border-top: var(--hair); border-right: var(--hair); }
.loader-grid .bp-tick--bl { bottom: 16px; left: 16px; border-bottom: var(--hair); border-left: var(--hair); }
.loader-grid .bp-tick--br { bottom: 16px; right: 16px; border-bottom: var(--hair); border-right: var(--hair); }

.loader-grid-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.loader-grid-meta--top    { border-bottom: var(--hair-mute); }
.loader-grid-meta--bottom { border-top: var(--hair-mute); }

.loader-grid-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-grid-cells {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 0;
  border: var(--hairline) solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 calc((100% / var(--rows)) - 1px), var(--line) calc((100% / var(--rows)) - 1px) calc(100% / var(--rows))),
    repeating-linear-gradient(90deg, transparent 0 calc((100% / var(--cols)) - 1px), var(--line) calc((100% / var(--cols)) - 1px) calc(100% / var(--cols)));
}
.loader-grid-cell {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}
.loader-grid-sweep {
  position: absolute;
  left: -2px;
  right: -2px;
  height: calc(100% / var(--rows));
  border-top: var(--hairline) solid var(--fg);
  border-bottom: var(--hairline) solid var(--fg);
  background: rgba(10, 10, 10, 0.04);
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}
.loader-grid-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}
.loader-grid-center-inner {
  background: var(--bg);
  border: var(--hair);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 280px;
  text-align: center;
}
.loader-grid-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(80px, 10dvw, 168px);
  font-weight: var(--w-r);
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.loader-grid-pct .muted {
  font-size: clamp(30px, 4dvw, 56px);
  letter-spacing: -0.02em;
}

/* ============== V04 — EDITORIAL VERB REEL (dark) ============== */
.loader-reel {
  background: #0a0a0a;
  color: #fafafa;
  --hair-mute: var(--hairline) solid #1f1f1f;
}
.loader-reel .label { color: #9a9a9a; }
.loader-reel .label.muted,
.loader-reel .num.muted { color: #5a5a5a; }
.loader-reel .loader-counter-bar { background: #1f1f1f; }
.loader-reel .loader-counter-bar--fat { background: #1f1f1f; }
.loader-reel .loader-counter-bar__fill { background: #fafafa; }

.loader-reel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  gap: 24px;
  border-bottom: var(--hair-mute);
}
.loader-reel-meta .dot { background: #00cc77; }

.loader-reel-wordmark-wrap {
  padding: 32px var(--pad-x) 24px;
  border-bottom: var(--hair-mute);
}
.loader-reel-wordmark {
  color: #fafafa;
  font-weight: var(--w-r);
}
.loader-reel-wordmark > span { color: #fafafa; }

.loader-reel-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  min-height: 0;
  border-bottom: var(--hair-mute);
}
.loader-reel-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px var(--pad-x);
  border-right: var(--hair-mute);
  justify-content: center;
  min-width: 0;
}
.loader-reel-mask {
  --reel-h: clamp(80px, 13dvw, 180px);
  overflow: hidden;
  height: var(--reel-h);
  width: 100%;
}
.loader-reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.loader-reel-slot {
  height: var(--reel-h);
  width: 100%;
  display: flex;
  align-items: center;
}
.loader-reel-verb {
  color: #fafafa;
  width: 100%;
  height: 100%;
}
.loader-reel-verb > span { color: #fafafa; }

.loader-reel-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px var(--pad-x);
  justify-content: center;
}
.loader-reel-subjects {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loader-reel-subject {
  display: inline-block;
  padding: 10px 14px;
  border: var(--hairline) solid #2a2a2a;
  color: #fafafa;
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  width: fit-content;
  will-change: transform, opacity;
  background: #131313;
}

.loader-reel-foot {
  padding: 24px var(--pad-x) 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loader-reel-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ============== Responsive — keep things sensible on narrow screens ============== */
@media (max-width: 900px) {
  .loader { min-height: 88dvh; }
  .loader-log-body { grid-template-columns: 1fr; }
  .loader-log-stream { border-right: 0; border-bottom: var(--hair-mute); }
  .loader-reel-body { grid-template-columns: 1fr; }
  .loader-reel-left { border-right: 0; border-bottom: var(--hair-mute); }
  .loader-grid-meta { padding: 18px var(--pad-x); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-log-dot,
  .loader-cursor { animation: none; }
}

/* ===========================================================
   CARDS — 30 / Cards
   Type-led teaser cards. Tweakable scope (--crd-* + data-anim
   / data-arrow). Animated variants: lift + border shift +
   sibling dim + sliding "more" arrow. Calm variants: quiet.
   =========================================================== */
.crd-scope {
  --crd-pad: 28px;
  --crd-h-scale: 1;
  --crd-border: var(--line);
  --crd-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Wrapper column so the card fills the stretched grid row,
   and so global `.grid > a.c-N` hover rules never touch it. */
.crd-scope .crd-col { display: flex; }

/* ---- Base card ---- */
.crd-scope .crd {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--crd-pad);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  border: var(--hairline) solid var(--crd-border);
  transition:
    transform 320ms var(--crd-ease),
    border-color 320ms ease,
    box-shadow 320ms ease,
    opacity 320ms ease !important;
}

/* Head row: eyebrow + index */
.crd-scope .crd-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.crd-scope .crd-idx { color: var(--muted-2); }

/* Headline — scales with the tweak; weight stays at 400. */
.crd-scope .crd-ttl {
  display: block;
  font-size: calc(var(--crd-ttl-size, var(--t-h4)) * var(--crd-h-scale));
  font-weight: var(--w-r);
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

/* Teaser */
.crd-scope .crd-body {
  margin: 14px 0 0;
  max-width: 46ch;
}

/* Foot — cta + arrow affordance */
.crd-scope .crd-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crd-scope .crd-cta {
  font-size: var(--t-label);
  font-weight: var(--w-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crd-scope .crd-arrow {
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 320ms ease, transform 320ms var(--crd-ease);
}

/* ---- Animated grid: lift + border + dim + arrow reveal ---- */
.crd-scope .crd--anim { will-change: transform; }
.crd-scope .crd--anim:hover {
  transform: translateY(-6px);
  border-color: var(--fg);
  box-shadow: 0 16px 32px -22px rgba(0, 0, 0, 0.28);
}
.crd-scope .crd--anim:hover .crd-arrow { opacity: 1; transform: translateX(0); }
.crd-scope .crd-grid--anim:hover .crd-col:not(:hover) .crd--anim { opacity: 0.5; }
.crd-scope .crd-grid--anim:hover .crd-col:hover .crd--anim { opacity: 1; }

/* ---- Calm cards: quiet border shift + arrow nudge, no lift ---- */
.crd-scope .crd--calm:hover { border-color: var(--line-2); }
.crd-scope .crd--calm:hover .crd-arrow { opacity: 1; transform: translateX(0); }
.crd-scope .crd--feature { justify-content: flex-start; }
.crd-scope .crd--feature .crd-body { max-width: 52ch; }
.crd-scope .crd--split { flex: 1 1 auto; justify-content: space-between; gap: 28px; }

/* ---- Bare top-rule cards (C) ---- */
.crd-scope .crd--bare {
  border: none;
  border-top: var(--hairline) solid var(--crd-border);
  padding: 20px 0 0;
}
.crd-scope .crd--bare:hover { border-color: var(--fg); }
.crd-scope .crd-bignum {
  display: block;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--fg);
}

/* ---- Media cards (D) ---- */
.crd-scope .crd--media { padding: 0; overflow: hidden; }
.crd-scope .crd--media .ph { width: 100%; }
.crd-scope .crd-media-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--crd-pad);
}
.crd-scope .crd--media .crd-top { margin-bottom: 16px; }
/* clip the system's built-in image zoom to the card frame */
.crd-scope .crd--media .ph { transition: transform 600ms var(--crd-ease); }
.crd-scope .crd--media:hover .ph { transform: scale(1.04); }

/* ---- Horizontal list rows (E) ---- */
.crd-scope .crd-rows { border-bottom: var(--hairline) solid var(--crd-border); }
.crd-scope .crd-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px var(--crd-pad) 28px 0;
  border-top: var(--hairline) solid var(--crd-border);
  text-decoration: none;
  color: var(--fg);
  transition:
    background 320ms ease,
    padding-left 320ms var(--crd-ease),
    opacity 320ms ease !important;
}
.crd-scope .crd-row-num {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--muted-2);
}
.crd-scope .crd-row-main .crd-body { margin-top: 8px; max-width: 60ch; }
.crd-scope .crd-row-cta { display: flex; align-items: center; gap: 8px; }
.crd-scope .crd-row--anim:hover {
  background: var(--bg-2);
  padding-left: 16px;
}
.crd-scope .crd-row--anim:hover .crd-arrow { opacity: 1; transform: translateX(0); }
.crd-scope .crd-rows--anim:hover .crd-row:not(:hover) { opacity: 0.5; }

/* ---- Tweak toggles ---- */
.crd-scope[data-arrow="off"] .crd-arrow { display: none; }
.crd-scope[data-anim="off"] .crd,
.crd-scope[data-anim="off"] .crd-row { transition: none !important; }
.crd-scope[data-anim="off"] .crd--anim:hover {
  transform: none;
  border-color: var(--crd-border);
  box-shadow: none;
}
.crd-scope[data-anim="off"] .crd-grid--anim:hover .crd-col:not(:hover) .crd--anim { opacity: 1; }
.crd-scope[data-anim="off"] .crd--media:hover .ph { transform: none; }
.crd-scope[data-anim="off"] .crd-row--anim:hover { background: none; padding-left: 0; }
.crd-scope[data-anim="off"] .crd-rows--anim:hover .crd-row:not(:hover) { opacity: 1; }
/* when animation is off, keep the arrow visible so the affordance survives */
.crd-scope[data-anim="off"][data-arrow="on"] .crd-arrow { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .crd-scope .crd-grid > .crd-col,
  .crd-scope .grid > .c-5,
  .crd-scope .grid > .c-7 { grid-column: 1 / -1 !important; }
  .crd-scope .crd-row { grid-template-columns: 56px 1fr; }
  .crd-scope .crd-row-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crd-scope .crd,
  .crd-scope .crd-row,
  .crd-scope .crd-arrow,
  .crd-scope .crd--media .ph { transition: none; }
  .crd-scope .crd--anim:hover { transform: none; }
}