/* =========================================================================
   Axify Hi-Fi — v3 styles (additive on top of v2)
   Scrollytelling X1 "Atmospheric flow" for the 3 solutions zone,
   plus the v3 hero override (Pulse-inspired full-viewport opener).
   ========================================================================= */

/* v3 — kill all italic emphasis globally. Color/weight carry emphasis instead. */
.hf-page,
.hf-page *,
.hf-page *::before,
.hf-page *::after {
  font-style: normal !important;
}

/* Exception — "How it works" baselines keep their italic treatment. */
.hf-page .hf-how__step-sub {
  font-style: italic !important;
}

/* =========================================================================
   HEADER — floats over the hero (absolutely positioned), not sticky
   The header sits OVER the hero on the same y, scrolls away naturally
   with the page (no follow-the-viewport sticky behavior).
   ========================================================================= */
.hf-page {
  position: relative;
  /* v3: flat white page background — the hero card sits on it, the
     atmospheric gradient from hifi-styles.css is overridden here. */
  background: var(--color-bg-primary);
  /* Override the global `overflow-x: hidden` from hifi-styles.css — that
     creates a scroll container which kills `position: sticky` for any
     descendant (the pinned scrollytelling chapters). `clip` hides the
     same overflow without becoming a scroll container. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Also flatten the document-level background that hifi-styles.css paints
   on the html / body elements. */
.hf-page,
html:has(.hf-page),
body:has(.hf-page) {
  background: var(--color-bg-primary);
}

/* v3 — header now sticky/fixed at the top of the viewport with a subtle
   backdrop blur (user request). Was previously position: absolute and
   scrolled away with the hero. */
.hf-page .hf-header-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 18px;
  padding-left: 18px;
  padding-right: 18px;
  transition: padding var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hf-page .hf-header-pill {
  /* Glassy frosted background so the halftone bleeds subtly through */
  background: color-mix(in srgb, var(--color-bg-primary) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
  backdrop-filter: saturate(1.2) blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-border-secondary) 60%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset,
              0 8px 24px -12px rgba(15, 38, 73, 0.18);
  max-width: 980px;
  transition:
    max-width var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-radius var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    backdrop-filter var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    -webkit-backdrop-filter var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: max-width, border-radius;
}

.hf-page .hf-header-pill__inner {
  padding: 8px 8px 8px 20px;
  transition: padding var(--resize-dur, 300ms) var(--resize-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Scrolled past the hero → flat, full-width sticky bar (no pill, no blur). */
.hf-page .hf-header-shell.is-stuck {
  position: fixed;
  padding: 0;
}
.hf-page .hf-header-shell.is-stuck .hf-header-pill {
  max-width: 100vw;
  width: 100%;
  border-radius: 0;
  border-color: transparent;
  border-bottom-color: var(--color-border-secondary);
  background: var(--color-bg-primary);
  -webkit-backdrop-filter: saturate(1) blur(0px);
  backdrop-filter: saturate(1) blur(0px);
  box-shadow: none;
}
.hf-page .hf-header-shell.is-stuck .hf-header-pill__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
}

/* =========================================================================
   HERO v3 — full-viewport atmospheric opener, framed as a rounded card
   ========================================================================= */
.hf-hero-v3 {
  position: relative;
  width: auto;
  /* Inset the hero from each side so it reads as a framed card sitting on
     the page rather than a full-bleed band. */
  margin: 18px 18px 0;
  background: var(--color-bg-primary);
  border-radius: 28px;
  overflow: hidden;       /* clip atmospheric layers + halftone to the corners */
  isolation: isolate;
}

/* Backdrop layer — full-bleed gradient image filling the hero card */
.hf-hero-v3__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Foreground stage — header zone | centered content | trust strip
   The stage drives the hero's height (no min-height on .hf-hero-v3 itself,
   since that now also sets the rounded card frame). */
.hf-hero-v3__stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 36px);  /* 100vh minus the top + bottom 18px insets */
  display: flex;
  flex-direction: column;
  /* Top padding reserves room for the fixed floating menu (~80px) so the
     vertically-centered hero content never tucks under it on short viewports.
     The hero card background still fills up behind the menu. */
  padding: 88px 46px 56px;
  max-width: 1436px;
  margin: 0 auto;
}

/* Content takes all available vertical space and centers itself within it,
   so the title/lede/CTA sit at the optical center of the viewport — with
   the trust strip pinned at the bottom. */
.hf-hero-v3__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 1344px;
  margin: 0 auto;
  width: 100%;
}

.hf-hero-v3__headline {
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}

.hf-hero-v3__lede {
  max-width: 640px;
  margin: 0 auto 36px;
}

.hf-hero-v3__ctas {
  display: flex;
  justify-content: center;
}

/* =========================================================================
   In-hero trust strip — limited window, marquee animation reused
   ========================================================================= */
.hf-hero-v3__trust {
  width: 100%;
  text-align: center;
  flex: 0 0 auto;
}

.hf-hero-v3__trust-label {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-tertiary);
  margin-bottom: 24px;
}

/* Cap the visible width to ~4 wordmarks. The marquee track itself stays
   wide (max-content) — only the viewport is constrained. The mask edges
   fade items out so they appear and disappear smoothly. */
.hf-hero-v3__trust-window {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

/* Wordmarks: clean sentence-case, medium weight, muted neutral —
   matches the Pulse / Algolia social-proof treatment. */
.hf-hero-v3__trust .hf-marquee__item {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-text-secondary);
}

/* Problem section — explicit solid white background.
   Globally `.hf-section--white` is transparent so the page gradient bleeds
   through; in v3 we want the problem grid to read as a clean white slab
   between the atmospheric hero and the scrollytelling zones. */
.hf-page #problem.hf-section--white {
  background: var(--color-bg-primary);
}
/* Social testimonial reads as a clean white slab (gradient otherwise bleeds through) */
.hf-page #social.hf-section--white {
  background: var(--color-bg-primary);
}

/* =========================================================================
   SCROLLYTELLING X2 — FLOATING CARDS PARALLAX
   The 3 problem cards "detach" from the grid and become a center-right
   companion while the user scrolls through the solutions zone.
   ========================================================================= */

/* Hide the v2 solutions tracker — replaced in v3 by HFFloatingCards. */
.hf-page .hf-solutions-tracker { display: none !important; }

/* ---- Visual deduplication ----
   The floating cards now carry the "which chapter are we in?" signal.
   That makes several v2 affordances redundant — we suppress them. */

/* (a) Top accent bar above each PROBLEM card */
.hf-page #problem .hf-illus-card[data-v2-clickable]::before {
  display: none;
}

/* (b) Eyebrow text at the top of each SOLUTION section
   (HFAdoption / HFCostPivot / HFProductivity). The floating card title
   already names the chapter. Also hide the "How it works" eyebrow per
   user request — the section title carries the meaning. */
.hf-page #adoption .hf-eyebrow,
.hf-page #cost-efficiency .hf-eyebrow,
.hf-page #cost-efficiency .hf-cost-pivot-eyebrow,
.hf-page #productivity .hf-eyebrow,
.hf-page #how-it-works .hf-eyebrow {
  display: none;
}

/* (c) Left edge accent thread on each solution section. */
.hf-page #adoption .hf-split__copy::before,
.hf-page #cost-efficiency .hf-split__copy::before,
.hf-page #productivity .hf-split__copy::before {
  display: none !important;
}
/* Undo the padding-left that made room for the thread */
.hf-page #adoption .hf-split__copy,
.hf-page #cost-efficiency .hf-split__copy,
.hf-page #productivity .hf-split__copy {
  padding-left: 0;
}

/* =========================================================================
   PROBLEM ILLUSTRATIONS — isometric animated cube system (v3)
   3 cards × 3 SVG scenes, all built from the same .hf-pi-* vocabulary:
      · .hf-pi-face / .hf-pi-face--top/right/left/ghost  (cube faces)
      · .hf-pi-scanner__line + .hf-pi-flash--c2/c4         (card 01: scan)
      · .hf-pi-fall--clean / .hf-pi-fall--drift            (card 02: stream)
      · .hf-pi-march + .hf-pi-wall                          (card 03: convoy)
   Each illustration ships its own `.hf-illus__fog` blur overlay; the
   overlay clears on card hover AND the animations un-pause at the same
   time — so the cards read as "frozen until you engage with them".
   ========================================================================= */

/* ---- Isometric cube faces, tinted by the card's accent ---- */
.hf-pi-face {
  stroke: var(--v2-accent, var(--color-brand-600));
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hf-pi-face--top   { fill: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 6%, white); }
.hf-pi-face--right { fill: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 14%, white); }
.hf-pi-face--left  { fill: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 22%, white); }
.hf-pi-face--ghost {
  fill: transparent;
  stroke-dasharray: 3 3;
  stroke: var(--color-text-quaternary);
}

/* ---- 01 Scanner ---- */
@keyframes hf-pi-scan-sweep {
  0%   { transform: translateX(-98px); }
  50%  { transform: translateX(98px); }
  100% { transform: translateX(-98px); }
}
.hf-pi-scanner__line {
  fill: var(--v2-accent, var(--color-brand-500));
  opacity: 0.35;
  animation: hf-pi-scan-sweep 4s ease-in-out infinite;
}
.hf-pi-flash { opacity: 0; }
@keyframes hf-pi-flash-c2 {
  0%   { opacity: 0; }
  16%  { opacity: 0; }
  19%  { opacity: 1; }
  81%  { opacity: 1; }
  84%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hf-pi-flash-c4 {
  0%   { opacity: 0; }
  41%  { opacity: 0; }
  44%  { opacity: 1; }
  56%  { opacity: 1; }
  59%  { opacity: 0; }
  100% { opacity: 0; }
}
.hf-pi-flash--c2 { animation: hf-pi-flash-c2 4s linear infinite; }
.hf-pi-flash--c4 { animation: hf-pi-flash-c4 4s linear infinite; }

/* "AI" decal on the lit top face — matches the accent stroke color
   so it stays legible across palettes. Only visible when the flash
   reveals (inherits .hf-pi-flash keyframe). */
.hf-pi-ai {
  font-family: var(--font-display, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--v2-accent, var(--color-brand-700));
  pointer-events: none;
  user-select: none;
}

/* ---- 02 Falling cubes ---- */
.hf-pi-fall { transform: translate(0, -97px); }
@keyframes hf-pi-fall-clean {
  0%   { transform: translate(0, -97px); }
  100% { transform: translate(0,  97px); }
}
@keyframes hf-pi-fall-drift {
  0%   { transform: translate(0, -97px); }
  48%  { transform: translate(0, 0); }
  100% { transform: translate(46px, 97px); }
}
@keyframes hf-pi-fall-drift-left {
  0%   { transform: translate(0, -97px); }
  48%  { transform: translate(0, 0); }
  100% { transform: translate(-46px, 97px); }
}
.hf-pi-fall--clean      { animation: hf-pi-fall-clean 4.8s linear infinite; }
.hf-pi-fall--drift      { animation: hf-pi-fall-drift 4.8s ease-in infinite; }
.hf-pi-fall--drift-left { animation-name: hf-pi-fall-drift-left; }

/* ---- 03 Wall convoy ---- */
.hf-pi-wall {
  stroke: var(--color-text-quaternary);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
@keyframes hf-pi-march {
  from { transform: translate(-144px, 0); }
  to   { transform: translate(144px,  0); }
}
.hf-pi-march { animation: hf-pi-march 5.6s linear infinite; }

/* ---- Pause animations by default; run only when card is hovered ----
   This lets the iso illustrations sit calmly behind the blur fog, and
   come alive precisely when the user engages with the card. */
.hf-page #problem .hf-illus-card .hf-pi-scanner__line,
.hf-page #problem .hf-illus-card .hf-pi-flash,
.hf-page #problem .hf-illus-card .hf-pi-fall,
.hf-page #problem .hf-illus-card .hf-pi-march {
  animation-play-state: paused;
}
.hf-page #problem .hf-illus-card:hover .hf-pi-scanner__line,
.hf-page #problem .hf-illus-card:hover .hf-pi-flash,
.hf-page #problem .hf-illus-card:hover .hf-pi-fall,
.hf-page #problem .hf-illus-card:hover .hf-pi-march {
  animation-play-state: running;
}

