* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: clip;      /* full-bleed modules never cause page-level h-scroll */
}
a { color: inherit; text-decoration: none; }
/* ---------- Global type defaults ----------
   Every heading gets its size, rhythm and tracking from tokens.css, so a
   module that just writes <h2> is already on-system. Modules override the
   size only when the tier genuinely differs — never with a raw value. */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1 { font-size: var(--text-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); }
h2 { font-size: var(--text-h2); line-height: var(--lh-display); letter-spacing: var(--track-display); }
h3 { font-size: var(--text-h3); line-height: var(--lh-heading); letter-spacing: var(--track-heading); }
h4 { font-size: var(--text-h4); line-height: var(--lh-heading); letter-spacing: var(--track-heading); }
h5 { font-size: var(--text-h5); line-height: var(--lh-title); letter-spacing: var(--track-heading); }
h6 { font-size: var(--text-h6); line-height: var(--lh-title); letter-spacing: var(--track-heading); }
p { line-height: var(--lh-body); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(251, 252, 253, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17, 26, 74, 0.06);
}
.nav-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 32px;
  height: 64px; display: flex; align-items: center; gap: 40px;
}
.logo { font-weight: 600; font-size: 20px; letter-spacing: var(--track-display); }
.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-links a {
  font-size: var(--text-small); color: var(--ink-soft); font-weight: 450;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--navy); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-small); font-weight: 500;
  padding: 9px 18px; border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--navy-800); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary {
  background: #fff; color: var(--navy);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost { color: var(--ink-soft); padding: 9px 10px; }
.btn-ghost:hover { color: var(--navy); }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 150px 32px 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
#bg-canvas, #map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-blue {
  position: absolute; top: -10%; right: 0; width: 60%; height: 100%;
  background: linear-gradient(210deg, rgba(220, 235, 247, 0.55) 0%, rgba(231, 241, 250, 0.3) 45%, rgba(247, 250, 253, 0) 100%);
}
.hero-fade { position: absolute; pointer-events: none; }
.hero-fade-left {
  left: 0; top: 0; bottom: 0; width: 52%;
  background: linear-gradient(90deg, var(--bg) 30%, rgba(246, 246, 248, 0) 100%);
}
.hero-fade-top {
  left: 0; right: 0; top: 0; height: 110px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(246, 246, 248, 0) 100%);
}
.hero-fade-bottom {
  left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(0deg, var(--bg) 10%, rgba(246, 246, 248, 0) 100%);
}

.hero-lockup {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
  align-items: center; min-height: 480px;
}
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--gray-100);
  border-radius: var(--radius-full); padding: 6px 14px 6px 6px;
  font-size: 13px; color: var(--gray-500); box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}
.badge-tag {
  background: var(--gray-100); color: var(--gray-600); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; border-radius: var(--radius-full);
  padding: 3px 10px;
}
.hero h1 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 22px;
}
.hero-sub {
  font-size: 18px; color: var(--ink-soft);
  max-width: 560px; line-height: 1.55; margin-bottom: 32px; font-weight: 400;
}
/* Hero pair only. .btn's 9px/18px is tuned for the dense places it appears
   (nav, cards, section feet); at hero scale, next to a 64px headline, the same
   padding reads as cramped. Scoped here so the other ~40 buttons on the site
   keep the size they were designed at. */
.hero-cta { display: flex; gap: 28px; }
.hero-cta .btn { padding: 13px 28px; font-size: 15px; }

/* ---------- Hero UI stage (terminal → result card) ---------- */
.ui-stage { position: relative; height: 500px; }

.terminal-card {
  position: absolute; top: 18px; left: 0; width: 68%;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transition: opacity 0.7s var(--ease-inout), transform 0.7s var(--ease-inout), filter 0.7s var(--ease-inout);
  z-index: 3;
}
.term-head {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.term-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.term-title { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.38); }
.term-body {
  padding: 18px; margin: 0; min-height: 168px;
  font-family: var(--font-mono); font-size: 12.2px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-all;
}
.term-body .t-cmd { color: var(--accent-lilac-soft); }
.term-body .t-str { color: var(--accent-green-soft); }
.term-body .t-flag { color: var(--accent-blue-soft); }
.term-body .t-plain { color: rgba(255, 255, 255, 0.55); }
.term-caret {
  display: inline-block; width: 7px; height: 13px;
  background: var(--accent-green-soft); vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* faded-back state once the result raises */
.ui-stage.phase-result .terminal-card {
  opacity: 0.38; transform: scale(0.94) translateY(-16px); filter: saturate(0.6);
}

.json-card {
  position: absolute; top: -8px; right: -18px; width: 62%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.6s var(--ease-out) 0.15s;
  z-index: 4;
}
.json-card pre {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6;
  color: var(--gray-500); white-space: pre-wrap;
}
.ui-stage.phase-result .json-card { opacity: 1; transform: translateY(0); }

.result-card {
  position: absolute; left: 12%; bottom: 0; width: 86%;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-widget);
  opacity: 0; transform: translateY(30px) scale(0.97);
  transition: opacity 0.65s var(--ease-out) 0.3s, transform 0.65s var(--ease-out) 0.3s;
  z-index: 5;
}
.ui-stage.phase-result .result-card { opacity: 1; transform: translateY(0) scale(1); }

/* ---- hero stage, reworked ----
   The payload card said nothing about the person, so it now carries the
   capability list; the payments card became the shipped-tools list, a third
   taller and pushed right so it clears the terminal behind it. */
.hero-sub .hs-k { font-style: normal; font-weight: 500; color: var(--accent-deep); }
.json-card .hx-title, .result-card .rc-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.hx-list { list-style: none; margin: 0; padding: 0; }
.hx-list li {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}
.hx-list li:last-child { margin-bottom: 0; }
.hx-ic { flex: none; color: var(--gray-300); display: block;
  transition: color var(--dur-med) var(--ease-out); }

/* Same holographic sweep as the footer wordmark: a rainbow gradient clipped to
   the glyphs, swept across once. The footer can hardcode its text in content;
   these five rows each carry their own, so the label is mirrored into
   data-text and read back with attr(). */
.hx-list li::after {
  content: attr(data-text);
  position: absolute; left: 23px; right: 0; top: 0;
  font-size: 13px; line-height: 1.5;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(148, 239, 183, 0.85) 25%,
    rgba(113, 210, 240, 1) 45%,
    rgba(69, 117, 205, 0.9) 55%,
    rgba(159, 122, 238, 0.85) 75%,
    transparent 100%) -100% 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; pointer-events: none;
}
.hx-list li:hover::after { animation: f2-swipe 900ms var(--ease-out) forwards; }
.hx-list li:hover .hx-ic { color: var(--accent-base, var(--accent-green-deep)); }

@media (prefers-reduced-motion: reduce) {
  .hx-list li:hover::after { animation: none; opacity: 1; background-position: 0 0; }
}
.tk-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 0; border-top: 1px solid var(--gray-75);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tk-row:first-of-type { border-top: 0; }
.tk-row:hover { transform: translateX(3px); }
.tk-row i { flex: none; color: var(--accent-deep); margin-top: 1px; }
.tk-row span { font-size: 12.5px; line-height: 1.4; color: var(--gray-500); }
.tk-row b { display: block; font-size: 13.5px; color: var(--navy); font-weight: 600; }

.rc-row { display: flex; align-items: center; gap: 14px; }
.rc-avatar {
  width: 38px; height: 38px; border-radius: var(--radius-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff;
}
.rc-avatar-navy { background: var(--navy); }
.rc-avatar-sea { background: var(--seafoam); }
.rc-meta { flex: 1; min-width: 0; }
.rc-name { font-size: 14.5px; font-weight: 500; }
.rc-sub { font-size: 12.5px; color: var(--gray-400); }
.rc-amount {
  font-size: 17px; font-weight: 500; letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums; text-align: right;
}
.rc-unit { display: block; font-size: 10.5px; font-weight: 400; color: var(--gray-400); letter-spacing: 0.06em; text-transform: uppercase; }
.rc-divider {
  display: flex; align-items: center; margin: 10px 0 10px 19px;
  height: 18px; border-left: 1px dashed var(--gray-200);
}
.rc-arrow { margin-left: -7px; background: #fff; color: var(--gray-300); font-size: 12px; }

.status-chip {
  position: absolute; left: 26px; bottom: 34px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out) 0.85s, transform 0.5s var(--ease-out) 0.85s;
  z-index: 6;
}
.ui-stage.phase-result .status-chip { opacity: 1; transform: translateY(0); }
.chip-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--seafoam);
  animation: chipPulse 2s var(--ease-out) infinite;
}
@keyframes chipPulse {
  0% { box-shadow: 0 0 0 0 rgba(68, 180, 139, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(68, 180, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(68, 180, 139, 0); }
}

/* ---------- Logo strip ---------- */
.logo-strip {
  max-width: 1200px; margin: 48px auto 0;
  display: flex; align-items: center; gap: 28px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(17, 26, 74, 0.07);
}
.logo-label {
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-400); flex-shrink: 0;
}
.logo-viewport {
  overflow: hidden; flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex; gap: 48px; width: max-content;
  animation: marquee 36s linear infinite;
}
.logo-track span {
  font-size: 16px; font-weight: 600; letter-spacing: var(--track-tight);
  color: var(--gray-300); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.logo-track span:hover { color: var(--gray-500); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Scale module (dot candlesticks) ---------- */
.scale-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center;
}
.mono-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--seafoam-dark);
  background: rgba(68, 180, 139, 0.07);
  border: 1px solid rgba(68, 180, 139, 0.25);
  border-radius: var(--radius-xs); padding: 5px 10px; margin-bottom: 22px;
}
.mt-cursor {
  width: 6px; height: 12px; background: var(--seafoam);
  animation: blink 1.1s steps(1) infinite;
}
.scale-h {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); font-weight: 500; color: var(--gray-400);
  margin-bottom: 18px;
}
.scale-h b { font-weight: 500; color: var(--navy); }
.scale-copy .section-sub { margin-bottom: 28px; max-width: 420px; }
.scale-visual { position: relative; height: 480px; }
#scale-canvas { width: 100%; height: 100%; display: block; }

/* ---------- Showcase (Column case-study layout) ---------- */
.show-shell {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm);
  padding: 40px 48px 48px;
  overflow: hidden;
}
.show-tabs {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 52px; flex-wrap: wrap;
}
.show-tab {
  flex: 1; min-width: 130px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--gray-500); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 12px 20px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.show-tab:hover { color: var(--navy); background: var(--gray-50); }
.show-tab.active { color: var(--navy); box-shadow: var(--shadow-md); }
.show-body {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-col); align-items: stretch;
  min-height: 440px;
}
.show-copy { display: flex; flex-direction: column; }
.show-headline {
  font-size: var(--text-h3); line-height: var(--lh-heading); letter-spacing: var(--track-heading);
  margin-bottom: 20px;
  animation: vertIn 0.5s var(--ease-out) both;
}
.show-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.show-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-full); padding: 6px 14px;
  box-shadow: var(--shadow-sm);
  animation: vertIn 0.5s var(--ease-out) both;
  animation-delay: calc(0.1s + var(--i) * 0.08s);
}
.show-quote {
  margin-top: auto; padding-top: 40px;
  font-size: 17px; line-height: 1.5; color: var(--ink);
  animation: vertIn 0.5s var(--ease-out) 0.25s both;
}
.sq-mark {
  display: block; font-size: 44px; line-height: 0.6;
  color: var(--gray-300); margin-bottom: 12px; font-weight: 600;
}
.show-quote footer { margin-top: 12px; font-size: 13.5px; color: var(--gray-400); }

.show-visual { position: relative; min-height: 420px; }
#show-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.show-card {
  position: absolute; right: 6%; top: 12%;
  width: 58%; aspect-ratio: 1.586;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.show-card.in { animation: csCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.showcard-chip {
  position: absolute; left: 24px; top: 42%;
  width: 34px; height: 26px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.showcard-name {
  position: absolute; right: 20px; top: 14px;
  font-size: 22px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.show-widget {
  position: absolute; left: 0; bottom: 8%;
  width: 64%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-widget);
}
.show-widget.in { animation: csCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
.sw-row {
  display: flex; align-items: center; gap: 12px;
  animation: vertIn 0.45s var(--ease-out) both;
  animation-delay: calc(0.25s + var(--i) * 0.15s);
}
.sw-ic {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.sw-meta { flex: 1; min-width: 0; }
.sw-meta b { display: block; font-size: 13.5px; font-weight: 500; }
.sw-meta small { font-size: 11.5px; color: var(--gray-400); }
.sw-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--gray-500);
  border: 1px solid var(--gray-200); border-radius: var(--radius-full);
  padding: 3px 9px;
}
.sw-arrow { margin: 4px 0 4px 15px; color: var(--gray-300); font-size: 13px; }

/* ---------- Story sticky: dark product card ---------- */
.story-visual-pv { padding: 20px; }
.pv-card {
  position: relative; width: 100%; height: 100%;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pv-feed-mask {
  position: absolute; inset: 0 0 76px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}
.pv-feed {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 22px;
  filter: blur(1.6px); opacity: 0.45;
  animation: feedUp 26s linear infinite;
}
.pv-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius); padding: 12px 14px; flex-shrink: 0;
}
.pv-row b { display: block; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pv-row small { color: rgba(255, 255, 255, 0.4); font-size: 11px; }
.pv-row span { color: rgba(255, 255, 255, 0.3); font-size: 11px; }

.pv-focus {
  position: absolute; left: 10%; right: 10%; top: 50%;
  transform: translateY(-58%);
  background: rgba(23, 32, 74, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.pv-focus.swap .pvf-label,
.pv-focus.swap .pvf-value,
.pv-focus.swap .pvf-foot { animation: vertIn 0.45s var(--ease-out) both; }
.pv-focus.swap .pvf-value { animation-delay: 0.08s; }
.pv-focus.swap .pvf-foot { animation-delay: 0.16s; }
.pvf-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; }
.pvf-value {
  font-size: 34px; font-weight: 500; color: #fff;
  letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.pvf-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.pvf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--seafoam); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.04em;
}
.pvf-badge i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--seafoam);
  animation: chipPulse 2s var(--ease-out) infinite;
}

.pv-links {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 12px; padding: 14px 18px;
  background: rgba(11, 18, 53, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 2;
}
.pv-link {
  flex: 1; display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); padding: 11px 14px;
  color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 500;
  animation: vertIn 0.4s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--i) * 0.1s);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pv-link:hover { border-color: rgba(68, 180, 139, 0.5); background: rgba(68, 180, 139, 0.06); }
.pvl-icon { color: var(--seafoam); font-size: 14px; }

/* ---------- Case studies (trusted at scale) ---------- */
.cs-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.cs-tab {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 9px 18px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.cs-tab:hover { border-color: var(--gray-300); transform: translateY(-1px); }
.cs-tab.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: var(--shadow-btn);
}
.cs-body {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center;
}
.cs-headline {
  font-size: var(--text-h3); line-height: var(--lh-heading); letter-spacing: var(--track-heading);
  margin-bottom: 26px;
  animation: vertIn 0.5s var(--ease-out) both;
}
.cs-products { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
.cs-product {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; font-size: 15.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--gray-100);
  animation: vertIn 0.5s var(--ease-out) both;
  animation-delay: calc(0.08s + var(--i) * 0.09s);
}
.cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seafoam); }
.cs-quote {
  font-size: 16.5px; line-height: 1.55; color: var(--ink);
  border-left: 2px solid var(--gray-100); padding-left: 18px;
  animation: vertIn 0.5s var(--ease-out) 0.3s both;
}
.cs-quote footer { margin-top: 10px; font-size: 13px; color: var(--gray-400); }
.cs-visual {
  position: relative; aspect-ratio: 1; max-width: 520px; width: 100%;
  justify-self: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-xl);
}
.cs-glow { position: absolute; inset: -10%; pointer-events: none; transition: background 0.6s var(--ease-out); }
#cs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-card {
  position: absolute; left: 22px; bottom: 22px;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 14px 18px;
  box-shadow: var(--shadow-widget);
  min-width: 190px;
}
.cs-card.in { animation: csCardIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes csCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.csc-title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 4px; }
.csc-value { font-size: 30px; font-weight: 500; letter-spacing: var(--track-heading); line-height: var(--lh-display); font-variant-numeric: tabular-nums; }
.csc-sub { font-size: 12px; color: var(--gray-500); margin-top: 3px; }

/* ---------- Live feed strip ---------- */
.feed-strip { overflow: hidden; }
.feed-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.feed-copy h2 { font-size: var(--text-h2); line-height: var(--lh-display); margin-bottom: 16px; }
.feed-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  height: 420px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.feed-col { overflow: hidden; }
.feed-track { display: flex; flex-direction: column; gap: 12px; }
.feed-track-up { animation: feedUp 30s linear infinite; }
.feed-track-down { animation: feedUp 34s linear infinite reverse; }
@keyframes feedUp { to { transform: translateY(-50%); } }
.feed-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.fi { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fi-sea { background: var(--seafoam); }
.fi-navy { background: var(--navy); }
.fi-orange { background: var(--orange); }
.feed-item b { display: block; font-size: 12.5px; font-weight: 500; }
.feed-item small { font-size: 11px; color: var(--gray-400); }
.feed-item div { flex: 1; min-width: 0; }
.feed-item em {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--seafoam-dark); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Stack merge (inside the sticky pane) ---------- */
.story-lead { padding: 4vh 0 60vh 28px; }
.story-lead h3 { font-size: var(--text-h5); margin-bottom: 10px; }
.story-lead p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 380px; }

.stack-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.stack-card {
  position: absolute; width: min(330px, 74%);
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 20px 24px;
  box-shadow: var(--shadow-xl);
  will-change: transform;
}
.stack-card span { display: block; font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.stack-card small { font-size: 12px; color: var(--gray-400); }
.stack-a { z-index: 3; }
.stack-b {
  z-index: 2; background: var(--navy); border-color: var(--navy);
}
.stack-b span { color: #fff; }
.stack-b small { color: rgba(255, 255, 255, 0.55); }
.stack-c { z-index: 1; }

/* ---------- Mosaic verticals ---------- */
.mosaic-grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center;
}
.vert-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.vert-pill {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 9px 18px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.vert-pill:hover { border-color: var(--gray-300); transform: translateY(-1px); }
.vert-pill.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: var(--shadow-btn);
}
.vert-copies { position: relative; min-height: 150px; }
.vert-copy-item { position: absolute; inset: 0; visibility: hidden; }
.vert-copy-item.active { visibility: visible; }
.vert-copy-item p {
  font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px;
}
.vert-copy-item.active p {
  animation: vertIn 0.5s var(--ease-out) both;
}
.vert-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.vert-tags span {
  font-size: 12px; font-weight: 500; color: var(--seafoam-dark);
  background: rgba(68, 180, 139, 0.1);
  border-radius: var(--radius-full); padding: 5px 12px;
}
.vert-copy-item.active .vert-tags span { animation: vertIn 0.5s var(--ease-out) both; }
.vert-copy-item.active .vert-tags span:nth-child(1) { animation-delay: 0.1s; }
.vert-copy-item.active .vert-tags span:nth-child(2) { animation-delay: 0.18s; }
.vert-copy-item.active .vert-tags span:nth-child(3) { animation-delay: 0.26s; }
@keyframes vertIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.mosaic-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  aspect-ratio: 1.15; max-width: 520px;
  overflow: hidden;
}
#mosaic-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* ---------- sv-pop chips ---------- */
.sv-card { position: relative; }
.sv-pop {
  position: absolute; top: -12px; right: -10px; z-index: 2;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-full); padding: 6px 13px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px) scale(0.8);
  transition: opacity 0.4s var(--ease-out) 0.75s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s;
}
.story-visual.active .sv-pop { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Scrollytelling (building blocks) ---------- */
.section-story { padding-bottom: 0; }
.story-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px;
  align-items: start;
}
.story-left { padding: 12vh 0 30vh; }
.story-step {
  padding: 28px 0 28px 28px;
  border-left: 2px solid var(--gray-100);
  margin-bottom: 22vh;
  opacity: 0.3;
  transform: translateX(0);
  transition: opacity 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}
.story-step.active {
  opacity: 1;
  border-left-color: var(--seafoam);
  transform: translateX(6px);
}
.story-step h3 {
  font-size: var(--text-h5); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.story-step p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 380px; }

.story-right { position: relative; align-self: stretch; }
.story-sticky {
  position: sticky; top: calc(50vh - 230px);   /* locked to viewport center */
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(210deg, rgba(220, 235, 247, 0.5), rgba(246, 246, 248, 0.2));
  border: 1px solid var(--gray-100);
}
#story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.story-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(calc(56px * var(--sdir, 1))) scale(0.97);
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-inout);
}
.story-visual.active { opacity: 1; transform: translateY(0) scale(1); }
.story-visual.exiting {
  opacity: 0;
  transform: translateY(calc(-56px * var(--sdir, 1))) scale(0.97);
}

.sv-card {
  width: 78%; background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  padding: 24px;
}
.sv-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 20px;
}

/* funnel */
.sv-funnel { display: flex; flex-direction: column; gap: 12px; }
.sv-bar {
  position: relative; height: 34px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(68, 180, 139, 0.85), rgba(109, 214, 174, 0.7));
  width: 0;
  transition: width 0.9s var(--ease-inout);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; overflow: hidden; white-space: nowrap;
}
.story-visual.active .sv-bar { width: var(--w); }
.story-visual.active .sv-bar:nth-child(2) { transition-delay: 0.12s; }
.story-visual.active .sv-bar:nth-child(3) { transition-delay: 0.24s; }
.story-visual.active .sv-bar:nth-child(4) { transition-delay: 0.36s; }
.sv-bar span { font-size: 12px; font-weight: 500; color: #fff; }
.sv-bar em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }

/* journey */
.sv-journey { position: relative; display: flex; justify-content: space-between; padding: 18px 6px 6px; }
.sv-line {
  position: absolute; top: 37px; left: 8%; right: 8%; height: 2px;
  background: var(--gray-100);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--ease-inout) 0.15s;
}
.story-visual.active .sv-line { transform: scaleX(1); }
.sv-node {
  position: relative; z-index: 1; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out) calc(0.2s + var(--i) * 0.18s),
              transform 0.4s var(--ease-out) calc(0.2s + var(--i) * 0.18s);
}
.story-visual.active .sv-node { opacity: 1; transform: translateY(0); }
.sv-node i {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 auto 8px;
  background: #fff; border: 1.5px solid var(--seafoam);
  color: var(--seafoam-dark); border-radius: 50%;
  font-style: normal; font-size: 14px;
}
.sv-node-live i { background: var(--seafoam); color: #fff; animation: chipPulse 2s var(--ease-out) infinite; }
.sv-node b { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }

/* channel chart */
.sv-chart {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 170px; padding: 0 6px;
}
.sv-col {
  width: 15%; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, rgba(68, 180, 139, 0.9), rgba(22, 126, 108, 0.75));
  height: 0;
  transition: height 0.8s var(--ease-inout);
  position: relative;
}
.story-visual.active .sv-col { height: var(--h); }
.story-visual.active .sv-col:nth-child(2) { transition-delay: 0.1s; }
.story-visual.active .sv-col:nth-child(3) { transition-delay: 0.2s; }
.story-visual.active .sv-col:nth-child(4) { transition-delay: 0.3s; }
.story-visual.active .sv-col:nth-child(5) { transition-delay: 0.4s; }
.sv-col b {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 500; color: var(--gray-500);
}

/* automation tasks */
.sv-tasks { display: flex; flex-direction: column; gap: 14px; }
.sv-task {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink-soft);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-out) calc(var(--i) * 0.15s),
              transform 0.4s var(--ease-out) calc(var(--i) * 0.15s);
}
.story-visual.active .sv-task { opacity: 1; transform: translateX(0); }
.sv-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(68, 180, 139, 0.15); position: relative;
}
.sv-check::after {
  content: ''; position: absolute; left: 5px; top: 6px;
  width: 8px; height: 4px;
  border-left: 1.8px solid var(--seafoam-dark);
  border-bottom: 1.8px solid var(--seafoam-dark);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.3s var(--ease-out) calc(0.15s + var(--i) * 0.15s);
}
.story-visual.active .sv-check::after { transform: rotate(-45deg) scale(1); }

/* ---------- Stats band ---------- */
.section-stats { padding: 0 32px; position: relative; overflow: hidden; }
#stats-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.section-stats .hero-stats { position: relative; z-index: 1; }
.hero-stats {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  padding: 48px 0 56px;
}
.stat-num {
  font-size: var(--text-h2); font-weight: 500;
  letter-spacing: var(--track-display); line-height: var(--lh-display); margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--text-small); color: var(--gray-500); max-width: 210px; }

/* ---------- Sections ---------- */
.section { padding: var(--section-gap) var(--page-pad); }
.section-inner { max-width: var(--page-max); margin: 0 auto; }
.section-head { max-width: 620px; margin-bottom: 56px; }
/* Column's eyebrow: 12px uppercase, preceded by a short coloured tick
   that takes the section's accent. One treatment, used everywhere a
   section announces itself — the tick is what ties a section's hue to
   its artwork without any extra chrome. */
.micro-label, .cs2-eyebrow, .lb-label {
  display: flex; align-items: center;
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 16px;
}
.micro-label::before, .cs2-eyebrow::before, .lb-label::before {
  content: ''; flex: none;
  width: 8px; height: 16px; margin-right: 10px; border-radius: 1px;
  background: var(--accent-base);
}
.lb-label { justify-content: center; color: var(--gray-500); margin-bottom: var(--space-6); }
/* Legacy hooks — the accent now comes from the section, not the class. */
.micro-label-sea { color: var(--accent-deep); }
.section-head h2 { font-size: var(--text-h2); line-height: var(--lh-display); margin-bottom: 16px; }
.section-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Icon grid ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.icon-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.icon-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--gray-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.icon-card:hover .icon-wrap { background: var(--navy); color: #fff; }
.icon-wrap svg { width: 26px; height: 26px; }
.icon-card h3 { font-size: var(--text-h3); margin-bottom: 8px; }
.icon-card p { font-size: var(--text-small); color: var(--gray-500); line-height: 1.5; }

/* SVG draw-on animation */
.draw {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.1s var(--ease-inout);
}
.draw.d { transition-delay: 0.25s; }
.in .draw { stroke-dashoffset: 0; }

.gear-rotor { transform-origin: 12px 12px; }
.icon-card:hover .gear-rotor { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pulse-dot { opacity: 0; }
.in .pulse-dot { animation: pulse 2.4s var(--ease-out) infinite 1s; }
@keyframes pulse {
  0% { opacity: 0; }
  25% { opacity: 1; }
  60% { opacity: 0.35; }
  100% { opacity: 0; }
}

/* ---------- Globe section ---------- */
.section-global { padding-top: var(--section-gap-xs); }
.global-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.global-copy h2 { font-size: var(--text-h2); line-height: var(--lh-display); margin-bottom: 16px; }
.check-list { list-style: none; margin-top: 28px; }
.check-list li {
  padding: 10px 0 10px 32px; position: relative;
  color: var(--ink-soft); font-size: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(68, 180, 139, 0.14);
}
.check-list li::after {
  content: ''; position: absolute; left: 5px; top: 19px;
  width: 8px; height: 5px;
  border-left: 1.8px solid var(--seafoam-dark);
  border-bottom: 1.8px solid var(--seafoam-dark);
  transform: rotate(-45deg);
}
.globe-wrap { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; }
#globe-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#globe-canvas.dragging { cursor: grabbing; }
.globe-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: var(--text-micro); color: var(--gray-400);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- Dark section / tabs ---------- */
.section-dark {
  background: var(--navy);
  border-radius: var(--radius-2xl);
  max-width: 1264px;
  margin: 0 auto var(--section-gap);
  padding: var(--section-gap) 32px;
}
.on-dark { color: #fff; }
.on-dark-sub { color: rgba(255, 255, 255, 0.62); }

.tabs { margin-top: 8px; }
.tab-bar {
  position: relative; display: inline-flex; gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full); padding: 4px;
  margin-bottom: 36px;
}
.tab-btn {
  position: relative; z-index: 1;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 20px; border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease-out);
}
.tab-btn:hover { color: rgba(255, 255, 255, 0.9); }
.tab-btn.active { color: var(--navy); }
.tab-indicator {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px);
  background: #fff; border-radius: var(--radius-full);
  transition: transform var(--dur-med) var(--ease-inout), width var(--dur-med) var(--ease-inout);
  box-shadow: var(--shadow-md);
}