/* =========================================================================
   LEGACY — v2 illustration tinting (HFIllusFog / Seats / Forecast) is no
   longer rendered in v3 (replaced by the iso system above), but the rules
   are kept harmless: they target SVG/CSS that no longer ships, so they
   simply don't match anything. Left as documentation. */
   illustration to inherit the accent of its card so the brand progression
   (01 brand-700 → 02 brand-500 → 03 brand-300) carries through to the
   visuals, not just the badge.
   ========================================================================= */

/* HFIllusFog — the bar chart in problem 01 */
.hf-page #problem .hf-illus-card[data-v2-accent="01"] .hf-illus-card__art rect {
  fill: var(--v2-accent);
}

/* HFIllusSeats — the seat dot grid in problem 02. The dots are styled by
   .hf-seat-dot in hifi-styles.css with a fixed brand background. Tint to
   accent in v3. The .is-idle variant has a keyframe animation that
   resets background to brand-500 — override with a v3 keyframe that
   reads from --v2-accent. */
.hf-page #problem .hf-illus-card[data-v2-accent="02"] .hf-seat-dot {
  background: var(--v2-accent);
}
.hf-page #problem .hf-illus-card[data-v2-accent="02"] .hf-seat-dot.is-idle {
  animation-name: hf-seat-fade-v3;
}
@keyframes hf-seat-fade-v3 {
  0%, 100% { background: var(--v2-accent); }
  40%, 60% { background: var(--color-bg-quaternary); }
}

/* HFIllusForecast — the forecast cone + projection in problem 03 */
.hf-page #problem .hf-illus-card[data-v2-accent="03"] .hf-illus-card__art .hf-cone {
  fill: var(--v2-accent);
}
.hf-page #problem .hf-illus-card[data-v2-accent="03"] .hf-illus-card__art path[stroke-dasharray] {
  stroke: var(--v2-accent);
}

/* ---- Problem cards: clean neutral 1px border on ALL 4 sides ----
   v2 sets `border-top: 3px solid transparent` on clickable problem cards
   (to reserve space for the colored ::before bar we hide in v3). Force
   the top edge back to 1px so the card reads as a uniform rectangle. */
.hf-page #problem .hf-illus-card,
.hf-page #problem .hf-illus-card[data-v2-clickable] {
  border: 1px solid var(--color-border-secondary);
  border-top: 1px solid var(--color-border-secondary);
  border-radius: 16px;
}

/* =========================================================================
   PROBLEM CARDS — v3 layout (HFProblem override)
   ─────────────────────────────────────────────
   3 cards in a grid. Each card: header row (title + pixel icon) on top,
   body copy in the middle, illustration in a sub-frame at the bottom.
   Standardized spacing + illustration height across all 3 cards.
   ========================================================================= */

.hf-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1344px;
  margin: 0 auto;
}

/* Full-viewport problem section — fills the screen and centres its content
   vertically so the next section doesn't peek in before the user scrolls. */
.hf-page #problem {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}
.hf-page #problem .hf-section__inner {
  width: 100%;
  padding-top: 140px;
}

/* Section title — left-aligned, anchored to the same left edge as the
   first card in the grid below. Same max-width as the grid so the grid
   gutters line up perfectly. */
.hf-problem-head {
  max-width: 1344px;
  margin: 0 auto 56px;
}
.hf-problem-head__title {
  margin: 0;
  text-align: left;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

/* v3 card sizing — explicit margins replace the uniform gap so we can
   give big, editorial breathing room between (title row → body) and
   (body → illustration), matching the inspiration's premium spacing. */
.hf-page #problem .hf-illus-card--v3 {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 32px;
  gap: 0;
}

/* Header row: title (left) + num badge (right) */
.hf-illus-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* Generous gap before the body — creates the editorial whitespace the
     inspiration leans on. */
  margin-bottom: 64px;
}
.hf-illus-card__title {
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
  text-wrap: balance;
}

/* Square num badge — accent-colored surface w/ white digits, matches
   the sibling-hues palette of the card via --v2-accent. */
.hf-illus-card__num-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 18%, transparent);
  color: var(--v2-accent, var(--color-brand-600));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Body — grows to fill the remaining vertical space inside the card so
   all 3 cards' bodies push the illustration to the same bottom edge.
   The text inside the body is anchored to the BOTTOM of the body box
   (justify-content: flex-end) so the visible last line sits flush
   against the illustration sub-frame above. */
.hf-illus-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin: 0 0 12px;
  min-height: 88px;
}

/* Illustration sub-frame — standardized height, last child of the card.
   Padding 0 + overflow:hidden so the isometric animations touch the
   sub-frame edges (cubes enter from the very left, scanner spans full
   height, etc.) like they do in the exploration page. */
.hf-page #problem .hf-illus-card--v3 .hf-illus-card__art {
  height: 200px;
  border-radius: 12px;
  padding: 0;
  background: var(--color-bg-secondary);
  border: 1px solid color-mix(in srgb, var(--color-border-secondary) 70%, transparent);
  overflow: hidden;
}

/* The PROBLEM 0N mono label and bottom CTA from v2 are not rendered in
   v3. Hide defensively in case any stray markup ships them. */
.hf-page #problem .hf-illus-card__num { display: none; }
.hf-page #problem .hf-illus-card__cta { display: none; }

@media (max-width: 980px) {
  .hf-problem-grid { grid-template-columns: 1fr; }
}

/* ---- Fog/blur overlay — each illustration now ships its own
        `.hf-illus__fog` div (styled in hifi-styles.css), so we no longer
        need the v3 ::after synthetic blur for accent 02/03. Rules left
        as no-ops in case any future illustration drops the inline fog. */
.hf-page #problem .hf-illus-card[data-v2-accent="02"] .hf-illus-card__art,
.hf-page #problem .hf-illus-card[data-v2-accent="03"] .hf-illus-card__art {
  position: relative;
}

/* =========================================================================
   AXIFY PRO BADGE — reusable tier indicator (Pro coral palette)
   ─────────────────────────────────────────────────────────────
   Two-tone editorial: brand wordmark "Axify" + standalone "PRO" pill.
   The PRO pill can also be used by itself anywhere a feature is gated
   to the SEI tier (just render the span.hf-pro-badge__pro element alone).
   ========================================================================= */

.hf-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.hf-pro-badge__name {
  /* Brand wordmark — neutral text */
  color: var(--color-text-primary);
}
.hf-pro-badge__pro {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border-radius: 6px;
  background: linear-gradient(
    135deg,
    var(--color-pro-400) 0%,
    var(--color-pro-600) 50%,
    var(--color-pro-700) 100%
  );
  color: var(--color-white, #fff);
  letter-spacing: 0.14em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 14px -6px color-mix(in srgb, var(--color-pro-600) 55%, transparent);
}

/* Corner-anchored variant — used in the Beyond-AI shell */
.hf-pro-badge--corner {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-border-secondary) 50%, transparent);
}

/* Right-anchored corner variant — used for standalone PRO tag without
   the Axify wordmark. The PRO pill is its only child, so the wrapping
   pill is unnecessary; we render the pro chip directly. */
.hf-pro-badge--corner-right {
  position: absolute;
  top: 24px;
  right: 24px;
  left: auto;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hf-pro-badge--corner .hf-pro-badge__pro {
  /* Slightly tighter when nested in the corner pill */
  padding: 4px 8px 3px;
  font-size: 10px;
}
.hf-pro-badge--corner-right .hf-pro-badge__pro {
  /* Standalone PRO tag — slightly larger so it reads on its own */
  padding: 6px 11px 5px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* =========================================================================
   #beyond-ai — v3 override: framed rounded card, image bg
   The whole shell is a big rounded card with the AI gradient image as
   its background. The inner white card is dissolved — copy + viz sit
   directly on the image. More horizontal spacing than the hero so the
   section reads as a contained chapter, not a full-bleed band.

   v3 layout: VERTICAL stack, everything centered. Tier badge floats in
   the top-left corner; below it, centered title (2 lines), centered
   baseline (lede 2 lines), horizontal illustration placeholder, then
   the 4 pillars and CTAs.
   ========================================================================= */

/* Outer shell — the rounded card */
.hf-page #beyond-ai .hf-beyond {
  position: relative;
  margin: 0 56px;
  border-radius: 32px;
  background:
    /* White wash layered ON TOP of the gradient image to soften it so
       the headline + body copy stay legible. Adjust the wash alpha to
       taste — the higher the alpha, the calmer the bg. */
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0.45)
    ),
    url("assets/beyond-ai-bg.png") center / cover no-repeat,
    var(--color-bg-secondary);
  padding: 0;
  overflow: hidden;
}

/* Inner content container — no more white card, just layout. */
.hf-page #beyond-ai .hf-beyond__inner {
  background: transparent;
  border-radius: 0;
  padding: 96px 72px 80px;
}

/* Vertical/stacked layout — all content centered, max-width tightly
   constrained so long copy doesn't sprawl across the image. */
.hf-page #beyond-ai .hf-beyond__inner--stacked {
  display: block;
}
.hf-page #beyond-ai .hf-beyond__inner--stacked .hf-beyond__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}

/* Title — 2 lines, centered. The italic accent line ("We help teams…")
   uses the Pro coral instead of brand blue, since this section is the
   Pro tier — color reinforces the tier. */
.hf-page #beyond-ai .hf-beyond__headline {
  text-wrap: balance;
  letter-spacing: -0.02em;
}
.hf-page #beyond-ai .hf-beyond__headline-accent {
  color: var(--color-pro-700);
}

/* Baseline (lede) — centered, 2 lines max */
.hf-page #beyond-ai .hf-beyond__lede {
  max-width: 560px;
  text-wrap: balance;
}

/* Section-level text re-tinting: this section is the Pro tier, so any
   accent currently using brand blue should fall back to neutral or shift
   to pro coral. The .hf-beyond__pillar-title stays neutral text-primary
   (information-bearing), but tier pill, italic title accent and primary
   CTA use the pro palette. */

/* Primary CTA inside the Pro section uses coral instead of brand blue. */
.hf-page #beyond-ai .hf-btn--pro.hf-btn--primary,
.hf-page #beyond-ai .hf-btn.hf-btn--pro {
  background: var(--color-pro-600);
  border-color: var(--color-pro-600);
  color: var(--color-white, #fff);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 20px -8px color-mix(in srgb, var(--color-pro-600) 50%, transparent);
}
.hf-page #beyond-ai .hf-btn.hf-btn--pro:hover {
  background: var(--color-pro-700);
  border-color: var(--color-pro-700);
}