.tab-panels { position: relative; min-height: 380px; }
.tab-panel {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start;
  opacity: 0; transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.tab-panel.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.panel-copy { position: relative; z-index: 1; }
.panel-copy h3 { color: #fff; font-size: var(--text-h4); margin-bottom: 6px; letter-spacing: var(--track-heading); }
.panel-tagline { color: var(--seafoam); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.panel-copy p { color: rgba(255, 255, 255, 0.68); font-size: 15.5px; line-height: 1.6; margin-bottom: 28px; }

.panel-metrics { display: flex; flex-direction: column; gap: 16px; }
.metric-row { display: flex; flex-direction: column; gap: 6px; }
.metric-head { display: flex; justify-content: space-between; font-size: 13px; }
.metric-name { color: rgba(255, 255, 255, 0.55); }
.metric-val { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric-track { height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-xs); overflow: hidden; }
.metric-fill {
  height: 100%; width: 0; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--seafoam), var(--accent-green-soft));
  transition: width 1.1s var(--ease-inout) 0.2s;
}

.code-stage { position: relative; }
.panel-dots {
  position: absolute; inset: -72px -40px -72px -28px;
  width: calc(100% + 68px); height: calc(100% + 144px);
  pointer-events: none;
  z-index: 0;
}
.code-banner, .code-card { position: relative; z-index: 1; }
.code-banner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 14px;
  backdrop-filter: blur(4px);
  transition: transform 0.25s var(--ease-out);
}
.cb-icon {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  background: var(--seafoam); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}
.cb-meta { flex: 1; }
.cb-meta b { display: block; color: #fff; font-size: 14px; font-weight: 500; }
.cb-meta small { font-size: 11px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; text-transform: uppercase; }
.cb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--seafoam); border: 1px solid rgba(68, 180, 139, 0.4);
  border-radius: var(--radius-full); padding: 4px 10px;
}
.cb-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--seafoam);
  animation: chipPulse 2s var(--ease-out) infinite;
}
.code-card {
  position: relative; z-index: 1;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
}
.code-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.code-title { margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.4); }
.code-body {
  padding: 20px; font-family: var(--font-mono); font-size: 12.8px;
  line-height: 1.7; color: var(--seafoam);
  min-height: 260px; white-space: pre-wrap; word-break: break-word;
}
.code-body .caret {
  display: inline-block; width: 7px; height: 14px;
  background: var(--seafoam); vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Stack v2 (3D layered) ---------- */
.stack2-scroll { height: 150vh; }
.stack2-stage {
  position: sticky; top: calc(50vh - 260px);
  height: 520px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px;
  align-items: center;
}
.stack2-copy h2 {
  font-size: var(--text-h2); line-height: var(--lh-display); margin-bottom: 16px;
}
.stack2-copy .section-sub { max-width: 380px; }
.stack2-scene { perspective: 1700px; width: 100%; display: flex; justify-content: center; }
.stack2-tilt {
  position: relative; width: min(480px, 94%); height: 420px;
  transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center;
}
.stack2-card {
  position: absolute; width: 100%;
  transform-style: preserve-3d;
  transform: translateY(var(--ty, 0)) translateZ(var(--tz, 0));
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-2xl);
  padding: 24px 30px 22px;
  box-shadow: 0 28px 50px rgba(17, 26, 74, 0.14);
  transition: box-shadow 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  will-change: transform;
}
/* fake slab thickness beneath each layer */
.stack2-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius-2xl);
  background: rgba(17, 26, 74, 0.16);
  transform: translateZ(-14px);
  filter: blur(0.5px);
}
/* hover: no movement — just a soft, slow glow so nothing can flicker */
.stack2-card:hover {
  box-shadow: 0 32px 60px rgba(17, 26, 74, 0.20);
  filter: brightness(1.03);
}
.s2-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.s2-head span { font-size: 21px; font-weight: 500; letter-spacing: var(--track-tight); }
.s2-head em {
  font-style: normal; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--gray-400);
}
.stack2-card small { display: block; font-size: 13px; color: var(--gray-400); margin-bottom: 14px; }
.s2-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.s2-tags b {
  font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius-full); padding: 4px 11px;
}
.s2-b { background: var(--navy); border-color: var(--navy); }
.s2-b .s2-head span { color: #fff; }
.s2-b .s2-head em { color: rgba(255, 255, 255, 0.4); }
.s2-b small { color: rgba(255, 255, 255, 0.55); }
.s2-b .s2-tags b {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15);
}
.s2-b::after { background: rgba(2, 8, 40, 0.42); }

/* ---------- Building blocks navigation ---------- */
.blocks-h {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-heading); margin-bottom: 36px;
}
.blocks-h b { font-weight: 500; color: var(--accent-lilac-deep); }
.blocks-divider { height: 1px; background: var(--gray-100); margin-bottom: 48px; }
.blocks-row {
  display: grid; grid-template-columns: 0.85fr 2.15fr; gap: 40px;
  margin-bottom: 56px; align-items: start;
}
.blocks-row:last-child { margin-bottom: 0; }
.blocks-label { font-size: 19px; font-weight: 500; line-height: var(--lh-title); letter-spacing: var(--track-tight); }
.blocks-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* real product logos in toolbox chips: uniform white rounded square */
.chip img.tool-logo {
  width: 26px; height: 26px; flex: none;
  object-fit: contain;
  background: #fff; border-radius: 6px; padding: 3px;
  box-shadow: 0 0 0 1px var(--gray-100);
}
.chip {
  display: flex; align-items: center; gap: 14px;
  background: var(--gray-75);
  border-radius: var(--radius-lg); padding: 10px 14px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chip i {
  width: 38px; height: 38px; border-radius: var(--radius); flex-shrink: 0;
  background: #fff; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.chip-blue i { color: var(--accent-blue); }
.chip-sea i { color: var(--seafoam-dark); }
.chip-orange i { color: var(--orange); }
.chip:hover { background: #fff; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.chip:hover i { transform: scale(1.12); }

/* ---------- Mega navigation module ---------- */
.navdemo-section { padding-top: var(--section-gap-sm); padding-bottom: var(--section-gap-xs); }
.navdemo-divider { height: 1px; background: var(--gray-100); margin-bottom: 40px; }
.navdemo { position: relative; z-index: 30; min-height: 420px; }
.nav2 {
  position: relative;
  display: flex; align-items: center; gap: 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
}
.nav2-center { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav2-right { display: flex; align-items: center; gap: 14px; }
.nav2-link {
  font-size: var(--text-small); font-weight: 450; color: var(--ink-soft);
  padding: 8px 12px; border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav2-link:hover { color: var(--navy); }
.nav2-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--text-small); font-weight: 450;
  color: var(--ink-soft); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.nav2-pill .chev {
  font-style: normal; font-size: 11px;
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.nav2-item.open .nav2-pill {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--gray-100);
  box-shadow: var(--shadow-sm);
}
.nav2-item.open .chev { transform: rotate(180deg); }

.nav2-panel {
  /* overlaps the bar by 3px: any gap here is a dead zone where the
     pointer is inside neither the nav nor the panel, and the menu closes
     under the cursor on the way down */
  position: absolute; top: calc(100% - 3px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), var(--shadow-md);
  overflow: hidden;
  height: 0; opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out),
              height 0.35s var(--ease-inout);
}
.nav2-panel.show {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav2-menu {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 56px;
  padding: 28px 32px 32px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}
.nav2-menu.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav2-group h5 {
  font-size: var(--text-label); font-weight: 600; letter-spacing: var(--track-tight);
  margin-bottom: 18px;
}
.nav2-group-wide { flex: 1.6; }
.nav2-group { flex: 1; }
.nav2-items { display: grid; gap: 4px; }
.nav2-two { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
.nav2-three { grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
.n2i {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-lg);
  background: rgba(17, 26, 74, 0);
  transition: background 0.22s var(--ease-out);
}
.n2i:hover { background: rgba(17, 26, 74, 0.05); }   /* soft deepen, not a gray block */
/* in-development placeholders: present but clearly not shipped */
.n2i-soon { cursor: default; opacity: 0.62; }
.n2i-soon:hover { background: none; }
.n2i-soon:hover b { color: var(--ink); }
.n2i-soon em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--gray-400); background: var(--gray-75);
  border-radius: 4px; padding: 3px 6px;
  margin-left: auto; align-self: center;
}
.n2i i {
  font-style: normal; font-size: 14px; color: var(--nc, var(--accent-blue));
  width: 20px; text-align: center; flex-shrink: 0; margin-top: 1px;
}
.n2i b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.n2i:hover b { color: var(--nc, var(--navy)); }
.n2i small { font-size: 12.5px; color: var(--gray-500); line-height: 1.4; }

/* ---------- Iso product hero (3D stack) ---------- */
.iso-hero {
  overflow: visible;              /* expanded layers may rise past the top */
  position: relative; z-index: 5; /* ...and float above neighbouring modules */
  padding-top: var(--section-gap-xl);
}
.iso-grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center;
  min-height: 560px;
}
.iso-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--navy); margin-bottom: 20px; min-height: 20px;
}
.iso-eyebrow-icon { color: var(--accent-lilac-mid); font-size: 15px; }
.iso-caret { background: var(--navy); width: 6px; height: 13px; }
.iso-h {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 20px;
}
.iso-copy .section-sub { max-width: 420px; margin-bottom: 30px; }

.iso-scene {
  position: relative; height: 560px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1500px;
}
.iso-scene::before {
  content: ''; position: absolute; inset: 6% 2%;
  background: radial-gradient(closest-side, rgba(122, 92, 214, 0.12), transparent 75%);
  pointer-events: none;
}
.iso-stack {
  position: relative; width: 270px; height: 270px;
  margin-top: 90px;               /* headroom so hover-spread stays inside */
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
}
.iso-panel {
  position: absolute; inset: 0;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: translateZ(calc(var(--i) * 44px));
  transition: transform 0.6s var(--ease-inout), filter 0.3s var(--ease-out);
  box-shadow: 0 18px 40px rgba(17, 26, 74, 0.10);
}
/* deep navy → violet → pink, bottom to top */
.iso-panel[style*="--i:0"] { background: rgba(17, 26, 74, 0.92); }
.iso-panel[style*="--i:1"] { background: rgba(45, 40, 120, 0.88); }
.iso-panel[style*="--i:2"] { background: rgba(84, 62, 168, 0.82); }
.iso-panel[style*="--i:3"] { background: rgba(122, 92, 214, 0.72); }
.iso-panel[style*="--i:4"] { background: rgba(160, 122, 226, 0.60); }
.iso-panel[style*="--i:5"] { background: rgba(205, 140, 200, 0.52); }
.iso-panel[style*="--i:6"] { background: rgba(235, 160, 176, 0.48); }
.iso-base {
  transform: translateZ(-46px) scale(1.28);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 30px 60px rgba(17, 26, 74, 0.12);
}
.iso-panel span {
  position: absolute; top: 12px; left: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.iso-panel[style*="--i:5"] span, .iso-panel[style*="--i:6"] span { color: rgba(17, 26, 74, 0.7); }
/* panels spread apart when the scene is hovered */
.iso-scene:hover .iso-panel:not(.iso-base) {
  transform: translateZ(calc(var(--i) * 62px));
}
.iso-panel:not(.iso-base):hover { filter: brightness(1.15); }

/* ---------- Bento feature grid ---------- */
.bento-h {
  font-size: var(--text-h2); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 44px;
}
.bento-typed { color: var(--accent-lilac-mid); }
.bento-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.bento-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.bento-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.bento-lg { grid-column: span 2; background: var(--gray-50); }
.bento-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  font-style: normal; font-size: 17px; color: var(--accent-lilac-mid);
  margin-bottom: 18px;
}
.bento-card h3 { font-size: var(--text-h6); margin-bottom: 8px; }
.bento-card p { font-size: 14.5px; color: var(--gray-500); line-height: 1.55; }

/* ---------- Feature spec (code + screenshot) ---------- */
.spec-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.spec-feats { display: flex; flex-direction: column; gap: 36px; }
.spec-feat { display: flex; gap: 16px; align-items: flex-start; }
.spec-feat i {
  width: 40px; height: 40px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: #fff; border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 17px; color: var(--seafoam-dark);
}
.spec-feat h4 { font-size: var(--text-h6); font-weight: 500; margin-bottom: 6px; }
.spec-feat p { font-size: 14.5px; color: var(--gray-500); line-height: 1.55; max-width: 380px; }

.spec-visual { position: relative; min-height: 430px; }
.spec-code {
  position: absolute; top: 0; left: 0; width: 78%; z-index: 2;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.spec-code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.4);
}
.spec-copy {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xs);
  padding: 3px 10px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.spec-copy:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.spec-code pre {
  margin: 0; padding: 18px;
  font-family: var(--font-mono); font-size: 12.4px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.75); white-space: pre-wrap;
}
.sc-kw { color: var(--accent-lilac-soft); }
.sc-fn { color: var(--accent-blue-soft); }
.sc-str { color: var(--accent-green-soft); }

.spec-screen {
  position: absolute; right: 0; bottom: 0; width: 72%; z-index: 1;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  overflow: hidden;
}
.ss-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--gray-100);
}
.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-100); }
.ss-head b { margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--gray-400); }
.ss-body { display: flex; min-height: 210px; }
.ss-side {
  width: 56px; border-right: 1px solid var(--gray-50);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
}
.ss-side span { height: 8px; border-radius: var(--radius-xs); background: var(--gray-100); }
.ss-side span:first-child { background: var(--seafoam); opacity: 0.6; }
.ss-main { flex: 1; padding: 18px; }
.ss-chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 110px; margin-bottom: 16px;
}
.ss-chart i {
  flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; height: var(--h);
  background: linear-gradient(180deg, rgba(68, 180, 139, 0.85), rgba(68, 180, 139, 0.4));
}
.ss-rows { display: flex; flex-direction: column; gap: 8px; }
.ss-rows span { height: 9px; border-radius: var(--radius-xs); background: var(--gray-50); }
.ss-rows span:nth-child(1) { width: 85%; }
.ss-rows span:nth-child(2) { width: 65%; }
.ss-rows span:nth-child(3) { width: 75%; }

/* ---------- Products grid (infrastructure cards) ---------- */
.prods { position: relative; }
.prods::before {
  content: ''; position: absolute; inset: 0 0 40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='28'%3E%3Cpath d='M0 14 Q 17.5 2 35 14 T 70 14 T 105 14 T 140 14' fill='none' stroke='%23dfe2e8' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 140px 28px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  pointer-events: none;
}
.prods-h {
  position: relative;
  font-size: var(--text-h2); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 44px;
}
.prods-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.prod-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--gray-50);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 34px 36px;
  min-height: 230px;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.prod-card:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--acc) 30%, transparent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.prod-ic {
  width: 42px; height: 42px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--acc);
  margin-bottom: 20px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.prod-card:hover .prod-ic { transform: scale(1.1); }
.prod-card h3 { font-size: var(--text-h5); margin-bottom: 10px; }
.prod-card p { font-size: 15px; color: var(--gray-500); line-height: 1.55; margin-bottom: 22px; }
.prod-more {
  margin-top: auto;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.prod-more .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.prod-card:hover .prod-more { color: var(--acc); }
.prod-card:hover .prod-more .arrow { transform: translateX(3px); }

/* ---------- Developer-first (card over JSON response) ---------- */
.devfirst { position: relative; }
.devfirst::before {
  content: ''; position: absolute; inset: 0 0 0 46%;
  background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(75% 85% at 60% 45%, #000 40%, transparent);
  mask-image: radial-gradient(75% 85% at 60% 45%, #000 40%, transparent);
  pointer-events: none;
}
.devfirst-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: center;
}
.df-visual { position: relative; padding-top: 120px; }
.df-response {
  background: var(--gray-75);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  overflow: hidden;
}
.df-resp-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--gray-400); margin-bottom: 40px;
}
.df-response pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.75;
  color: var(--gray-600); white-space: pre;
}
.df-response .ln {
  display: inline-block; width: 26px;
  color: var(--gray-300); user-select: none;
}
.df-response .sc-fn { color: var(--seafoam-dark); }
.df-response .sc-str { color: var(--accent-blue-deep); }
.df-response .sc-kw { color: var(--orange); }
/* staggered line fade-in when revealed */
.df-response pre { display: block; }
.df-visual.in .df-response pre { animation: vertIn 0.6s var(--ease-out) 0.2s both; }

.df-card {
  position: absolute; top: 0; left: 6%; right: 6%; z-index: 2;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-widget);
}
.df-amount {
  font-size: 27px; font-weight: 500; letter-spacing: var(--track-heading);
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.df-tags {
  display: flex; gap: 16px;
  font-size: 13px; color: var(--gray-500); margin-bottom: 18px;
}
.df-spin {
  display: inline-block; font-style: normal; color: var(--seafoam-dark);
  animation: spin 2.2s linear infinite;
}
.df-bar {
  height: 4px; border-radius: var(--radius-xs); background: var(--gray-100);
  overflow: hidden; margin-bottom: 16px;
}
.df-bar i {
  display: block; height: 100%; width: 0;
  background: var(--seafoam);
  border-radius: var(--radius-xs);
  transition: width 1.2s var(--ease-inout) 0.4s;
}
.df-visual.in .df-bar i { width: 30%; }
.df-parties { display: flex; justify-content: space-between; }
.df-parties b { display: block; font-size: 14.5px; font-weight: 500; }
.df-parties small { font-size: 12px; color: var(--gray-400); }
.df-right { text-align: right; }

.df-h {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 16px;
}
.df-copy .section-sub { max-width: 420px; margin-bottom: 26px; }
.df-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 52px;
}
.df-feats h4 { font-size: var(--text-h6); font-weight: 500; margin-bottom: 10px; }
.df-feats p { font-size: 14.5px; color: var(--gray-500); line-height: 1.6; }

/* ---------- Confidence carousel (Adyen) ---------- */
/* first card aligns with the content column, but the TRACK spans the
   full viewport — scrolled cards get clipped by the browser edge,
   never by the content column */
.car-wrap {
  position: relative;
  margin-left: -32px; margin-right: -32px;            /* escape section padding */
}
.car-track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
  /* first card starts on the content column; snapping honors it too;
     scrolled cards clip at the BROWSER edge (the track spans the viewport) */
  padding-left: max(32px, calc((100vw - 1200px) / 2));
  scroll-padding-left: max(32px, calc((100vw - 1200px) / 2));
  padding-right: 48px;
}
.car-track::-webkit-scrollbar { display: none; }
.car-card {
  position: relative; flex: 0 0 320px;
  min-height: 460px;
  background: var(--gray-50);
  border-radius: var(--radius-xs);
  padding: 28px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  cursor: default;
}
/* entrance: sweep in from the right, staggered left→right */
.car-card.reveal { opacity: 0; transform: translateX(80px); }
.car-card.reveal.in { opacity: 1; transform: translateX(0); }
.car-card canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.car-card:hover canvas { opacity: 1; }
.car-ic {
  position: relative; z-index: 1;
  font-style: normal; font-size: 19px; color: var(--navy);
  margin-bottom: auto;
}
.car-body { position: relative; z-index: 1; padding-bottom: 60px; }
.car-body h3 { font-size: var(--text-h5); letter-spacing: var(--track-heading); margin-bottom: 10px; }
.car-body p { font-size: 15px; color: var(--gray-500); line-height: 1.55; max-width: 250px; }
.car-nav {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 24px;
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.car-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 16px; color: var(--navy);
  background: #fff; border: 1px solid var(--gray-100);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.car-nav button:hover:not(:disabled) {
  border-color: var(--gray-300); box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.car-nav button:disabled { opacity: 0.3; cursor: default; }

/* ---------- Morph story (dot cloud) ---------- */
.morph-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px;
  align-items: start;
}
.morph-visual-wrap { align-self: stretch; }
.morph-visual {
  position: sticky; top: calc(50vh - 250px);
  height: 500px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#morph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.morph-label {
  position: absolute; left: 24px; bottom: 20px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--gray-400);
}
.morph-steps { padding: 16vh 0 30vh; }
.morph-step {
  padding: 26px 0 26px 28px;
  border-left: 2px solid var(--gray-100);
  margin-bottom: 34vh;
  opacity: 0.62;                 /* resting steps stay readable */
  transition: opacity 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}
.morph-step:last-child { margin-bottom: 0; }
.morph-step.active {
  opacity: 1; border-left-color: var(--accent-base); transform: translateX(6px);
}
.morph-step.active h3 { color: var(--navy); }
.morph-step h3 { font-size: var(--text-h5); margin-bottom: 10px; }
.morph-step p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 380px; margin-bottom: 12px; }
/* v2 depth: principle line + evidence links inside each step */
.morph-step .fw-principle {
  display: block; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.03em; color: var(--accent-deep);
  border-left: 2px solid var(--accent-light); padding-left: 10px;
  margin: 14px 0 12px; max-width: 380px;
}
.morph-step .rs-links { max-width: 380px; margin-bottom: 0; }
.morph-step .rs-links a { font-size: 13.5px; }
/* v2: per-step content card floating over the sticky visual */
.morph-card {
  position: absolute; right: 7%; bottom: 9%;
  width: min(320px, 72%);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 16px 18px 14px;
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.morph-card.on { opacity: 1; transform: none; }
.morph-card .ph-main-head { padding-bottom: 8px; margin-bottom: 4px; }

/* ---------- Industry accordion (Adyen) ---------- */
.acc-section { padding-left: 0; padding-right: 0; }
.acc-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px;
  align-items: stretch;
}
.acc-left {
  padding: 24px 0 24px max(32px, calc((100vw - 1200px) / 2));
}
.acc-h {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 48px;
}
.acc-item { border-bottom: 1px solid var(--gray-100); position: relative; }
.acc-item:first-child { border-top: 1px solid var(--gray-100); }
.acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 18px; font-weight: 450;
  color: var(--gray-500);
  background: none; border: none; cursor: pointer;
  padding: 22px 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.acc-head:hover { color: var(--navy); }
.acc-item.open .acc-head { color: var(--navy); font-weight: 500; }
.acc-plus {
  font-style: normal; font-size: 20px; font-weight: 300;
  color: var(--gray-400);
  transition: transform 0.35s var(--ease-inout), color var(--dur-fast) var(--ease-out);
}
.acc-item.open .acc-plus { transform: rotate(45deg); color: var(--navy); }
.acc-body {
  height: 0; overflow: hidden;
  transition: height 0.45s var(--ease-inout);
}
.acc-body p {
  font-size: 15px; color: var(--ink-soft); line-height: 1.6;
  max-width: 440px; padding: 0 4px;
}
.acc-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 500; color: var(--navy);
  margin: 14px 4px 24px;
}
.acc-more .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.acc-more:hover .arrow { transform: translateX(3px); }
/* animated accent line under the open row */
.acc-item::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0; background: var(--seafoam);
  transition: width 0.6s var(--ease-inout);
}
.acc-item.open::after { width: 44px; }

.acc-media { position: relative; min-height: 640px; overflow: hidden; }
.acc-layer {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, var(--bg2, var(--accent-blue-deep)), var(--bg1, var(--navy-900)));
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.acc-layer.active { opacity: 1; }
.acc-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  background: radial-gradient(70% 70% at 50% 50%, rgba(0, 0, 0, 0.12), transparent);
}
.acc-overlay b {
  font-size: var(--text-h1); font-weight: 600;
  letter-spacing: var(--track-heading); color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.6s var(--ease-out) 0.15s;
}
.acc-overlay small {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.65);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out) 0.28s, transform 0.6s var(--ease-out) 0.28s;
}
.acc-layer.active .acc-overlay b,
.acc-layer.active .acc-overlay small { opacity: 1; transform: translateY(0); }

/* ---------- Increase product grid (hairline table) ---------- */
#incgrid { position: relative; overflow: hidden; }
#incgrid::after {
  content: ''; position: absolute; right: -140px; bottom: -180px;
  width: 380px; height: 420px;
  background: linear-gradient(210deg, var(--color-sky-cyan), var(--color-ocean-depth));
  transform: rotate(24deg);
  opacity: 0.85;
  pointer-events: none;
}
.inc-head { max-width: 620px; margin-bottom: 48px; }
.inc-head h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 18px;
}
.inc-head .section-sub { margin-bottom: 28px; }

.inc-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;                          /* hairline lines via背景透出 */
  background: var(--gray-100);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inc-cell {
  display: flex; flex-direction: column;
  background: #fff;
  padding: 26px 26px 22px;
  min-height: 240px;
  transition: background var(--dur-fast) var(--ease-out);
}
.inc-cell:hover { background: var(--gray-25); }
.inc-ic {
  width: 30px; height: 30px; border-radius: var(--radius);
  background: var(--inc-accent, var(--accent-gold-light));
  color: var(--color-obsidian);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px;
  margin-bottom: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.inc-cell:hover .inc-ic { transform: scale(1.1); }
.inc-cell b { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.inc-cell p { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-bottom: 20px; }
.inc-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.inc-more .arrow { transition: transform var(--dur-fast) var(--ease-out); font-weight: 400; }
.inc-cell:hover .inc-more .arrow { transform: translateX(3px); }

/* ---------- Increase grid v2 — Column-system polish ---------- */
#incgrid2 { position: relative; overflow: hidden; }
/* corner decoration: our halftone lattice instead of Increase's color block */
#incgrid2::after {
  content: ''; position: absolute; right: -40px; bottom: -60px;
  width: 420px; height: 380px;
  background-image: radial-gradient(circle, var(--color-fog) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side at 75% 75%, #000, transparent);
  mask-image: radial-gradient(closest-side at 75% 75%, #000, transparent);
  pointer-events: none;
}
.inc2-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-100);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);        /* the whole table floats like a card */
}
.inc2-cell {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  padding: 26px 26px 22px;
  min-height: 240px;
  transition: background var(--dur-med) var(--ease-out);
}
.inc2-cell:hover { background: var(--gray-25); }
/* our signature accent cursor: a seafoam line grows along the cell top */
.inc2-cell::before {
  content: ''; position: absolute; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--acc, var(--seafoam));
  transition: width 0.5s var(--ease-inout);
}
.inc2-cell:hover::before { width: 100%; }
.inc2-num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--gray-300);
  transition: color var(--dur-fast) var(--ease-out);
}
.inc2-cell:hover .inc2-num { color: var(--acc, var(--seafoam)); }
.inc2-ic {
  width: 36px; height: 36px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--acc, var(--seafoam)) 10%, transparent);
  color: var(--acc, var(--seafoam-dark));
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 15px;
  margin-bottom: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.inc2-cell:hover .inc2-ic { transform: scale(1.1); }
.inc2-cell b {
  font-size: 16px; font-weight: 500; letter-spacing: var(--track-tight);
  color: var(--navy); margin-bottom: 8px;
}
.inc2-cell p { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-bottom: 20px; }
.inc2-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.inc2-more .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.inc2-cell:hover .inc2-more { color: var(--acc, var(--navy)); }
.inc2-cell:hover .inc2-more .arrow { transform: translateX(3px); }

/* ---------- Blog spotlight (Stripe "What's happening") ---------- */
.spot-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px;
}
.spot-head h2 { font-size: var(--text-h3); letter-spacing: var(--track-heading); }
.spot-sub { font-size: var(--text-h4); color: var(--gray-400); letter-spacing: var(--track-heading); }
.spot-nav { display: flex; gap: 8px; }
.spot-nav button {
  width: 38px; height: 38px; border-radius: var(--radius);
  font-size: 15px; color: var(--navy);
  background: rgba(68, 180, 139, 0.08);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.spot-nav button:hover:not(:disabled) {
  border-color: var(--seafoam); box-shadow: var(--shadow-sm);
}
.spot-nav button:disabled { opacity: 0.35; cursor: default; }

.spot-track { display: flex; gap: 12px; height: 440px; }
.spot-panel {
  position: relative;
  flex: 0 0 var(--fb, 12%);
  min-width: 0;
  border-radius: var(--radius-xl); overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.65s var(--ease-inout);
}
.spot-panel.active { cursor: default; }
/* collapsed slivers nudge open a touch on hover — the Stripe tease */
.spot-panel:not(.active):hover { flex-basis: calc(var(--fb, 12%) + 2.5%); }

/* the art is FIXED-size and center-anchored: panels crop it, never stretch it */
.spot-art {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: var(--artw, 720px);
  transform: translateX(-50%);
  background: linear-gradient(160deg, var(--g2, var(--accent-lilac)), var(--g1, var(--accent-lilac-deep)));
}
.spot-art canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.7;
}

/* bottom-left overlay on the expanded panel */
.spot-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 72px 30px 26px;
  background: linear-gradient(180deg, transparent, rgba(2, 6, 30, 0.45));
  opacity: 0; transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.spot-panel.active .spot-overlay {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.28s;
}
.spot-overlay small {
  display: block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
}
.spot-title {
  font-size: var(--text-h3); font-weight: 500;
  line-height: var(--lh-heading); letter-spacing: var(--track-heading); color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.spot-overlay p {
  margin-top: 10px;
  font-size: 14.5px; color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.spot-foot {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; margin-top: 26px;
}
.spot-descs { position: relative; flex: 1; min-height: 76px; }
.spot-desc {
  position: absolute; inset: 0;
  font-size: 17px; line-height: 1.55; color: var(--gray-500);
  visibility: hidden;
}
.spot-desc b { color: var(--navy); font-weight: 600; }
.spot-desc.active { visibility: visible; animation: vertIn 0.45s var(--ease-out) both; }
#spot-cta { flex-shrink: 0; }

/* ---------- ABM orchestration diagram (Stripe) ---------- */
.abm-shell {
  position: relative;
  background: var(--navy-950);
  border-radius: var(--radius-2xl);
  padding: 56px 56px 48px;
  overflow: hidden;
}
.abm-shell::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(160, 175, 255, 0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.abm-h {
  position: relative;
  font-size: var(--text-h4); line-height: var(--lh-title);
  letter-spacing: var(--track-heading); font-weight: 450;
  color: var(--accent-blue-light);
  max-width: 720px; margin-bottom: 40px;
}
.abm-h b { color: #fff; font-weight: 600; }

.abm-stage { position: relative; height: 560px; }
.abm-stage > * { position: absolute; }

/* dotted connectors with a travelling pulse */
.abm-line { pointer-events: none; }
.abm-line.v { border-left: 1.5px dotted rgba(130, 145, 255, 0.45); width: 0; }
.abm-line.h { border-top: 1.5px dotted rgba(130, 145, 255, 0.45); height: 0; }
.abm-line::after {
  content: ''; position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-lilac);
  box-shadow: 0 0 8px rgba(139, 124, 247, 0.9);
}
.abm-line.v::after { left: -3.2px; animation: pulseV 2.6s linear infinite; }
.abm-line.h::after { top: -3.2px; animation: pulseH 2.6s linear infinite; }
.abm-line:nth-of-type(2n)::after { animation-delay: 0.9s; }
.abm-line:nth-of-type(3n)::after { animation-delay: 1.7s; }
@keyframes pulseV { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 5px); opacity: 0; } }
@keyframes pulseH { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 5px); opacity: 0; } }

.abm-row { display: flex; gap: 8px; }
.abm-chip {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius); padding: 9px 15px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.abm-chip:hover { transform: translateY(-2px); }
.abm-chip.dark {
  color: var(--accent-lilac-light);
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
}
.abm-chip.violet {
  color: #fff;
  background: var(--accent-lilac);
  box-shadow: 0 4px 14px rgba(98, 80, 224, 0.35);
}
.abm-chip.violet:hover { box-shadow: 0 6px 20px rgba(98, 80, 224, 0.55); }
.abm-chip.ghost {
  width: 64px;
  background: transparent;
  border: 1px dashed rgba(130, 145, 255, 0.3);
}

.abm-tiles {
  display: grid; grid-template-columns: repeat(3, 40px); gap: 6px;
  background: var(--navy-900); border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg); padding: 8px;
}
.abm-tiles i {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 16px; font-weight: 700; color: #fff;
  transition: transform var(--dur-fast) var(--ease-out);
}
.abm-tiles i:hover { transform: scale(1.1); }
.abm-tiles i.ghost { background: transparent; border: 1px dashed rgba(130, 145, 255, 0.3); }

.abm-hub {
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950));
  border: 1px solid var(--navy-600);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(98, 80, 224, 0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; z-index: 2;
}
.abm-hub b {
  font-size: 12.5px; font-weight: 600; color: #fff;
  text-align: center; line-height: var(--lh-heading); letter-spacing: var(--track-tight);
}
.abm-crm {
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.abm-crm b { color: #ff7a59; font-size: 19px; font-weight: 700; }

/* ---------- Story rows (Stripe enterprise accordion) ---------- */
.sr-intro {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px;
  align-items: start; margin-bottom: 48px;
}
.sr-intro h2 {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 22px;
}
.sr-stat { font-size: 16px; color: var(--gray-500); line-height: 1.6; padding-top: 6px; }

.sr-row { border-top: 1px dotted var(--gray-200); }
.sr-row:last-child { border-bottom: 1px dotted var(--gray-200); }
.sr-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 4px; cursor: pointer;
}
.sr-tile {
  width: 38px; height: 38px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 16px; font-weight: 700; color: #fff;
  transition: transform var(--dur-fast) var(--ease-out);
}
.sr-head:hover .sr-tile { transform: scale(1.06); }
.sr-line {
  flex: 1; font-size: 17px; font-weight: 500; letter-spacing: var(--track-tight);
  transition: color var(--dur-fast) var(--ease-out);
}
.sr-head:hover .sr-line { color: var(--navy); }
.sr-cta {
  opacity: 0; transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.sr-row.open .sr-cta {
  opacity: 1; transform: translateX(0); pointer-events: auto;
  transition-delay: 0.2s;
}
.sr-plus {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300;
  color: var(--navy); background: rgba(68, 180, 139, 0.1);
  transition: transform 0.35s var(--ease-inout), background var(--dur-fast) var(--ease-out);
}
.sr-head:hover .sr-plus { background: rgba(68, 180, 139, 0.18); }
.sr-row.open .sr-plus { transform: rotate(45deg); }

.sr-body { height: 0; overflow: hidden; transition: height 0.55s var(--ease-inout); }
.sr-media {
  position: relative; height: 440px;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(170deg, var(--g2, var(--accent-blue-deep)), var(--g1, var(--navy-900)));
  margin: 6px 0 22px;
}
.sr-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; }
.sr-overlay {
  position: absolute; left: 36px; bottom: 30px;
}
.sr-overlay b {
  display: block;
  font-size: var(--text-display); font-weight: 600;
  letter-spacing: var(--track-display); color: #fff; line-height: 1;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out) 0.25s, transform 0.5s var(--ease-out) 0.25s;
}
.sr-overlay small {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out) 0.38s, transform 0.5s var(--ease-out) 0.38s;
}
.sr-row.open .sr-overlay b,
.sr-row.open .sr-overlay small { opacity: 1; transform: translateY(0); }

/* ---------- Features out of the box (Stripe pricing) ---------- */
.fx-h {
  font-size: var(--text-h4); letter-spacing: var(--track-heading);
  margin-bottom: 48px;
}
.fx-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 48px; }
.fx-cell { padding: 0 28px 0 0; }
.fx-cell:nth-child(4n+2),
.fx-cell:nth-child(4n+3),
.fx-cell:nth-child(4n) { border-left: 1px dotted var(--gray-200); padding-left: 28px; }
.fx-ic { font-style: normal; font-size: 24px; display: block; margin-bottom: 18px; }
.fx-cell h3 {
  font-size: var(--text-h6); font-weight: 600; letter-spacing: var(--track-tight);
  border-left: 2px solid var(--navy); padding-left: 10px; margin-left: -12px;
  margin-bottom: 16px; line-height: var(--lh-title);
}
.fx-item {
  position: relative;
  font-size: 14.5px; color: var(--ink-soft);
  padding: 5px 0; line-height: 1.45;
}
.fx-item[data-tip] {
  cursor: help;
  text-decoration: underline dotted var(--gray-300);
  text-underline-offset: 4px;
}
.fx-item[data-tip]:hover { color: var(--navy); }
/* the explainer popover */
.fx-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 0;
  width: 240px;
  background: var(--navy-950); color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px; line-height: 1.55; font-weight: 400;
  padding: 11px 13px; border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(11, 18, 53, 0.35);
  z-index: 20;
  animation: vertIn 0.25s var(--ease-out) both;
}
.fx-item[data-tip]:hover::before {
  content: '';
  position: absolute; bottom: calc(100% + 4px); left: 22px;
  border: 6px solid transparent; border-top-color: var(--navy-950);
  z-index: 20;
  animation: vertIn 0.25s var(--ease-out) both;
}

/* ---------- SKU stories (Stripe category leaders) ---------- */
.sku-h {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 40px;
}
/* all content flies in right → left, Stripe-style */
@keyframes flyIn {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
.sku-grid {
  display: grid; grid-template-columns: 0.26fr 0.74fr; gap: 40px;
  align-items: start;
}
.sku-stat {
  border-left: 2px solid var(--acc, var(--seafoam));   /* accent follows the SKU */
  padding-left: 14px; margin-bottom: 22px;
  animation: flyIn 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.sku-stat b {
  display: block; font-size: 28px; font-weight: 500;
  letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; line-height: var(--lh-display);
  margin-bottom: 4px;
}
.sku-stat small { font-size: 13px; color: var(--gray-500); line-height: 1.45; display: block; max-width: 200px; }
.sku-stack {
  border-left: 2px solid var(--acc, var(--seafoam));
  padding-left: 14px;
  animation: flyIn 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.sku-stack h6 {
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 12px;
}
.sku-stack span {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; padding: 5px 0;
}
.sku-stack i { font-style: normal; font-size: 15px; }

.sku-media {
  position: relative; height: 450px;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(170deg, var(--g2, var(--accent-lilac-mid)), var(--g1, var(--accent-lilac-dark)));
  box-shadow: var(--shadow-xl);
}
.sku-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.65;
  transition: transform 0.8s var(--ease-out);
}
.sku-media:hover canvas { transform: scale(1.04); }
/* bottom-heavy scrim: text survives any art behind it */
.sku-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 30, 0.05) 30%, rgba(2, 6, 30, 0.55) 100%);
}
.sku-chip {
  position: absolute; top: 22px; left: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; color: #fff;
}
.sku-chip i {
  width: 30px; height: 30px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 14px; font-weight: 700; color: #fff;
}
.sku-headline {
  position: absolute; left: 26px; right: 26px; bottom: 26px;
  font-size: var(--text-h4); font-weight: 500;
  line-height: var(--lh-title); letter-spacing: var(--track-heading); color: #fff;
  max-width: 560px;
}
.sku-read {
  position: absolute; top: 20px; right: 22px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.sku-media:hover .sku-read { opacity: 1; transform: translateY(0); }
/* fly-in on tab switch (right → left, like the rest) */
.sku-media.in .sku-chip { animation: flyIn 0.45s var(--ease-out) 0.05s both; }
.sku-media.in .sku-headline { animation: flyIn 0.5s var(--ease-out) 0.15s both; }

/* tabs = cells of a hairline grid; the active cell lights its TOP edge
   in that SKU's own color */
.sku-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
}
.sku-tab {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--gray-400); background: none; cursor: pointer;
  border: none;
  border-top: 1px solid var(--gray-100);
  padding: 22px 12px;
  filter: grayscale(1); opacity: 0.6;
  transition: color var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.sku-tab + .sku-tab { border-left: 1px dotted var(--gray-200); }
.sku-tab:focus, .sku-tab:focus-visible { outline: none; }
.sku-tab i {
  width: 26px; height: 26px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; font-weight: 700; color: #fff;
}
.sku-tab:hover { filter: grayscale(0.4); opacity: 0.85; }
.sku-tab.active { color: var(--navy); filter: grayscale(0); opacity: 1; }
.sku-tab::after {
  content: ''; position: absolute; top: -1px; left: 0; right: 0;
  height: 2px; background: var(--tacc, var(--seafoam));   /* per-tab brand line */
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-inout);
}
.sku-tab.active::after { transform: scaleX(1); }

/* ---------- Enterprise hero + card deck (Stripe) ---------- */
.eh-shell {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  min-height: 620px;
  padding: 64px 56px 0;
}
.eh-bg {
  position: absolute; inset: -2%;
  background: linear-gradient(115deg, var(--navy-950) 0%, var(--accent-lilac-dark) 28%, var(--accent-lilac-deep) 52%, var(--accent-lilac) 72%, var(--accent-lilac-dark) 100%);
  background-size: 220% 220%;
  animation: ehFlow 14s var(--ease-inout) infinite alternate;
  filter: blur(var(--ehblur, 0px));
  transform: translateZ(0);
}
@keyframes ehFlow {
  from { background-position: 0% 20%; }
  to { background-position: 100% 80%; }
}
.eh-inner {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px;
  align-items: center;
  min-height: 480px;
}
.eh-copy h2 {
  font-size: var(--text-display); line-height: var(--lh-display);
  letter-spacing: var(--track-display); font-weight: 600; color: #fff;
  margin-bottom: 24px;
}
.eh-copy h2 span { color: var(--color-peach-glow); }
.eh-copy p {
  font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.75);
  max-width: 420px; margin-bottom: 30px;
}
.eh-cta {
  background: #fff; color: var(--navy);
  border-radius: var(--radius-full);
  padding: 12px 22px; font-size: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.eh-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); }

/* --- the deck + scatter flight layer --- */
#enthero .section-inner { position: relative; }
.eh-deck { position: relative; height: 480px; }
.eh-fly {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.eh-fly .eh-card {
  position: absolute; top: 0; left: 0;
  pointer-events: auto;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  will-change: transform;
  transition: transform 0.6s var(--ease-inout), opacity 0.55s var(--ease-out);
}
.eh-fly .eh-card.noTrans { transition: none; }   /* scroll-driven flight = 1:1 */
.eh-grid .eh-slot { border-radius: var(--radius-xl); }
.ehm { padding: 18px 20px; min-height: 262px; font-size: 12.5px; }
.eh-cardfoot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--gray-100);
  padding: 14px 20px;
}
.eh-cardfoot h3 { font-size: var(--text-h6); letter-spacing: var(--track-heading); }
.eh-explore {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.eh-explore i {
  font-style: normal;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(68, 180, 139, 0.15); color: var(--seafoam-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.eh-explore:hover i { transform: translateY(2px); }

/* --- mini-UI skins --- */
.ehm-rows { border-bottom: 1px solid var(--gray-100); margin-bottom: 12px; }
.ehm-row {
  display: flex; justify-content: space-between; padding: 8px 2px;
  color: var(--gray-500);
}
.ehm-row.alt { background: var(--gray-25); }
.ehm-row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ehm-next {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 12px;
}
.ehm-next span { font-weight: 600; color: var(--ink); }
.ehm-next small { display: block; font-size: 9.5px; letter-spacing: 0.08em; color: var(--gray-400); }
.ehm-next b { font-variant-numeric: tabular-nums; }
.ehm-chipline {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--gray-100); padding-top: 12px;
  color: var(--gray-500);
}
.ehm-chipline i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--navy); color: #fff; border-radius: var(--radius-xs); padding: 4px 8px;
}
.ehm-formtitle { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 14px; }
.ehm-field {
  display: block; border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 10px;
}
.ehm-field small { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); }
.ehm-field span { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.ehm-opts { display: flex; gap: 8px; margin-top: 14px; }
.ehm-opts span {
  border: 1px solid var(--gray-100); border-radius: var(--radius-full);
  padding: 5px 12px; font-size: 11.5px; color: var(--gray-400);
}
.ehm-opts span.on {
  border-color: rgba(68, 180, 139, 0.5); color: var(--seafoam-dark);
  background: rgba(68, 180, 139, 0.07);
}
.ehm-charthead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; color: var(--ink); font-weight: 500;
}
.ehm-charthead i {
  font-style: normal; font-size: 10px; font-weight: 700;
  background: rgba(68, 180, 139, 0.15); color: var(--seafoam-dark);
  border-radius: var(--radius-xs); padding: 2px 6px; margin-left: 6px;
}
.ehm-charthead small { color: var(--gray-400); font-size: 11px; }
.ehm-bars { display: flex; align-items: flex-end; gap: 7px; height: 74px; margin-bottom: 16px; }
.ehm-bars i {
  flex: 1; height: var(--h); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, var(--color-sky-cyan), var(--accent-blue));
}
.ehm-spark { display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.ehm-spark i {
  flex: 1; background: rgba(122, 92, 214, 0.5); border-radius: var(--radius-xs);
}
.ehm-spark i:nth-child(odd) { height: 40%; }
.ehm-spark i:nth-child(even) { height: 75%; }
.ehm-spark i:last-child { height: 100%; background: var(--accent-lilac-mid); }

/* --- hero logos row --- */
.eh-logos {
  position: relative;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 26px; padding: 20px 0 24px;
}
.eh-logos span {
  font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.45);
  letter-spacing: var(--track-tight);
}

/* --- landing grid (the deck cards, settled) --- */
.eh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 20px;
}
.ehg-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.ehg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.ehg-art { background: var(--gray-75); padding: 22px 22px 0; }
.ehg-art .ehm {
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  min-height: 200px;
}
.ehg-body { padding: 22px 24px 20px; }
.ehg-body h3 { font-size: var(--text-h5); letter-spacing: var(--track-heading); margin-bottom: 10px; }
.ehg-body p { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-bottom: 18px; min-height: 66px; }

/* ---------- Get-started tiers (Stripe startups) ---------- */
.gs-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 36px;
}
.gs-head h2 { font-size: var(--text-h2); letter-spacing: var(--track-heading); margin-bottom: 12px; }
.gs-head .section-sub { max-width: 560px; }
.gs-nav { display: flex; gap: 8px; flex-shrink: 0; }
.gs-nav button {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 15px; color: var(--navy);
  background: rgba(68, 180, 139, 0.08);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.gs-nav button:hover:not(:disabled) { border-color: var(--seafoam); box-shadow: var(--shadow-sm); }
.gs-nav button:disabled { opacity: 0.35; cursor: default; }

/* gradient progress bar with four labeled stops */
.gs-progress { margin-bottom: 40px; }
.gs-bar {
  position: relative; height: 3px; border-radius: var(--radius-xs);
  background: var(--gray-100);
  overflow: hidden;
}
.gs-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 14%;
  overflow: hidden;
  transition: width 0.4s var(--ease-out);
}
.gs-fill i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-blue-soft), var(--accent-blue) 45%, var(--accent-lilac-mid) 75%, var(--accent-lilac-deep));
}
.gs-stops {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
}
.gs-stop {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); text-align: center;
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gs-stop:focus, .gs-stop:focus-visible { outline: none; }
.gs-stop:hover { opacity: 0.8; }
.gs-stop.active { opacity: 1; }
.gs-stop b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.gs-stop small { font-size: 13px; color: var(--gray-400); }

/* full-bleed card strip: starts on the content column, escapes both edges */
.gs-section { padding-left: 0; padding-right: 0; }
/* 1264 = 1200 content + 2×32 padding → header text lands EXACTLY on the
   same content column as every other section and the track's first card */
.gs-section .section-inner { max-width: 1264px; padding: 0 var(--page-pad); }
.gs-track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 12px max(32px, calc((100vw - 1200px) / 2)) 20px;
  scroll-padding-left: max(32px, calc((100vw - 1200px) / 2));
}
.gs-track::-webkit-scrollbar { display: none; }
.gs-card {
  flex: 0 0 430px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.gs-card:hover {
  box-shadow: 0 24px 60px rgba(17, 26, 74, 0.14), 0 6px 16px rgba(17, 26, 74, 0.06);
  transform: translateY(-4px);
}
/* text zone is FIXED-height so every card matches and the art never
   drifts with copy length */
.gs-cardtop {
  height: 206px;
  padding: 24px 26px 18px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.gs-chip {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-full); padding: 4px 11px;
  margin-bottom: 14px;
}
.gs-cardtop h3 { font-size: var(--text-h5); letter-spacing: var(--track-heading); margin-bottom: 8px; }
.gs-cardtop p { font-size: 14px; color: var(--gray-500); line-height: 1.55; }
.gs-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 600;
  margin-top: auto;               /* link pinned to the zone's bottom */
}
.gs-more .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.gs-card:hover .gs-more .arrow { transform: translateX(3px); }
.gs-art {
  height: 238px;                  /* fixed art zone: identical on every card */
  overflow: hidden;
  background: var(--gray-75);
  padding: 20px 20px 0;
}
.gs-art .ehm {
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  height: 100%;
  min-height: 0;
}

/* ---------- Story rows v2 (Stripe Billing accordion) ---------- */
.sr2-row {
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.sr2-row.open {
  border-color: var(--accent-lilac-mid);
  box-shadow: 0 0 0 1px var(--accent-lilac-mid), var(--shadow-md);
}
.sr2-head {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-sans); font-size: 19px; font-weight: 500;
  letter-spacing: var(--track-heading); color: var(--ink); text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 16px 18px;
}
.sr2-head:focus, .sr2-head:focus-visible { outline: none; }
.sr2-ic {
  width: 40px; height: 40px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: rgba(122, 92, 214, 0.1);
  border: 1px solid rgba(122, 92, 214, 0.2);
  color: var(--accent-lilac-mid);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 17px;
}
.sr2-head span { flex: 1; }
.sr2-toggle {
  width: 36px; height: 36px; border-radius: var(--radius); flex-shrink: 0;
  background: rgba(122, 92, 214, 0.1);
  color: var(--accent-lilac-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 400;
  transition: background var(--dur-fast) var(--ease-out);
}
.sr2-head:hover .sr2-toggle { background: rgba(122, 92, 214, 0.2); }
.sr2-body { height: 0; overflow: hidden; transition: height 0.55s var(--ease-inout); }

/* gradient media stage (our own weather) */
.sr2-media {
  position: relative;
  min-height: 480px;
  margin: 2px 18px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(115deg, var(--m1, var(--accent-lilac-deep)), var(--m2, var(--accent-lilac)) 55%, var(--m3, var(--color-peach-glow)));
  background-size: 170% 170%;
  animation: ehFlow 16s var(--ease-inout) infinite alternate;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.sr2-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }

/* the white report illustration */
.sr2-report {
  position: relative;
  width: min(640px, 94%);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(20, 10, 50, 0.35);
  padding: 24px 28px 20px;
}
.sr2-report h4 { font-size: var(--text-h6); letter-spacing: var(--track-tight); margin-bottom: 16px; }
.sr2-report-slim { width: min(460px, 94%); }
.sr2-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.sr2-stats small { display: block; font-size: 12px; color: var(--gray-500); margin-bottom: 3px; }
.sr2-stats b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sr2-cap { font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.sr2-chartwrap { display: flex; gap: 10px; align-items: stretch; }
.sr2-axis {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px; color: var(--gray-400); text-align: right;
  padding-bottom: 2px;
}
.sr2-chart {
  position: relative; flex: 1;
  display: flex; align-items: flex-end; gap: 6px;
  height: 150px;
  border-bottom: 1px solid var(--gray-100);
}
.sr2-bar {
  flex: 1; display: flex; flex-direction: column-reverse;
}
.sr2-bar i { display: block; height: 0; transition: height 0.8s var(--ease-inout); }
.sr2-bar .sa { background: var(--accent-lilac-deep); border-radius: 0; }
.sr2-bar .sb { background: var(--accent-lilac); }
.sr2-bar .sc { background: var(--accent-lilac-light); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.sr2-row.open .sr2-bar i { height: var(--h); }
.sr2-row.open .sr2-bar:nth-child(odd) i { transition-delay: 0.15s; }
.sr2-row.open .sr2-bar:nth-child(3n) i { transition-delay: 0.28s; }
.sr2-line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.7s;
}
.sr2-row.open .sr2-line { opacity: 1; }
.sr2-x {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--gray-400);
  padding: 6px 34px 0;
}
.sr2-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11.5px; color: var(--gray-500);
}
.sr2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sr2-legend i { width: 10px; height: 10px; border-radius: var(--radius-xs); }
.sr2-lw {
  width: 16px !important; height: 0 !important;
  border-top: 2px dashed var(--color-peach-glow); border-radius: 0 !important;
}

/* row 2: rate card + plan chooser duo */
.sr2-duo {
  position: relative;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  justify-content: center;
  width: min(760px, 96%);
}
.sr2-rate, .sr2-plans {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(5, 35, 25, 0.35);
  padding: 20px 24px;
}
.sr2-rate { flex: 1.2; min-width: 300px; }
.sr2-plans { flex: 1; min-width: 260px; }
.sr2-rate-head {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-100); padding-bottom: 10px;
}
.sr2-rate h4 { font-size: var(--text-h5); margin-bottom: 2px; }
.sr2-rate-sub { display: block; font-size: 11.5px; color: var(--gray-400); margin-bottom: 16px; }
.sr2-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--gray-50);
  font-size: 13px;
}
.sr2-field span { color: var(--gray-500); }
.sr2-field > b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.sr2-seg { display: inline-flex; border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; }
.sr2-seg b {
  font-size: 11.5px; font-weight: 500; color: var(--gray-500);
  padding: 5px 10px;
}
.sr2-seg b.on { background: rgba(68, 180, 139, 0.12); color: var(--seafoam-dark); }
.sr2-plans-head { font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.sr2-plan {
  border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 10px;
}
.sr2-plan.pop { border-color: var(--accent-lilac-mid); box-shadow: 0 0 0 1px var(--accent-lilac-mid); }
.sr2-plan b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.sr2-plan b i {
  font-style: normal; font-size: 10px; font-weight: 700;
  background: var(--accent-lilac-mid); color: #fff;
  border-radius: var(--radius-full); padding: 2px 8px; margin-left: 6px;
  vertical-align: 2px;
}
.sr2-plan small { display: block; font-size: 12px; color: var(--gray-500); line-height: 1.45; margin-bottom: 10px; }
.sr2-getbtn {
  display: inline-block;
  font-size: 12px; font-weight: 600; color: #fff;
  background: var(--accent-lilac-mid); border-radius: var(--radius); padding: 6px 12px;
}

/* three proof columns under the media */
.sr2-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding: 26px 22px 26px;
}
.sr2-cols p { font-size: 14px; color: var(--gray-500); line-height: 1.6; }
.sr2-cols b { color: var(--ink); font-weight: 600; }
.sr2-cols u { text-underline-offset: 3px; text-decoration-color: var(--gray-300); }

@media (max-width: 960px) {
  .sr2-cols { grid-template-columns: 1fr; gap: 16px; }
  .sr2-media { min-height: 0; padding: 24px 14px; }
  .sr2-stats { gap: 16px; }
}

/* ---------- Optimize carousel (Stripe Billing) ---------- */
.oc-section { padding-left: 0; padding-right: 0; }
.oc-section .section-inner { max-width: 1264px; padding: 0 var(--page-pad); }
.oc-track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px max(32px, calc((100vw - 1200px) / 2)) 16px;
  scroll-padding-left: max(32px, calc((100vw - 1200px) / 2));
  margin-top: 32px;
}
.oc-track::-webkit-scrollbar { display: none; }
.oc-card {
  flex: 0 0 356px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.oc-panel {
  position: relative;
  height: 372px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.oc-card:hover .oc-panel {
  box-shadow: 0 20px 50px rgba(17, 26, 74, 0.12);
  transform: translateY(-3px);
}
.oc-ui {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 78%;
}
.oc-text { padding: 20px 4px 0; }
.oc-text p { font-size: 14.5px; color: var(--gray-500); line-height: 1.55; margin-bottom: 12px; }
.oc-text b { color: var(--ink); font-weight: 600; }
.oc-text a {
  font-size: 14.5px; font-weight: 600;
  color: var(--oc, var(--navy));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.oc-text a:hover { opacity: 0.75; }

/* mini-UI: rate/summary card */
.oc-rate { padding: 16px 18px; }
.oc-rate-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--gray-50);
}
.oc-rate-row span { color: var(--gray-400); }
.oc-rate-row b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
.oc-amounts { padding-top: 10px; }
.oc-amounts div {
  display: flex; justify-content: space-between;
  font-size: 12.5px; padding: 7px 0;
}
.oc-amounts span { color: var(--gray-500); }
.oc-amounts b { font-variant-numeric: tabular-nums; }
.oc-amounts .hl b { color: var(--accent-blue); }

/* mini-UI: revenue chart */
.oc-rev { padding: 16px 18px; }
.oc-rev small { display: block; font-size: 11.5px; color: var(--gray-500); margin-bottom: 4px; }
.oc-rev > b { display: block; font-size: 20px; letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.oc-legend {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--gray-500);
  margin-bottom: 16px;
}
.oc-legend span { width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; }
.oc-legend .d1 { background: var(--accent-lilac-mid); margin-left: 0; }
.oc-legend .d2 { background: var(--accent-lilac-mid); margin-left: 10px; }
.oc-revbars {
  display: flex; align-items: flex-end; gap: 7px;
  height: 110px;
  border-bottom: 1px solid var(--gray-100);
}
.oc-revbars i {
  flex: 1; height: var(--h);
  background: var(--accent-lilac-mid); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.oc-revbars i.last { background: var(--accent-lilac-mid); }
.oc-revx { display: flex; justify-content: space-between; font-size: 10px; color: var(--gray-400); padding-top: 6px; }

/* mini-UI: SQL + question bubble */
.oc-sql { padding: 0; overflow: hidden; }
.oc-sql pre {
  margin: 0; padding: 16px 18px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: var(--gray-600); white-space: pre-wrap;
}
.oc-hidden {
  display: inline-block;
  font-size: 10px; color: var(--gray-500);
  background: var(--gray-100); border-radius: var(--radius-xs); padding: 2px 8px;
}
.oc-result {
  background: var(--gray-75);
  font-size: 11.5px; color: var(--gray-600);
  padding: 12px 18px;
}
.oc-result u { color: var(--accent-blue); text-underline-offset: 2px; }
.oc-bubble {
  position: absolute; top: 14%; right: 6%;
  max-width: 180px;
  background: var(--accent-lilac); color: #fff;
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  padding: 11px 14px;
  box-shadow: 0 12px 30px rgba(98, 80, 224, 0.4);
}

/* mini-UI: destination picker */
.oc-dest { width: 86%; }
.oc-dest-head {
  font-size: 12.5px; font-weight: 600;
  padding: 13px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.oc-dest-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px 16px;
}
.oc-dest-grid div {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 10px 6px;
  font-size: 10.5px; color: var(--gray-600);
}
.oc-dest-grid div.sel { border-color: var(--accent-blue-soft); box-shadow: 0 0 0 1px var(--accent-blue-soft); }
.oc-dest-grid i { font-style: normal; font-size: 15px; font-weight: 700; }
.oc-dest-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--gray-50);
}
.oc-dest-foot span {
  font-size: 11px; color: var(--gray-500);
  border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 5px 12px;
}
.oc-dest-foot b {
  font-size: 11px; color: #fff; font-weight: 600;
  background: var(--accent-blue); border-radius: var(--radius); padding: 5px 12px;
}

@media (max-width: 960px) {
  .oc-card { flex-basis: 300px; }
  .oc-panel { height: 330px; }
}

/* ---------- Customer spotlight (Stripe use-cases) ---------- */
/* .cs2-eyebrow is styled with the other eyebrows, above. */

/* ---------- Product hero (Column ach/wire/checks pattern) ----------
   Left: eyebrow / display title / lead / CTA row.
   Right: a 447px illustration stage — one content-true UI card with a
   looping micro-animation, a frosted navy code card overlapping it
   (the code that "produced" the visual), and a small glass stat chip. */
.ph-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    linear-gradient(175deg, #fff, var(--color-cloud-canvas) 70%);
  /* deep pages open on a full-screen hero; the next module starts below
     the fold. svh keeps mobile browser chrome from causing a jump. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 128px var(--page-pad) 92px;
}
.ph-inner {
  /* same contract as .section-inner: the wrapper pads, this box only
     caps the width. Keeps hero text on the site's 1200px column. */
  width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1.2fr 447px; gap: 72px;
  align-items: center;
}
.ph-copy h1 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); color: var(--navy);
  margin: 18px 0 20px;
}
.ph-copy h1 mark {
  background: none; color: var(--accent-deep);
}
.ph-lead {
  font-size: var(--text-body-lg); line-height: var(--lh-relaxed);
  color: var(--gray-500); max-width: 560px; margin-bottom: 28px;
}
.ph-ctas { display: flex; align-items: center; gap: 18px; }
.ph-ctas .btn-ghost {
  font-weight: 600; color: var(--navy); font-size: 15px;
}
.ph-ctas .btn-ghost:hover { color: var(--accent-deep); }
.ph-meta {
  display: flex; gap: 22px; margin-top: 34px;
  font-size: var(--text-small); color: var(--gray-500);
}
.ph-meta b { color: var(--navy); display: block; font-size: 16px; letter-spacing: var(--track-tight); }