/* ---- (legacy tier-pill rule, no longer used — Beyond-AI now uses the
        reusable .hf-pro-badge component above. Removed.) ---- */

/* ---- Horizontal illustration placeholder ---- */
.hf-page #beyond-ai .hf-beyond__viz--horizontal {
  width: 100%;
  max-width: 720px;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.hf-page #beyond-ai .hf-beyond__art { display: block; }
.hf-page #beyond-ai .hf-beyond__art--final { height: 420px; width: auto; }
  min-height: 220px;
  aspect-ratio: 16 / 6;
  margin: 4px auto 0;
  background: color-mix(in srgb, var(--color-bg-primary) 70%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--color-border-secondary) 80%, transparent);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Pillars: re-centered grid, no more left-anchored ---- */
.hf-page #beyond-ai .hf-beyond__pillars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  width: 100%;
  max-width: 760px;
  margin: 8px auto 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--color-border-secondary) 50%, transparent);
  text-align: left;
}

/* Pillar bullets: warning-500 (orange) → neutral grey */
.hf-page #beyond-ai .hf-beyond__pillar-title,
.hf-page #beyond-ai .hf-beyond__pillar-sub { text-align: left; }
.hf-page #beyond-ai .hf-beyond__pillar-dot {
  background: var(--color-text-tertiary);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-text-tertiary) 18%, transparent);
}

/* ---- CTAs — centered ---- */
.hf-page #beyond-ai .hf-beyond__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 980px) {
  .hf-page #beyond-ai .hf-beyond { margin: 0 16px; }
  .hf-page #beyond-ai .hf-beyond__inner { padding: 64px 24px 56px; }
  .hf-page #beyond-ai .hf-beyond__pillars { grid-template-columns: 1fr; }
}

/* =========================================================================
   #difference — v3 override: tighter scale, single-line title
   v2 used hf-display--lg + big "moments" at 48–64px. v3 shrinks everything
   one notch so the section reads as a calm closing rhythm, not a finale.
   ========================================================================= */
.hf-page #difference .hf-display {
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: none !important;
  text-wrap: balance;
}
.hf-page #difference .hf-diff__head {
  margin-bottom: 56px;
  max-width: none;
}
.hf-page #difference .hf-diff {
  margin-top: 0;
}
.hf-page #difference .hf-diff__row {
  padding: 44px 0;
  gap: 48px;
}
.hf-page #difference .hf-diff__main {
  padding-top: 10px;
}
.hf-page #difference .hf-diff__big {
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1.1;
}
.hf-page #difference .hf-diff__small {
  font-size: 22px;
  margin-top: 8px;
}
.hf-page #difference .hf-diff__body {
  font-size: 15px;
  line-height: 1.6;
}

/* Remove the italic + underline treatment from the difference highlights —
   in v3, the brand color alone carries the emphasis. */
.hf-page #difference .hf-diff__hl {
  font-style: normal;
}
.hf-page #difference .hf-diff__hl::after {
  display: none;
}
/* The h2 "Start accelerating..." had inline fontStyle: italic on the
   accent word — flatten it in v3, again color does the work. */
.hf-page #difference .hf-display span {
  font-style: normal !important;
}

/* =========================================================================
   PROGRESSIVE REVEAL inside each solution section (PINNED)
   ─────────────────────────────────────────────────────────
   The 3 solution sections are wrapped in `.hf-pin` containers that are
   320vh tall. Inside each, `.hf-pin__inner` is sticky 100vh so the
   section visually stays put while the user scrolls. `--section-progress`
   is written by HFFloatingCards onto the pin wrapper and cascades down
   to all children — including the section's inner elements that have
   reveal rules attached.
   ========================================================================= */

.hf-pin {
  position: relative;
  /* PIN + SCRUB: tall wrapper gives a scroll budget while the inner sticks
     to the viewport. Content reveals (scrubs in) across the first part of
     that budget, dwells fully-revealed, then the section releases and the
     next one scrolls up normally. No section-over-section stacking. */
  height: 220vh;
  --section-progress: 0;
  /* Scroll-linked reveal progress (0→1), set + latched by JS. */
  --reveal: 0;
}

/* Sequential pins — no overlap, no cover; each releases before the next. */
.hf-pin[data-pin="cost-efficiency"],
.hf-pin[data-pin="productivity"] { margin-top: 0; }

.hf-pin__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* Section / wrap inside a pin: occupy full width, kill any vertical
   padding that came from HFSection — we want everything to live inside
   100vh. */
.hf-pin__inner > .hf-section,
.hf-pin__inner > .hf-cost-pivot-wrap {
  width: 100%;
  padding: 0;
  background: transparent;
  min-height: 0;
}
.hf-pin__inner .hf-section__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Base reveal rule — opacity + translateY interpolate across each
   element's own --rev-from / --rev-to window. */
.hf-page #adoption .hf-display,
.hf-page #cost-efficiency .hf-display,
.hf-page #productivity .hf-display,
.hf-page #adoption .hf-lede,
.hf-page #cost-efficiency .hf-lede,
.hf-page #productivity .hf-lede,
.hf-page #adoption .hf-flag,
.hf-page #adoption .hf-ai-insight-card,
.hf-page #adoption .hf-beauty__flag,
.hf-page #productivity .hf-flag,
.hf-page #productivity .hf-ai-insight-card,
.hf-page #adoption .hf-leaderboard,
.hf-page #adoption .hf-device,
.hf-page #adoption .hf-beauty,
.hf-page #cost-efficiency .hf-device,
.hf-page #cost-efficiency .hf-split__device,
.hf-page #productivity .hf-device,
.hf-page #productivity .hf-split__device {
  /* Scroll-linked reveal: opacity/translate derived from the section's
     --reveal (0→1, set + LATCHED by JS so scrolling back up never hides it),
     windowed by each element's --rev-from / --rev-to stage. The formula is
     inlined (no intermediate var) because a clamp/calc stored in a custom
     property doesn't re-simplify through var() substitution. */
  opacity: clamp(0, calc((var(--reveal, 0) - var(--rev-from, 0)) / (var(--rev-to, 1) - var(--rev-from, 0))), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--reveal, 0) - var(--rev-from, 0)) / (var(--rev-to, 1) - var(--rev-from, 0))), 1)) * 26px));
  transition: opacity 0.12s linear, transform 0.12s linear;
  will-change: opacity, transform;
}

/* Stage 1 — title appears very early in the chapter */
.hf-page #adoption .hf-display,
.hf-page #cost-efficiency .hf-display,
.hf-page #productivity .hf-display {
  --rev-from: 0.02;
  --rev-to:   0.18;
}

/* Stage 2 — lede / body copy */
.hf-page #adoption .hf-lede,
.hf-page #cost-efficiency .hf-lede,
.hf-page #productivity .hf-lede {
  --rev-from: 0.22;
  --rev-to:   0.42;
}

/* Stage 3 — supporting cards (flags, insight panels) */
.hf-page #adoption .hf-flag,
.hf-page #adoption .hf-ai-insight-card,
.hf-page #adoption .hf-beauty__flag {
  --rev-from: 0.45;
  --rev-to:   0.62;
}

/* Productivity flag — appears with the device, slightly delayed so it
   reads as a CONSEQUENCE of the chart rather than a sibling. */
.hf-page #productivity .hf-flag,
.hf-page #productivity .hf-ai-insight-card {
  --rev-from: 0.62;
  --rev-to:   0.82;
}

/* Stage 4 — devices / charts / illustrations (last to land) */
.hf-page #adoption .hf-leaderboard,
.hf-page #adoption .hf-device,
.hf-page #adoption .hf-beauty,
.hf-page #cost-efficiency .hf-device,
.hf-page #cost-efficiency .hf-split__device,
.hf-page #productivity .hf-device,
.hf-page #productivity .hf-split__device {
  --rev-from: 0.55;
  --rev-to:   0.88;
}

/* -------------------------------------------------------------------------
   COST-EFFICIENCY split layout — additional reveal stages
   The split layout uses .hf-eff-* classes, not the generic .hf-display +
   .hf-device that the rules above target. We map them to 4 stages that
   match the user's intent: title → cards container → card heads → viz/KPI.
   ------------------------------------------------------------------------- */

/* Mirror alignment — applies only to TEXT children (badge / title / lede).
   Viz, KPIs and CTA keep stretching full-width as they did before. */
.hf-eff-summary[data-align="right"] {
  text-align: right;
}
.hf-eff-summary[data-align="left"] {
  text-align: left;
}
.hf-eff-summary[data-align="right"] .hf-eff-card__title,
.hf-eff-summary[data-align="right"] .hf-eff-card__lede {
  text-align: right;
}
.hf-eff-summary[data-align="left"] .hf-eff-card__title,
.hf-eff-summary[data-align="left"] .hf-eff-card__lede {
  text-align: left;
}

/* Eyebrow badge — anchored to the card's mirrored edge via align-self.
   Same shape language as the problem-card num badge; inherits the section
   accent via --v2-accent. */
.hf-eff-summary .hf-eff-card__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px 4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 18%, transparent);
  color: var(--v2-accent, var(--color-brand-600));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  align-self: flex-start;
}
.hf-eff-summary[data-align="right"] .hf-eff-card__eyebrow {
  align-self: flex-end;
}
/* Usage card is right-aligned → its "Explore details" CTA mirrors to the right. */
.hf-eff-summary[data-align="right"] .hf-eff-card__cta {
  align-self: flex-end;
}

/* Cost summary-card forecast chart: ACTUAL / PROJECTED labels above the line. */
.hf-eff-fc__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  margin-bottom: 8px;
}
.hf-page #cost-efficiency .hf-eff-card__viz:has(.hf-eff-viz-chart) {
  display: flex;
  flex-direction: column;
}

.hf-page #cost-efficiency .hf-eff-cards,
.hf-page #cost-efficiency .hf-eff-card__eyebrow,
.hf-page #cost-efficiency .hf-eff-card__title,
.hf-page #cost-efficiency .hf-eff-card__lede,
.hf-page #cost-efficiency .hf-eff-card__viz,
.hf-page #cost-efficiency .hf-eff-card__kpis,
.hf-page #cost-efficiency .hf-eff-card__cta {
  /* Scroll-linked reveal (inlined formula, see note above). */
  opacity: clamp(0, calc((var(--reveal, 0) - var(--rev-from, 0)) / (var(--rev-to, 1) - var(--rev-from, 0))), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--reveal, 0) - var(--rev-from, 0)) / (var(--rev-to, 1) - var(--rev-from, 0))), 1)) * 26px));
  transition: opacity 0.12s linear, transform 0.12s linear;
  will-change: opacity, transform;
}

/* Stage 2 — the cards CONTAINER reveals as a single block (acts as the
   "frame" that the inner content then fills). */
.hf-page #cost-efficiency .hf-eff-cards {
  --rev-from: 0.20;
  --rev-to:   0.36;
}

/* Stage 3 — each card's title block: eyebrow + headline + lede */
.hf-page #cost-efficiency .hf-eff-card__eyebrow,
.hf-page #cost-efficiency .hf-eff-card__title,
.hf-page #cost-efficiency .hf-eff-card__lede {
  --rev-from: 0.36;
  --rev-to:   0.55;
}