/* ---- full-bleed variant (Stripe use-cases/ai geometry) ----
   Copy keeps the page column; the visual is an absolute panel running
   from mid-page to the RIGHT VIEWPORT EDGE: faint dot lattice, one
   duotone product screenshot in a browser frame ("illustrated", not
   raw), and the page's own animated ph-cards overlaid at the corners. */
.ph-hero.ph-bleed { min-height: 100vh; min-height: 100svh; }
.ph-hero.ph-bleed .ph-inner {
  grid-template-columns: minmax(0, 560px) 1fr;
}
.ph-blv {
  position: absolute; z-index: 1;
  top: 155px; bottom: 60px;
  /* anchor: page column's left edge + copy width + gap — the visual can
     never reach the title/lead text at any viewport width */
  left: calc((100% - min(100%, var(--page-max))) / 2 + var(--page-pad) + 604px);
  right: 0;
}
.ph-blv canvas.blv-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 160px);
          mask-image: linear-gradient(90deg, transparent, #000 160px);
}
.ph-blv .blv-shot {
  position: absolute; left: 7%; top: 3%; width: 93%;
  background: #fff; border-radius: 12px 0 0 12px; overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.07);
  opacity: 0;
  animation: cst-shot-in 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s forwards;
}
.blv-bar {
  height: 36px; display: flex; align-items: center; gap: 7px;
  padding: 0 16px; background: #edf0f4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.blv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dae2; }
.blv-bar span {
  margin-left: 10px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--gray-400); background: #fff; border-radius: 5px; padding: 3px 12px;
}
/* the screenshot itself reads as brand-washed line art, not raw UI */
.blv-img { position: relative; }
.blv-img img { display: block; width: 100%; filter: grayscale(1) contrast(1.05); }
.blv-img::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent-deep); mix-blend-mode: color;
}
/* the page's own animated cards, re-anchored onto the visual */
.ph-blv .ph-main {
  top: auto; right: auto; left: -6px; bottom: 6%;
  width: min(320px, 56%);
  opacity: 0;
  animation: cst-shot-in 0.6s var(--ease-out) 0.4s forwards,
             figdot-float 9s var(--ease-inout) 1.2s infinite;
}
.ph-blv .ph-chip { top: -16px; left: -26px; }
.ph-blv .ph-code { left: auto; right: 6%; bottom: -18px; }
.ph-blv .rf-mk.tl { top: -18px; left: 2%; }
.ph-blv .rf-mk.bl { bottom: -6px; left: 2%; }
@media (max-width: 1100px) {
  .ph-hero.ph-bleed { min-height: 100vh; min-height: 100svh; }
  .ph-hero.ph-bleed .ph-inner { grid-template-columns: 1fr; }
  .ph-blv {
    position: relative; inset: auto; left: auto; right: auto;
    height: 420px; margin: 44px var(--page-pad) 0 var(--page-pad);
  }
  .ph-blv .ph-main { left: -8px; }
  .ph-blv .ph-chip { left: auto; right: -6px; }
}

/* ---- illustration stage ---- */
.ph-stage { position: relative; min-height: 470px; }
.ph-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.ph-main {
  position: absolute; top: 12px; right: 8px;
  width: min(348px, 92%);
  padding: 20px 22px 18px;
  animation: figdot-float 9s var(--ease-inout) infinite;
}
.ph-main-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--gray-75);
}
.ph-main-head b { font-size: 15px; color: var(--navy); }
.ph-main-head span { font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: var(--track-tight); }
.ph-main-head small { display: block; font-size: 12px; color: var(--gray-400); font-weight: 400; margin-top: 2px; }

/* timeline rows light up in sequence, Column's ACH transfer card */
.ph-row {
  --i: 0;
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px;
  align-items: center;
  padding: 9px 0; position: relative;
  font-size: 13.5px; color: var(--gray-400);
  animation: ph-row 7.2s linear infinite;
  animation-delay: calc(var(--i) * 0.9s);
}
.ph-row i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gray-200); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--gray-200);
  animation: ph-dot 7.2s linear infinite;
  animation-delay: calc(var(--i) * 0.9s);
}
.ph-row::before {                    /* spine between dots */
  content: ''; position: absolute; left: 4.5px; top: -6px; bottom: -6px;
  width: 1px; background: var(--gray-100);
}
.ph-row:first-of-type::before { top: 50%; }
.ph-row:last-of-type::before { bottom: 50%; }
.ph-row em { font-style: normal; font-variant-numeric: tabular-nums; font-size: 12.5px; }
@keyframes ph-row {
  0%, 4% { color: var(--gray-400); }
  6%, 78% { color: var(--navy); font-weight: 500; }
  92%, 100% { color: var(--gray-400); }
}
@keyframes ph-dot {
  0%, 4% { background: var(--gray-200); box-shadow: 0 0 0 1px var(--gray-200); }
  6%, 78% { background: var(--accent-base); box-shadow: 0 0 0 1px var(--accent-base), 0 0 0 5px rgba(var(--accent-rgb), 0.18); }
  92%, 100% { background: var(--gray-200); box-shadow: 0 0 0 1px var(--gray-200); }
}
/* check rows (AI variant): sequential ticks instead of a timeline */
.ph-check {
  --i: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 13.5px; color: var(--gray-500);
}
.ph-check i {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; color: #fff;
  background: var(--gray-200);
  animation: ph-check 6.4s linear infinite;
  animation-delay: calc(var(--i) * 0.8s);
}
@keyframes ph-check {
  0%, 5% { background: var(--gray-200); }
  8%, 80% { background: var(--accent-base); }
  94%, 100% { background: var(--gray-200); }
}

/* stat-bar rows (expertise variant): label + value + looping fill bar */
.ph-stat { --i: 0; padding: 9px 0; }
.ph-stat .lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--navy); font-weight: 500; margin-bottom: 6px;
}
.ph-stat em {
  font-style: normal; font-weight: 600; color: var(--accent-deep);
  font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.ph-stat .bar {
  height: 6px; border-radius: 3px; background: var(--gray-75); overflow: hidden;
}
.ph-stat .bar i {
  display: block; height: 100%; width: var(--w, 60%); border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-base));
  transform-origin: left;
  animation: ph-bar 6.4s var(--ease-inout) infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes ph-bar {
  0% { transform: scaleX(0); }
  14%, 82% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

/* ---- per-workstream card forms: each expertise hero gets its own ---- */

/* funnel (growth): shrinking stage bars, filling in sequence */
.ph-fn { --i: 0; --w: 60%; padding: 7px 0; }
.ph-fn .lbl {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--navy); font-weight: 500; margin-bottom: 5px;
}
.ph-fn .lbl em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.ph-fn .bar {
  height: 18px; width: var(--w); border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-base));
  transform-origin: left;
  animation: ph-bar 6.4s var(--ease-inout) infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

/* channel split (acquisition): allocation bar + channel rows */
.ph-alloc {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  margin: 12px 0 14px; background: var(--gray-75);
}
.ph-alloc i {
  flex: var(--f, 1); transform-origin: left;
  animation: ph-bar 6.4s var(--ease-inout) infinite;
  animation-delay: calc(var(--i) * 0.4s);
}
.ph-chan {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 13px; color: var(--gray-500);
  border-bottom: 1px dashed var(--gray-75);
}
.ph-chan:last-of-type { border-bottom: 0; }
.ph-chan b { color: var(--navy); font-weight: 500; }
.ph-chan em {
  font-style: normal; font-weight: 600; color: var(--accent-deep);
  font-variant-numeric: tabular-nums; font-size: 12.5px;
}

/* journey flow (lifecycle): nodes pulsing left to right */
.ph-flow {
  position: relative;
  display: flex; justify-content: space-between;
  margin: 22px 2px 8px;
}
.ph-flow::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 11px;
  height: 1px; background: var(--gray-200);
}
.ph-node { --i: 0; position: relative; text-align: center; width: 58px; }
.ph-node i {
  display: block; width: 22px; height: 22px; margin: 0 auto 8px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--gray-200);
  animation: ph-node 6.4s linear infinite;
  animation-delay: calc(var(--i) * 0.7s);
}
.ph-node small { font-size: 10.5px; line-height: 1.3; display: block; color: var(--gray-500); }
@keyframes ph-node {
  0%, 5% { border-color: var(--gray-200); background: #fff; box-shadow: none; }
  9%, 74% { border-color: var(--accent-base); background: var(--accent-light);
            box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.16); }
  90%, 100% { border-color: var(--gray-200); background: #fff; box-shadow: none; }
}

/* SERP (seo): result rows, own result glowing with rank cycling */
.ph-serp { padding: 4px 0 2px; }
.ph-res { padding: 8px 10px; border-radius: 6px; margin-bottom: 2px; }
.ph-res b { display: block; font-size: 13px; font-weight: 500; color: var(--accent-deep); }
.ph-res small { font-size: 11px; color: var(--gray-400); }
.ph-res.own {
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 3px solid var(--accent-base);
  animation: ph-own 6.4s var(--ease-inout) infinite;
}
.ph-res.own b { color: var(--navy); font-weight: 600; }
.ph-rank { position: relative; float: right; width: 30px; height: 16px; }
.ph-rank span {
  position: absolute; right: 0; font-size: 12px; font-weight: 700;
  color: var(--accent-deep); opacity: 0;
  animation: ph-rank 6.4s linear infinite;
}
.ph-rank span:nth-child(1) { animation-delay: 0s; }
.ph-rank span:nth-child(2) { animation-delay: 1.6s; }
.ph-rank span:nth-child(3) { animation-delay: 3.2s; }
@keyframes ph-rank { 0%, 3% { opacity: 0; } 6%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes ph-own {
  0%, 6% { background: rgba(var(--accent-rgb), 0.05); }
  40%, 70% { background: rgba(var(--accent-rgb), 0.14); }
  100% { background: rgba(var(--accent-rgb), 0.05); }
}

/* data pipe (ops): sources → one dataset → report tiles lighting up */
.ph-srcs { display: flex; gap: 6px; margin: 10px 0; }
.ph-srcs span {
  font-size: 11px; font-weight: 600; color: var(--gray-500);
  border: 1px solid var(--gray-200); border-radius: 5px; padding: 4px 8px;
}
.ph-ds {
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  background: rgba(var(--accent-rgb), 0.1); border-radius: 6px;
  padding: 7px 10px; margin: 8px 0 12px;
  border-left: 3px solid var(--accent-base);
}
.ph-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ph-tiles i {
  --i: 0; height: 30px; border-radius: 5px; background: var(--gray-75);
  animation: ph-tile 6.4s linear infinite;
  animation-delay: calc(var(--i) * 0.45s);
}
@keyframes ph-tile {
  0%, 5% { background: var(--gray-75); }
  9%, 76% { background: linear-gradient(135deg, var(--accent-soft), var(--accent-base)); }
  92%, 100% { background: var(--gray-75); }
}

/* ledger (partner): commission rows highlighting in turn */
.ph-led {
  --i: 0;
  display: grid; grid-template-columns: 24px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 6px; border-radius: 6px;
  font-size: 13px; color: var(--gray-500);
  animation: ph-led 6.4s linear infinite;
  animation-delay: calc(var(--i) * 0.7s);
}
.ph-led i {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent-deep);
  font-style: normal; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ph-led em { font-style: normal; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
@keyframes ph-led {
  0%, 5% { background: transparent; }
  9%, 60% { background: rgba(var(--accent-rgb), 0.09); }
  75%, 100% { background: transparent; }
}
.ph-led-total {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--gray-100); margin-top: 8px; padding: 10px 6px 0;
  font-size: 13px; font-weight: 600; color: var(--navy);
}

/* the framework visual can host a halftone photo instead of the morph cloud */
.morph-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* in-article figures (blog posts): a dot-art panel + caption */
.post-fig { margin: 32px 0; }
.post-fig .uc2-art {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
}
.post-fig figcaption {
  font-size: 13px; color: var(--gray-500);
  margin-top: 10px; padding-left: 2px;
}

/* product-hero variant for blog posts: same grammar, article scale.
   The hero sits on its own tinted panel so it reads as a distinct zone,
   with real breathing room before the article starts. */
.ph-hero.ph-post {
  padding: 44px 48px 38px;
  background:
    radial-gradient(85% 90% at 85% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    linear-gradient(170deg, #fff, var(--color-cloud-canvas) 78%);
  border: 1px solid var(--gray-75);
  border-radius: var(--radius-xl);
  overflow: visible;
  margin-bottom: 72px;   /* 40px read cramped against a 560px hero */
}
.ph-hero.ph-post {
  /* an article hero does not need the whole viewport; the artwork was
     stretching to fill it and dwarfing the headline */
  min-height: 560px;
  display: grid; align-content: stretch;
}
.ph-post .ph-inner { padding: 0; gap: 56px; grid-template-columns: 1.25fr 400px; height: 100%; }
.ph-post .ph-copy { align-self: center; }
.ph-post .ph-stage { min-height: 420px; }
.ph-post .ph-copy h1 { font-size: var(--text-h2); }
@media (max-width: 960px) { .ph-post .ph-inner { grid-template-columns: 1fr; } }

/* in-article banner figure: dot field behind, white content card centred —
   the work-page "How I built it" panel, article-width edition */
.post-fig .uc2-art { height: 300px; }
/* wide banners carry two cards (three max), staggered so the pair
   doesn't read as a table */
/* ---- banner variant A: two cards over a motif-free dot field ----
   The pair is a statement, so it is set as a pair: equal width, one shared
   baseline, and a labelled connector that says how the left panel produces
   the right one. The old version staggered them by 30px with no connector,
   which read as two unrelated cards that happened to land nearby. */
.uc2-art.duo {
  justify-content: center; align-items: end;
  gap: 0; padding: 40px 40px 0;
}
.uc2-art.duo .uc2-mock { width: min(300px, 42%); }
.uc2-art.duo .uc2-mock.lift { margin-bottom: 0; }   /* no more random offset */
.uc2-link {
  position: relative; z-index: 1;
  flex: none; width: 118px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-bottom: 96px;                 /* rides the cards' upper third */
  text-align: center;
}
.uc2-link span {
  white-space: nowrap;                 /* one line, or it collides with the cards */
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-400);
  background: var(--gray-50); padding: 2px 6px; border-radius: 3px;
}
.uc2-link i {
  font-style: normal; font-size: 15px; line-height: 1;
  color: var(--acc, var(--accent-green-deep));
}

/* ---- banner variant B: a halftoned stock photo, nothing on top ----
   Purely relevant imagery. No cards, so the picture is allowed to be the
   whole banner. */
.pf-photo {
  position: relative; overflow: hidden;
  height: 300px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.pf-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- banner variant C: a flow or relationship, drawn ----
   Dot field behind, an SVG diagram in front. Uses the .post-fig drawing
   grammar already in this file: data-draw strokes in, data-pop scales in,
   data-pulse breathes. */
.pf-flow {
  position: relative; overflow: hidden;
  height: 300px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  background: var(--gray-50);
  display: grid; place-items: center;
  padding: 26px 34px;
}
.pf-flow > canvas.halftone { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-flow svg { position: relative; z-index: 1; width: 100%; height: auto; max-height: 100%; }
.pf-flow svg text {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; fill: var(--gray-500);
}
.pf-flow svg text.pf-val {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; fill: var(--navy);
}
.pf-flow svg .pf-box { fill: #fff; stroke: var(--gray-200); }
.pf-flow svg .pf-line { stroke: var(--gray-300); stroke-width: 1.4; fill: none; }
.pf-flow svg .pf-accent { stroke: var(--acc, var(--accent-green-deep)); }
.pf-flow svg .pf-dot { fill: var(--acc, var(--accent-green-deep)); }
/* the shared .post-fig grammar assumes a path under 460 units; these flow
   runs are longer, so the dash would stop short and leave the arrowhead
   floating. Give them a dash longer than any path here. */
.pf-flow svg [data-draw] { stroke-dasharray: 900; stroke-dashoffset: 900; }

@media (max-width: 720px) {
  .pf-photo, .pf-flow { height: 220px; }
  .uc2-link { width: 46px; margin-bottom: 54px; }
}

/* ---------- Architecture diagram (.arch-fig) ----------
   Full-width animated system diagram for the AI build pages: nodes and
   flows in the data-draw/data-pop grammar, on a faint dot-grid paper.
   One diagram per tool, drawn from its REAL pipeline. */
.arch-fig { margin: 40px 0; }
.arch-fig .arch-svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 26, 74, 0.07) 1px, transparent 1.5px) 0 0/18px 18px,
    linear-gradient(165deg, #fff, var(--gray-50));
}
.arch-fig svg text { font-family: var(--font-sans); }
.arch-fig svg .mono { font-family: var(--font-mono); }
.arch-fig figcaption { font-size: 13px; color: var(--gray-500); margin-top: 10px; }
/* animation grammar shared with .post-fig */
.arch-fig svg [data-draw] { stroke-dasharray: 460; stroke-dashoffset: 460; }
.arch-fig.in svg [data-draw] {
  animation: fig-draw 1.3s var(--ease-out) forwards;
  animation-delay: calc(var(--fd, 0) * 0.22s);
}
.arch-fig svg [data-pop] {
  opacity: 0; transform: translateY(9px);
  transform-box: fill-box; transform-origin: center;
}
.arch-fig.in svg [data-pop] {
  animation: fig-pop 0.55s var(--ease-out) forwards;
  animation-delay: calc(var(--fd, 0) * 0.22s);
}
.arch-fig.in svg [data-pulse] { animation: fig-pulse 3s var(--ease-inout) infinite; }

/* ---------- Screenshot walkthrough (.shot-*) ----------
   Real product screens in a browser frame, stepped like a slideshow.
   The story annotates each screen; screenshots come from the live
   tools via headless capture. */
.shot-walk { margin: 40px 0; }
.shot-frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-200); }
.shot-bar span {
  flex: 1; max-width: 380px; margin: 0 auto;
  background: #fff; border: 1px solid var(--gray-100); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-500);
  padding: 3px 12px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-track { position: relative; }
/* ---------- HW · How I work — the operating loop ----------
   Four steps on one line, nodes lighting in sequence; each step carries
   one sentence and one dated anchor. The receipts idea survives as a
   single closing line, not three cards. */
.hw-loop {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-top: 8px;
}
/* the rail the nodes sit on */
.hw-loop::before {
  content: ''; position: absolute;
  top: 15px; left: 8px; right: 8px; height: 2px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-light));
  border-radius: 2px;
}
.hw-step { position: relative; }
.hw-node {
  display: block; margin-bottom: 16px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent-base);
  animation: hw-glow 9s var(--ease-inout) infinite;
  animation-delay: calc(var(--i) * 2.25s);
}
@keyframes hw-glow {
  0%, 5%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); background: #fff; }
  10%      { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.22); background: var(--accent-base); }
  24%, 100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); background: #fff; }
}
.hw-step h3 {
  font-size: 17px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight); margin-bottom: 8px;
}
.hw-step p {
  font-size: 14.5px; line-height: 1.55; color: var(--gray-500);
  margin-bottom: 12px; max-width: 240px;
}
.hw-anchor {
  display: block; font-family: var(--font-mono);
  font-size: 11px; line-height: 1.6; color: var(--gray-400);
  border-left: 2px solid var(--accent-light); padding-left: 10px;
  max-width: 240px;
}
a.hw-anchor { text-decoration: none; margin-top: 8px; transition: color var(--dur-fast) var(--ease-out); }
a.hw-anchor:hover { color: var(--accent-deep); border-left-color: var(--accent-deep); }
.hw-receipt {
  margin-top: var(--space-6);
  font-size: 14px; color: var(--gray-500);
}
.hw-receipt::before { content: '✓ '; color: var(--accent-deep); font-weight: 700; }
@media (max-width: 960px) {
  .hw-loop { grid-template-columns: 1fr 1fr; }
  .hw-loop::before { display: none; }
}

/* judgment cards — my own decisions, NOT quotes: plain voice, no serif */
.jdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.jdg-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 20px 22px 18px;
  font-size: 14.5px; line-height: 1.62; color: var(--gray-500);
}
.jdg-card b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 6px; letter-spacing: var(--track-tight); }
@media (max-width: 960px) { .jdg-grid { grid-template-columns: 1fr; } }

/* single-screenshot use: fixed-height viewport, object-position picks the crop */
.shot-fit .shot-view { height: 340px; overflow: hidden; }
.shot-fit .shot-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-slide { display: none; }
.shot-slide.on { display: block; }
.shot-slide img { display: block; width: 100%; height: auto; }
.shot-nav {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
}
.shot-nav button {
  font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--gray-200); background: #fff; color: var(--navy);
  border-radius: var(--radius); padding: 6px 13px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.shot-nav button:hover { border-color: var(--accent-base); }
.shot-cap { flex: 1; font-size: 13.5px; color: var(--gray-500); }
.shot-cap b { color: var(--navy); }
.shot-dots { display: flex; gap: 6px; }
.shot-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-200); transition: background var(--dur-fast);
}
.shot-dots i.on { background: var(--accent-base); }

/* crisp SVG article illustrations — scroll-animated.
   Elements opt in: data-draw (stroke draws itself in), data-pop
   (fades/rises in), data-pulse (keeps breathing). Stagger with
   style="--fd:N". Animations fire when the .reveal observer adds .in. */
.post-fig .fig-svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  background: linear-gradient(165deg, #fff, var(--gray-50));
}
.post-fig svg text { font-family: var(--font-sans); }
.post-fig svg [data-draw] { stroke-dasharray: 460; stroke-dashoffset: 460; }
.post-fig.in svg [data-draw] {
  animation: fig-draw 1.3s var(--ease-out) forwards;
  animation-delay: calc(var(--fd, 0) * 0.22s);
}
@keyframes fig-draw { to { stroke-dashoffset: 0; } }
.post-fig svg [data-pop] {
  opacity: 0; transform: translateY(9px);
  transform-box: fill-box; transform-origin: center;
}
.post-fig.in svg [data-pop] {
  animation: fig-pop 0.55s var(--ease-out) forwards;
  animation-delay: calc(var(--fd, 0) * 0.22s);
}
@keyframes fig-pop { to { opacity: 1; transform: none; } }
.post-fig.in svg [data-pulse] { animation: fig-pulse 3s var(--ease-inout) infinite; }
@keyframes fig-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* frosted navy code card — the API call behind the visual */
.ph-code {
  position: absolute; left: -12px; bottom: 26px;
  width: min(262px, 78%);
  background: rgba(17, 26, 74, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-widget);
  padding: 14px 16px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: #c8f5e2;
  animation: figdot-float 9s var(--ease-inout) infinite;
  animation-delay: 1.2s;
}
.ph-code .k { color: #88deeb; }
.ph-code .punct { color: rgba(255,255,255,0.5); }
.ph-code::after {                    /* blinking caret on the last line */
  content: ''; display: inline-block; width: 7px; height: 12px;
  background: var(--accent-light); vertical-align: -2px; margin-left: 3px;
  animation: ph-caret 1.1s steps(1) infinite;
}
@keyframes ph-caret { 50% { opacity: 0; } }

/* small glass stat chip */
.ph-chip {
  position: absolute; top: -14px; left: 2px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  font-size: 12px; color: var(--gray-500);
  animation: figdot-float 9s var(--ease-inout) infinite;
  animation-delay: 2.4s;
}
.ph-chip b { display: block; font-size: 16px; color: var(--navy); letter-spacing: var(--track-tight); }
.ph-chip .up { color: var(--accent-deep); }

@media (max-width: 960px) {
  .ph-inner { grid-template-columns: 1fr; gap: 56px; }
  .ph-stage { min-height: 430px; }
  .ph-hero { padding-top: 150px; }
}

/* ---- stage layout variants: the three hero pieces land differently
   per page, so six expertise heroes stop reading as one template.
   sv-a is the classic (main top-right, chip top-left, code bottom-left). ---- */
.ph-stage.sv-b .ph-main { top: 10px; right: auto; left: 0; }
.ph-stage.sv-b .ph-chip { top: auto; bottom: 118px; left: auto; right: -6px; }
.ph-stage.sv-b .ph-code { left: auto; right: 10px; bottom: -6px; }

.ph-stage.sv-c .ph-main { top: 34px; right: 26px; width: min(364px, 96%); }
.ph-stage.sv-c .ph-chip { top: auto; bottom: 24px; left: 8px; }
.ph-stage.sv-c .ph-code { left: auto; right: -10px; top: -18px; bottom: auto; }

.ph-stage.sv-d .ph-main { top: auto; bottom: 8px; right: 0; }
.ph-stage.sv-d .ph-chip { top: 92px; left: auto; right: 24px; }
.ph-stage.sv-d .ph-code { top: 6px; bottom: auto; left: -6px; }

.ph-stage.sv-e .ph-main { top: 6px; right: 4px; width: min(330px, 90%); }
.ph-stage.sv-e .ph-code { bottom: 84px; left: -16px; }
.ph-stage.sv-e .ph-chip { top: auto; bottom: -4px; left: 34%; }
.ph-stage.sv-e .ph-chip-b { top: 24px; left: -4px; bottom: auto; right: auto; }

.ph-stage.sv-f .ph-main { top: 22px; right: auto; left: 6px; }
.ph-stage.sv-f .ph-chip { top: -8px; left: auto; right: 12px; transform: rotate(-2deg); }
.ph-stage.sv-f .ph-code { left: auto; right: -8px; bottom: 32px; }

/* optional second chip for denser stages */
.ph-chip.ph-chip-b { animation-delay: 3.6s; }

/* ---------- Aurora hero (Column /realtime/ treatment) ----------
   A full-bleed layered colour field flowing down from behind the
   transparent nav, with the hero content on frosted glass. Reserved
   for one or two pages — it is the premium variant, not the default. */
.aurora-hero {
  position: relative; overflow: hidden;
  padding: 170px 32px 110px;
}
.aurora-field {
  position: absolute; inset: 0; pointer-events: none;
}
.aurora-field::before, .aurora-field::after {
  content: ''; position: absolute; inset: -30% -10%;
  background:
    radial-gradient(46% 60% at 18% 22%, rgba(148, 239, 183, 0.55), transparent 65%),
    radial-gradient(52% 64% at 78% 12%, rgba(136, 222, 235, 0.5), transparent 65%),
    radial-gradient(40% 55% at 55% 60%, rgba(168, 205, 245, 0.42), transparent 62%),
    radial-gradient(36% 48% at 30% 85%, rgba(216, 204, 248, 0.34), transparent 60%);
  filter: blur(46px);
  animation: aurora-drift 26s var(--ease-inout) infinite alternate;
}
.aurora-field::after {
  background:
    radial-gradient(38% 52% at 70% 75%, rgba(148, 239, 183, 0.35), transparent 62%),
    radial-gradient(44% 58% at 8% 55%, rgba(136, 222, 235, 0.3), transparent 65%);
  animation-duration: 34s; animation-direction: alternate-reverse;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.07); }
}
/* soft fade so the field dissolves into the page below */
.aurora-field .fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(transparent, var(--bg));
}
.glass-panel {
  position: relative;
  max-width: var(--page-max); margin: 0 auto;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  border-radius: var(--radius-xl);
  box-shadow: rgba(255, 255, 255, 0.6) 0 0 0 1px inset,
              rgba(17, 26, 74, 0.08) 0 24px 48px;
}

/* ---------- CST · Column case-study tabs, 8-tool edition ----------
   Shell/tab/visual values measured from column.com's Brex module.
   Two tab rows of four; each panel = copy left, visual window right
   with a subtle per-tool halftone pattern + two product shots that
   replay their overlay entrance on every activation. */
.cst-card {
  background: #fbfbfc;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  box-shadow: rgba(255, 255, 255, 1) 0 0 20px 0 inset,
              rgba(0, 0, 0, 0.05) 0 0 0 1px,
              rgba(0, 0, 0, 0.1) 0 1px 2px 0;
}
.cst-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  position: relative; z-index: 3;
}
/* second tab row sits BELOW the panel — four above, four beneath */
.cst-tabs.bottom {
  margin-bottom: 0;
  margin-top: var(--space-6);
  border-top: 1px dashed var(--gray-100);
  padding-top: var(--space-5);
}
.cst-tab {
  font: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: none; border: 0; cursor: pointer;
  padding: 11px 10px; border-radius: var(--radius);
  color: var(--gray-500);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cst-tab img.tool-logo { width: 20px; height: 20px; }
.cst-tab:hover { background: rgba(17, 26, 74, 0.04); color: var(--gray-700); }
.cst-tab.on {
  background: var(--tc, var(--navy));
  color: var(--navy);
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
}
.cst-tab.on[data-ink="light"] { color: #fff; }
.cst-panel { display: none; }
.cst-panel.on {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 48px; align-items: stretch;
  animation: cst-fade 0.3s var(--ease-out);
}
@keyframes cst-fade { from { opacity: 0; } to { opacity: 1; } }
.cst-copy { display: flex; flex-direction: column; padding: 18px 0 6px 8px; }
.cst-copy h3 {
  font-size: 27px; font-weight: 500; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--navy);
  margin-bottom: 18px; max-width: 420px;
}
.cst-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* three vendors have no logo file yet, so their chips carry a dot instead of
   a broken image */
.cst-stack span.stk-nologo::before {
  content: ''; width: 13px; height: 13px; border-radius: 3px;
  background: var(--gray-200); flex: none;
}
.cst-stack span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-600);
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius); padding: 5px 10px;
}
.cst-stack img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.cst-copy > p {
  font-size: 15px; line-height: 1.6; color: var(--gray-500);
  max-width: 430px; margin-bottom: 22px;
}
.cst-ctas { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.cst-ctas .btn-ghost { font-weight: 600; color: var(--navy); font-size: 14px; }
.cst-ctas .btn-ghost:hover { color: var(--accent-deep); }
.cst-quote {
  margin: auto 0 0; padding: 14px 0 0;
  font-size: 14px; color: var(--gray-500);
}
.cst-quote b { color: var(--navy); letter-spacing: var(--track-tight); }
.cst-visual {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--gray-75);
  min-height: 440px;
}
.cst-visual canvas.halftone { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-shot {
  position: absolute;
  border-radius: 10px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #fff;
  opacity: 0;
}
.cst-shot.a { width: 66%; top: 8%; left: 6%; }
/* the second card is a live content illustration — expertise-hero
   grammar: a ph-main-head plus ph-check / ph-row lines that keep
   ticking on their --i-staggered loops */
.cst-illo {
  position: absolute; width: 46%;
  bottom: 7%; right: 5%;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 14px 16px 12px;
  opacity: 0;
}
.cst-illo .ph-main-head { padding-bottom: 8px; margin-bottom: 4px; }
.cst-panel.on .cst-shot.a {
  animation: cst-shot-in 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.12s forwards;
}
.cst-panel.on .cst-illo {
  animation: cst-shot-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s forwards;
}
@keyframes cst-shot-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 960px) {
  .cst-tabs { grid-template-columns: repeat(2, 1fr); }
  .cst-panel.on { grid-template-columns: 1fr; }
  .cst-visual { min-height: 340px; }
}

/* ---------- RF · hiring-lane vertical tabs, column.com "Column for" ----------
   Stacked 40px titles as tabs (measured from column.com: 40px/500/lh44,
   active pill w/ 26px icon, 8px gap, no auto-rotate); big per-lane
   halftone art right with corner :: marks over a faint dot lattice. */
.rf-card {
  background: #fbfbfc;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  box-shadow: rgba(255, 255, 255, 1) 0 0 20px 0 inset,
              rgba(0, 0, 0, 0.05) 0 0 0 1px,
              rgba(0, 0, 0, 0.1) 0 1px 2px 0;
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-8); align-items: start;
}
.rf-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-600); background: var(--gray-75);
  border-radius: 4px; padding: 5px 9px;
  margin-bottom: var(--space-5);
}
.rf-eyebrow i {
  width: 7px; height: 11px; background: var(--gray-200);
  animation: rf-caret 1.1s steps(1) infinite;
}
@keyframes rf-caret { 50% { opacity: 0.25; } }
.rf-tabs { display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-bottom: var(--space-5); }
.rf-tab {
  font: inherit; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-left: -16px;
  border-radius: 10px;
  text-align: left;
}
.rf-tab .rf-t {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 500; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--gray-200);
  transition: color var(--dur-fast) var(--ease-out), transform 0.2s var(--ease-out);
}
.rf-tab:hover .rf-t { color: var(--gray-400); }
/* pill slot: collapsed while inactive so titles align flush */
.rf-pill { display: none; }
.rf-tab.on {
  background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(16, 24, 40, 0.07);
  animation: rf-pop 0.25s var(--ease-out);
}
@keyframes rf-pop { from { transform: scale(0.97); } to { transform: scale(1); } }
.rf-tab.on .rf-t { color: var(--navy); }
.rf-tab.on .rf-pill { display: block; --di-fill: var(--rf, var(--accent-green)); }
.rf-tab.on .rf-pill .dot-icon svg { display: block; width: 26px; height: 26px; }
.rf-body { display: none; }
.rf-body.on { display: block; animation: rf-rise 0.35s var(--ease-out); }
@keyframes rf-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.rf-body .rf-pitch {
  font-size: 15.5px; line-height: 1.62; color: var(--gray-600);
  max-width: 460px; margin-bottom: 14px;
}
.rf-body .rf-scope {
  font-size: 14.5px; line-height: 1.6; color: var(--gray-500);
  max-width: 460px; margin-bottom: var(--space-5);
}
.rf-body .rf-scope b { color: var(--navy); font-weight: 600; }
.rf-body .rs-links { margin-bottom: var(--space-5); }
.rf-visual {
  position: relative; overflow: hidden; align-self: stretch;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--gray-75);
  min-height: 520px;
}
.rf-visual canvas.halftone { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-visual canvas.rf-art {
  inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.rf-visual canvas.rf-art.on { opacity: 1; transform: none; }
/* corner :: marks — two dots each, accent-deep like column.com */
.rf-mk { position: absolute; width: 10px; height: 10px; }
.rf-mk::before, .rf-mk::after {
  content: ''; position: absolute; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent-deep);
}
.rf-mk::before { left: 0; top: 0; }
.rf-mk::after { right: 0; bottom: 0; }
.rf-mk.tl { top: 4.5%; left: 5%; }
.rf-mk.tr { top: 4.5%; right: 5%; }
.rf-mk.bl { bottom: 4.5%; left: 5%; }
.rf-mk.br { bottom: 4.5%; right: 5%; }
@media (max-width: 960px) {
  .rf-card { grid-template-columns: 1fr; gap: var(--space-6); }
  .rf-tab .rf-t { font-size: 26px; }
  .rf-visual { min-height: 360px; }
}

/* ---------- Hero fields (js/herofield.js) ---------- */
.herofield {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.xp-hero { position: relative; overflow: hidden; }
.xp-hero .herofield { opacity: 0.75; }

/* ---------- Dot-scene figures (section illustrations) ----------
   A composed artwork panel: halftone image behind, small UI chips
   floating in front, staggered in by the .reveal observer. This is the
   production pattern for case-study / blog section art. */
.figdot {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #fdfdfe, var(--gray-50));
  box-shadow: var(--shadow-lg);
  min-height: 340px;
  margin: 0;
}
.figdot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.figdot-chip {
  position: absolute;
  left: var(--cx, 8%); top: var(--cy, 12%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl), var(--shadow-product-border, 0 0 0 1px rgba(0,0,0,0.05));
  padding: 12px 16px;
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
  max-width: 250px;
  animation: figdot-float 7s var(--ease-inout) infinite;
  animation-delay: var(--fd, 0s);
}
.figdot-chip b { display: block; font-size: 17px; letter-spacing: var(--track-tight); color: var(--navy); }
.figdot-chip small { color: var(--gray-500); }
.figdot-chip .up { color: var(--accent-deep); font-weight: 600; }
@keyframes figdot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* staggered entry: chips ride the standard reveal, then float */
.figdot .reveal { transition-delay: 0.15s; }
.figdot .reveal.d1 { transition-delay: 0.3s; }
.figdot .reveal.d2 { transition-delay: 0.45s; }
.cs2-top {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.cs2-top h2 {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  max-width: 520px;
}
.cs2-intro {
  font-size: 16.5px; color: var(--gray-500); line-height: 1.6;
  padding-top: 46px;
  border-left: 1px dotted var(--gray-200);
  padding-left: 48px;
  align-self: stretch;
}
.cs2-main {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px;
  align-items: start;
}
.cs2-block { margin-bottom: 30px; }
.cs2-block h3 {
  position: relative;
  font-size: var(--text-label); font-weight: 600; color: var(--ink);
  padding-left: 12px; margin-bottom: 10px;
}
.cs2-block h3::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 2px; background: var(--gray-300);
}
.cs2-block p { font-size: 14.5px; color: var(--gray-500); line-height: 1.65; max-width: 440px; }
.cs2-prods {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
  max-width: 380px;
}
.cs2-prods a {
  font-size: 14.5px; font-weight: 500; color: var(--accent-lilac);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cs2-prods a:hover { opacity: 0.7; }

.cs2-card {
  position: relative;
  background: linear-gradient(150deg, var(--navy-950), var(--surface-black) 70%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-widget);
  padding: 44px 46px 38px;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: center;
}
.cs2-card canvas {
  position: absolute; inset: 0 0 0 40%;
  width: 60%; height: 100%;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.cs2-card blockquote {
  position: relative;
  font-size: 19px; line-height: 1.55; color: #fff;
  letter-spacing: var(--track-tight);
  max-width: 400px;
  margin-bottom: 24px;
}
.cs2-card footer {
  position: relative;
  font-size: 14px; color: rgba(255, 255, 255, 0.65);
}
.cs2-card footer b { color: #fff; font-weight: 600; }

@media (max-width: 960px) {
  .cs2-top { grid-template-columns: 1fr; gap: 20px; }
  .cs2-intro { border-left: none; padding: 0; }
  .cs2-main { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Use-case carousel (Stripe crypto) ---------- */
.uc-section { padding-left: 0; padding-right: 0; position: relative; }
.uc-section .section-inner { max-width: 1264px; padding: 0 var(--page-pad); }
/* faint dotted column guides behind the header, like the original */
.uc-section::before {
  content: ''; position: absolute; inset: 0 0 55%;
  background-image: linear-gradient(var(--gray-200) 40%, transparent 40%);
  background-size: 1px 6px;
  background-repeat: repeat-y;
  background-position: calc(50% - 200px) 0;
  opacity: 0.5;
  pointer-events: none;
}
.uc-head {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 40px;
}
.uc-headtext h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-heading); margin-bottom: 18px;
}
.uc-headtext p {
  font-size: 16.5px; color: var(--gray-500); line-height: 1.6;
  max-width: 640px;
}
.uc-nav { flex-shrink: 0; }

.uc-track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px max(32px, calc((100vw - 1200px) / 2)) 16px;
  scroll-padding-left: max(32px, calc((100vw - 1200px) / 2));
}
.uc-track::-webkit-scrollbar { display: none; }
.uc-card {
  flex: 0 0 500px;
  scroll-snap-align: start;
}
/* the UI screenshot bleeds off the panel's TOP edge */
.uc-panel {
  position: relative;
  height: 330px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.uc-card:hover .uc-panel {
  box-shadow: 0 20px 50px rgba(17, 26, 74, 0.12);
  transform: translateY(-3px);
}
.uc-ui {
  position: absolute; top: -34px; left: 50%;
  transform: translateX(-50%);
  width: 82%;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px 22px 18px;
}
.uc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--gray-50);
  border-radius: var(--radius); padding: 7px 13px;
  margin-bottom: 14px;
}
.uc-badge i { width: 12px; height: 12px; border-radius: var(--radius-xs); }
.uc-card h3 { font-size: var(--text-h5); letter-spacing: var(--track-heading); line-height: var(--lh-heading); margin-bottom: 10px; }
.uc-card > p { font-size: 14.5px; color: var(--gray-500); line-height: 1.6; max-width: 440px; }
.uc-card > p u { color: var(--accent-lilac); text-decoration: none; }

/* form skin */
.ucf-label {
  font-size: 11px; font-weight: 600; color: var(--gray-500);
  margin: 10px 0 5px;
}
.ucf-payee {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 8px 12px;
}
.ucf-payee i {
  width: 26px; height: 26px; border-radius: var(--radius);
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; font-weight: 700;
}
.ucf-payee b { display: block; font-size: 12.5px; }
.ucf-payee small { font-size: 10.5px; color: var(--gray-400); }
.ucf-opts { display: flex; gap: 8px; margin-top: 8px; }
.ucf-opts div {
  flex: 1; border: 1px solid var(--gray-100); border-radius: var(--radius);
  padding: 9px 11px;
}
.ucf-opts div.sel { border-color: var(--accent-lilac); box-shadow: 0 0 0 1px var(--accent-lilac); }
.ucf-opts b { display: block; font-size: 11.5px; color: var(--accent-lilac); }
.ucf-opts div:not(.sel) b { color: var(--ink); }
.ucf-opts small { font-size: 10px; color: var(--gray-400); }
.ucf-field {
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  font-size: 12px; color: var(--gray-600);
  padding: 8px 11px;
}
.ucf-cardrow {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--gray-100); border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px; color: var(--gray-600);
  padding: 8px 11px;
}
.ucf-cardrow em { font-style: normal; letter-spacing: 2px; color: var(--accent-blue); }
.ucf-split { display: flex; }
.ucf-split .ucf-field { flex: 1; border-radius: 0 0 0 var(--radius); border-top: none; }
.ucf-split .ucf-field + .ucf-field { border-radius: 0 0 var(--radius) 0; border-left: none; }

/* buy-widget skin */
.ucb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.ucb-head b { font-size: 14px; }
.ucb-head span { font-size: 11px; color: var(--gray-500); }
.ucb-amount {
  text-align: center;
  font-size: 40px; font-weight: 600; letter-spacing: var(--track-display);
  color: var(--accent-lilac);
  font-variant-numeric: tabular-nums;
}
.ucb-sub { text-align: center; font-size: 12px; color: var(--gray-400); margin-bottom: 14px; }
.ucb-wallet { display: flex; justify-content: space-between; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.ucb-wallet em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-500); font-weight: 400; }
.ucb-tiles { display: flex; gap: 8px; }
.ucb-tiles span {
  flex: 1; text-align: center;
  border: 1px solid var(--gray-100); border-radius: var(--radius);
  font-size: 11px; color: var(--gray-600);
  padding: 9px 4px;
}

/* dual-card skin */
.uc-cards { background: transparent; border: none; box-shadow: none; padding: 0; top: 36px; }
.ucc-biz {
  position: relative; z-index: 1;
  width: 62%;
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 16px 18px 14px;
}
.ucc-biz b { display: block; font-size: 13px; letter-spacing: 0.02em; margin-bottom: 26px; }
.ucc-biz small { font-size: 10px; color: var(--gray-400); }
.ucc-biz em {
  position: absolute; right: 14px; bottom: 12px;
  font-style: normal; font-size: 15px; letter-spacing: -6px; color: var(--orange);
}
.ucc-navy {
  position: absolute; top: 34px; right: 0;
  width: 58%;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(11, 18, 53, 0.4);
  padding: 34px 18px 14px;
}
.ucc-navy span {
  display: block;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: #fff;
  margin-bottom: 6px;
}
.ucc-navy small { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; }
.ucc-navy b { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: var(--track-heading); }

@media (max-width: 960px) {
  .uc-head { flex-direction: column; align-items: flex-start; }
  .uc-card { flex-basis: 340px; }
  .uc-panel { height: 300px; }
}

/* ---------- Certainty stories (Adyen) ---------- */
.cert-h {
  font-size: var(--text-h2); line-height: var(--lh-title);
  letter-spacing: var(--track-heading); margin-bottom: 40px;
}
.cert-h mark {
  background: var(--gray-75);                 /* the Adyen marker-highlight */
  color: var(--ink);
  padding: 2px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cert-grid-wrap {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px;
  align-items: start;
}
.cert-left { align-self: stretch; }
.cert-featcard {
  position: sticky; top: 96px;         /* sticky until the six cards pass */
  height: calc(100vh - 160px); max-height: 720px; min-height: 480px;
  border-radius: var(--radius-xs); overflow: hidden;
  cursor: pointer;
}
.cert-right {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.cert-card { cursor: pointer; }

.cert-media {
  position: relative;
  background: var(--gray-75);
  border-radius: var(--radius-xs);
  overflow: hidden;
  height: 100%;
  min-height: 300px;
  transition: background 0.5s var(--ease-out);
}
.cert-card .cert-media { aspect-ratio: 0.98; height: auto; min-height: 0; }
.cert-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
/* small cards: the visual wakes on hover; featured always lives */
.cert-card:hover .cert-media { background: var(--cbg, var(--accent-green-dark)); }
.cert-card:hover .cert-media canvas { opacity: 0.55; }
.cert-featcard .cert-media { background: var(--cbg, var(--accent-green-dark)); }
.cert-featcard .cert-media canvas { opacity: 0.55; }
.cert-story {
  position: absolute; top: 16px; left: 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--gray-500);
  transition: color 0.4s var(--ease-out);
}
.cert-card:hover .cert-story, .cert-featcard .cert-story { color: rgba(255, 255, 255, 0.75); }
.cert-word {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px; color: var(--charcoal, var(--color-charcoal));
  white-space: nowrap;
  transition: color 0.4s var(--ease-out);
}
.cert-card:hover .cert-word, .cert-featcard .cert-word { color: #fff; }
.cert-cap {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 2px 0;
}
.cert-cap span { font-size: 15.5px; line-height: 1.45; letter-spacing: var(--track-tight); }
.cert-cap b {
  font-size: 20px; font-weight: 400; color: var(--seafoam-dark);
  transition: transform 0.35s var(--ease-inout);
}
.cert-card:hover .cert-cap b { transform: rotate(90deg); }

/* ---- full-screen slide-up modal ---- */
.cert-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 12, 24, 0.35);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.cert-modal.open { opacity: 1; pointer-events: auto; }
.cert-panel {
  position: absolute; inset: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(103%);
  transition: transform 0.6s var(--ease-inout);
  display: flex; align-items: center; justify-content: center;
}
.cert-modal.open .cert-panel { transform: translateY(0); }
.cert-close {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  font-size: 22px; color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cert-close:hover { background: rgba(255, 255, 255, 0.22); }
.cert-inner {
  display: grid; grid-template-columns: 0.9fr 1fr; gap: var(--gap-col);
  align-items: center;
  width: min(1060px, 90%);
}
.cert-visual {
  position: relative;
  aspect-ratio: 0.75;
  max-height: 62vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}
.cert-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.cert-visual .cert-word { color: #fff; }
.cert-copy small {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}
.cert-copy h3 {
  font-size: var(--text-h3); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); color: #fff;
  margin-bottom: 16px;
}
.cert-copy p {
  font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.8);
  max-width: 460px;
  margin-bottom: 22px;
}
.cert-copy ul { list-style: none; margin-bottom: 28px; }
.cert-copy li {
  position: relative;
  font-size: 15px; font-weight: 500; color: #fff;
  padding: 5px 0 5px 22px;
}
.cert-copy li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 9px; height: 9px;
  background: var(--accent-green-light);                 /* the Adyen green square */
}
.cert-read {
  display: inline-block;
  font-size: 14.5px; font-weight: 600; color: #fff;
  background: var(--navy-950);
  border-radius: var(--radius);
  padding: 13px 22px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cert-read:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }

@media (max-width: 960px) {
  .cert-grid-wrap { grid-template-columns: 1fr; }
  .cert-featcard { position: relative; top: 0; height: 380px; min-height: 0; }
  .cert-right { grid-template-columns: 1fr; }
  .cert-inner { grid-template-columns: 1fr; gap: 24px; width: 88%; }
  .cert-visual { aspect-ratio: 1.4; max-height: 32vh; }
}

/* ---------- Guides hero + playbook library (Stripe guides) ---------- */
/* the book-cover card, shared by both halves */
.gd-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--gbg, var(--accent-lilac));
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 20px 22px 0;
  min-height: 340px;
  box-shadow: 0 14px 34px rgba(17, 26, 74, 0.16);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.gd-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 54px rgba(17, 26, 74, 0.24);
}
.gd-card small {
  font-size: 12.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}
.gd-card b {
  font-size: 19px; font-weight: 600; line-height: var(--lh-title);
  letter-spacing: var(--track-heading); color: #fff;
  margin-bottom: 14px;
}
.gd-art {
  position: relative; display: block;
  flex: 1; min-height: 110px;
  margin: 0 -22px;
}
.gd-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- hero collage --- */
.gd-hero { position: relative; overflow: hidden; }
.gd-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% - 240px) 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% + 240px) 0 / 1px 6px repeat-y;
  opacity: 0.5;
  pointer-events: none;
}
.gd-hero::after {
  content: ''; position: absolute; left: -6%; bottom: -12%;
  width: 55%; height: 60%;
  background: var(--gray-75);
  clip-path: polygon(0 100%, 100% 100%, 0 22%);
  pointer-events: none;
}
/* one shared canvas, not two columns: text sits top-left across cols 1–2,
   the pink column starts in the text's own column below the paragraph,
   the rightmost column rises above the title line (Stripe guides layout) */
.gd-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  align-items: start;
}
.gd-copy {
  position: absolute; top: 110px; left: 0;
  width: calc(50% - 11px);
  z-index: 2;
}
.gd-copy h2 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 20px;
}
.gd-copy p { font-size: 16.5px; color: var(--gray-500); line-height: 1.6; max-width: 400px; }
.gd-col {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: var(--off, 0);          /* per-column vertical stagger */
}
.gd-hero .gd-card { min-height: 320px; }

/* --- index grid --- */
.gd-idx-head { position: relative; margin-bottom: 40px; max-width: 620px; }
.gd-idx-head h2 { font-size: var(--text-h3); letter-spacing: var(--track-heading); margin-bottom: 10px; }
.gd-idx-head .section-sub { margin-bottom: 20px; }
.gd-seeall {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: var(--accent-lilac);
  border-radius: var(--radius-full);
  padding: 9px 18px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.gd-seeall:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99, 91, 255, 0.35); }
.gd-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}

@media (max-width: 960px) {
  .gd-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .gd-copy { position: static; width: auto; grid-column: 1 / -1; margin-bottom: 8px; }
  .gd-hero-grid .gd-col { grid-column: auto !important; margin-top: calc(var(--off, 0px) * 0.15); }
  .gd-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Conversion mega-module (Stripe ecommerce) ---------- */
.ec-section { position: relative; }
.ec-section::before {                 /* Stripe's dotted column guides */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% - 300px) 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) 50% 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% + 300px) 0 / 1px 6px repeat-y;
  opacity: 0.5;
  pointer-events: none;
}
.ec-section .section-inner { position: relative; z-index: 1; }
.ec-head { max-width: 640px; margin-bottom: 88px; }
.ec-head h2 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 22px;
}
.ec-head p, .ec-flow-copy p, .ec-col > p {
  font-size: 16.5px; line-height: 1.65; color: var(--gray-500);
}
.ec-section a { color: var(--seafoam-dark); font-weight: 600; }
.ec-section a:hover { text-decoration: underline; }

/* --- journey flow: copy + tabbed launch-form mock --- */
.ec-flow {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px;
  align-items: start;
  margin-bottom: 96px;
}
.ec-flow-copy h3, .ec-col h3 {
  font-size: var(--text-h4); letter-spacing: var(--track-heading);
  margin-bottom: 18px;
}
.ec-flow-copy p { margin-bottom: 16px; }
.ec-checks {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px;
}
.ec-checks li {
  font-size: 15px; color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.ec-checks li::before {
  content: '✓';
  font-size: 11px; font-weight: 700; color: var(--seafoam-dark);
  background: rgba(68, 180, 139, 0.14);
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.ec-checks-solo { grid-template-columns: 1fr; margin-top: 30px; }

.ec-tabs { display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; }
.ec-tab {
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--navy);
  background: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ec-tab:hover { background: var(--gray-100); }
.ec-tab.on { background: var(--navy); color: #fff; }

.ec-form {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  padding: 40px 44px 44px;
  display: flex; flex-direction: column;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ec-form.swap { opacity: 0; }
.ec-form label {
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  margin: 18px 0 8px;
}
.ec-form label:first-child { margin-top: 0; }
.ec-input {
  font-size: 15px; color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 12px 14px;
  background: #fff;
}
.ec-selectish {
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%),
    linear-gradient(135deg, var(--gray-500) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.ec-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ec-tile {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14.5px; color: var(--gray-600);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ec-tile.on { border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; }
.ec-tico { font-size: 15px; opacity: 0.75; }
.ec-cta {
  font: inherit; font-size: 15.5px; font-weight: 600; color: #fff;
  background: var(--navy); border: 0; border-radius: var(--radius);
  padding: 15px 18px; margin-top: 26px; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.ec-cta:hover { transform: translateY(-1px); filter: brightness(1.12); }

/* --- duo chart columns --- */
.ec-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.ec-chartwrap { position: relative; margin-top: 34px; }
.ec-chartcard {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  padding: 24px 26px 20px;
}
.ec-chartcard > b { display: block; font-size: 15px; color: var(--navy); margin-bottom: 16px; }
.ec-chartcard canvas { display: block; width: 100%; height: 190px; }
.ec-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px;
}
.ec-legend span, .ec-tip span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--gray-500);
}
.ec-legend i, .ec-tip i {
  width: 14px; height: 3px; border-radius: var(--radius-xs); flex: none;
}
.ec-stats { display: flex; gap: 34px; margin-bottom: 18px; }
.ec-stats div { display: flex; flex-direction: column; gap: 3px; }
.ec-stats div + div { border-left: 1px solid var(--gray-200); padding-left: 34px; }
.ec-stats small { font-size: 12.5px; color: var(--gray-500); }
.ec-stats b { font-size: 21px; letter-spacing: var(--track-tight); color: var(--navy); }
.ec-tip {
  position: absolute; top: -34px; right: -14px;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 26, 74, 0.18);
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 7px;
  min-width: 210px;
}
.ec-tip b {
  font-size: 12.5px; color: var(--navy);
  padding-bottom: 7px; border-bottom: 1px solid var(--gray-100);
}
.ec-tip span { justify-content: flex-start; }
.ec-tip em { font-style: normal; margin-left: auto; color: var(--navy); font-weight: 600; }

@media (max-width: 960px) {
  .ec-flow, .ec-duo { grid-template-columns: 1fr; gap: 44px; }
  .ec-tip { right: 0; top: -24px; }
  .ec-form { padding: 28px 26px 30px; }
}

/* ---------- Integration bubbles (Stripe ecommerce) ---------- */
.intg-section { position: relative; }
.intg-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px;
  align-items: center;
}
.intg-copy h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-heading); margin-bottom: 24px;
}
.intg-copy p {
  font-size: 16.5px; line-height: 1.65; color: var(--gray-500);
  margin-bottom: 16px; max-width: 440px;
}
.intg-copy a { color: var(--seafoam-dark); font-weight: 600; }
.intg-copy a:hover { text-decoration: underline; }
.intg-field {
  position: relative; height: 580px;
  overflow: hidden;
  /* bubbles dissolve near top/bottom edges instead of hard-clipping */
  -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%);
}
.intg-bub {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(17, 26, 74, 0.18);
  will-change: transform;
  pointer-events: none;
}
.intg-bub span { font-size: 15px; white-space: nowrap; }

@media (max-width: 960px) {
  .intg-grid { grid-template-columns: 1fr; gap: 20px; }
  .intg-field { height: 420px; }
}

/* ---------- Case-study slider (Stripe embedded-finance) ---------- */
.csl-view { overflow: hidden; }
.csl-track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-inout);
}
.csl-slide {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: start;
  padding: 8px 2px;               /* room for quote-card shadow */
  opacity: 0;                     /* inactive slides fade — kills neighbor
                                     quote-card shadow bleeding into view */
  transition: opacity var(--dur-slow) var(--ease-inout);
}
.csl-slide.on { opacity: 1; }
.csl-slide h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 14px 0 44px;
}
.csl-label {
  font-size: var(--text-label); font-weight: 600; color: var(--navy);
  padding-left: 12px; border-left: 2px solid var(--acc, var(--navy));
  margin: 30px 0 12px;
}
.csl-slide p {
  font-size: 15.5px; line-height: 1.65; color: var(--gray-500);
}
.csl-slide p a, .csl-checks a { color: var(--acc, var(--seafoam-dark)); font-weight: 600; }
.csl-slide p a:hover, .csl-checks a:hover { text-decoration: underline; }
.csl-checks {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px;
  max-width: 420px;
}
.csl-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.csl-checks li::before {
  content: '✓';
  font-size: 11px; font-weight: 700; color: var(--acc, var(--seafoam-dark));
  background: rgba(17, 26, 74, 0.06);
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.csl-intro { margin-bottom: 44px; max-width: 480px; }
.csl-quote {
  position: relative; overflow: hidden;
  background: var(--qbg, var(--navy));
  border-radius: var(--radius-lg);
  padding: 56px 52px;
  min-height: 440px;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-widget);
}
.csl-quote::before {              /* depth wash over the flat brand color */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.14), transparent 45%, rgba(0,0,0,0.18));
  pointer-events: none;
}
.csl-quote canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* the canvas paints over the depth wash, so white text was competing with the
   dots. This scrim sits above the art and below the words. */