/* Stage 4 — viz + KPIs + CTA arrive together as the data payload */
.hf-page #cost-efficiency .hf-eff-card__viz,
.hf-page #cost-efficiency .hf-eff-card__kpis,
.hf-page #cost-efficiency .hf-eff-card__cta {
  --rev-from: 0.58;
  --rev-to:   0.85;
}

/* ── Reveal stages are scroll-linked (see --lp formula above): each element's
   opacity/translate is derived from the section's latched --reveal var,
   windowed by its --rev-from/--rev-to stage. No transition-delay or .is-in
   class needed — the cascade comes from the staggered stage windows. ── */

/* Register --section-progress / --exit-progress as typed numbers so CSS
   treats them as continuous values (not opaque strings) — this makes
   scroll-driven calc() expressions fully scroll-locked instead of falling
   back to discrete transitions. */
/* NOTE: the @property registrations for --section-progress / --scroll-progress
   / --exit-progress live in an inline <style> in templates/home_v3.html instead
   of here. HubSpot's CSS-file validator rejects the required `<number>` syntax
   token ("can not save html to a css file"); a <style> block in the template is
   not subject to that check, so the typed-number registration is preserved. */

/* ---- EXIT animation — the 2 cards split apart and fade out as the user
   approaches the bottom of the pin (scroll position 0.88 → 1.0).
   Driven by --scroll-progress (NON-monotonic) so the animation is fully
   reversible: scrolling up brings the cards back together. The reveal-in
   stages above use --section-progress (monotonic) and are unaffected. ---- */
.hf-page #cost-efficiency .hf-eff-card-wrap {
  --exit-progress: clamp(
    0,
    calc((var(--scroll-progress, 0) - 0.88) / 0.12),
    1
  );
  transition: none !important;
  will-change: transform, opacity;
}
.hf-page #cost-efficiency .hf-eff-card-wrap:nth-child(1) {
  transform: none;
  opacity: 1;
}
.hf-page #cost-efficiency .hf-eff-card-wrap:nth-child(2) {
  transform: none;
  opacity: 1;
}

/* ---- Container ---- FULL-HEIGHT LEFT PROGRESS BAR + single section number. */
.hf-fcards {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 64px;
  z-index: 40;
  /* Hidden by default — visibility is toggled by the React component once
     the user enters the solutions zone. */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-fcards.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Full-height vertical progress rail on the far-left edge — fills
   top→bottom with the current section's scroll progress (0 → 100%). */
.hf-fcards__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--color-border-secondary);
}
.hf-fcards__rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: calc(var(--fill-progress, 0) * 100%);
  background: var(--v2-accent, var(--color-brand-500));
  transition: height 160ms linear;
}
/* Single section number, riding at the bottom edge of the fill so it
   travels down as the bar grows. */
.hf-fcards__num {
  position: absolute;
  left: 18px;
  top: calc(20px + var(--fill-progress, 0) * (100% - 40px));
  transform: translateY(-50%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v2-accent, var(--color-brand-600));
  transition: top 160ms linear, color 220ms ease-out;
}

/* ---- Individual cell ---- */
/* (Old per-cell card styles removed — the menu is now a single indicator:
   one vertical rail + one changing number. Accent mapping below still
   applies via the generic [data-v2-accent] rule on the container.) */

/* ---- Accent per card ---- */
/* Brand mono progression — v3 flips v2's mapping: problem 01 is the
   DARKEST brand step (the most "raised flag"), 03 is the lightest, with
   02 sitting at the anchor. This reads as escalating warmth fading toward
   the resolution side of the page. */
.hf-fcards__card[data-v2-accent="01"] { --v2-accent: var(--color-brand-700); }
.hf-fcards__card[data-v2-accent="02"] { --v2-accent: var(--color-brand-500); }
.hf-fcards__card[data-v2-accent="03"] { --v2-accent: var(--color-brand-300); }

/* Sibling hues — distinct color per problem. */
.hf-page[data-v2-palette="multi"] .hf-fcards__card[data-v2-accent="01"] { --v2-accent: var(--color-brand-500); }
.hf-page[data-v2-palette="multi"] .hf-fcards__card[data-v2-accent="02"] { --v2-accent: var(--color-teal-500); }
.hf-page[data-v2-palette="multi"] .hf-fcards__card[data-v2-accent="03"] { --v2-accent: var(--color-purple-600); }

/* Apply the same brand progression EVERYWHERE the accent token is used:
   problem cards (num badges, hover), solution sections (eyebrow tints,
   data-v2-accent surfaces). Overrides the v2 defaults in hifi-styles-v2.css
   (which had 01→light, 03→dark) so problem 01 stays the darkest. */
.hf-page:not([data-v2-palette="multi"]) [data-v2-accent="01"] { --v2-accent: var(--color-brand-700); }
.hf-page:not([data-v2-palette="multi"]) [data-v2-accent="02"] { --v2-accent: var(--color-brand-500); }
.hf-page:not([data-v2-palette="multi"]) [data-v2-accent="03"] { --v2-accent: var(--color-brand-300); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .hf-fcards__card { padding: 14px 16px; gap: 10px; }
  .hf-fcards__title { font-size: 12px; }
  .hf-fcards__num   { font-size: 10px; }
}

/* =========================================================================
   SCROLLYTELLING X1 — atmospheric flow for the 3 solutions zone
   ========================================================================= */

/* ---- Solutions zone: kill any opaque backgrounds so the page gradient
        flows continuously from the problem grid through to productivity. */
.hf-page .hf-scrolly .hf-section,
.hf-page .hf-scrolly .hf-cost-pivot-wrap { background: transparent; }

/* ── EXPERIMENT — each solution section is a ROUNDED, opaque coloured card
   that IS the sticky sliding element. Full width horizontally (no side gap,
   so nothing peeks through the sides), inset 18px top/bottom with rounded
   corners. As the top card slides out it cleanly reveals the next card
   underneath (stacked-cards effect) over the white page.
   Delete this whole block to restore the continuous page gradient. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner,
.hf-page .hf-pin[data-pin="productivity"] .hf-pin__inner {
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
}
/* Normal flow — no sticky offsets or fixed heights; each inner just centers
   its content within the min 100vh set on .hf-pin__inner above. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner,
.hf-page .hf-pin[data-pin="productivity"] .hf-pin__inner {
  border-radius: 0;
}
/* Cost-efficiency: top-anchor the content so expanding a card grows DOWNWARD
   and nothing jumps vertically (centered layout re-centers on height change). */
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner {
  align-items: flex-start;
  padding-top: 7vh;
}
/* (Test) Backgrounds removed — cards on the white page so we can see the
   layout sans colour. Kept opaque (page bg) so the stacked reveal works. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner        { background: var(--color-bg-primary); }
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner { background: var(--color-bg-primary); }
.hf-page .hf-pin[data-pin="productivity"] .hf-pin__inner    { background: var(--color-bg-primary); }
/* The rounded colour container. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner::before,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner::before,
.hf-page .hf-pin[data-pin="productivity"] .hf-pin__inner::before {
  content: none;
}
/* Keep the section content above the rounded colour layer. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner > .hf-section,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner > .hf-section,
.hf-page .hf-pin[data-pin="productivity"] .hf-pin__inner > .hf-section,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner > .hf-cost-pivot-wrap {
  position: relative;
  z-index: 1;
}

/* (Test) Typography back to default black — colour overrides disabled. */
.hf-page .hf-pin[data-pin="adoption"] .hf-display,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-display {
  color: var(--color-text-primary);
}
.hf-page .hf-pin[data-pin="adoption"] .hf-lede,
.hf-page .hf-pin[data-pin="cost-efficiency"] .hf-lede {
  color: var(--color-text-tertiary);
}
/* End EXPERIMENT block. */

.hf-scrolly {
  position: relative;
  isolation: isolate;
  min-height: 80vh;
}

/* ===== STICKY ATMOSPHERIC STAGE ======================================== */
.hf-scrolly__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
  z-index: 0;
}

/* ===== GLOW ============================================================ */
.hf-scrolly__glow {
  position: absolute;
  bottom: -260px;
  left: -240px;
  width: 880px;
  height: 880px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 26%, transparent) 0%,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 7%, transparent) 42%,
    transparent 72%
  );
  filter: blur(8px);
  opacity: 1;
}

/* ===== WATERMARK ======================================================= */
.hf-scrolly__watermark {
  position: absolute;
  bottom: 8vh;
  left: -1vw;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display, var(--font-serif));
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 16%, transparent);
  font-style: italic;
  white-space: nowrap;
}
.hf-scrolly__watermark-line { display: block; }

.hf-scrolly--wm-lg .hf-scrolly__watermark { font-size: clamp(140px, 15vw, 240px); }
.hf-scrolly--wm-md .hf-scrolly__watermark { font-size: clamp(110px, 12vw, 200px); }

/* ===== CONTENT EMERGE ================================================== */
.hf-scrolly__content {
  position: relative;
  z-index: 1;
}

/* ===== BLEND OVERLAYS ================================================= */
.hf-scrolly__blend {
  position: absolute;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 0;
  pointer-events: none;
}
.hf-scrolly__blend--top {
  top: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 5%, transparent) 0%,
    transparent 100%
  );
}
.hf-scrolly__blend--bot {
  bottom: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 5%, transparent) 0%,
    transparent 100%
  );
}

/* ===== TIGHTEN SECTION PADDING INSIDE SCROLLY ========================= */
.hf-scrolly .hf-section__inner { padding-top: 84px; padding-bottom: 84px; }
.hf-scrolly + .hf-scrolly .hf-section__inner { padding-top: 56px; }
.hf-scrolly .hf-cost-pivot-wrap { padding-top: 56px; padding-bottom: 56px; }

/* ===== PROBLEM → SOLUTIONS HANDOFF ==================================== */
.hf-scrolly--lead .hf-scrolly__blend--top {
  height: 300px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 8%, transparent) 0%,
    color-mix(in srgb, var(--v2-accent, var(--color-brand-500)) 2%, transparent) 55%,
    transparent 100%
  );
}

/* ===== KEEP COPY ABOVE THE WATERMARK ================================== */
.hf-scrolly .hf-split__copy { z-index: 2; }
.hf-scrolly .hf-split__copy::before { z-index: 3; }

/* =========================================================================
   PROBLEM SECTION — v3 horizontal expand-on-hover stage
   Replaces the v2 .hf-problem-grid card layout with three full-height
   colored panels that expand when hovered. Cube illustrations from
   hifi-problem.jsx adapt their face/stroke colors per card background.
   ========================================================================= */
.hf-page .xp-stage {
  display: flex;
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
  height: 560px;
  border-radius: 16px;
  overflow: hidden;
}
.hf-page .xp-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 32px 32px;
  cursor: pointer;
  transition: flex 450ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: flex;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.hf-page .xp-stage:hover .xp-card { flex: 0.85; }
.hf-page .xp-stage:hover .xp-card:hover { flex: 1.3; }