.csl-quote::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.30) 46%, rgba(0, 0, 0, 0.05) 78%),
    linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent 42%);
}
.csl-quote blockquote, .csl-quote figcaption { z-index: 2; }
.csl-quote blockquote {
  position: relative;
  font-size: 22px; line-height: 1.55; color: #fff;
  letter-spacing: var(--track-tight);
  margin-bottom: 30px;
}
.csl-quote figcaption { position: relative; font-size: 14.5px; color: rgba(255,255,255,0.82); }
.csl-quote figcaption b { color: #fff; }

/* Column keeps the whole switcher inside one raised panel, tabs first,
   so the row of names reads as the index to the card below it. */
.csl-card {
  background: #fbfbfc;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  box-shadow: rgba(255, 255, 255, 1) 0 0 20px 0 inset,
              rgba(0, 0, 0, 0.05) 0 0 0 1px,
              rgba(0, 0, 0, 0.1) 0 1px 2px 0;
}
.csl-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  margin-bottom: var(--space-6);
  position: relative; z-index: 3;   /* real-pointer guard: nothing overlays the tabs */
}
.csl-tab {
  font: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 12px 14px; border-radius: var(--radius);
  color: var(--gray-500);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.csl-tab:hover { background: rgba(17, 26, 74, 0.04); color: var(--gray-700); }
.csl-tab.on {
  background: var(--tc, var(--navy)); color: var(--navy);
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
}
.csl-tab b { display: block; font-size: 16px; font-weight: 600; letter-spacing: var(--track-tight); }
.csl-tab span {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 500; color: var(--gray-500);
}
.csl-tab.on span { color: rgba(17, 26, 74, 0.66); }

@media (max-width: 960px) {
  .csl-slide { grid-template-columns: 1fr; gap: 36px; }
  .csl-tabs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- How-it-works stepper (Stripe Link) ---------- */
.hw-head { max-width: 640px; margin-bottom: 72px; }
.hw-head h2 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin: 14px 0 22px;
}
.hw-head p { font-size: 16.5px; line-height: 1.65; color: var(--gray-500); }
.hw-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px;
  align-items: center;
}
.hw-steps { display: flex; flex-direction: column; gap: 40px; }
.hw-step {
  font: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 0;
}
.hw-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 15px; font-weight: 600;
  background: var(--gray-100); color: var(--gray-500);
  margin-bottom: 14px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hw-step h4 {
  font-size: var(--text-h6); font-weight: 600; color: var(--navy);
  border-left: 2px solid transparent; padding-left: 0;
  margin-bottom: 8px;
  transition: border-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.hw-step p { font-size: 15px; line-height: 1.6; color: var(--gray-500); }
.hw-step:hover .hw-num { background: var(--gray-200); }
.hw-step.on .hw-num { background: var(--accent-lilac-light); color: var(--accent-lilac); }
.hw-step.on h4 { border-left-color: var(--accent-lilac); padding-left: 12px; }

/* --- stage: stacked crossfading panels --- */
.hw-stage {
  position: relative; height: 560px;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-widget);
}
.hw-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.hw-panel.on { opacity: 1; transform: none; pointer-events: auto; }

/* --- mock UIs --- */
.hw-mock { width: min(420px, 84%); }
.hw-mock label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--navy);
  margin-bottom: 8px;
}
.hw-inrow {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--gray-200);
  padding: 13px 14px;
  font-size: 15px; color: var(--gray-600);
}
.hw-inrow:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.hw-inrow + .hw-inrow { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.hw-split { gap: 14px; }
.hw-split span { flex: 1; }
.hw-split span + span { border-left: 1px solid var(--gray-200); padding-left: 14px; }
.hw-badges { display: flex; gap: 5px; flex: none !important; border: 0 !important; padding: 0 !important; }
.hw-badges i {
  font-style: normal; font-size: 10px; color: #fff;
  width: 26px; height: 18px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.hw-consent {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 15px 14px; margin-top: 18px;
}
.hw-consent i {
  font-style: normal; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--navy);
  width: 18px; height: 18px; border-radius: var(--radius-xs); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.hw-consent b { display: block; font-size: 14.5px; color: var(--navy); margin-bottom: 3px; }
.hw-consent small { font-size: 13px; color: var(--gray-500); }
.hw-flag { margin-top: 18px; border-radius: var(--radius) !important; justify-content: flex-start; gap: 10px; }

.hw-brand { font-size: 17px; font-weight: 700; letter-spacing: var(--track-heading); color: var(--navy); }
.hw-brand i {
  font-style: normal; color: #fff; background: var(--seafoam);
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; margin-right: 4px;
}
.hw-otp { text-align: center; }
.hw-otphead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.hw-x { font-size: 20px; color: var(--gray-400); }
.hw-otp h5 { font-size: var(--text-h5); font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.hw-otp p { font-size: 14.5px; color: var(--gray-500); line-height: 1.55; margin-bottom: 24px; }
.hw-digits { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.hw-digits span {
  width: 48px; height: 58px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500; color: var(--navy);
}
.hw-digits span.on { border: 2px solid var(--seafoam); }
.hw-alt { display: block; font-size: 14.5px; font-weight: 600; color: var(--seafoam-dark); margin-bottom: 12px; cursor: pointer; }
.hw-alt:hover { text-decoration: underline; }
.hw-otp small, .hw-msg small { font-size: 13px; color: var(--gray-400); }

.hw-msghead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.hw-chip {
  font-family: var(--font-mono, monospace); font-size: 11.5px;
  color: var(--seafoam-dark); background: rgba(68, 180, 139, 0.12);
  padding: 4px 10px; border-radius: var(--radius-full);
}
.hw-msg h5 { font-size: var(--text-h5); font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.hw-msg p { font-size: 14.5px; color: var(--gray-500); line-height: 1.6; margin-bottom: 18px; }
.hw-timing {
  display: block; font-size: 12.5px; color: var(--gray-400);
  border-left: 2px solid var(--seafoam); padding-left: 10px;
  margin-bottom: 22px;
}
.hw-cta {
  font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--navy); border: 0; border-radius: var(--radius);
  padding: 13px 22px; cursor: pointer;
  box-shadow: var(--shadow-btn);
  display: block; margin-bottom: 16px;
  transition: filter var(--dur-fast) var(--ease-out);
}
.hw-cta:hover { filter: brightness(1.12); }

@media (max-width: 960px) {
  .hw-grid { grid-template-columns: 1fr; gap: 36px; }
  .hw-stage { height: 500px; }
}

/* ---------- Featured post (Stripe newsroom) ---------- */
.fp-section { position: relative; }
.fp-section::before {              /* dotted column guides */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% - 250px) 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% + 250px) 0 / 1px 6px repeat-y;
  opacity: 0.5;
  pointer-events: none;
}
.fp-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px;
  align-items: start;
}
.fp-eyebrow {
  font-size: 14.5px; font-weight: 600; color: var(--accent-lilac);
  border-left: 2px solid var(--accent-lilac); padding-left: 12px;
  margin-bottom: 22px;
}
.fp-copy h2 {
  font-size: var(--text-h2); line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  margin-bottom: 22px;
}
.fp-copy p {
  font-size: 16.5px; line-height: 1.65; color: var(--gray-500);
  max-width: 560px; margin-bottom: 26px;
}
.fp-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 600; color: var(--accent-lilac);
}
.fp-more .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.fp-more:hover .arrow { transform: translateX(3px); }
.fp-meta {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--gray-300); padding-left: 12px;
  margin-bottom: 44px;
}
.fp-date { font-size: 15px; color: var(--navy); font-weight: 500; }
.fp-read { font-size: 13.5px; color: var(--gray-500); }
.fp-stat {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(178deg, var(--accent-lilac-dark) 0%, var(--accent-lilac-deep) 55%, var(--accent-lilac-deep) 100%);
  padding: 96px 56px 88px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  box-shadow: var(--shadow-widget);
}
.fp-stat b {
  font-size: var(--text-stat); font-weight: 600;
  line-height: 1; letter-spacing: var(--track-display);
  background: linear-gradient(100deg, var(--accent-lilac-light) 10%, var(--accent-lilac-soft) 55%, var(--accent-lilac) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 26px;
}
.fp-stat span {
  font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, 0.92);
  max-width: 380px;
}

@media (max-width: 960px) {
  .fp-grid { grid-template-columns: 1fr; gap: 36px; }
  .fp-meta { margin-bottom: 28px; }
  .fp-stat { padding: 64px 32px 56px; }
}

/* ---------- Testimonial banner carousel (Stripe Elements) ---------- */
.tst-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-widget);
}
.tst-track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-inout);
}
.tst-slide {
  flex: 0 0 100%;
  margin: 0;
  background: var(--tbg, var(--navy));
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  min-height: 400px;
  padding: 72px 80px 88px;
}
.tst-quote blockquote {
  position: relative;
  font-size: 21px; line-height: 1.55; color: #fff;
  letter-spacing: var(--track-tight);
  max-width: 560px;
  margin-bottom: 30px;
}
.tst-quote blockquote::before {
  content: '\201C';
  position: absolute; left: -22px; top: 0;
}
.tst-quote figcaption { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.tst-quote figcaption b { color: #fff; }
/* the words are someone else's — every testimonial surface speaks in
   the same editorial serif italic (Newsreader), distinct from the
   product voice in Switzer */
.tst-slide blockquote,
.ts-slide blockquote,
.csl-quote blockquote,
.cs2-card blockquote,
.tw-card blockquote,
.tw2-card blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.ts-slide blockquote { line-height: 1.42; }
.tst-quote blockquote { font-size: 23px; line-height: 1.5; }
/* attribution: face, then name over title on two lines */
.tst-who2 { display: flex; align-items: center; gap: 14px; }
.tst-who2 img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.tst-who2 span b { display: block; color: #fff; font-size: 15px; letter-spacing: var(--track-tight); }
.tst-who2 span small { display: block; color: rgba(255, 255, 255, 0.72); font-size: 13px; margin-top: 2px; }
.tst-side { position: relative; height: 100%; min-height: 240px; overflow: hidden; }
.tst-side canvas { position: absolute; inset: -72px -80px -88px 0; width: auto; height: auto; }
/* Stripe-startups treatment (expertise pages): a full-bleed editorial
   photo under the whole card, washed to the accent hue, with a scrim
   that is solid card-colour on the quote side and dissolves to
   transparent on the right where the photo and white mark sit. */
.tst-slide { position: relative; overflow: hidden; }
.tst-pic {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
}
/* duotone wash — pull every photo into the section accent */
.tst-pic::before {
  content: ''; position: absolute; inset: 0;
  background: var(--tbg, var(--navy));
  mix-blend-mode: color;
}
/* gentle darken so the white mark always reads */
.tst-pic::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(6, 24, 18, 0.18);
}
.tst-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    var(--tbg, var(--navy)) 0%,
    var(--tbg, var(--navy)) 38%,
    color-mix(in srgb, var(--tbg, var(--navy)) 55%, transparent) 62%,
    transparent 100%);
}
.tst-quote, .tst-slide .tst-side { position: relative; z-index: 1; }
@media (max-width: 960px) {
  /* single column: fade top (quote) to photo at the bottom */
  .tst-scrim {
    background: linear-gradient(180deg,
      var(--tbg, var(--navy)) 0%,
      var(--tbg, var(--navy)) 46%,
      color-mix(in srgb, var(--tbg, var(--navy)) 55%, transparent) 68%,
      transparent 100%);
  }
}
/* the right half of the card IS the hue: a full-bleed field of two
   neighbouring colours, slowly flowing. Not a highlight on the card —
   the ground the company mark sits on. */
.tst-hue { position: absolute; inset: 0; pointer-events: none; }
.tst-hue::before, .tst-hue::after {
  content: ''; position: absolute; inset: -20%;
}
.tst-hue::before {
  background: linear-gradient(115deg, var(--accent-base) 0%, var(--accent-soft) 55%, var(--accent-base) 100%);
  animation: tst-flow-a 13s var(--ease-inout) infinite alternate;
}
.tst-hue::after {
  /* the second colour block sweeps diagonally across the first */
  background: linear-gradient(245deg, var(--accent-soft) 10%, transparent 55%, var(--accent-light) 100%);
  opacity: 0.85;
  animation: tst-flow-b 19s var(--ease-inout) infinite alternate;
}
@keyframes tst-flow-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes tst-flow-b {
  from { transform: translate3d(5%, 2%, 0) rotate(0.001deg); }
  to   { transform: translate3d(-5%, -4%, 0) rotate(0.001deg); }
}
/* badge reads on the field */
.tst-side .tst-badge { z-index: 1; }
.tst-badge {
  position: absolute; top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  font-size: 26px; color: #fff;
  border: 3px solid #fff; border-radius: var(--radius);
  padding: 12px 26px;
  box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.tst-dashes {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
}
.tst-dashes i {
  width: 34px; height: 3px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--dur-fast) var(--ease-out);
}
.tst-dashes i.on { background: #fff; }
.tst-logos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
}
.tst-logo {
  font: inherit; font-size: 17px;
  background: none; border: 0; cursor: pointer;
  padding: 14px 8px;
  color: var(--gray-400);
  transition: color var(--dur-fast) var(--ease-out);
}
.tst-logo:hover { color: var(--gray-600); }
.tst-logo.on { color: var(--lc, var(--navy)); }

@media (max-width: 960px) {
  .tst-slide { grid-template-columns: 1fr; padding: 48px 36px 72px; gap: 36px; }
  .tst-side { min-height: 140px; }
  .tst-side canvas { inset: 0; }
  .tst-badge { left: 50%; }
  .tst-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Use-cases duo grid (Stripe payments) ---------- */
.uc2-head { max-width: 640px; margin-bottom: 56px; }
.uc2-head h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin: 14px 0 20px;
}
.uc2-head p { font-size: 16.5px; line-height: 1.65; color: var(--gray-500); }
.uc2-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-col);
  align-items: start;
}
.uc2-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.uc2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.uc2-art {
  position: relative; overflow: hidden;
  height: 320px;
  background:
    linear-gradient(115deg, var(--w1, transparent), transparent 45%),
    linear-gradient(295deg, var(--w2, transparent), transparent 45%),
    var(--gray-50);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 36px 44px 0;
}
.uc2-art > canvas.halftone {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.uc2-mock {
  position: relative;                /* rides above the dot layer */
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 10px 34px rgba(17, 26, 74, 0.12);
  padding: 22px 24px 18px;
  width: min(400px, 100%);
}
.uc2-mock > b { display: block; font-size: 14px; color: var(--navy); margin-bottom: 12px; }
.uc2-mock label {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--navy);
  margin: 14px 0 8px;
}
.uc2-mock label em { font-style: normal; font-weight: 400; color: var(--gray-400); }
.uc2-tiles { display: flex; gap: 8px; margin-bottom: 6px; }
.uc2-tiles span {
  font-size: 12.5px; color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 9px 12px;
}
.uc2-tiles span.on { border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; }
.uc2-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gray-200);
  padding: 9px 12px;
  font-size: 13px; color: var(--gray-600);
}
.uc2-row:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.uc2-row + .uc2-row { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.uc2-row:only-of-type { border-radius: var(--radius); }
.uc2-row em { font-style: normal; margin-left: auto; color: var(--navy); font-weight: 500; }
.uc2-half { justify-content: space-between; }
.uc2-half span + span { border-left: 1px solid var(--gray-200); padding-left: 12px; }
.uc2-big { font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 12px; }
.uc2-big small { font-size: 12.5px; font-weight: 400; color: var(--gray-400); margin-left: 6px; }
.uc2-mock svg { display: block; width: 100%; height: auto; margin-bottom: 4px; }
.uc2-sq { width: 10px; height: 3px; border-radius: var(--radius-xs); flex: none; }
.uc2-phone {
  background: #fff;
  border: 6px solid var(--color-charcoal);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  border-bottom: 0;
  width: 210px;
  padding: 44px 20px 36px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(17, 26, 74, 0.16);
}
.uc2-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-green); color: #fff;
  font-size: 22px; font-weight: 700;
  margin-bottom: 14px;
}
.uc2-phone b { display: block; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.uc2-phone small { font-size: 12.5px; color: var(--gray-500); }
.uc2-body { padding: 28px 32px 32px; }
.uc2-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 18px;
}
.uc2-badge i {
  font-style: normal; font-size: 10px; color: #fff;
  width: 18px; height: 18px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.uc2-body h3 {
  font-size: var(--text-h4); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); margin-bottom: 12px;
}
.uc2-body p { font-size: 15px; line-height: 1.6; color: var(--gray-500); }
.uc2-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; color: var(--accent-lilac);
  margin-top: 16px;
}
.uc2-link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.uc2-link:hover .arrow { transform: translateX(3px); }

@media (max-width: 960px) {
  .uc2-grid { grid-template-columns: 1fr; gap: 32px; }
  .uc2-art { height: 280px; padding: 28px 28px 0; }
}

/* ---------- Capabilities photo strip (customer.io) ---------- */
.caps2-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 48px;
}
.caps2-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--seafoam-dark);
  margin-bottom: 16px;
}
.caps2-head h2 {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.caps2-over {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; color: var(--navy);
  white-space: nowrap; padding-bottom: 6px;
}
.caps2-over .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.caps2-over:hover .arrow { transform: translateX(3px); }
.caps2-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-radius: var(--radius-xs); overflow: hidden;
}
.caps2-card {
  position: relative;
  height: 480px;
  background: var(--navy-950);                 /* deep navy in place of the photos */
  overflow: hidden;
}
.caps2-card + .caps2-card { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.caps2-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.caps2-card::after {                   /* the dark veil that lifts on hover */
  content: ''; position: absolute; inset: 0;
  background: rgba(9, 13, 34, 0.55);
  transition: opacity var(--dur-med) var(--ease-out);
}
.caps2-card:hover::after { opacity: 0; }
.caps2-plus {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.caps2-plus::before {
  content: '+';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.caps2-card:hover .caps2-plus { background: var(--seafoam-light, var(--accent-green-light)); border-color: transparent; }
.caps2-card:hover .caps2-plus::before { content: '→'; color: var(--navy); }
.caps2-cap {
  position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2;
}
.caps2-cap b {
  display: block;
  font-size: 19px; font-weight: 600; color: #fff;
  letter-spacing: var(--track-heading);
  margin-bottom: 0;
  transition: margin var(--dur-med) var(--ease-out);
}
.caps2-cap p, .caps2-cap em {
  display: block; font-style: normal;
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.85);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.caps2-cap em { font-weight: 600; color: var(--accent-green-light); margin-top: 10px; }
.caps2-card:hover .caps2-cap b { margin-bottom: 8px; }
.caps2-card:hover .caps2-cap p,
.caps2-card:hover .caps2-cap em { opacity: 1; transform: none; }
.caps2-card:hover .caps2-cap em { transition-delay: 60ms; }

/* ---------- Journey stages quad (customer.io) ---------- */
.stg-title {
  font-size: var(--text-h2); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 48px;
}
.stg-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.stg-cell {
  position: relative;
  background: #fff;
  min-height: 268px;
  padding: 32px 34px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background var(--dur-med) var(--ease-out);
}
.stg-cell:hover { background: var(--gray-50); }
.stg-cell svg {
  position: absolute; top: 30px; right: 34px;
  width: 84px; height: 84px;
}
.stg-cell .stg-ic {
  position: absolute; top: 26px; right: 30px;
  --di-fill: var(--color-seafoam-700);   /* dot-matrix icon accent */
}
.inc2-ic svg { display: block; }
.stg-cell h3 {
  font-size: var(--text-h5); font-weight: 600; letter-spacing: var(--track-heading);
  margin-bottom: 8px;
}
.stg-cell p { font-size: 14.5px; line-height: 1.55; color: var(--gray-500); max-width: 300px; }
.stg-cell em {
  font-style: normal; font-size: 14px; font-weight: 600; color: var(--seafoam-dark);
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(6px);
  transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out), margin var(--dur-med) var(--ease-out);
}
.stg-cell:hover em { max-height: 28px; opacity: 1; transform: none; margin-top: 12px; }

/* ---------- Enterprise infrastructure bento (customer.io, dark) ---------- */
.infra-section { background: var(--navy-950); }
.infra-head { text-align: center; margin-bottom: 56px; }
.infra-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--accent-green-light);
  margin-bottom: 18px;
}
.infra-head h2 {
  font-size: var(--text-h2); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); color: #fff;
}
.infra-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.infra-cell { background: var(--navy-950); padding: 40px 44px; }
.infra-wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px;
  align-items: center;
}
.infra-bullet {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
}
.infra-bullet::before {
  content: '';
  width: 9px; height: 9px; border-radius: var(--radius-xs);
  background: var(--accent-green-light);
}
.infra-cell h3 {
  font-size: var(--text-h4); line-height: var(--lh-heading);
  letter-spacing: var(--track-heading); color: #fff;
  margin-bottom: 12px;
}
.infra-cell p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); max-width: 440px; }
.infra-tiles {
  display: grid; grid-template-columns: repeat(4, 64px);
  gap: 26px 40px;
  justify-content: end;
}
.infra-tiles i, .infra-go {
  font-style: normal;
  width: 64px; height: 64px; border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.infra-tiles i:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }
.infra-tiles .infra-r2 { margin-top: 14px; }   /* middle row stagger */
.infra-go {
  background: var(--accent-green-light); border: 0;
  color: var(--navy); font-size: 19px; font-weight: 700;
  border-radius: 50%; width: 46px; height: 46px;
  align-self: center; justify-self: center;
}
.infra-art { display: flex; align-items: center; justify-content: center; padding: 28px; }
.infra-art svg { width: 100%; max-width: 460px; height: auto; }
.infra-col { display: grid; grid-template-rows: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.1); }
.infra-col .infra-cell { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 960px) {
  .caps2-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .caps2-strip { grid-template-columns: 1fr 1fr; }
  .caps2-card { height: 340px; }
  .stg-grid { grid-template-columns: 1fr; }
  .infra-wide { grid-template-columns: 1fr; }
  .infra-tiles { justify-content: start; grid-template-columns: repeat(4, 52px); gap: 18px; }
  .infra-bento { grid-template-columns: 1fr; }
}

/* ---------- Journey sticky-stack (customer.io journeys) ---------- */
.jst-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.jst-head small {
  display: block; font-size: 14.5px; color: var(--gray-500);
  margin-bottom: 12px;
}
.jst-head h2 {
  font-size: var(--text-h1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); margin-bottom: 18px;
}
.jst-head mark {
  background: var(--gray-100); color: inherit;
  padding: 0 6px; border-radius: var(--radius-xs);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.jst-head p { font-size: 16.5px; line-height: 1.6; color: var(--gray-500); margin-bottom: 22px; }
.jst-try {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; color: var(--navy);
}
.jst-try .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.jst-try:hover .arrow { transform: translateX(3px); }

/* each card pins at the same offset — the next one slides up and covers it;
   DOM order = paint order, so no z-index needed */
.jst-stack { display: flex; flex-direction: column; gap: 48px; }
.jst-card {
  position: sticky; top: 84px;
  background: var(--jbg, var(--accent-lilac-light));
  border-radius: var(--radius-2xl);
  min-height: 620px;
  padding: 60px 64px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap-col);
  align-items: start;
}
.jst-copy { display: flex; flex-direction: column; min-height: 500px; }
.jst-copy h3 {
  font-size: var(--text-h3); letter-spacing: var(--track-heading);
  color: var(--navy); margin-bottom: 14px;
}
.jst-copy > p { font-size: 15.5px; line-height: 1.6; color: rgba(17, 26, 74, 0.72); max-width: 420px; }
.jst-feats {
  margin-top: auto; padding-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.jst-feats i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.75);
  font-size: 15px; color: var(--navy);
  margin-bottom: 12px;
}
.jst-feats span { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(17, 26, 74, 0.8); }

/* --- flow diagram bits (shared) --- */
.jst-vis { position: relative; min-height: 480px; }
.jf-flow {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8px;
}
.jf-node {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(17, 26, 74, 0.1);
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}
.jf-node i { font-style: normal; font-size: 14px; }
.jf-node.dim { opacity: 0.45; }
.jf-line { width: 1px; height: 26px; background: rgba(17, 26, 74, 0.25); }
.jf-avs { padding: 8px 14px; }
.jf-avs b {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  margin-right: -8px; border: 2px solid #fff;
}
.jf-avs em {
  font-style: normal; font-size: 12px; font-weight: 600; color: var(--gray-600);
  background: var(--gray-100); border-radius: var(--radius-full);
  padding: 6px 9px; margin-left: 12px;
}
.jf-tag {
  font-size: 12px; font-weight: 600; color: var(--accent-green-dark);
  background: var(--accent-green-light); border-radius: var(--radius-full);
  padding: 5px 12px; margin-bottom: -8px; z-index: 1;
}
.jf-yesno {
  font-size: 12px; font-weight: 600; color: var(--accent-green-dark);
  border-radius: var(--radius-full); padding: 4px 14px;
}
.jb-rail {
  width: 62%; height: 26px;
  border: 1px solid rgba(17, 26, 74, 0.25); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-top: 26px;
}
.jb-cols { display: flex; justify-content: space-between; width: 86%; }
.jb-col { display: flex; flex-direction: column; align-items: center; margin-top: -13px; }
.jf-cursor {
  position: absolute;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--cc, var(--accent-blue-mid)); border-radius: var(--radius-full);
  padding: 5px 12px;
}
.jf-cursor u {
  text-decoration: none; position: absolute; top: -11px; left: -6px;
  color: var(--cc, var(--accent-blue-mid)); font-size: 13px;
}
.jf-comment {
  position: absolute; right: 0; top: 20%;
  width: 200px;
  background: var(--accent-blue-light); border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 12.5px; line-height: 1.5; color: var(--navy);
  box-shadow: 0 6px 18px rgba(17, 26, 74, 0.12);
}
.jf-comment small { display: block; margin-top: 8px; color: rgba(17, 26, 74, 0.55); font-size: 11px; }

/* --- trigger chip cloud --- */
.jt-chips {
  display: flex; flex-wrap: wrap; gap: 14px 12px;
  align-content: flex-start; justify-content: flex-end;
  padding-top: 16px;
}
.jt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(17, 26, 74, 0.08);
  padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}
.jt-chip i { font-style: normal; font-size: 12px; color: var(--accent-green); }
.jt-chip u {
  text-decoration: none;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 2px 8px; font-size: 12px;
}
.jt-chip.dim { opacity: 0.5; }

@media (max-width: 960px) {
  .jst-card { grid-template-columns: 1fr; padding: 36px 28px; min-height: 0; }
  .jst-copy { min-height: 0; }
  .jst-feats { padding-top: 28px; }
  .jst-vis { min-height: 0; }
  .jf-comment { position: static; width: auto; margin-top: 20px; }
  .jt-chips { justify-content: flex-start; }
}

/* ---------- Career timeline wall (Adyen the-latest) ---------- */
.tl-head { max-width: 640px; margin-bottom: var(--space-7); }
.tl-head h2 { margin: var(--space-3) 0 var(--space-4); }
.tl-head p { font-size: var(--text-body-lg); color: var(--gray-500); margin-bottom: var(--space-5); }
.tl-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tl-chip {
  font: inherit; font-size: var(--text-small); font-weight: 600; color: var(--gray-500);
  background: none; border: 1px solid var(--gray-200); border-radius: var(--radius-full);
  padding: 8px 16px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.tl-chip:hover { color: var(--navy); border-color: var(--gray-300); }
.tl-chip.on {
  color: #fff; background: var(--tk, var(--navy)); border-color: var(--tk, var(--navy));
}

.tl-grid { display: grid; grid-template-columns: 120px 1fr; gap: var(--gap-col); }

/* sticky year rail */
.tl-rail-wrap { position: relative; }
.tl-rail {
  position: sticky; top: 120px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid var(--gray-200);
}
.tl-year {
  font: inherit; font-family: var(--font-mono);
  font-size: var(--text-small); color: var(--gray-400);
  background: none; border: 0; text-align: left; cursor: pointer;
  position: relative; padding: 2px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.tl-year::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-4) - 1px); top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-300); transform: translate(-50%, -50%) scale(0.7);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tl-year:hover { color: var(--gray-600); }
.tl-year.on { color: var(--navy); font-weight: 600; }
.tl-year.on::before { background: var(--seafoam); transform: translate(-50%, -50%) scale(1.15); }

/* entry stream */
.tl-stream { display: flex; flex-direction: column; }
.tl-entry {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--gray-100);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.tl-entry:first-child { border-top: 0; padding-top: 0; }
.tl-entry.in { opacity: 1; transform: none; }
.tl-entry.tl-hidden { display: none; }
.tl-entry-year {
  font-family: var(--font-mono); font-size: var(--text-small); color: var(--gray-400);
  padding-top: 3px;
}
.tl-tag {
  display: inline-block; font-size: var(--text-micro); font-weight: 600;
  color: var(--tk, var(--navy)); background: var(--tk-light, var(--gray-100));
  padding: 3px 10px; border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.tl-org {
  font-size: var(--text-small); font-weight: 600; color: var(--navy);
  margin-bottom: var(--space-3);
}
.tl-org span {
  font-weight: 400; color: var(--gray-500);
  margin-left: var(--space-2); padding-left: var(--space-2);
  border-left: 1px solid var(--gray-300);
}
.tl-entry-body h3 { margin-bottom: var(--space-2); }
.tl-entry-body p {
  font-size: var(--text-body); color: var(--gray-500); line-height: var(--lh-relaxed);
  max-width: 560px;
}
.tl-metric {
  display: inline-block; margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-small); font-weight: 500;
  color: var(--tk, var(--seafoam-dark));
  border-left: 2px solid var(--tk, var(--seafoam)); padding-left: 10px;
}