.hf-page .xp-card--01 { background: var(--color-brand-900); color: #fff; }
.hf-page .xp-card--02 { background: var(--color-brand-500); color: #fff; }
.hf-page .xp-card--03 { background: var(--color-brand-100); color: var(--color-brand-900); }

.hf-page .xp-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
}
.hf-page .xp-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.6;
  white-space: nowrap;
}
.hf-page .xp-title {
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: center;
  margin: 0;
  color: inherit;
}
.hf-page .xp-card--01 .xp-title,
.hf-page .xp-card--02 .xp-title { color: #fff; }
.hf-page .xp-card--03 .xp-title { color: var(--color-brand-900); }
.hf-page .xp-illus {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  min-height: 0;
}
.hf-page .xp-illus > * {
  width: 100%;
  max-width: 260px;
  height: 100%;
  max-height: 220px;
}
.hf-page .xp-body {
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
  padding-bottom: 8px;
  color: inherit;
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fade focus: when a card is hovered, the other cards fade their
   paragraph out so the text re-wrap happens while invisible — the
   active card keeps full, stable text. */
.hf-page .xp-stage:hover .xp-card:not(:hover) .xp-body {
  opacity: 0;
  transform: translateY(12px);
}
.hf-page .xp-card--01 .xp-body,
.hf-page .xp-card--02 .xp-body { color: rgba(255, 255, 255, 0.85); }
.hf-page .xp-card--03 .xp-body { color: var(--color-brand-900); opacity: 0.75; }

/* ── Iso cube illustrations — overrides for bold backgrounds.
   The cube faces inside the v3 stage use solid color-mix that only
   reads well on a white card. Override per bg color. */
.hf-page .xp-stage .hf-pi-face { stroke-width: 1.2; }

.hf-page .xp-card--01 .hf-pi-face,
.hf-page .xp-card--02 .hf-pi-face { stroke: rgba(255, 255, 255, 0.85); }
.hf-page .xp-card--03 .hf-pi-face { stroke: rgba(17, 19, 24, 0.7); }

.hf-page .xp-card--01 .hf-pi-face--top   { fill: rgba(255, 255, 255, 0.08); }
.hf-page .xp-card--01 .hf-pi-face--right { fill: rgba(255, 255, 255, 0.18); }
.hf-page .xp-card--01 .hf-pi-face--left  { fill: rgba(255, 255, 255, 0.28); }

.hf-page .xp-card--02 .hf-pi-face--top   { fill: rgba(255, 255, 255, 0.08); }
.hf-page .xp-card--02 .hf-pi-face--right { fill: rgba(255, 255, 255, 0.18); }
.hf-page .xp-card--02 .hf-pi-face--left  { fill: rgba(255, 255, 255, 0.28); }

.hf-page .xp-card--03 .hf-pi-face--top   { fill: rgba(17, 19, 24, 0.06); }
.hf-page .xp-card--03 .hf-pi-face--right { fill: rgba(17, 19, 24, 0.14); }
.hf-page .xp-card--03 .hf-pi-face--left  { fill: rgba(17, 19, 24, 0.22); }

/* Scanner line + wall line — adapt per card. */
.hf-page .xp-card--01 .hf-pi-scanner__line,
.hf-page .xp-card--02 .hf-pi-scanner__line { fill: rgba(255, 255, 255, 0.5); }
.hf-page .xp-card--03 .hf-pi-scanner__line { fill: rgba(17, 19, 24, 0.4); }

.hf-page .xp-card--01 .hf-pi-wall,
.hf-page .xp-card--02 .hf-pi-wall { stroke: rgba(255, 255, 255, 0.5); }
.hf-page .xp-card--03 .hf-pi-wall { stroke: rgba(17, 19, 24, 0.45); }

/* AI decal — match the cube stroke color so it stays legible. */
.hf-page .xp-card--01 .hf-pi-ai,
.hf-page .xp-card--02 .hf-pi-ai { fill: rgba(255, 255, 255, 0.95); }
.hf-page .xp-card--03 .hf-pi-ai { fill: rgba(17, 19, 24, 0.8); }

/* Animation play-state — paused by default, runs on hover of the card. */
.hf-page .xp-stage .hf-pi-scanner__line,
.hf-page .xp-stage .hf-pi-flash,
.hf-page .xp-stage .hf-pi-fall,
.hf-page .xp-stage .hf-pi-march {
  animation-play-state: paused !important;
}
.hf-page .xp-stage .xp-card:hover .hf-pi-scanner__line,
.hf-page .xp-stage .xp-card:hover .hf-pi-flash,
.hf-page .xp-stage .xp-card:hover .hf-pi-fall,
.hf-page .xp-stage .xp-card:hover .hf-pi-march {
  animation-play-state: running !important;
}


/* =========================================================================
   v3 — ADOPTION BEAUTYSHOT — brand-glass shell (cortex.io direction)
   The right column is one big rounded brand-blue panel. Top-left:
   Axify logo on a white tile. Right of the logo: page title in white.
   Below: a vertical rail of abstract menu icons, and a floating white
   "sheet" containing the leaderboard table. A second floating card
   ("Flagged this month") overlaps the top-right area.
   ========================================================================= */

/* Hide the v2 hf-flag under the lede — the insight is the floating card now. */
.hf-page #adoption .hf-split__copy > .hf-flag,
.hf-page #adoption .hf-split__copy > .hf-ai-insight-card { display: none; }

/* Adoption layout — like "How it works": a header row (title left +
   sub-text right, vertically centred) with the dashboard illustration
   full-width below it. Linear-like vertical rhythm: generous space above
   the title and a large gap before the illustration. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner {
  align-items: center;
}
.hf-page #adoption .hf-section__inner {
  padding-top: 0;
}
.hf-page #adoption .hf-split {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 96px;
}
.hf-page #adoption .hf-split__copy {
  text-align: left;
  max-width: none;
  margin-left: 0;
}
.hf-page #adoption .hf-adopt-headgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  margin-top: 16px;
}
/* Match How-it-works type: title on display-lg, sub-text on display-xs
   (size / line-height / letter-spacing only — colours stay section-specific). */
/* Harmonised solution title — design-system token --text-display-ml
   (40px / line-height 1 / -1.3px / weight 500), colour primary. The grey
   sub-parts of each title are set by hand inline. */
.hf-page #adoption .hf-adopt-headgrid h2,
.hf-page #cost-efficiency .hf-display,
.hf-page #productivity .hf-display {
  font-size: var(--text-display-ml);
  line-height: var(--text-display-ml-lh);
  letter-spacing: var(--text-display-ml-ls);
  font-weight: var(--text-display-ml-fw);
  color: var(--color-text-primary);
}
.hf-page #adoption .hf-adopt-headgrid p {
  font-size: var(--text-display-xs);
  line-height: var(--text-display-xs-lh);
}
.hf-page #cost-efficiency .hf-lede,
.hf-page #productivity .hf-lede {
  font-weight: 400;
  line-height: 1.1;
  color: rgb(163, 163, 163);
}

/* Right column wrapper. */
.hf-page #adoption .hf-beauty {
  position: relative;
  width: 100%;
}

/* Outer gray shell — hosts colorful blobs UNDER the glass so the
   backdrop-filter on the inner panel has something interesting to blur.
   Style still echoes the Usage/Cost cards (gray bg + inset border). */
/* ── Prompt-spec frosted-glass wrapper ─────────────────────────────
   rounded-2xl · overflow-hidden · p-4 · background rgba(255,255,255,0.4) ·
   1px solid rgba(255,255,255,0.5) border · box-shadow --shadow-dashboard.
   No colored blobs, no heavy glassmorphism. */
.hf-page #adoption .hf-bs-shell {
  position: relative;
  /* Gray mat/frame (bg-secondary) holding the rail + a white rounded main
     container. Narrowed + centered so the floating cards overhang its edges. */
  width: calc(100% - 56px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  padding: 8px 8px 0;              /* uniform 8px gray gutter (top = sides) */
  background: var(--color-bg-secondary, #F5F5F5);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;                /* clip the dashboard + fade to the rounded frame */
}

/* ── Passthrough layer — the gray wrapper (.hf-bs-shell) already provides
   the bg-secondary frame + its border, so this stays transparent with no
   border of its own (avoids the double/triple border). ───────────── */
.hf-page #adoption .hf-bs {
  position: relative;
  z-index: 1;
  background: transparent;
  overflow: visible;
  color: var(--color-text-primary);
}

/* Top bar */
.hf-page #adoption .hf-bs__top-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.hf-page #adoption .hf-bs__top-stat-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #adoption .hf-bs__top-stat-sep { color: var(--color-text-quaternary); font-weight: 500; }
.hf-page #adoption .hf-bs__top-stat-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* Body: rail + main */
.hf-page #adoption .hf-bs__body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
}
.hf-page #adoption .hf-bs__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
}
.hf-page #adoption .hf-bs__rail-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--color-neutral-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.hf-page #adoption .hf-bs__rail-logo img { display: block; filter: brightness(0) invert(1); }
.hf-page #adoption .hf-bs__rail-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-quaternary);
  border-radius: 8px;
}
.hf-page #adoption .hf-bs__rail-item.is-active {
  color: var(--color-brand-600);
  background: var(--color-brand-50);
}

.hf-page #adoption .hf-bs__main {
  padding: 0 0 28px;
  min-width: 0;
  background: var(--color-bg-primary);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hf-page #adoption .hf-bs__main-head { order: 1; }
.hf-page #adoption .hf-bs__tcards { order: 2; }
.hf-page #adoption .hf-bs__metrics { order: 3; margin-top: 12px; }

/* Container header: page title + headline stat */
.hf-page #adoption .hf-bs__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.hf-page #adoption .hf-bs__page-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}
.hf-page #adoption .hf-bs__page-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}

/* KPI metric cards — Untitled UI "Chart 01" style: flat, no shadow,
   hairline border, side by side. Label + icon, big value, delta, sparkline. */
.hf-page #adoption .hf-bs__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 24px 0;
  margin-bottom: 10px;
}
.hf-page #adoption .hf-metric {
  border-radius: 10px;
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: background 160ms ease;
}
.hf-page #adoption .hf-metric:hover { background: var(--color-bg-secondary); }
.hf-page #adoption .hf-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hf-page #adoption .hf-metric__label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hf-page #adoption .hf-metric__icon { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #adoption .hf-metric__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hf-page #adoption .hf-metric__figs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  max-width: 56%;
}
.hf-page #adoption .hf-metric__spark {
  flex: 1;
  min-width: 0;
  height: 46px;
  align-self: center;
}
.hf-page #adoption .hf-metric__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--color-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hf-page #adoption .hf-metric__unit {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-text-tertiary);
}
.hf-page #adoption .hf-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  flex-wrap: wrap;
}
.hf-page #adoption .hf-delta--up { color: #00a63e; }
.hf-page #adoption .hf-delta--down { color: var(--color-error-600); }
.hf-page #adoption .hf-delta__ico { flex-shrink: 0; }
.hf-page #adoption .hf-delta__val { letter-spacing: -0.1px; }
.hf-page #adoption .hf-delta__suffix {
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: 2px;
}

/* Teams block */
.hf-page #adoption .hf-bs__teams { padding: 0 24px; }
.hf-page #adoption .hf-bs__teams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hf-page #adoption .hf-bs__teams-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
}
.hf-page #adoption .hf-bs__teams-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.hf-page #adoption .hf-bs__switch {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--color-brand-500);
  position: relative;
  flex-shrink: 0;
}
.hf-page #adoption .hf-bs__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
}