@media (max-width: 760px) {
  .tl-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .tl-rail-wrap { display: none; }
  .tl-entry { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- Logo trust marquee (portfolio gap #2) ---------- */
.lb-section { padding-top: var(--section-gap-sm); padding-bottom: var(--section-gap-sm); }
.lb-label {
  text-align: center; font-size: var(--text-small); font-weight: 600;
  color: var(--gray-500); margin-bottom: var(--space-6);
}
.lb-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.lb-track {
  display: flex; align-items: center; gap: var(--space-8);
  width: max-content;
  animation: lb-scroll 34s linear infinite;
}
.lb-marquee:hover .lb-track { animation-play-state: paused; }
.lb-logo {
  font-size: 22px; color: var(--gray-400); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.lb-logo:hover { color: var(--navy); }
@keyframes lb-scroll { to { transform: translateX(-50%); } }

/* ---------- About + halftone portrait (portfolio gap #3) ---------- */
.ab-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--gap-col);
  align-items: stretch;
}
.ab-portrait {
  position: relative; min-height: 440px;
  background: radial-gradient(120% 120% at 50% 0, #eef0f4, var(--gray-100));
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ab-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-copy h2 { margin: var(--space-3) 0 var(--space-4); }
.ab-lead { font-size: var(--text-body-lg); color: var(--navy); margin-bottom: var(--space-4); }
.ab-copy > p { font-size: var(--text-body); color: var(--gray-500); line-height: var(--lh-relaxed); }
.ab-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
}
.ab-facts b { display: block; font-size: var(--text-small); color: var(--navy); margin-bottom: 2px; }
.ab-facts span { font-size: var(--text-micro); color: var(--gray-500); }
.ab-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Testimonial quote wall (portfolio gap #4) ---------- */
.tw-head { max-width: 640px; margin-bottom: var(--space-7); }
.tw-head h2 { margin-top: var(--space-3); }
.tw-grid {
  columns: 3; column-gap: var(--gap-grid);
}
.tw-card {
  break-inside: avoid; margin: 0 0 var(--gap-grid);
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--tk, var(--seafoam));
  padding: var(--card-pad-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tw-card blockquote {
  font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--navy);
  margin-bottom: var(--space-4);
}
.tw-card blockquote::before { content: '\201C'; color: var(--tk, var(--seafoam)); font-weight: 700; }
.tw-card figcaption b { display: block; font-size: var(--text-small); color: var(--navy); }
.tw-card figcaption span { font-size: var(--text-micro); color: var(--gray-500); }

@media (max-width: 960px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-portrait { max-width: 420px; }
  .tw-grid { columns: 2; }
}
@media (max-width: 640px) {
  .tw-grid { columns: 1; }
  .ab-facts { grid-template-columns: 1fr; }
}

/* ---------- Testimonial wall variant B — with avatars ---------- */
.tw2-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid);
}
.tw2-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tw2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tw2-head-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tw2-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-small); font-weight: 700; color: #fff;
  background: var(--tk, var(--navy));
  letter-spacing: 0.02em;
  object-fit: cover;            /* when it's a real <img> */
}
img.tw2-avatar { box-shadow: 0 0 0 2px var(--tk, var(--navy)); }
.tw2-id b { display: block; font-size: var(--text-small); color: var(--navy); }
.tw2-id span { display: block; font-size: var(--text-micro); color: var(--gray-500); }
.tw2-id em {
  font-style: normal; font-size: var(--text-micro); font-weight: 600;
  color: var(--tk, var(--seafoam-dark));
}
.tw2-card blockquote {
  font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--navy);
}
.tw2-card blockquote::before { content: '\201C'; color: var(--tk, var(--seafoam)); font-weight: 700; }

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

/* ---------- Testimonial slideshow (variant C) ---------- */
.ts-head { text-align: center; margin-bottom: var(--space-7); }
/* ---------- ab-side · homepage About: dot portrait + tags ---------- */
.ab-side {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}
.ab-side-cv { position: relative; min-height: 360px; }
.ab-side canvas {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
}
.ab-side-tags {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  border-left: 1px dashed var(--gray-100);
  padding: 20px 20px 20px 20px;
}
.ab-side-tags .mono-tag { display: block; width: fit-content; margin: 0; }
@media (max-width: 960px) {
  .ab-side { grid-template-columns: 1fr; }
  .ab-side-tags { border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; }
}
.ab-side .rf-mk.tl { top: -7px; left: -7px; }
.ab-side .rf-mk.br { bottom: -7px; right: -7px; }

/* ---------- ab-illo · homepage About portrait illustration ---------- */
.ab-illo {
  position: relative;
  margin-top: var(--space-5);
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ab-illo:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: var(--shadow-xl); }
.ab-illo canvas { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.ab-illo img { position: relative; display: block; width: 100%; border-radius: 8px; }
.ab-illo .rf-mk.tl { top: -7px; left: -7px; }
.ab-illo .rf-mk.br { bottom: -7px; right: -7px; }

/* ---------- scale stats · Column "trusted at scale" bottom row ---------- */
.scale-grid .scale-stats { grid-column: 1 / -1; }
.scale-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-100);
}
.scale-stat b {
  display: block;
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 600;
  letter-spacing: var(--track-tight); color: var(--accent-deep);
  margin-bottom: 6px;
}
.scale-stat span { font-size: 13px; line-height: 1.5; color: var(--gray-500); display: block; max-width: 230px; }
@media (max-width: 960px) { .scale-stats { grid-template-columns: 1fr 1fr; } }

/* real company marks in the recommendation marquees (hero strip + band) */
.logo-track img {
  width: 20px; height: 20px; border-radius: 5px;
  object-fit: contain; margin-right: 9px; vertical-align: -4px;
}
.lb-logo img {
  width: 22px; height: 22px; border-radius: 5px;
  object-fit: contain; margin-right: 10px; vertical-align: -5px;
}

/* ---------- GCH · illustrative growth chart (dark cs2 card) ----------
   Trend as a drawing, not a data table: no values on the chart, the
   honest framing lives in the copy next to it. */
.gch { position: relative; width: 100%; }
.gch-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.gch-head b { color: #fff; font-size: 16px; letter-spacing: var(--track-tight); }
.gch-head span { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; }
.gch-svg { display: block; width: 100%; height: auto; }
.gch-line {
  fill: none; stroke: var(--color-sky-cyan); stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: gch-draw 1.6s var(--ease-out) 0.3s forwards;
}
@keyframes gch-draw { to { stroke-dashoffset: 0; } }
.gch-area { opacity: 0; animation: gch-fade 0.9s var(--ease-out) 1.2s forwards; }
@keyframes gch-fade { to { opacity: 1; } }
.gch-dot {
  fill: var(--navy-950); stroke: var(--color-sky-cyan); stroke-width: 2.5;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: gch-pop 0.4s var(--ease-out) calc(0.5s + var(--i) * 0.45s) forwards;
}
@keyframes gch-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.gch-last { animation: gch-pop 0.4s var(--ease-out) 1.4s forwards, gch-pulse 3s ease-in-out 2s infinite; }
@keyframes gch-pulse {
  0%, 100% { stroke-width: 2.5; }
  50% { stroke-width: 5; }
}
.gch-ticks {
  display: flex; justify-content: space-between;
  margin-top: 8px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45); text-transform: uppercase;
}

/* ---------- SIXP · six editorial programs card ---------- */
.sixp { padding: 20px 22px 18px; position: relative; }
.sixp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px; margin-top: 14px;
}
.sixp-t {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border: 1px solid var(--gray-75); border-radius: var(--radius);
  opacity: 0; transform: translateY(6px);
  animation: sixp-in 0.45s var(--ease-out) calc(0.15s + var(--i) * 0.12s) forwards;
  --di-fill: var(--accent-deep);
}
@keyframes sixp-in { to { opacity: 1; transform: none; } }
.sixp-t .dot-icon svg { width: 22px; height: 22px; display: block; }
.sixp-t b { display: block; font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: var(--track-tight); }
.sixp-t em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em;
  border-radius: 4px; padding: 2px 6px;
}
.f-tofu { color: var(--accent-green-deep); background: var(--accent-green-light); }
.f-mofu { color: var(--accent-gold-deep); background: var(--accent-gold-light); }
.f-bofu { color: var(--accent-blue); background: var(--accent-blue-light); }

/* ---------- STK · systems & tools (About) ---------- */
.stk-rows { display: grid; gap: var(--space-4); }
.stk-row {
  display: grid; grid-template-columns: 170px 1fr; gap: var(--space-5);
  align-items: start;
  padding: 16px 0 14px;
  border-top: 1px dashed var(--gray-100);
}
.stk-row:first-child { border-top: 0; }
.stk-row h3 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gray-500); padding-top: 8px;
}
@media (max-width: 960px) { .stk-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- OW · outside of work (About) ---------- */
.ow-section { background: var(--gray-50); border-top: 1px solid var(--gray-100); }
/* Four cards in a half-width column: 3-across left an orphan on its own row,
   and squeezed 12.5px body copy into a third of a third. */
.ow-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 560px) { .ow-cards { grid-template-columns: 1fr; } }
.ow-card {
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 16px 16px 14px;
  --di-fill: var(--accent-deep);
}
.ow-card .dot-icon svg { width: 30px; height: 30px; display: block; margin-bottom: 10px; }
.ow-card b { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; letter-spacing: var(--track-tight); }
.ow-card span { font-size: 12.5px; color: var(--gray-500); line-height: 1.45; }
@media (max-width: 960px) { .ow-cards { grid-template-columns: 1fr; } }

/* ---------- CRT · licenses & certifications strip ---------- */
.crt-section { background: var(--gray-50); border-top: 1px solid var(--gray-100); }
.crt-head { max-width: 620px; margin-bottom: var(--space-6); }
.crt-head h2 { margin: var(--space-3) 0 var(--space-3); }
.crt-head p { color: var(--gray-500); font-size: 15px; line-height: 1.6; }
.crt-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.crt-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.crt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.crt-card img {
  width: 28px; height: 28px; object-fit: contain;
  border-radius: 6px; display: block; margin-bottom: 12px;
}
.crt-card b {
  display: block; font-size: 14px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight); line-height: 1.35; margin-bottom: 4px;
}
.crt-card span { font-size: 12.5px; color: var(--gray-500); }
@media (max-width: 960px) { .crt-grid { grid-template-columns: repeat(2, 1fr); } }

.ts-head h2 { margin-top: var(--space-3); }
.ts-stage { display: flex; align-items: center; gap: var(--space-4); }
.ts-view { flex: 1; overflow: hidden; }
.ts-track { display: flex; transition: transform var(--dur-slow) var(--ease-inout); }
.ts-slide {
  flex: 0 0 100%; margin: 0;
  text-align: center;
  padding: 0 var(--space-6);
}
.ts-slide blockquote {
  font-size: var(--text-h4); line-height: var(--lh-heading); color: var(--navy);
  letter-spacing: var(--track-tight);
  max-width: 760px; margin: 0 auto var(--space-6);
}
.ts-slide blockquote::before {
  content: '\201C'; color: var(--tk, var(--seafoam)); font-weight: 700;
}
.ts-slide figcaption {
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.ts-face {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
}
.ts-initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-body); font-weight: 700; color: #fff;
  background: var(--tk, var(--navy)); letter-spacing: 0.02em;
}
.ts-who { text-align: left; }
.ts-who b { display: block; font-size: var(--text-small); color: var(--navy); }
.ts-who span { font-size: var(--text-micro); color: var(--gray-500); }
.ts-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  font-size: var(--text-body-lg); color: var(--navy);
  background: #fff; border: 1px solid var(--gray-200); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ts-arrow:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.ts-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.ts-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--gray-300); border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ts-dot.on { background: var(--seafoam); transform: scale(1.3); }

@media (max-width: 640px) {
  .ts-slide { padding: 0 var(--space-2); }
  .ts-slide blockquote { font-size: var(--text-h5); }
}

/* ---------- Dot-matrix CTA cards ---------- */
.dotcta { text-align: left; }
.dotcta-h { font-size: var(--text-h1); letter-spacing: var(--track-display); margin-bottom: 12px; }
.dotcta .section-sub { margin-bottom: 44px; }
.dotcta-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dotcta-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  min-height: 210px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.dotcta-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.dot-icon { display: block; margin-bottom: auto; }
.dot-icon circle { transform-box: fill-box; transform-origin: center; }
.dotcta-card:hover .dot-icon circle.on {
  animation: dotWave 0.8s var(--ease-out) both;
  animation-delay: var(--d);
}
@keyframes dotWave {
  0% { transform: scale(1); }
  45% { transform: scale(1.7); }
  100% { transform: scale(1); }
}
.dotcta-card b { font-size: 17px; font-weight: 600; margin-top: 26px; }
.dotcta-card small { font-size: 14px; color: var(--gray-500); margin-top: 4px; }

/* ---------- Final CTA with animated icons ---------- */
.cta-final { text-align: center; padding-top: var(--section-gap-lg); padding-bottom: var(--section-gap-lg); }
.cta-inner h2 { font-size: var(--text-h2); margin-bottom: 14px; }
.cta-inner .section-sub { max-width: 480px; margin: 0 auto 36px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-btn .ci { width: 18px; height: 18px; flex-shrink: 0; }

/* doc: lines slide in one after another on hover */
.ci-doc .ci-line { stroke-dasharray: 8; stroke-dashoffset: 0; }
.cta-btn:hover .ci-doc .ci-line { animation: docLine 0.9s var(--ease-out) both; }
.cta-btn:hover .ci-doc .l2 { animation-delay: 0.12s; }
.cta-btn:hover .ci-doc .l3 { animation-delay: 0.24s; }
@keyframes docLine {
  from { stroke-dashoffset: 8; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* plane: takes off, loops back */
.cta-btn:hover .ci-plane { animation: planeFly 0.8s var(--ease-inout); }
@keyframes planeFly {
  0% { transform: translate(0, 0) rotate(0deg); }
  45% { transform: translate(7px, -7px) rotate(8deg); opacity: 0; }
  50% { transform: translate(-7px, 7px) rotate(-8deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* grid: cells pop in sequence */
.cta-btn:hover .gcell { animation: cellPop 0.7s var(--ease-out) both; transform-origin: center; transform-box: fill-box; }
.cta-btn:hover .g2 { animation-delay: 0.08s; }
.cta-btn:hover .g3 { animation-delay: 0.16s; }
.cta-btn:hover .g4 { animation-delay: 0.24s; }
@keyframes cellPop {
  0% { transform: scale(1); }
  40% { transform: scale(0.55); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- Footer ---------- */
.footer { padding: 32px; }
.footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; justify-content: space-between;
  font-size: var(--text-small); color: var(--gray-400);
}

/* ---------- Footer v2 (ambient corner dots) ---------- */
.footer2 {
  position: relative; overflow: hidden;
  margin-top: 72px;
  border-top: 1px solid var(--gray-100);
  background: var(--bg);
}
/* halftone drifts up out of the bottom-left corner, Column-style */
.footer2-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(62% 118% at -2% 112%, #000 8%, transparent 72%);
  mask-image: radial-gradient(62% 118% at -2% 112%, #000 8%, transparent 72%);
}
.footer2-inner {
  position: relative; z-index: 1;
  max-width: var(--page-max); margin: 0 auto;
  padding: 96px 32px 104px;
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px;
  align-items: start;
}
/* oversized ghosted wordmark, the way Column signs off */
.f2-mark {
  position: relative; display: inline-block;
  font-size: clamp(56px, 6.4vw, 96px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 0.9;
  color: var(--gray-200);
  /* Letterpress. Column ships this as a Figma inner-shadow filter on an SVG
     wordmark (feOffset dy="1", composite out, white, twice: once sharp, once
     blurred). On live text the same shape comes from a white edge sitting just
     below the glyph, which reads as pressed into the page. It only works
     because the mark (#e3e4e8) is a hair darker than the footer (#f6f6f8). */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 3px rgba(255, 255, 255, 0.55),
    0 -1px 1px rgba(17, 26, 74, 0.05);
}

/* The holographic sweep. A rainbow gradient twice the width of the mark, clipped
   to the glyph shapes so the colour lands on the letters and nowhere around
   them, then swept left to right once and faded back out.

   Column masks an overlay div with an SVG of the letterforms
   (mask-image: url(footer-logo-mask.svg)). Our mark is live text rather than an
   SVG, so background-clip: text does the same job without shipping a mask file,
   and it stays correct if the wordmark or the font ever changes.

   Three of the four gradient stops are already our accent tokens: 148,239,183
   is accent-green-light, 69,117,205 is accent-blue, 159,122,238 is accent-lilac.
   Alphas sit a little above Column's (.2/.4/.3/.2) because our footer sits on a
   lighter ground, but the sheen stays a tint rather than a repaint. */
.f2-mark::after {
  content: 'Hi-Daniel';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(148, 239, 183, 0.30) 25%,
    rgba(113, 210, 240, 0.55) 45%,
    rgba(69, 117, 205, 0.42) 55%,
    rgba(159, 122, 238, 0.30) 75%,
    transparent 100%) -100% 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  opacity: 0; pointer-events: none;
}
.f2-mark:hover::after { animation: f2-swipe 1000ms var(--ease-out) forwards; }

@keyframes f2-swipe {
  0%   { background-position: -100% 0; opacity: 0; }
  50%  { background-position: 0 0;     opacity: 1; }
  100% { background-position: 100% 0;  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .f2-mark:hover::after { animation: none; opacity: 1; background-position: 0 0; }
}
.f2-status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 32px;
  font-size: 13px; font-weight: 500; color: var(--seafoam-dark);
  background: rgba(68, 180, 139, 0.08);
  border: 1px solid rgba(68, 180, 139, 0.25);
  border-radius: var(--radius-full);
  padding: 7px 15px;
}
/* resume + LinkedIn sit with the wordmark, not in a link column */
.f2-idlinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.f2-idlinks a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: 9px 17px 9px 14px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.f2-idlinks a:hover {
  color: var(--navy); border-color: var(--gray-300); box-shadow: var(--shadow-sm);
}
.f2-idlinks svg { display: block; color: var(--gray-400); transition: color var(--dur-fast) var(--ease-out); }
.f2-idlinks a:hover svg { color: var(--seafoam-dark); }

.f2-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.f2-col h6 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--navy); margin-bottom: 26px;
}
.f2-col a {
  display: block;
  font-size: 16px; color: var(--gray-500);
  padding: 13px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.f2-col a:hover { color: var(--navy); }
.footer2-bottom {
  position: relative; z-index: 1;
  border-top: 1px solid var(--gray-100);
  background: var(--bg);          /* clips the halftone at the divider */
}
.f2b-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 20px 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--gray-400);
}

@media (max-width: 960px) {
  .footer2-inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 32px 72px; }
  .f2-cols { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero-lockup { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .ui-stage { height: 400px; max-width: 520px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-left { padding: 0; }
  .story-step { margin-bottom: 48px; }
  .story-sticky { position: relative; top: 0; }
  .feed-grid { grid-template-columns: 1fr; }
  .mosaic-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-body { grid-template-columns: 1fr; gap: 40px; }
  .blocks-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .iso-grid { grid-template-columns: 1fr; }
  .iso-scene { height: 420px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-lg { grid-column: span 1; }
  .spec-grid { grid-template-columns: 1fr; gap: 40px; }
  .prods-grid { grid-template-columns: 1fr; }
  .devfirst-grid { grid-template-columns: 1fr; gap: 48px; }
  .df-feats { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .car-card { flex-basis: 270px; min-height: 380px; }
  .acc-grid { grid-template-columns: 1fr; gap: 0; }
  .acc-left { padding: 0 32px; }
  .acc-media { min-height: 380px; margin-top: 40px; }
  .inc-grid { grid-template-columns: repeat(2, 1fr); }
  .inc-cell { min-height: 0; }
  .inc2-grid { grid-template-columns: repeat(2, 1fr); }
  .inc2-cell { min-height: 0; }
  .fx-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .fx-cell, .fx-cell:nth-child(4n+2), .fx-cell:nth-child(4n+3), .fx-cell:nth-child(4n) {
    border-left: none; padding-left: 0; padding-right: 0;
  }
  .sku-grid { grid-template-columns: 1fr; gap: 28px; }
  .sku-media { height: 300px; }
  .sku-tabs { grid-template-columns: repeat(2, 1fr); }
  .gs-head { flex-direction: column; align-items: flex-start; }
  .gs-card { flex-basis: 320px; }
  .gs-stop small { display: none; }
  .eh-inner { grid-template-columns: 1fr; }
  .eh-shell { padding: 36px 24px 0; }
  .eh-deck { height: 400px; }
  .eh-card { width: 88%; left: 2%; }
  .eh-grid { grid-template-columns: 1fr; }
  .sr-intro { grid-template-columns: 1fr; gap: 20px; }
  .sr-cta { display: none; }
  .sr-media { height: 260px; }
  .abm-shell { padding: 28px 20px; }
  .abm-stage { height: 420px; transform: scale(0.72); transform-origin: top center; }
  .spot-track { flex-direction: column; height: auto; }
  .spot-panel { min-height: 64px; }
  .spot-panel.active { min-height: 300px; }
  .spot-title { white-space: normal; }
  .spot-foot { flex-direction: column; }
  .morph-grid { grid-template-columns: 1fr; gap: 32px; }
  .morph-visual { position: relative; top: 0; height: 340px; }
  .morph-steps { padding: 0; }
  .morph-step { margin-bottom: 48px; }
  .stack2-stage { grid-template-columns: 1fr; height: auto; gap: 24px; position: relative; top: 0; }
  .stack2-scroll { height: auto; }
  .blocks-chips { grid-template-columns: 1fr; }
  .dotcta-cards { grid-template-columns: 1fr; }
  .scale-grid { grid-template-columns: 1fr; }
  .scale-visual { height: 340px; }
  .show-body { grid-template-columns: 1fr; gap: 40px; }
  .show-shell { padding: 28px 24px 32px; }
  .story-lead { padding-bottom: 48px; }
  .global-grid { grid-template-columns: 1fr; }
  .tab-panel { grid-template-columns: 1fr; }
  .tab-panels { min-height: 640px; }
}

/* ---------- Mega nav as the real site header ---------- */
/* ---- global bar (Column pattern) ----
   Full-bleed and flush to the top rather than a floating pill. Three
   states, driven by nav2.js: at the top it is borderless and washes out
   downward; scrolled up it is a solid panel with a hairline; scrolled
   down it leaves. */
.nav2-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 0 var(--page-pad);
  display: flex; justify-content: center;
  border-bottom: 1px solid transparent;
  transition: transform 0.34s var(--ease-out),
              background-color 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out);
  will-change: transform;
}
/* the top-state wash: opaque under the row, dissolving at the lower edge
   so there is no hard line against the hero */
.nav2-shell::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.72) 52%,
    rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
  transition: opacity 0.28s var(--ease-out);
}
.nav2-shell.pinned::before { opacity: 0; }
.nav2-shell.pinned {
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--gray-100);
  box-shadow: 0 10px 26px -22px rgba(17, 26, 74, 0.45);
}
.nav2-shell.nav-off { transform: translateY(-100%); }
/* the row itself is now pure layout: the shell carries the surface */
.nav2-shell .nav2 {
  width: 100%; max-width: var(--page-max);
  height: 64px; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav2-shell { transition: none; }
  .nav2-shell.nav-off { transform: none; }
}

/* csl quote: real headshot + calmer card (Daniel: kill the heavy gray shadow) */
.csl-quote { box-shadow: none; }
.csl-who { display: flex; align-items: center; gap: var(--space-3); }
.csl-face {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,0.65);
}
.csl-who span { font-size: var(--text-small); color: rgba(255,255,255,0.85); }
.csl-who b { display: block; color: #fff; }

/* ============ TEMPLATE: case-study page (.cw-*) ============
   One designed skeleton for every work/ page. Knobs: --cw-hue family
   on the hero, the stat values, and the content. */
.cw-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--cw-deep, var(--accent-green-dark)) 100%);
  padding: 168px var(--page-pad) var(--section-gap-lg);
}
.cw-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-hero-inner {
  position: relative; max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gap-col);
  align-items: end;
}
.cw-kicker {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cw-acc, var(--accent-green-light));
  margin-bottom: var(--space-4);
}
.cw-hero h1 {
  font-size: var(--text-h1); color: #fff;
  margin-bottom: var(--space-4);
}
.cw-hero h1 mark {
  background: none; color: var(--cw-acc, var(--accent-green-light));
  padding: 0;
}
.cw-lead { font-size: var(--text-body-lg); color: rgba(255,255,255,0.72); max-width: 520px; }
.cw-meta {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-5);
}
.cw-meta span {
  font-size: var(--text-micro); font-weight: 600; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-full);
  padding: 5px 13px;
}
.cw-hero-stat { text-align: right; }
.cw-hero-stat b {
  display: block; font-size: var(--text-stat); font-weight: 600; line-height: 1;
  letter-spacing: var(--track-display);
  background: linear-gradient(100deg, #fff 20%, var(--cw-acc, var(--accent-green-light)) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cw-hero-stat span { font-size: var(--text-small); color: rgba(255,255,255,0.65); }

.cw-band {                       /* results band */
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100);
}
.cw-next {                        /* prev/next case cards */
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid);
}
.cw-next a {
  border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: var(--card-pad-lg); background: #fff;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.cw-next a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cw-next small { font-size: var(--text-micro); color: var(--gray-500); display: block; margin-bottom: var(--space-2); }
.cw-next b { font-size: var(--text-h6); color: var(--navy); }
@media (max-width: 860px) {
  .cw-hero-inner { grid-template-columns: 1fr; align-items: start; }
  .cw-hero-stat { text-align: left; }
  .cw-next { grid-template-columns: 1fr; }
}

/* subpage global fix: first flow section clears the fixed mega nav */
.nav2-shell + section { padding-top: calc(var(--section-gap) + 104px); }
.nav2-shell + header.cw-hero { padding-top: 216px; }

/* template-work: tall alternating story rows (text ↔ visual) */
.cw-alt {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-col); align-items: center;
  padding: var(--space-8) 0;
}
.cw-alt + .cw-alt { border-top: 1px solid var(--gray-100); }
.cw-alt.flip .cw-alt-text { order: 2; }
.cw-alt.flip .cw-alt-vis { order: 1; }
.cw-alt-text .micro-label { margin-bottom: var(--space-3); }
.cw-alt-text h3 { font-size: var(--text-h3); margin-bottom: var(--space-4); }
.cw-alt-text p { color: var(--gray-500); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.cw-alt-text .cw-inline-stat {
  font-family: var(--font-mono); font-size: var(--text-small); font-weight: 500;
  color: var(--accent-green-deep);
  border-left: 2px solid var(--accent-green);
  padding-left: var(--space-3);
  display: inline-block; margin-top: var(--space-2);
}
.cw-alt-vis .uc2-art { border-radius: var(--radius-lg); height: 360px; }

/* result-card testimonial rotator + aligned bottoms (template-work) */
.cw-result { align-items: stretch; }
.cw-result .cs2-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0; height: auto;
}
.cwt-rotator { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.cwt-slides { position: relative; flex: 1; min-height: 210px; }
.cwt-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cwt-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.cwt-slide blockquote { font-size: var(--text-h6); line-height: 1.55; color: #fff; margin-bottom: var(--space-4); max-width: none; }
.cwt-who { display: flex; align-items: center; gap: var(--space-3); }
.cwt-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,0.55); }
.cwt-who b { display: block; font-size: var(--text-small); color: #fff; }
.cwt-who span { font-size: var(--text-micro); color: rgba(255,255,255,0.7); }
.cwt-picks {
  display: flex; gap: var(--space-2); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.cwt-pick {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; line-height: 0;
  opacity: 0.45; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cwt-pick img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cwt-pick.on { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--accent-green-light); }
.cwt-pick:hover { opacity: 0.85; }
.cwt-timer { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-micro); color: rgba(255,255,255,0.5); }

/* More-work cards: small visual left, case text right */
.cw-next a { display: flex; align-items: center; gap: var(--space-4); }
.cw-thumb {
  flex: none; width: 64px; height: 64px; border-radius: var(--radius);
  background: linear-gradient(140deg, var(--th1, var(--accent-green-light)), var(--th2, var(--accent-green-deep)));
  position: relative; overflow: hidden;
}
.cw-thumb::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ============ TEMPLATE: expertise page (.xp-*) — light editorial ============ */
.xp-hero {
  position: relative;
  background: var(--gray-50);
  padding: 200px var(--page-pad) var(--section-gap-lg);
  border-bottom: 1px solid var(--gray-100);
}
.xp-hero::before {                 /* dotted column guides, editorial feel */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% - 300px) 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) 50% 0 / 1px 6px repeat-y,
    linear-gradient(var(--gray-200) 40%, transparent 40%) calc(50% + 300px) 0 / 1px 6px repeat-y;
  opacity: 0.5; pointer-events: none;
}
.xp-hero-inner { position: relative; max-width: var(--page-max); margin: 0 auto; }
.xp-lane {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--xp-acc, var(--accent-green-deep));
  border: 1px solid currentColor; border-radius: var(--radius-full);
  padding: 6px 14px; margin-bottom: var(--space-5);
}
.xp-hero h1 {
  font-size: var(--text-display); max-width: 800px;
  margin-bottom: var(--space-5);
}
.xp-hero h1 em { font-style: normal; color: var(--xp-acc, var(--accent-green-deep)); }
.xp-hero .xp-sub { font-size: var(--text-body-lg); color: var(--gray-500); max-width: 560px; line-height: var(--lh-relaxed); }
.xp-facts {
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--gray-200);
}
.xp-facts div b { display: block; font-size: var(--text-h5); color: var(--navy); }
.xp-facts div span { font-size: var(--text-micro); color: var(--gray-500); }

/* ============ MODULE #58 · Role Snapshot — Three Hiring Lanes ============
   The conversion spine: replaces the hiring manager's own sorting work.
   Three lanes, each = who it's for + evidence links + resume. */
.rs-section { background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.rs-head { max-width: 720px; margin-bottom: var(--space-7); }
.rs-head h2 { margin: var(--space-3) 0 var(--space-4); }
.rs-head p { font-size: var(--text-body-lg); color: var(--gray-500); line-height: var(--lh-relaxed); }
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.rs-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--rs, var(--accent-green));
  padding: var(--card-pad-lg);
  display: flex; flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.rs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rs-role {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rs, var(--accent-green-deep));
  margin-bottom: var(--space-3);
}
.rs-card h3 { font-size: var(--text-h5); margin-bottom: var(--space-3); }
.rs-for {
  font-size: var(--text-small); color: var(--gray-500);
  line-height: var(--lh-relaxed); margin-bottom: var(--space-5);
}
.rs-ev {
  font-size: var(--text-micro); font-weight: 600; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.rs-links { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.rs-links a {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-small); color: var(--gray-600);
  padding: 8px 0; border-bottom: 1px dashed var(--gray-200);
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.rs-links a::before { content: '→'; color: var(--rs, var(--accent-green)); font-weight: 600; }
.rs-links a:hover { color: var(--navy); padding-left: var(--space-2); }
.rs-links a b { color: var(--navy); font-weight: 600; }
.rs-cta { margin-top: auto; }
.rs-cta a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-small); font-weight: 600;
  color: var(--rs, var(--accent-green-deep));
}
.rs-cta a:hover { text-decoration: underline; }

/* I combine / I help / I build — positioning triad */
.tri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-col); }
@media (max-width: 1100px) { .tri-grid { grid-template-columns: repeat(2, 1fr); } }
.tri-item { border-top: 2px solid var(--tri, var(--accent-green)); padding-top: var(--space-5); }
.tri-item b {
  display: block; font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tri, var(--accent-green-deep)); margin-bottom: var(--space-3);
}
.tri-item p { font-size: var(--text-body-lg); color: var(--navy); line-height: 1.5; }

/* Let's talk — hiring CTA with form */
/* the contact block sat on flat grey; a faint field and a warm hue behind the
   form side give it the same depth as the rest of the page */
#contact { position: relative; overflow: hidden; }
.talk-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.4; pointer-events: none;
  -webkit-mask-image: radial-gradient(58% 100% at 82% 50%, #000 10%, transparent 76%);
  mask-image: radial-gradient(58% 100% at 82% 50%, #000 10%, transparent 76%);
}
.talk-hue {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 70% at 84% 22%, rgba(68, 180, 139, 0.13), transparent 68%),
    radial-gradient(40% 62% at 96% 88%, rgba(122, 142, 214, 0.11), transparent 70%);
}
#contact .section-inner { position: relative; z-index: 1; }
/* the section's bottom border and the footer's top border stacked into two rules */
.rs-section + .footer2 { border-top: 0; }

.talk-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap-col); align-items: start; }
.talk-copy h2 { margin-bottom: var(--space-4); }
.talk-copy p { font-size: var(--text-body-lg); color: var(--gray-500); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); }
.talk-meta { display: flex; flex-direction: column; gap: var(--space-3); }
.talk-meta a { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-small); color: var(--gray-600); }
.talk-meta a i { font-style: normal; color: var(--seafoam-dark); }
.talk-meta a:hover { color: var(--navy); }
.talk-form {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: var(--card-pad-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.talk-form label { font-size: var(--text-micro); font-weight: 600; color: var(--navy); display: block; margin-bottom: 6px; }
.talk-form input, .talk-form textarea {
  width: 100%; font: inherit; font-size: var(--text-small); color: var(--navy);
  background: var(--gray-25); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 11px 13px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.talk-form input:focus, .talk-form textarea:focus { outline: none; border-color: var(--seafoam); }
.talk-form textarea { min-height: 110px; resize: vertical; }
.talk-form button {
  font: inherit; font-size: var(--text-small); font-weight: 600; color: #fff;
  background: var(--navy); border: 0; border-radius: var(--radius);
  padding: 13px 20px; cursor: pointer; box-shadow: var(--shadow-btn);
  transition: filter var(--dur-fast) var(--ease-out);
}
.talk-form button:hover { filter: brightness(1.15); }
.talk-note { font-size: var(--text-micro); color: var(--gray-400); }

@media (max-width: 900px) {
  .rs-grid, .tri-grid { grid-template-columns: 1fr; }
  .talk-grid { grid-template-columns: 1fr; }
}

/* ============ TEMPLATE: AI product page (.px-*) — launch-deck feel ============
   Third template. Distinct from cw-* (case study, dark narrative) and
   xp-* (expertise, light editorial): dark launch hero, spec strip,
   how-it-works pipeline, screen mocks, honest status. */
.px-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, var(--px-glow, rgba(159,122,238,0.28)), transparent 55%),
              linear-gradient(160deg, var(--navy-950), var(--surface-black));
  padding: 208px var(--page-pad) var(--section-gap-lg);
}
.px-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.px-hero-inner { position: relative; max-width: var(--page-max); margin: 0 auto; }
.px-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--px-acc, var(--accent-lilac-light));
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-full); padding: 6px 14px;
  margin-bottom: var(--space-5);
}
.px-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--px-acc, var(--accent-lilac-light));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-acc, #9f7aee) 25%, transparent);
}
.px-hero h1 {
  font-size: var(--text-h1); color: #fff; max-width: 760px;
  margin-bottom: var(--space-4);
}
.px-tagline {
  font-size: var(--text-body-lg); color: rgba(255,255,255,0.7);
  max-width: 560px; line-height: var(--lh-relaxed); margin-bottom: var(--space-6);
}
.px-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.px-cta .btn-primary { background: var(--px-acc, var(--accent-lilac)); color: var(--navy); border: 0; }
.px-cta .btn-primary:hover { filter: brightness(1.1); }
.px-cta .btn-ghostline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-small); font-weight: 600; color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius);
  padding: 12px 20px;
}
.px-cta .btn-ghostline:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

/* spec strip under the hero */
.px-spec {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: var(--space-8); padding-top: var(--space-5);
}
.px-spec div small {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 6px;
}
.px-spec div b { font-size: var(--text-small); color: #fff; font-weight: 500; }

/* how it works — numbered pipeline */
.px-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); counter-reset: pipe; }
.px-step {
  position: relative; counter-increment: pipe;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: var(--card-pad-lg);
}
.px-step::before {
  content: counter(pipe, decimal-leading-zero);
  display: block; font-family: var(--font-mono); font-size: var(--text-micro);
  color: var(--px-acc-deep, var(--accent-lilac-deep)); margin-bottom: var(--space-3);
}
.px-step:not(:last-child)::after {
  content: '→'; position: absolute; right: calc(-1 * var(--gap-grid) / 2 - 6px); top: 50%;
  transform: translateY(-50%); color: var(--gray-300); font-size: 14px;
}
.px-step h3 { font-size: var(--text-h6); margin-bottom: var(--space-2); }
.px-step p { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }

/* capability rows */
.px-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-col) var(--gap-grid); }
.px-cap { border-top: 2px solid var(--px-acc, var(--accent-lilac)); padding-top: var(--space-4); }
.px-cap h4 { font-size: var(--text-h6); margin-bottom: var(--space-2); }
.px-cap p { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }
.px-cap code {
  display: inline-block; font-family: var(--font-mono); font-size: 12px;
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs); padding: 2px 7px; margin-top: var(--space-2);
  color: var(--px-acc-deep, var(--accent-lilac-deep));
}
@media (max-width: 900px) {
  .px-spec, .px-pipe, .px-caps { grid-template-columns: 1fr 1fr; }
  .px-step::after { display: none; }
}
@media (max-width: 620px) { .px-spec, .px-pipe, .px-caps { grid-template-columns: 1fr; } }

/* How I work — the method section (three ordered moves, one worked example) */
.mth-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap-col); align-items: start; }
.mth-steps { display: flex; flex-direction: column; }
.mth-step {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--gray-100);
}
.mth-step:first-child { border-top: 0; padding-top: 0; }
.mth-num {
  font-family: var(--font-mono); font-size: var(--text-micro);
  color: var(--accent-green-deep); padding-top: 4px;
}
.mth-step h3 { font-size: var(--text-h6); margin-bottom: var(--space-2); }
.mth-step p { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }
.mth-step .mth-real {
  display: block; margin-top: var(--space-3);
  font-size: var(--text-small); color: var(--navy);
  border-left: 2px solid var(--accent-green); padding-left: var(--space-3);
}
.mth-step .mth-real b { font-weight: 600; }

/* ============ About hero: portrait + headline treatment ============ */
.hero-portrait {
  position: relative; height: 440px; max-width: 480px; width: 100%;
  justify-self: end;
  background: radial-gradient(120% 120% at 50% 0, rgba(255,255,255,0.85), rgba(240,242,246,0.6));
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hero-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.h1-line { white-space: nowrap; }
.h1-grad {
  background: linear-gradient(94deg, var(--accent-gold-deep) 8%, var(--seafoam-dark) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 900px) {
  .h1-line { white-space: normal; }
  .hero-portrait { justify-self: start; height: 380px; }
}

/* ============ Outside of work: dog dot-art ============ */
.ow-dog {
  position: relative; height: 400px; margin-top: var(--space-6);
  background: radial-gradient(120% 120% at 50% 0, #f4f1ea, var(--gray-100));
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ow-dog canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-copy > p + p { margin-top: var(--space-4); }

/* ============ Video samples (ai-video-pipeline) ============ */
.vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.vid-card { margin: 0; }
.vid-card video {
  width: 100%; display: block; aspect-ratio: 16 / 9;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.vid-card figcaption { padding: 14px 4px 0; }
.vid-card figcaption b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.vid-card figcaption span { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }
@media (max-width: 900px) { .vid-grid { grid-template-columns: 1fr; } }

/* ============ LinkedIn post samples (content-engines) ============ */
.li-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.li-card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.li-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.li-avatar {
  width: 38px; height: 38px; border-radius: 8px; background: var(--navy);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0.02em;
}
.li-head b { display: block; color: var(--navy); font-size: var(--text-small); font-weight: 600; }
.li-head small { display: block; color: var(--gray-400); font-size: 11.5px; }
.li-caption { padding: 4px 18px 14px; font-size: var(--text-small); color: var(--gray-600); line-height: var(--lh-relaxed); }
.li-caption p { margin: 0 0 10px; }
.li-tags { padding: 0 18px 12px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--seafoam-dark); }
.li-card video { width: 100%; display: block; aspect-ratio: 1 / 1; background: var(--gray-100); }
.li-foot {
  padding: 12px 18px; border-top: 1px solid var(--gray-100);
  font-size: 12px; color: var(--gray-500); line-height: 1.5;
}
.li-foot b { color: var(--navy); font-weight: 600; }
.nl-frame {
  width: 100%; height: 640px; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: #EEF1F5;
}
@media (max-width: 900px) { .li-grid { grid-template-columns: 1fr; } }

/* ============ LinkedIn sample slider (v2: equal cards, clamped captions) ============ */
.li-slider { position: relative; overflow: hidden; padding: 2px; margin: -2px; }
.li-track { display: flex; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.li-slide {
  min-width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); align-items: start; padding: 2px;
}
.li-card { display: flex; flex-direction: column; position: relative; }
.li-caption {
  max-height: 7.6em; overflow: hidden; position: relative;
  transition: max-height 0.3s ease;
}
.li-card.open .li-caption { max-height: 60em; }
.li-caption p.li-tags { padding: 0; margin: 0; }
.li-more {
  align-self: flex-end; margin: 0 18px 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--gray-400);
}
.li-more:hover { color: var(--navy); }
.li-card video, .li-card img.li-media, .li-card > img {
  width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--gray-100); margin-top: auto;
}
.li-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.li-arrow {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--gray-200); background: #fff; cursor: pointer;
  font-size: 15px; color: var(--navy); transition: all var(--dur-fast) var(--ease-out);
}
.li-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.li-arrow[disabled] { opacity: 0.35; cursor: default; }
.li-arrow[disabled]:hover { background: #fff; color: var(--navy); border-color: var(--gray-200); }
.li-dots { display: flex; gap: 8px; }
.li-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--gray-200); cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.li-dot.on { background: var(--navy); }
.nl-grid { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 56px; align-items: start; }
.nl-copy h3 { margin: var(--space-3) 0 var(--space-4); }
.nl-copy p { color: var(--gray-500); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.nl-frame { height: 780px; }
@media (max-width: 980px) {
  .li-slide { grid-template-columns: 1fr; }
  .nl-grid { grid-template-columns: 1fr; }
}

/* ============ Now section slider (homepage) ============ */
.now-slider { position: relative; overflow: hidden; padding: 10px 0 26px; }
.now-track { display: flex; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.now-slide {
  min-width: 100%;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
.now-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.now-dots { display: flex; gap: 8px; }
.now-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--gray-200); cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.now-dot.on { background: var(--navy); }
@media (max-width: 900px) { .now-slide { grid-template-columns: 1fr; } }

/* ---------- positioning card icons (homepage tri-grid) ---------- */
.tri-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-3);
}
.tri-ic { display: block; flex: none; --di-fill: var(--tri, var(--accent-green)); }
.tri-ic .dot-icon svg { display: block; width: 22px; height: 25px; }
/* the title already carries the row's bottom margin */
.tri-head b { margin-bottom: 0; }

/* ---------- blog-post hero: the index's dot-art cover becomes the stage ----------
   The halftone is not a card. It bleeds to the hero's own top, right and
   bottom edges and picks up the hero's rounded right corners, so the copy
   column keeps the width it always had. The three floating pieces sit on
   its corners; the big card runs off the hero edge. */
.ph-post .ph-inner:has(.ph-featstage) { align-items: stretch; }
.ph-featstage { min-height: 402px; }
.ph-feat {
  position: absolute;
  top: -44px; right: -48px; bottom: -38px; left: -44px;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  overflow: hidden;
}
.ph-feat canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* top-left glass chip, over the artwork's left edge */
.ph-featstage .ph-chip { top: -6px; left: -46px; z-index: 3; }
/* bottom-left code card, clear of the chip */
.ph-featstage .ph-code { left: -58px; bottom: 4px; width: min(248px, 70%); z-index: 3; }
/* the big card sits to its right and runs off the hero edge */
.ph-featstage .ph-main {
  top: auto; bottom: -56px; right: -248px; left: auto;
  width: 336px; z-index: 3;
}

@media (max-width: 1240px) {
  .ph-featstage .ph-main { right: -186px; }
}
@media (max-width: 960px) {
  .ph-post .ph-inner:has(.ph-featstage) { grid-template-columns: 1fr; align-items: start; }
  .ph-featstage { min-height: 430px; }
  .ph-feat { top: 0; bottom: -38px; left: -32px; right: -48px; border-radius: var(--radius-lg) 0 var(--radius-xl) 0; }
  .ph-featstage .ph-chip { top: -14px; left: -20px; }
  .ph-featstage .ph-code { left: -22px; bottom: 10px; }
  .ph-featstage .ph-main { right: -150px; bottom: -18px; width: 300px; }
}

/* ==========================================================================
   AI product pages — breaking the three-prose-blocks-in-a-row problem
   The bottleneck / prior-options / design sections were all .ab-grid, so the
   first screen after the hero was a grey wall of paragraphs. Two purpose-built
   modules replace the second column of prose with the shape the argument
   already has: a manual loop with a cost, and an evaluation with verdicts.
   ========================================================================== */

/* The band was invisible: .cw-band used --gray-50, which is the same value as
   --bg. Alternating sections therefore rendered as one continuous surface.
   A real step plus a whisper of the page accent gives the rhythm back. */
.cw-band {
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(var(--accent-rgb, 68, 180, 139), 0.05), transparent 62%),
    #edeff4;
}

/* ---------- COSTLOOP · the manual loop the tool replaced ------------------
   Steps left to right, what each one cost underneath, and the dead end drawn
   as a dashed tile so the reader sees where the old way stopped paying. */
.costloop { margin-top: var(--space-6); }
.cl-track {
  display: grid; gap: 30px;
  grid-template-columns: repeat(var(--cl-n, 4), 1fr);
}
.cl-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 17px 19px 15px;
}
.cl-step + .cl-step::before {
  content: '→';
  position: absolute; left: -23px; top: 26px;
  font-size: 15px; line-height: 1; color: var(--gray-300);
}
.cl-n {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent-deep);
}
.cl-step b {
  display: block; margin: 7px 0 7px;
  font-size: 15px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight); line-height: 1.3;
}
.cl-step p {
  font-size: 13.5px; line-height: 1.56; color: var(--gray-500);
  margin-bottom: 14px;
}
.cl-cost {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--gray-500); background: var(--gray-50);
  border-radius: var(--radius-xs); padding: 4px 9px;
}
.cl-step.cl-dead {
  background: transparent;
  border-style: dashed; border-color: var(--gray-300);
}
.cl-step.cl-dead .cl-n { color: #a4453f; }
.cl-step.cl-dead .cl-cost { color: #a4453f; background: rgba(164, 69, 63, 0.07); }
.cl-sum {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--gray-200);
}
.cl-sum b {
  font-size: 30px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-heading); line-height: 1;
}
.cl-sum span { font-size: 14.5px; line-height: 1.6; color: var(--gray-500); max-width: 66ch; }
@media (max-width: 1024px) { .cl-track { grid-template-columns: 1fr 1fr; } .cl-step + .cl-step::before { display: none; } }
@media (max-width: 620px)  { .cl-track { grid-template-columns: 1fr; } }

/* ---------- ALTS · what already existed, and where each one broke ---------
   The prior-options section used to be two paragraphs listing tools and
   dismissing them. As rows it carries the same judgement in a quarter of the
   reading time, and the verdict is visible without reading at all. */
.alts { margin-top: var(--space-5); }
.alt-head, .alt-row {
  display: grid; grid-template-columns: 0.78fr 1fr 1fr 108px;
  gap: var(--space-5); align-items: start;
}
.alt-head {
  padding-bottom: 10px; border-bottom: 1px solid var(--gray-300);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gray-400);
}
.alt-row { padding: 20px 0; border-bottom: 1px solid var(--gray-100); }
.alt-row > b {
  font-size: 15.5px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight); line-height: 1.35;
}
.alt-row p { font-size: 14px; line-height: 1.58; color: var(--gray-500); }
.alt-v {
  justify-self: start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 5px 9px; border-radius: var(--radius-xs);
}
.alt-v.no   { color: #a4453f; background: rgba(164, 69, 63, 0.08); }
.alt-v.part { color: var(--accent-deep); background: var(--accent-soft); }
.alts-note { margin-top: var(--space-5); font-size: 14.5px; line-height: var(--lh-relaxed); color: var(--gray-500); max-width: 72ch; }
@media (max-width: 960px) {
  .alt-head { display: none; }
  .alt-row {
    grid-template-columns: 1fr; gap: 8px;
    padding: 18px 0;
  }
  .alt-row p::before {
    content: attr(data-l);
    display: block; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray-400);
    margin-bottom: 3px;
  }
}

/* ---------- TSK · what each AI system runs on ---------------------------
   The homepage AI Lab tabs each carry a logo stack; the build pages carried
   none, so a reader had to go back to the homepage to learn what a tool was
   made of. This is the same idea given a section: grouped by layer, and every
   chip states what that piece actually does here, so a logo wall becomes a
   set of decisions. */
.tsk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5) var(--space-6); }
.tsk-group h3 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gray-400);
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-300);
}
.tsk-i {
  display: grid; grid-template-columns: 20px 1fr; column-gap: 11px;
  align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--gray-100);
}
.tsk-i img {
  grid-row: span 2; width: 20px; height: 20px;
  object-fit: contain; margin-top: 1px;
}
.tsk-i.noimg { grid-template-columns: 1fr; }
.tsk-i b {
  font-size: 14.5px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight);
}
.tsk-i em {
  grid-column: 2; font-style: normal;
  font-size: 13px; line-height: 1.5; color: var(--gray-500);
}
.tsk-i.noimg em { grid-column: 1; }
.tsk-note { margin-top: var(--space-6); font-size: 14.5px; line-height: var(--lh-relaxed); color: var(--gray-500); max-width: 74ch; }

/* ---------- SCENE · a dot-art figure inside a build page ------------------
   Reuses the halftone engine and the portrait source already in img/dot-src,
   so a text-heavy page gets one image that belongs to this site rather than
   a stock illustration. */
.scenefig { position: relative; margin-top: var(--space-6); display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: center; }
.scenefig-art {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--gray-50);
}
.scenefig-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scenefig-cap b { display: block; font-size: 17px; color: var(--navy); letter-spacing: var(--track-tight); margin-bottom: 8px; }
.scenefig-cap p { font-size: 14.5px; line-height: var(--lh-relaxed); color: var(--gray-500); max-width: 60ch; }
@media (max-width: 760px) { .scenefig { grid-template-columns: 1fr; } .scenefig-art { max-width: 300px; } }

/* ---------- PV · evidence grouped by what it proves ----------------------
   The hiring-lens pages ended on a flat list of four links. A hiring manager
   is asking one question, "can this person do the job", so the evidence is
   grouped by kind and every item states the claim it settles. Built on .tsk
   because it is the same shape: grouped column, item, one line of why. */
a.tsk-i{
  text-decoration: none; grid-template-columns: 1fr;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a.tsk-i b{ display: block; }
a.tsk-i em{ grid-column: 1; }
a.tsk-i:hover{ border-bottom-color: var(--accent-base); }
a.tsk-i:hover b{ color: var(--accent-deep); }
a.tsk-i b::after{
  content: ' →'; font-weight: 400; color: var(--gray-300);
}
a.tsk-i:hover b::after{ color: var(--accent-deep); }

/* The floating chip is positioned to sit over a screenshot, where its top-left
   corner is empty. On the plain .ph-stage hero (lenses, principles, one
   expertise page) it lands on a content card instead and covered that card's
   heading on all eight. Measured: card top 268px, chip bottom 307px. Lifting
   it clear keeps the float without eating the text. */
.ph-stage:not([class*="sv-"]):not(.ph-featstage) .ph-chip { top: -58px; left: -10px; }

/* honeypot: off-screen for a browser, filled in by a bot, never seen by a person */
.talk-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- TL · role-anchored track record --------------------------------
   The timeline used to be achievement-anchored: each card was one thing he
   built, with the job title as a footnote. That answers "what did he make"
   and loses "what did he own", which is the half a recruiter needs to place
   him. Cards are now positions: role as the heading, scope as the paragraph,
   and the artifacts underneath as links to their write-ups. */
.tl-entry-body h3 { letter-spacing: var(--track-tight); }
.tl-org { margin-top: 2px; margin-bottom: var(--space-3); }
.tl-scope { margin-bottom: var(--space-3); }

.tl-shipped { margin-top: var(--space-4); }
.tl-shipped > span {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gray-400);
}
.tl-shipped ul { list-style: none; margin: 0; max-width: 560px; }
.tl-shipped li { position: relative; padding-left: 15px; margin-bottom: 5px; }
.tl-shipped li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tk, var(--accent-base)); opacity: 0.55;
}
.tl-shipped a {
  font-size: 14.5px; line-height: 1.5; color: var(--gray-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tl-shipped a:hover { color: var(--navy); border-bottom-color: var(--tk, var(--accent-base)); }
.tl-shipped a::after { content: ' →'; color: var(--gray-300); }
.tl-shipped a:hover::after { color: var(--tk, var(--accent-base)); }

/* Bottom half of the case-study tab strip. The eight tabs sandwich the panel
   rather than stacking two rows above it: with all eight on top, the panel
   started ~180px further down and the second row read as a leftover. Tab index
   comes from document order, so splitting the strip needs no JS change. */
.csl-tabs-btm {
  margin-bottom: 0; margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-100);
}

/* The availability paragraph carried the one fact a hiring manager scans for
   and read as body copy. It used to sit under a "Status: <month> <year>" label
   that had to be edited by hand to stay true, so the label is gone and the
   emphasis moved into the block itself. */
.rs-open {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-left: 3px solid var(--accent-base, var(--accent-green-deep));
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--gray-600);
  box-shadow: 0 1px 2px rgba(17, 26, 74, 0.04);
}
.rs-open b { color: var(--navy); font-weight: 600; }

/* Education sits with the certifications: same question from a reader,
   answered in one place. Given its own card rather than a text line, because
   a degree is the one credential here a recruiter scans for by shape. */
.crt-edu {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 16px 20px;
  margin-bottom: var(--space-4);
}
.crt-edu-mark { width: 42px; height: 42px; object-fit: contain; flex: none; }
.crt-edu-txt { display: flex; flex-direction: column; gap: 2px; }
.crt-edu-txt > span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gray-400);
}
.crt-edu b { font-size: 16px; font-weight: 600; color: var(--navy); letter-spacing: var(--track-tight); }
.crt-edu i { font-style: normal; font-size: 14px; color: var(--gray-500); }

/* Two lines under the claim, previewing what the case study proves. They are
   not a definition list: the first version labelled each one, which made the
   module read as a footnote defending the number instead of selling it. */
/* One measure for the whole left column. The global .section-sub cap of 420px
   is right for centred section heads, but here it left the description 70px
   short of the headline and the bullets above and below it, so three stacked
   blocks had three different right edges. The column itself is the measure. */
.scale-copy .section-sub { max-width: none; }
.scale-facts { list-style: none; margin: var(--space-5) 0; max-width: none; }
.scale-facts li {
  position: relative; padding: 11px 0 11px 18px;
  border-top: 1px solid var(--gray-100);
  font-size: 14.5px; line-height: 1.6; color: var(--gray-500);
}
.scale-facts li:last-child { border-bottom: 1px solid var(--gray-100); }
.scale-facts li::before {
  content: ''; position: absolute; left: 0; top: 20px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-base, var(--color-sky-cyan));
}
.scale-facts b { color: var(--navy); font-weight: 600; }

/* ---------- Contact form: the confirmation state -------------------------
   Success used to be a 12px grey line in .talk-note, the smallest type on the
   page carrying the one thing the visitor needs to know. The panel replaces the
   fields entirely so there is no ambiguity about whether it went through, and
   it answers the question a sender actually has next: when do I hear back. */
.talk-form.sent > *:not(.talk-done) { display: none; }
.talk-done { text-align: center; padding: 8px 4px 4px; }
/* a <p>, not a heading: this is a transient status message inside role="status",
   and as an h3 it sat straight after the page h1 once the contact hero absorbed
   the form, skipping a level in the document outline */
.talk-done-h {
  font-size: 20px; font-weight: 600; color: var(--navy);
  letter-spacing: var(--track-tight); margin: 16px 0 8px;
}
.talk-done p {
  font-size: 14.5px; line-height: 1.6; color: var(--gray-500);
  max-width: 340px; margin: 0 auto;
}
.talk-done-links {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px dashed var(--gray-200);
}
.talk-done-links a {
  font-size: 14px; font-weight: 500; color: var(--seafoam-dark); text-decoration: none;
}
.talk-done-links a:hover { color: var(--navy); }

/* the tick draws itself: ring first, then the stroke */
.talk-check { width: 52px; height: 52px; display: block; margin: 0 auto; }
.tc-ring, .tc-tick {
  fill: none; stroke: var(--accent-green-deep, #2f9e77);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.tc-ring { stroke-dasharray: 145; stroke-dashoffset: 145; opacity: 0.35; }
.tc-tick { stroke-dasharray: 36; stroke-dashoffset: 36; stroke-width: 3.2; }
.talk-form.sent .tc-ring { animation: tc-draw 520ms var(--ease-out) forwards; }
.talk-form.sent .tc-tick { animation: tc-draw 340ms var(--ease-out) 380ms forwards; }
@keyframes tc-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .talk-form.sent .tc-ring, .talk-form.sent .tc-tick {
    animation: none; stroke-dashoffset: 0;
  }
}

/* ---------- Wordmark flip: Hi-Daniel <-> My Portfolio ---------------------
   Spans are generated by nav2.js; this only styles them. Both words sit in the
   same grid cell, so the box is always as wide as the longer one and the nav
   does not shift when the pointer arrives. The stagger runs off --i per
   character, so the word turns over letter by letter and reverses on its own
   when the pointer leaves. */
.logo {
  display: inline-grid; align-items: center; justify-items: start;
  text-decoration: none; line-height: 1.15;
}
.logo > * { grid-area: 1 / 1; }

.lg-word { display: flex; perspective: 120px; }
.lg-ch {
  display: inline-block; white-space: pre;
  transform-origin: 50% 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Opacity is switched, not faded: 0s duration at the halfway mark of the
     rotation. A character parked at rotateX(90deg) is edge-on and should be
     invisible, but antialiasing still paints a hairline along that edge, and
     "My Portfolio" is longer than "Hi-Daniel", so the tail of the hidden word
     showed as a dotted trail after the logo. Flipping opacity while the glyph
     is side-on costs nothing visually and removes the artefact. */
  transition: transform 300ms cubic-bezier(0.22, 0.7, 0.28, 1),
              opacity 0s linear;
  transition-delay: calc(var(--i, 0) * 30ms),
                    calc(var(--i, 0) * 30ms + 150ms);
}
/* resting: the wordmark faces you, the alternate is turned away and hidden */
.lg-word-a .lg-ch { transform: rotateX(0deg); opacity: 1; }
.lg-word-b .lg-ch { transform: rotateX(90deg); opacity: 0; }
.logo:hover .lg-word-a .lg-ch,
.logo:focus-visible .lg-word-a .lg-ch { transform: rotateX(-90deg); opacity: 0; }
.logo:hover .lg-word-b .lg-ch,
.logo:focus-visible .lg-word-b .lg-ch { transform: rotateX(0deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lg-ch { transition: none; transition-delay: 0s; }
}

/* ---------- Contact hero: copy on the left, the form itself on the right ---
   The page used to open with a hero whose right half was empty, then repeat
   the same pitch one section down next to the form. Merged: the ask and the
   form are on one screen, so nobody has to scroll to answer the question the
   headline just asked. */
.ct-lockup { align-items: start; min-height: 0; gap: 52px; }
.ct-lockup .hero-copy { padding-top: 4px; }
.ct-lockup .hero-sub { max-width: 100%; margin-bottom: var(--space-5); }
/* the availability line is small print now: the lanes module directly below
   answers "which role", so repeating it here at body size was the same claim
   twice on one screen */
.ct-fine {
  font-size: 13px; line-height: 1.6; color: var(--gray-400);
  max-width: 520px; margin-bottom: var(--space-5);
}
.ct-lockup .talk-form { margin: 0; }

@media (max-width: 900px) {
  .ct-lockup { grid-template-columns: 1fr; gap: 32px; }
}