/* ── Two tabbed table cards (50% each) ─────────────────────────────── */
.hf-page #adoption .hf-bs__tcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 24px;
}
.hf-page #adoption .hf-tcard {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  min-width: 0;
  overflow: hidden;
}
.hf-page #adoption .hf-tcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 10px;
}
.hf-page #adoption .hf-tcard__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}
.hf-page #adoption .hf-tcard__more { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #adoption .hf-tcard__tabs {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #adoption .hf-tcard__tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 9px;
  margin: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.hf-page #adoption .hf-tcard__tab.is-active {
  color: var(--color-brand-600);
  font-weight: 600;
}
.hf-page #adoption .hf-tcard__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-600);
}

/* Compact table inside the cards */
.hf-page #adoption .hf-mtbl { padding: 4px 16px 6px; }
.hf-page #adoption .hf-mtbl__head,
.hf-page #adoption .hf-mtbl__tr {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 28px minmax(0, 1.1fr);
  align-items: center;
  gap: 9px;
}
.hf-page #adoption .hf-mtbl__head {
  padding: 8px 0 6px;
}
.hf-page #adoption .hf-mtbl__th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}
.hf-page #adoption .hf-mtbl__tr {
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background 140ms ease;
}
.hf-page #adoption .hf-mtbl__tr:hover { background: var(--color-bg-secondary); }
.hf-page #adoption .hf-mtbl__td {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #adoption .hf-mtbl__c-num { justify-content: flex-end; font-weight: 500; }
.hf-page #adoption .hf-mtbl__c-name { gap: 8px; }
.hf-page #adoption .hf-mtbl__c-team { gap: 10px; }
.hf-page #adoption .hf-mtbl__avatar { width: 22px; height: 22px; font-size: 10px; }
.hf-page #adoption .hf-mtbl__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #adoption .hf-mtbl__c-bar { gap: 8px; }
.hf-page #adoption .hf-mtbl__c-tool { justify-content: flex-start; }
.hf-page #adoption .hf-mtbl__c-int { justify-content: flex-end; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-page #adoption .hf-toollogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.hf-page #adoption .hf-mtbl__bar { flex: 1; min-width: 18px; height: 6px; }
.hf-page #adoption .hf-mtbl__bar-fill { background: var(--color-brand-500); display: block; height: 100%; border-radius: 999px; }
.hf-page #adoption .hf-mtbl__pct {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* Avatar group (overlapping member dots + overflow chip) */
.hf-page #adoption .hf-avgroup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hf-page #adoption .hf-avgroup__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  margin-right: -7px;
  background: var(--color-bg-secondary);
}
.hf-page #adoption .hf-avgroup__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── Action needed widget (priority groups) ───────────────────────── */
.hf-page #adoption .hf-action { padding: 6px 16px 8px; }
.hf-page #adoption .hf-action__group { border-top: 1px solid var(--color-border-secondary); }
.hf-page #adoption .hf-action__group:first-child { border-top: none; }
.hf-page #adoption .hf-action__grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}
.hf-page #adoption .hf-action__bullet {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hf-page #adoption .hf-action__bullet--high { background: var(--color-error-500); }
.hf-page #adoption .hf-action__bullet--medium { background: var(--color-warning-500, #F79009); }
.hf-page #adoption .hf-action__bullet--low { background: var(--color-brand-500); }
.hf-page #adoption .hf-action__grouplabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-page #adoption .hf-action__groupcount {
  font-size: 12.5px;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}
.hf-page #adoption .hf-action__chev { color: var(--color-text-quaternary); margin-left: auto; }
.hf-page #adoption .hf-action__rows { padding-bottom: 4px; }
.hf-page #adoption .hf-action__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background 140ms ease;
}
.hf-page #adoption .hf-action__row:hover { background: var(--color-bg-secondary); }
.hf-page #adoption .hf-action__avatar { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.hf-page #adoption .hf-action__info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.hf-page #adoption .hf-action__team {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #adoption .hf-action__reason {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #adoption .hf-action__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tool avatars */
.hf-page #adoption .hf-uitbl__avatar[data-team="copilot"] { background: var(--color-neutral-800); }
.hf-page #adoption .hf-uitbl__avatar[data-team="cursor"]  { background: var(--color-neutral-900); }
.hf-page #adoption .hf-uitbl__avatar[data-team="chatgpt"] { background: var(--color-success-600); }
.hf-page #adoption .hf-uitbl__avatar[data-team="claude"]  { background: var(--color-brand-500); }

/* ── Teams table ───────────────────────────────────────────────────── */
.hf-page #adoption .hf-uitbl {
  width: 100%;
  font-family: var(--font-body, Inter, sans-serif);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;
}
.hf-page #adoption .hf-uitbl__head,
.hf-page #adoption .hf-uitbl__tr {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.5fr)
    minmax(86px, 0.8fr)
    minmax(60px, 0.5fr)
    minmax(150px, 1.4fr)
    minmax(96px, 0.7fr);
  gap: 16px;
  align-items: center;
  padding: 9px 16px;
}
.hf-page #adoption .hf-uitbl__head {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
  padding-top: 8px;
  padding-bottom: 8px;
}
.hf-page #adoption .hf-uitbl__th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #adoption .hf-uitbl__tr {
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #adoption .hf-uitbl__tr:last-child { border-bottom: none; }
.hf-page #adoption .hf-uitbl__td {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #adoption .hf-uitbl__col--team { gap: 10px; }
.hf-page #adoption .hf-uitbl__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.hf-page #adoption .hf-uitbl__avatar[data-team="mobile"]   { background: var(--color-brand-600); }
.hf-page #adoption .hf-uitbl__avatar[data-team="platform"] { background: var(--color-brand-400); }
.hf-page #adoption .hf-uitbl__avatar[data-team="data"]     { background: var(--color-neutral-500); }
.hf-page #adoption .hf-uitbl__avatar[data-team="growth"]   { background: var(--color-neutral-400); }
.hf-page #adoption .hf-uitbl__avatar[data-team="core"]     { background: var(--color-error-500); }
.hf-page #adoption .hf-uitbl__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #adoption .hf-uitbl__col--lic,
.hf-page #adoption .hf-uitbl__col--active,
.hf-page #adoption .hf-uitbl__col--inter {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hf-page #adoption .hf-uitbl__col--inter { justify-content: flex-start; }
.hf-page #adoption .hf-uitbl__col--bar { gap: 10px; }
.hf-page #adoption .hf-uitbl__bar {
  flex: 1;
  height: 7px;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.hf-page #adoption .hf-uitbl__bar-fill { height: 100%; border-radius: 999px; }
.hf-page #adoption .hf-uitbl__bar-fill--success { background: var(--color-success-500); }
.hf-page #adoption .hf-uitbl__bar-fill--brand   { background: var(--color-brand-500); }
.hf-page #adoption .hf-uitbl__bar-fill--neutral { background: var(--color-neutral-400); }
.hf-page #adoption .hf-uitbl__bar-fill--error   { background: var(--color-error-500); }
.hf-page #adoption .hf-uitbl__bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* ── Fade-to-white: dashboard dissolves into the page toward the bottom
   (and a touch on the right), like Linear's hero. ─────────────────── */
.hf-page #adoption .hf-bs__fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 52%, var(--color-bg-primary) 96%),
    linear-gradient(90deg, transparent 70%, color-mix(in oklab, var(--color-bg-primary) 45%, transparent) 100%);
}

/* ── Floating cards on top of the dashboard ───────────────────────── */
.hf-page #adoption .hf-fcard {
  position: absolute;
  z-index: 5;
  background: var(--color-bg-primary);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, 0.04),
    var(--shadow-dashboard);
}
/* Card 1 — adoption trend (lower-left, overhanging the wrapper's left edge) */
.hf-page #adoption .hf-fcard--chart {
  left: -8px;
  right: auto;
  top: auto;
  bottom: 55px;
  width: 318px;
  padding: 16px 18px 14px;
}
.hf-page #adoption .hf-fcard__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #adoption .hf-fcard__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px;
}
.hf-page #adoption .hf-fcard__value {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #adoption .hf-fcard__unit { font-size: 22px; color: var(--color-text-tertiary); letter-spacing: -0.5px; }
.hf-page #adoption .hf-fcard__delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success-700);
  background: var(--color-success-50);
  box-shadow: inset 0 0 0 1px var(--color-success-200);
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hf-page #adoption .hf-fcard__chart { display: block; width: 100%; height: 64px; margin-top: 2px; }
.hf-page #adoption .hf-fcard__caption {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  margin-top: 8px;
}

/* Card 2 — insight (upper-right, overhanging the wrapper's right edge) */
.hf-page #adoption .hf-fcard--insight {
  right: -4px;
  top: 132px;
  width: 296px;
  padding: 15px 17px 14px;
}
.hf-page #adoption .hf-fcard__insight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.hf-page #adoption .hf-fcard__star {
  color: var(--color-brand-600);
  flex-shrink: 0;
}
.hf-page #adoption .hf-fcard__insight-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.hf-page #adoption .hf-fcard__team { font-weight: 600; color: var(--color-text-primary); }
.hf-page #adoption .hf-fcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-600);
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}
.hf-page #adoption .hf-fcard__cta:hover { gap: 9px; color: var(--color-brand-700); }

/* ===== PRODUCTIVITY dashboard — cloned from #adoption base ===== */
/* Adoption layout — like "How it works": a header row (title left +
   sub-text right, vertically centred) with the dashboard illustration
   full-width below it. Linear-like vertical rhythm: generous space above
   the title and a large gap before the illustration. */
.hf-page .hf-pin[data-pin="adoption"] .hf-pin__inner {
  align-items: center;
}
.hf-page #productivity .hf-section__inner {
  padding-top: 0;
}
.hf-page #productivity .hf-split {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 96px;
}
.hf-page #productivity .hf-split__copy {
  text-align: left;
  max-width: none;
  margin-left: 0;
}
.hf-page #productivity .hf-adopt-headgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  margin-top: 16px;
}
/* Match How-it-works type: title on display-lg, sub-text on display-xs
   (size / line-height / letter-spacing only — colours stay section-specific). */
/* Harmonised solution title — design-system token --text-display-ml
   (40px / line-height 1 / -1.3px / weight 500), colour primary. The grey
   sub-parts of each title are set by hand inline. */
.hf-page #productivity .hf-adopt-headgrid h2,
.hf-page #cost-efficiency .hf-display,
.hf-page #productivity .hf-display {
  font-size: var(--text-display-ml);
  line-height: var(--text-display-ml-lh);
  letter-spacing: var(--text-display-ml-ls);
  font-weight: var(--text-display-ml-fw);
  color: var(--color-text-primary);
}
.hf-page #productivity .hf-adopt-headgrid p {
  font-size: var(--text-display-xs);
  line-height: var(--text-display-xs-lh);
}
.hf-page #cost-efficiency .hf-lede,
.hf-page #productivity .hf-lede {
  font-weight: 400;
  line-height: 1.1;
  color: rgb(163, 163, 163);
}

/* Right column wrapper. */
.hf-page #productivity .hf-beauty {
  position: relative;
  width: 100%;
}

/* Outer gray shell — hosts colorful blobs UNDER the glass so the
   backdrop-filter on the inner panel has something interesting to blur.
   Style still echoes the Usage/Cost cards (gray bg + inset border). */
/* ── Prompt-spec frosted-glass wrapper ─────────────────────────────
   rounded-2xl · overflow-hidden · p-4 · background rgba(255,255,255,0.4) ·
   1px solid rgba(255,255,255,0.5) border · box-shadow --shadow-dashboard.
   No colored blobs, no heavy glassmorphism. */
.hf-page #productivity .hf-bs-shell {
  position: relative;
  /* Gray mat/frame (bg-secondary) holding the rail + a white rounded main
     container. Narrowed + centered so the floating cards overhang its edges. */
  width: calc(100% - 56px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  padding: 8px 8px 0;              /* uniform 8px gray gutter (top = sides) */
  background: var(--color-bg-secondary, #F5F5F5);
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;                /* clip the dashboard + fade to the rounded frame */
}

/* ── Passthrough layer — the gray wrapper (.hf-bs-shell) already provides
   the bg-secondary frame + its border, so this stays transparent with no
   border of its own (avoids the double/triple border). ───────────── */
.hf-page #productivity .hf-bs {
  position: relative;
  z-index: 1;
  background: transparent;
  overflow: visible;
  color: var(--color-text-primary);
}

/* Top bar */
.hf-page #productivity .hf-bs__top-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.hf-page #productivity .hf-bs__top-stat-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-bs__top-stat-sep { color: var(--color-text-quaternary); font-weight: 500; }
.hf-page #productivity .hf-bs__top-stat-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* Body: rail + main */
.hf-page #productivity .hf-bs__body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
}
.hf-page #productivity .hf-bs__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
}
.hf-page #productivity .hf-bs__rail-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--color-neutral-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.hf-page #productivity .hf-bs__rail-logo img { display: block; filter: brightness(0) invert(1); }
.hf-page #productivity .hf-bs__rail-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-quaternary);
  border-radius: 8px;
}
.hf-page #productivity .hf-bs__rail-item.is-active {
  color: var(--color-brand-600);
  background: var(--color-brand-50);
}

.hf-page #productivity .hf-bs__main {
  padding: 0 0 28px;
  min-width: 0;
  background: var(--color-bg-primary);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hf-page #productivity .hf-bs__main-head { order: 1; }
.hf-page #productivity .hf-bs__metrics { order: 2; }
.hf-page #productivity .hf-bs__tcards { order: 3; margin-top: 12px; }

/* Container header: page title + headline stat */
.hf-page #productivity .hf-bs__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.hf-page #productivity .hf-bs__page-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.hf-page #productivity .hf-bs__page-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}

/* KPI metric cards — Untitled UI "Chart 01" style: flat, no shadow,
   hairline border, side by side. Label + icon, big value, delta, sparkline. */
.hf-page #productivity .hf-bs__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 24px 0;
  margin-bottom: 10px;
}
.hf-page #productivity .hf-metric {
  border-radius: 10px;
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hf-page #productivity .hf-metric:hover { background: var(--color-bg-secondary); }
.hf-page #productivity .hf-metric--clickable { cursor: pointer; }
.hf-page #productivity .hf-metric.is-active,
.hf-page #productivity .hf-metric.is-active:hover {
  background: var(--color-brand-50);
  box-shadow: inset 0 0 0 1px var(--color-brand-200);
}
.hf-page #productivity .hf-metric.is-active .hf-metric__label { color: var(--color-brand-700); font-weight: 600; }
.hf-page #productivity .hf-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hf-page #productivity .hf-metric__label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hf-page #productivity .hf-metric__icon { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #productivity .hf-metric__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hf-page #productivity .hf-metric__figs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  max-width: 56%;
}
.hf-page #productivity .hf-metric__spark {
  flex: 1;
  min-width: 0;
  height: 46px;
  align-self: center;
}
.hf-page #productivity .hf-metric__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--color-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-metric__unit {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-text-tertiary);
}
.hf-page #productivity .hf-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  flex-wrap: wrap;
}
.hf-page #productivity .hf-delta--up { color: #00a63e; }
.hf-page #productivity .hf-delta--down { color: var(--color-error-600); }
.hf-page #productivity .hf-delta__ico { flex-shrink: 0; }
.hf-page #productivity .hf-delta__val { letter-spacing: -0.1px; }
.hf-page #productivity .hf-delta__suffix {
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: 2px;
}

/* Teams block */
.hf-page #productivity .hf-bs__teams { padding: 0 24px; }
.hf-page #productivity .hf-bs__teams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hf-page #productivity .hf-bs__teams-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
}
.hf-page #productivity .hf-bs__teams-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.hf-page #productivity .hf-bs__switch {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--color-brand-500);
  position: relative;
  flex-shrink: 0;
}
.hf-page #productivity .hf-bs__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
}

/* ── Bottom zone: 2/3 trend chart + 1/3 leaderboard ───────────────── */
.hf-page #productivity .hf-bs__tcards {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
  padding: 0 24px;
  align-items: stretch;
}
.hf-page #productivity .hf-tcard {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Legend (top-right of the chart card) */
.hf-page #productivity .hf-chartlegend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.hf-page #productivity .hf-chartlegend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.hf-page #productivity .hf-chartlegend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hf-page #productivity .hf-chartlegend__dot--ad { background: var(--color-brand-600); }
.hf-page #productivity .hf-chartlegend__dot--tp { background: var(--color-pro-500); }

/* Chart body: plot fills the card height, x-axis pinned below */
.hf-page #productivity .hf-tcard--chart .hf-tcard__head { padding-bottom: 8px; }
.hf-page #productivity .hf-chartcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 14px;
  min-height: 0;
}
.hf-page #productivity .hf-chartcard__plot { flex: 1; min-height: 235px; }
.hf-page #productivity .hf-dualtrend { display: block; width: 100%; height: 100%; }

/* Interactive hover layer (dashboard chart only): vertical guide line,
   crosshair dots on each series, and an Untitled-UI-style tooltip. */
.hf-page #productivity .hf-dualtrend-wrap { position: relative; width: 100%; height: 100%; }

/* Micro fade when switching the active metric (dashboard chart + floating card).
   IMPORTANT: animate the SVG itself (and the floating swap wrapper), NOT the
   .hf-dualtrend-wrap — animating the wrap's opacity makes it a stacking context
   that buries the hover tooltip under the .hf-bs__fade overlay. */
@keyframes hfChartSwap {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hf-page #productivity .hf-dualtrend-wrap .hf-dualtrend { animation: hfChartSwap 620ms ease-in-out both; }
.hf-page #productivity .hf-fcard__swap { animation: hfChartSwap 620ms ease-in-out both; }
.hf-page #productivity .hf-dualtrend-wrap .hf-dualtrend { position: absolute; inset: 0; }
.hf-page #productivity .hf-dt-hit { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }
.hf-page #productivity .hf-dt-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-neutral-300);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 2;
}
.hf-page #productivity .hf-dt-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  pointer-events: none;
  z-index: 3;
}
.hf-page #productivity .hf-dt-dot--ad { background: var(--color-brand-600); }
.hf-page #productivity .hf-dt-dot--tp { background: var(--color-pro-500); }
.hf-page #productivity .hf-dt-tip {
  position: absolute;
  top: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--color-neutral-900);
  border-radius: 8px;
  padding: 9px 11px;
  min-width: 130px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
.hf-page #productivity .hf-dt-tip--right { transform: translateX(12px); }
.hf-page #productivity .hf-dt-tip--left { transform: translateX(calc(-100% - 12px)); }
.hf-page #productivity .hf-dt-tip__m {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 7px;
}
.hf-page #productivity .hf-dt-tip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-neutral-300);
}
.hf-page #productivity .hf-dt-tip__row + .hf-dt-tip__row { margin-top: 4px; }
.hf-page #productivity .hf-dt-tip__row b {
  margin-left: auto;
  padding-left: 16px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-dt-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hf-page #productivity .hf-dt-tip__foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-green-400);
  white-space: nowrap;
}
.hf-page #productivity .hf-chartcard__xaxis {
  position: relative;
  height: 13px;
  margin-top: 9px;
}
.hf-page #productivity .hf-chartcard__xtick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Leaderboard card — team column is IDENTICAL to Solution 1's Teams table
   (full avatar group + name, same spacing + row hover via .hf-mtbl). No headers. */
.hf-page #productivity .hf-tcard--board .hf-tcard__head { padding-bottom: 6px; }
.hf-page #productivity .hf-mtbl.hf-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  padding: 0 12px 10px;
  min-height: 0;
}
/* Reuse the hf-mtbl row grid but retarget the 3 columns: team | impact | roi.
   Team is a fixed width so columns stay aligned across rows; impact + roi are
   flexible and spread to fill the rest of the card width. */
.hf-page #productivity .hf-mtbl.hf-board .hf-mtbl__tr {
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.hf-page #productivity .hf-board__impact {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.2;
  text-align: right;
}
.hf-page #productivity .hf-board__val {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success-700);
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-board__metric {
  font-size: 10.5px;
  color: var(--color-text-quaternary);
  white-space: nowrap;
}
.hf-page #productivity .hf-board__roi {
  justify-content: flex-end;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.hf-page #productivity .hf-tcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 10px;
}
.hf-page #productivity .hf-tcard__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}
.hf-page #productivity .hf-tcard__more { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #productivity .hf-tcard__tabs {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #productivity .hf-tcard__tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 9px;
  margin: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.hf-page #productivity .hf-tcard__tab.is-active {
  color: var(--color-brand-600);
  font-weight: 600;
}
.hf-page #productivity .hf-tcard__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-600);
}

/* Compact table inside the cards */
.hf-page #productivity .hf-mtbl { padding: 4px 16px 6px; }
.hf-page #productivity .hf-mtbl__head,
.hf-page #productivity .hf-mtbl__tr {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 28px minmax(0, 1.1fr);
  align-items: center;
  gap: 9px;
}
.hf-page #productivity .hf-mtbl__head {
  padding: 8px 0 6px;
}
.hf-page #productivity .hf-mtbl__th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}
.hf-page #productivity .hf-mtbl__tr {
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background 140ms ease;
}
.hf-page #productivity .hf-mtbl__tr:hover { background: var(--color-bg-secondary); }
.hf-page #productivity .hf-mtbl__td {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #productivity .hf-mtbl__c-num { justify-content: flex-end; font-weight: 500; }
.hf-page #productivity .hf-mtbl__c-name { gap: 8px; }
.hf-page #productivity .hf-mtbl__c-team { gap: 10px; }
.hf-page #productivity .hf-mtbl__avatar { width: 22px; height: 22px; font-size: 10px; }
.hf-page #productivity .hf-mtbl__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #productivity .hf-mtbl__c-bar { gap: 8px; }
.hf-page #productivity .hf-mtbl__c-tool { justify-content: flex-start; }
.hf-page #productivity .hf-mtbl__c-int { justify-content: flex-end; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-page #productivity .hf-toollogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.hf-page #productivity .hf-mtbl__bar { flex: 1; min-width: 18px; height: 6px; }
.hf-page #productivity .hf-mtbl__bar-fill { background: var(--color-brand-500); display: block; height: 100%; border-radius: 999px; }
.hf-page #productivity .hf-mtbl__pct {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* Avatar group (overlapping member dots + overflow chip) */
.hf-page #productivity .hf-avgroup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hf-page #productivity .hf-avgroup__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  margin-right: -7px;
  background: var(--color-bg-secondary);
}
.hf-page #productivity .hf-avgroup__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  box-shadow: 0 0 0 2px var(--color-bg-primary);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── Action needed widget (priority groups) ───────────────────────── */
.hf-page #productivity .hf-action { padding: 6px 16px 8px; }
.hf-page #productivity .hf-action__group { border-top: 1px solid var(--color-border-secondary); }
.hf-page #productivity .hf-action__group:first-child { border-top: none; }
.hf-page #productivity .hf-action__grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}
.hf-page #productivity .hf-action__bullet {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hf-page #productivity .hf-action__bullet--high { background: var(--color-error-500); }
.hf-page #productivity .hf-action__bullet--medium { background: var(--color-warning-500, #F79009); }
.hf-page #productivity .hf-action__bullet--low { background: var(--color-brand-500); }
.hf-page #productivity .hf-action__grouplabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-page #productivity .hf-action__groupcount {
  font-size: 12.5px;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-action__chev { color: var(--color-text-quaternary); margin-left: auto; }
.hf-page #productivity .hf-action__rows { padding-bottom: 4px; }
.hf-page #productivity .hf-action__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background 140ms ease;
}
.hf-page #productivity .hf-action__row:hover { background: var(--color-bg-secondary); }
.hf-page #productivity .hf-action__avatar { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.hf-page #productivity .hf-action__info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.hf-page #productivity .hf-action__team {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #productivity .hf-action__reason {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #productivity .hf-action__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tool avatars */
.hf-page #productivity .hf-uitbl__avatar[data-team="copilot"] { background: var(--color-neutral-800); }
.hf-page #productivity .hf-uitbl__avatar[data-team="cursor"]  { background: var(--color-neutral-900); }
.hf-page #productivity .hf-uitbl__avatar[data-team="chatgpt"] { background: var(--color-success-600); }
.hf-page #productivity .hf-uitbl__avatar[data-team="claude"]  { background: var(--color-brand-500); }

/* ── Teams table ───────────────────────────────────────────────────── */
.hf-page #productivity .hf-uitbl {
  width: 100%;
  font-family: var(--font-body, Inter, sans-serif);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;
}
.hf-page #productivity .hf-uitbl__head,
.hf-page #productivity .hf-uitbl__tr {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.5fr)
    minmax(86px, 0.8fr)
    minmax(60px, 0.5fr)
    minmax(150px, 1.4fr)
    minmax(96px, 0.7fr);
  gap: 16px;
  align-items: center;
  padding: 9px 16px;
}
.hf-page #productivity .hf-uitbl__head {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
  padding-top: 8px;
  padding-bottom: 8px;
}
.hf-page #productivity .hf-uitbl__th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #productivity .hf-uitbl__tr {
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #productivity .hf-uitbl__tr:last-child { border-bottom: none; }
.hf-page #productivity .hf-uitbl__td {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #productivity .hf-uitbl__col--team { gap: 10px; }
.hf-page #productivity .hf-uitbl__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.hf-page #productivity .hf-uitbl__avatar[data-team="mobile"]   { background: var(--color-brand-600); }
.hf-page #productivity .hf-uitbl__avatar[data-team="platform"] { background: var(--color-brand-400); }
.hf-page #productivity .hf-uitbl__avatar[data-team="data"]     { background: var(--color-neutral-500); }
.hf-page #productivity .hf-uitbl__avatar[data-team="growth"]   { background: var(--color-neutral-400); }
.hf-page #productivity .hf-uitbl__avatar[data-team="core"]     { background: var(--color-error-500); }
.hf-page #productivity .hf-uitbl__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #productivity .hf-uitbl__col--lic,
.hf-page #productivity .hf-uitbl__col--active,
.hf-page #productivity .hf-uitbl__col--inter {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hf-page #productivity .hf-uitbl__col--inter { justify-content: flex-start; }
.hf-page #productivity .hf-uitbl__col--bar { gap: 10px; }
.hf-page #productivity .hf-uitbl__bar {
  flex: 1;
  height: 7px;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.hf-page #productivity .hf-uitbl__bar-fill { height: 100%; border-radius: 999px; }
.hf-page #productivity .hf-uitbl__bar-fill--success { background: var(--color-success-500); }
.hf-page #productivity .hf-uitbl__bar-fill--brand   { background: var(--color-brand-500); }
.hf-page #productivity .hf-uitbl__bar-fill--neutral { background: var(--color-neutral-400); }
.hf-page #productivity .hf-uitbl__bar-fill--error   { background: var(--color-error-500); }
.hf-page #productivity .hf-uitbl__bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* ── Fade-to-white: dashboard dissolves into the page toward the bottom
   (and a touch on the right), like Linear's hero. ─────────────────── */
.hf-page #productivity .hf-bs__fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 52%, var(--color-bg-primary) 96%),
    linear-gradient(90deg, transparent 70%, color-mix(in oklab, var(--color-bg-primary) 45%, transparent) 100%);
}

/* ── Floating cards on top of the dashboard ───────────────────────── */
.hf-page #productivity .hf-fcard {
  position: absolute;
  z-index: 5;
  background: var(--color-bg-primary);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, 0.04),
    var(--shadow-dashboard);
}
/* Card 1 — adoption trend (lower-left, overhanging the wrapper's left edge) */
.hf-page #productivity .hf-fcard--chart {
  left: -8px;
  right: auto;
  bottom: auto;
  top: 140px;
  width: 318px;
  padding: 16px 18px 14px;
}
.hf-page #productivity .hf-fcard__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #productivity .hf-fcard__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px;
}
.hf-page #productivity .hf-fcard__value {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-fcard__unit { font-size: 22px; color: var(--color-text-tertiary); letter-spacing: -0.5px; }
.hf-page #productivity .hf-fcard__delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success-700);
  background: var(--color-success-50);
  box-shadow: inset 0 0 0 1px var(--color-success-200);
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hf-page #productivity .hf-fcard__chart { display: block; width: 100%; height: 64px; margin-top: 2px; }
.hf-page #productivity .hf-fcard__caption {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  margin-top: 8px;
}

/* Card 2 — insight (upper-right, overhanging the wrapper's right edge) */
.hf-page #productivity .hf-fcard--insight {
  right: -4px;
  top: 380px;
  width: 296px;
  padding: 15px 17px 14px;
}
.hf-page #productivity .hf-fcard__insight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.hf-page #productivity .hf-fcard__star {
  color: var(--color-brand-600);
  flex-shrink: 0;
}
.hf-page #productivity .hf-fcard__insight-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.hf-page #productivity .hf-fcard__team { font-weight: 600; color: var(--color-text-primary); }
.hf-page #productivity .hf-fcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-600);
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}
.hf-page #productivity .hf-fcard__cta:hover { gap: 9px; color: var(--color-brand-700); }


/* =========================================================================
   HOW IT WORKS — integration-conveyor illustration (v3 redesign of .hf-flow).
   AI tools ride in from the left, dev tools from the right; both slide UNDER
   the opaque, fixed-centre Axify hub and fade — appearing to vanish into the
   logo. Below, 3 connectors drop to Explore / Ask / Notify which spread down
   so the last chip reaches the bottom. All inside the 480px .hf-flow box.
   ========================================================================= */
.hf-page #how-it-works .hf-intflow {
  position: relative;
  /* Open layout: no card frame or fill behind the conveyor. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Header: title on the design-system display-lg token (48/60, -0.96px),
   sub-text on display-xs (24/32), vertically centred. */
.hf-page #how-it-works .hf-how__head-grid {
  align-items: center;
}
.hf-page #how-it-works .hf-how__head-grid h2 {
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-ls);
}
.hf-page #how-it-works .hf-how__head-grid p {
  font-size: var(--text-display-xs);
  line-height: var(--text-display-xs-lh);
}

/* ── Conveyor rail ── */
.hf-intflow__rail {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 150px;
  z-index: 2;
  /* fade the outer edges so tiles dissolve in/out at the sides */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* Travel distances measured from the hub centre (the fixed point). */
.hf-intflow__rail {
  --reach: 470px;   /* outer spawn point */
  --near: 46px;     /* slips behind the hub, where it's hidden */
}

.hf-intflow__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  box-shadow: 0 8px 20px rgba(17, 19, 24, 0.10), 0 1px 3px rgba(17, 19, 24, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  will-change: transform, opacity;
}
.hf-intflow__tile svg { width: 34px; height: 34px; }
.hf-intflow__tile--ai  { animation: hf-conv-left 8s linear infinite; }
.hf-intflow__tile--dev { animation: hf-conv-right 8s linear infinite; }

/* Constant size + constant velocity (a conveyor belt). Only opacity changes:
   tiles fade in from the masked outer edge and vanish as they pass BEHIND
   the opaque hub. No scaling. Vertical centring is handled by the tile's
   margin, so the animation only translates on X (no Y shift). Fade-in and
   fade-out are symmetric (10% of the cycle each). */
@keyframes hf-conv-left {
  0%   { opacity: 0; transform: translateX(calc(-1 * var(--reach))); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-1 * var(--near))); }
}
@keyframes hf-conv-right {
  0%   { opacity: 0; transform: translateX(var(--reach)); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--near)); }
}

/* ── Fixed-centre Axify hub (sits above the tiles so they vanish under it) ── */
.hf-intflow__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 142px;
  height: 142px;
  border-radius: 33px;
  background: #fbfbfc;
  border: 1px solid var(--color-border-secondary);
  /* Soft, mostly-vertical shadow — gentle on the sides. */
  box-shadow:
    0 12px 24px rgba(17, 19, 24, 0.10),
    0 2px 5px rgba(17, 19, 24, 0.04),
    -3px -3px 9px rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
/* White surface plate — inset to the inner container so the orange gradient
   shows as a band filling the whole gap between the two frames. */
.hf-intflow__hub::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 29px;
  background: #fbfbfc;
  z-index: 0;
}
/* Inner container frame — sits at the inner edge of the orange band so the
   gradient fills the gap between this border and the outer border. */
.hf-intflow__hub::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 29px;
  border: 1px solid var(--color-border-secondary);
  pointer-events: none;
  z-index: 1;
}
.hf-intflow__hub svg {
  width: 61px;
  height: 61px;
  color: var(--color-text-primary);
  position: relative;
  z-index: 1;
}

/* ── Connectors ── */
.hf-intflow__arrows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hf-intflow__path {
  fill: none;
  stroke: #E76F51;
  stroke-width: 1.6;
  stroke-dasharray: 4 8;
  opacity: 0.65;
  animation: hf-flow-dash 3s linear infinite;
}
.hf-intflow__chevron {
  fill: none;
  stroke: #E76F51;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* ── Outputs — a tight block (label + chips) anchored to the bottom so the
   last chip touches the container floor; even spacing, no stretched gap. ── */
.hf-intflow__outputs {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  z-index: 2;
}
.hf-intflow__out-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px 2px;
}
.hf-intflow__out-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
}
.hf-intflow__out-chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.hf-intflow__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  box-shadow: 0 2px 6px rgba(17, 19, 24, 0.05);
  white-space: nowrap;
}
.hf-intflow__chip-logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
}
.hf-intflow__chip-logo svg { width: 18px; height: 18px; }
.hf-intflow__chip-label {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}