/* Scoped bundle of the home-v3 (Hi-Fi) styles for feature pages that extend base.html.
   Generated 2026-10-22 from css/home-v3/*. :root -> .hf-page ; global html/body/a/button rules removed.
   Regenerate rather than edit by hand. */

/* ===== axify-tokens.css ===== */
/* =========================================================================
   Axify Design System — Colors & Type
   Source of truth: Untitled UI v8 PRO tokens (styles/theme.css from
   github.com/untitleduico/react + PRO components installed locally).
   Copied verbatim where possible; Axify-specific additions at the bottom.

   Naming conventions (STRICT — follow PRO exactly):
   - Neutrals are "neutral", NOT "gray"
   - State suffixes use underscore: _hover, _alt, _on-brand
   - Spelling: "skeuomorphic" (not "skeumorphic")
   - Semantic shade: text-primary, text-secondary, text-tertiary, text-quaternary
     + -primary/-secondary on error/warning/success/brand (e.g. text-error-primary)
   - Utility scale: color-utility-{hue}-{50..700} for chart series, tags, etc.
   ========================================================================= */

/* Inter — variable font (Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

.hf-page {
  /* ===================================================================
     FONT FAMILY
     =================================================================== */
  --font-body: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Single-typeface system: "mono" and "serif" aliases resolve to Inter so
     legacy var(--font-mono) / var(--font-serif) usages stay on-brand. Use
     size, weight, letter-spacing and tabular-nums for differentiation
     — never a second typeface. */
  --font-mono: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* ===================================================================
     TYPE SCALE (matches PRO theme.css exactly)
     =================================================================== */
  --text-xs: 12px;  --text-xs-lh: 18px;
  --text-sm: 14px;  --text-sm-lh: 20px;
  --text-md: 16px;  --text-md-lh: 24px;
  --text-lg: 18px;  --text-lg-lh: 28px;
  --text-xl: 20px;  --text-xl-lh: 30px;

  --text-display-xs: 24px;  --text-display-xs-lh: 32px;
  --text-display-sm: 30px;  --text-display-sm-lh: 38px;
  --text-display-md: 36px;  --text-display-md-lh: 44px; --text-display-md-ls: -0.72px;
  --text-display-ml: 40px;  --text-display-ml-lh: 40px; --text-display-ml-ls: -1.3px;  --text-display-ml-fw: 500;
  --text-display-lg: 48px;  --text-display-lg-lh: 60px; --text-display-lg-ls: -0.96px;
  --text-display-xl: 60px;  --text-display-xl-lh: 72px; --text-display-xl-ls: -1.2px;
  --text-display-2xl: 72px; --text-display-2xl-lh: 90px; --text-display-2xl-ls: -1.44px;

  /* ===================================================================
     CORE COLOR SCALES
     All hues match PRO v8. Axify overrides ONLY --color-brand-* below.
     =================================================================== */

  /* Universal */
  --color-transparent: rgb(0 0 0 / 0);
  --color-white: #ffffff;
  --color-black: #000000;
  --color-alpha-white: rgb(255 255 255);
  --color-alpha-black: rgb(0 0 0);

  /* BRAND — Axify blue (anchor: --color-brand-500 = #3B82F6 per brand owner)
     Scale retuned from the Tailwind blue family so contrast steps stay even. */
  --color-brand-25:  rgb(248 251 255); /* #F8FBFF */
  --color-brand-50:  rgb(239 246 255); /* #EFF6FF */
  --color-brand-100: rgb(219 234 254); /* #DBEAFE */
  --color-brand-200: rgb(191 219 254); /* #BFDBFE */
  --color-brand-300: rgb(147 197 253); /* #93C5FD */
  --color-brand-400: rgb(96 165 250);  /* #60A5FA */
  --color-brand-500: rgb(59 130 246);  /* #3B82F6 ← anchor */
  --color-brand-600: rgb(37 99 235);   /* #2563EB */
  --color-brand-700: rgb(29 78 216);   /* #1D4ED8 */
  --color-brand-800: rgb(30 64 175);   /* #1E40AF */
  --color-brand-900: rgb(30 58 138);   /* #1E3A8A */

  /* PRO — Axify Pro / SEI tier (anchor: --color-pro-500 = #E76F51)
     Warm coral. Used as a counter-temperature signal to tag premium-tier
     features and frame Pro sections so they read distinctly from the
     core (blue) product. Pairs with brand blue on heroes and CTAs. */
  --color-pro-25:  rgb(255 248 245); /* #FFF8F5 */
  --color-pro-50:  rgb(252 238 232); /* #FCEEE8 */
  --color-pro-100: rgb(250 217 205); /* #FAD9CD */
  --color-pro-200: rgb(244 181 160); /* #F4B5A0 */
  --color-pro-300: rgb(238 146 119); /* #EE9277 */
  --color-pro-400: rgb(234 126 93);  /* #EA7E5D */
  --color-pro-500: rgb(231 111 81);  /* #E76F51 ← anchor */
  --color-pro-600: rgb(216 91 61);   /* #D85B3D */
  --color-pro-700: rgb(177 69 40);   /* #B14528 */
  --color-pro-800: rgb(130 50 28);   /* #82321C */
  --color-pro-900: rgb(74 28 16);    /* #4A1C10 */
  --color-brand-950: rgb(23 37 84);    /* #172554 */

  /* DECK PALETTE — authentic colors from the Axify "AI-augmented SDLC" deck.
     Use these ONLY for slides / marketing hero-treatments, NOT product UI. */
  --color-deck-ink:         #1A1A2E; /* section headers, primary text on light */
  --color-deck-navy:        #1849A9; /* mid-tone accent blue on slides */
  --color-deck-cobalt:      #0036B6; /* deep accent */
  --color-deck-azure:       #3C78D8; /* bright accent used in diagrams */
  --color-deck-periwinkle:  #7A8FD0; /* muted accent / decorative */
  --color-deck-mist:        #EEF3F5; /* pale band background */
  --color-deck-fog:         #F4F6FB; /* very pale section band */
  --color-deck-cloud:       #A4C2F4; /* soft blue chip fill */

  /* NEUTRAL (PRO's canonical name — NOT "gray") */
  --color-neutral-25:  rgb(253 253 253);
  --color-neutral-50:  rgb(250 250 250); /* #FAFAFA */
  --color-neutral-100: rgb(245 245 245); /* #F5F5F5 */
  --color-neutral-200: rgb(229 229 229); /* #E5E5E5 */
  --color-neutral-300: rgb(212 212 212); /* #D4D4D4 */
  --color-neutral-400: rgb(163 163 163); /* #A3A3A3 */
  --color-neutral-500: rgb(115 115 115); /* #737373 */
  --color-neutral-600: rgb(82 82 82);    /* #525252 */
  --color-neutral-700: rgb(64 64 64);    /* #404040 */
  --color-neutral-800: rgb(38 38 38);    /* #262626 */
  --color-neutral-900: rgb(23 23 23);    /* #171717 */
  --color-neutral-950: rgb(10 10 10);    /* #0A0A0A */

  /* Semantic hues — PRO canonical names are RED / YELLOW / GREEN
     (`success/warning/error` below are kept as aliases for legacy) */
  --color-green-25:  rgb(246 254 249);
  --color-green-50:  rgb(236 253 243);
  --color-green-100: rgb(220 250 230);
  --color-green-200: rgb(171 239 198);
  --color-green-300: rgb(117 224 167);
  --color-green-400: rgb(71 205 137);
  --color-green-500: rgb(23 178 106);
  --color-green-600: rgb(7 148 85);
  --color-green-700: rgb(6 118 71);
  --color-green-800: rgb(8 93 58);
  --color-green-900: rgb(7 75 48);
  --color-green-950: rgb(5 49 33);

  --color-yellow-25:  rgb(255 252 245);
  --color-yellow-50:  rgb(255 250 235);
  --color-yellow-100: rgb(254 240 199);
  --color-yellow-200: rgb(254 223 137);
  --color-yellow-300: rgb(254 200 75);
  --color-yellow-400: rgb(253 176 34);
  --color-yellow-500: rgb(247 144 9);
  --color-yellow-600: rgb(220 104 3);
  --color-yellow-700: rgb(181 71 8);
  --color-yellow-800: rgb(147 55 13);
  --color-yellow-900: rgb(122 46 14);
  --color-yellow-950: rgb(78 29 5);

  --color-red-25:  rgb(255 251 250);
  --color-red-50:  rgb(254 243 242);
  --color-red-100: rgb(254 228 226);
  --color-red-200: rgb(254 205 202);
  --color-red-300: rgb(253 162 155);
  --color-red-400: rgb(249 112 102);
  --color-red-500: rgb(240 68 56);
  --color-red-600: rgb(217 45 32);
  --color-red-700: rgb(180 35 24);
  --color-red-800: rgb(145 32 24);
  --color-red-900: rgb(122 39 26);
  --color-red-950: rgb(85 22 12);

  /* LEGACY ALIASES for success/warning/error palette names.
     These are NOT PRO tokens — PRO uses red/yellow/green as the primitive hue.
     Keep for transition, then prefer --color-red/yellow/green-* directly.
     (Semantic tokens below like --color-text-error-primary ARE PRO-correct.) */
  --color-success-25:  var(--color-green-25);
  --color-success-50:  var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-success-950: var(--color-green-950);

  --color-warning-25:  var(--color-yellow-25);
  --color-warning-50:  var(--color-yellow-50);
  --color-warning-100: var(--color-yellow-100);
  --color-warning-200: var(--color-yellow-200);
  --color-warning-300: var(--color-yellow-300);
  --color-warning-400: var(--color-yellow-400);
  --color-warning-500: var(--color-yellow-500);
  --color-warning-600: var(--color-yellow-600);
  --color-warning-700: var(--color-yellow-700);
  --color-warning-800: var(--color-yellow-800);
  --color-warning-900: var(--color-yellow-900);
  --color-warning-950: var(--color-yellow-950);

  --color-error-25:  var(--color-red-25);
  --color-error-50:  var(--color-red-50);
  --color-error-100: var(--color-red-100);
  --color-error-200: var(--color-red-200);
  --color-error-300: var(--color-red-300);
  --color-error-400: var(--color-red-400);
  --color-error-500: var(--color-red-500);
  --color-error-600: var(--color-red-600);
  --color-error-700: var(--color-red-700);
  --color-error-800: var(--color-red-800);
  --color-error-900: var(--color-red-900);
  --color-error-950: var(--color-red-950);

  /* Extra hues used by utility scale (subset — expand as needed) */
  --color-blue-50:   rgb(239 248 255);
  --color-blue-400:  rgb(83 177 253);
  --color-blue-500:  rgb(46 144 250);
  --color-blue-600:  rgb(21 112 239);
  --color-blue-700:  rgb(23 92 211);

  --color-indigo-50:  rgb(238 244 255);
  --color-indigo-500: rgb(99 102 241);
  --color-indigo-600: rgb(82 88 221);

  --color-purple-50:  rgb(244 243 255);
  --color-purple-500: rgb(122 90 248);
  --color-purple-600: rgb(105 56 239);

  --color-fuchsia-500: rgb(217 70 239);
  --color-pink-500:    rgb(238 70 188);
  --color-orange-500:  rgb(239 104 32);
  --color-teal-500:    rgb(21 183 158);
  --color-cyan-500:    rgb(6 174 212);

  /* ===================================================================
     SEMANTIC TOKENS — TEXT
     (matches PRO theme.css exactly)
     =================================================================== */
  --color-text-primary:               var(--color-neutral-900);
  --color-text-secondary:             var(--color-neutral-700);
  --color-text-secondary_hover:       var(--color-neutral-800);
  --color-text-tertiary:              var(--color-neutral-600);
  --color-text-tertiary_hover:        var(--color-neutral-700);
  --color-text-quaternary:            var(--color-neutral-500);
  --color-text-placeholder:           var(--color-neutral-500);
  --color-text-white:                 var(--color-white);

  --color-text-primary_on-brand:      var(--color-white);
  --color-text-secondary_on-brand:    var(--color-brand-200);
  --color-text-tertiary_on-brand:     var(--color-brand-200);
  --color-text-quaternary_on-brand:   var(--color-brand-300);

  --color-text-brand-primary:         var(--color-brand-900);
  --color-text-brand-secondary:       var(--color-brand-700);
  --color-text-brand-secondary_hover: var(--color-brand-800);
  --color-text-brand-tertiary:        var(--color-brand-600);
  --color-text-brand-tertiary_alt:    var(--color-brand-600);

  --color-text-error-primary:         var(--color-red-600);
  --color-text-error-primary_hover:   var(--color-red-700);
  --color-text-warning-primary:       var(--color-yellow-600);
  --color-text-success-primary:       var(--color-green-600);

  /* ===================================================================
     SEMANTIC TOKENS — BORDER
     =================================================================== */
  --color-border-primary:       var(--color-neutral-300);
  --color-border-secondary:     var(--color-neutral-200);
  --color-border-secondary_alt: rgb(0 0 0 / 0.1);
  --color-border-tertiary:      var(--color-neutral-100);
  --color-border-brand:         var(--color-brand-500);
  --color-border-brand_alt:     var(--color-brand-600);
  --color-border-error:         var(--color-red-500);
  --color-border-error_subtle:  var(--color-red-300);

  /* ===================================================================
     SEMANTIC TOKENS — FOREGROUND (icons, dividers)
     =================================================================== */
  --color-fg-primary:               var(--color-neutral-900);
  --color-fg-secondary:             var(--color-neutral-700);
  --color-fg-secondary_hover:       var(--color-neutral-800);
  --color-fg-tertiary:              var(--color-neutral-600);
  --color-fg-tertiary_hover:        var(--color-neutral-700);
  --color-fg-quaternary:            var(--color-neutral-400);
  --color-fg-quaternary_hover:      var(--color-neutral-500);
  --color-fg-white:                 var(--color-white);

  --color-fg-brand-primary:         var(--color-brand-600);
  --color-fg-brand-primary_alt:     var(--color-brand-600);
  --color-fg-brand-secondary:       var(--color-brand-500);
  --color-fg-brand-secondary_alt:   var(--color-brand-500);
  --color-fg-brand-secondary_hover: var(--color-brand-600);

  --color-fg-error-primary:   var(--color-red-600);
  --color-fg-error-secondary: var(--color-red-500);
  --color-fg-warning-primary: var(--color-yellow-600);
  --color-fg-warning-secondary: var(--color-yellow-500);
  --color-fg-success-primary: var(--color-green-600);
  --color-fg-success-secondary: var(--color-green-500);

  /* ===================================================================
     SEMANTIC TOKENS — BACKGROUND
     =================================================================== */
  --color-bg-primary:              var(--color-white);
  --color-bg-primary_alt:          var(--color-white);
  --color-bg-primary_hover:        var(--color-neutral-50);
  --color-bg-primary-solid:        var(--color-neutral-950);

  --color-bg-secondary:            var(--color-neutral-50);
  --color-bg-secondary_alt:        var(--color-neutral-50);
  --color-bg-secondary_hover:      var(--color-neutral-100);
  --color-bg-secondary-solid:      var(--color-neutral-600);

  --color-bg-tertiary:             var(--color-neutral-100);
  --color-bg-quaternary:           var(--color-neutral-200);

  --color-bg-brand-primary:        var(--color-brand-50);
  --color-bg-brand-primary_alt:    var(--color-brand-50);
  --color-bg-brand-secondary:      var(--color-brand-100);
  --color-bg-brand-solid:          var(--color-brand-600);
  --color-bg-brand-solid_hover:    var(--color-brand-700);
  --color-bg-brand-section:        var(--color-brand-800);
  --color-bg-brand-section_subtle: var(--color-brand-700);

  --color-bg-error-primary:        var(--color-red-50);
  --color-bg-error-secondary:      var(--color-red-100);
  --color-bg-error-solid:          var(--color-red-600);
  --color-bg-error-solid_hover:    var(--color-red-700);

  --color-bg-warning-primary:      var(--color-yellow-50);
  --color-bg-warning-secondary:    var(--color-yellow-100);
  --color-bg-warning-solid:        var(--color-yellow-600);

  --color-bg-success-primary:      var(--color-green-50);
  --color-bg-success-secondary:    var(--color-green-100);
  --color-bg-success-solid:        var(--color-green-600);

  --color-bg-overlay:              var(--color-neutral-950);

  /* ===================================================================
     MARKETING SURFACES — brand-tinted backgrounds for landing pages
     (use only on axify.io / marketing pages, NOT product UI)
     =================================================================== */
  --color-bg-marketing-canvas:     var(--color-white);
  --color-bg-marketing-band:       var(--color-neutral-50);   /* alternating section band */
  --color-bg-marketing-band-tint:  var(--color-brand-25);     /* very pale brand wash */
  --color-bg-marketing-cta:        var(--color-brand-700);    /* solid CTA band — was Untitled purple */
  --color-bg-marketing-cta-deep:   var(--color-brand-800);    /* dark CTA / footer band */
  --color-bg-marketing-footer:     var(--color-neutral-950);  /* dark footer */
  --color-text-eyebrow:            var(--color-brand-700);    /* small caps category label above headings */
  --color-text-on-marketing-cta:   var(--color-white);
  --color-text-on-marketing-cta_subtle: var(--color-brand-200);

  /* ===================================================================
     UTILITY COLORS (for charts, tags, status dots — full PRO scale)
     =================================================================== */
  --color-utility-brand-50:  var(--color-brand-50);
  --color-utility-brand-100: var(--color-brand-100);
  --color-utility-brand-200: var(--color-brand-200);
  --color-utility-brand-300: var(--color-brand-300);
  --color-utility-brand-400: var(--color-brand-400);
  --color-utility-brand-500: var(--color-brand-500);
  --color-utility-brand-600: var(--color-brand-600);
  --color-utility-brand-700: var(--color-brand-700);

  --color-utility-neutral-50:  var(--color-neutral-50);
  --color-utility-neutral-100: var(--color-neutral-100);
  --color-utility-neutral-200: var(--color-neutral-200);
  --color-utility-neutral-300: var(--color-neutral-300);
  --color-utility-neutral-400: var(--color-neutral-400);
  --color-utility-neutral-500: var(--color-neutral-500);
  --color-utility-neutral-600: var(--color-neutral-600);
  --color-utility-neutral-700: var(--color-neutral-700);

  --color-utility-success-50:  var(--color-green-50);
  --color-utility-success-500: var(--color-green-500);
  --color-utility-success-600: var(--color-green-600);
  --color-utility-error-50:    var(--color-red-50);
  --color-utility-error-500:   var(--color-red-500);
  --color-utility-error-600:   var(--color-red-600);
  --color-utility-warning-50:  var(--color-yellow-50);
  --color-utility-warning-500: var(--color-yellow-500);

  /* ===================================================================
     COMPONENT COLORS (subset — expand as PRO components need them)
     =================================================================== */
  --color-focus-ring:       var(--color-brand-500);
  --color-focus-ring-error: var(--color-red-500);

  --color-featured-icon-light-fg-brand:   var(--color-brand-600);
  --color-featured-icon-light-fg-gray:    var(--color-neutral-500);
  --color-featured-icon-light-fg-error:   var(--color-red-600);
  --color-featured-icon-light-fg-success: var(--color-green-600);
  --color-featured-icon-light-fg-warning: var(--color-yellow-600);

  --color-tooltip-supporting-text: var(--color-neutral-300);

  --color-slider-handle-bg:     var(--color-white);
  --color-slider-handle-border: var(--color-brand-600);

  --color-toggle-border: var(--color-neutral-300);

  --color-icon-fg-brand:           var(--color-brand-600);
  --color-icon-fg-brand_on-brand:  var(--color-brand-200);

  --color-app-store-badge-border: rgb(166 166 166);

  /* ===================================================================
     RADII (matches PRO default Tailwind radius scale)
     =================================================================== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-4xl:  32px;
  --radius-full: 9999px;

  /* ===================================================================
     SPACING (4px grid — matches PRO --spacing in theme.css)
     =================================================================== */
  --spacing-0:    0;
  --spacing-0_5:  2px;
  --spacing-1:    4px;
  --spacing-1_5:  6px;
  --spacing-2:    8px;
  --spacing-2_5:  10px;
  --spacing-3:    12px;
  --spacing-4:    16px;
  --spacing-5:    20px;
  --spacing-6:    24px;
  --spacing-8:    32px;
  --spacing-10:   40px;
  --spacing-12:   48px;
  --spacing-16:   64px;
  --spacing-20:   80px;
  --spacing-24:   96px;
  --spacing-32:   128px;
  --spacing-40:   160px;

  /* ===================================================================
     MARKETING PAGE LAYOUT (Untitled UI marketing block conventions)
     Used for axify.io landing pages — NOT for product UI.
     =================================================================== */
  --container-marketing:    1280px;  /* outer max-width on desktop */
  --container-marketing-sm:  768px;  /* narrow text columns (heros, eyebrows) */
  --container-marketing-md: 1216px;  /* breakout media inside a 1280 container */
  --gutter-marketing-desktop: 32px;
  --gutter-marketing-mobile:  16px;
  --section-pad-y-desktop:    96px;  /* top/bottom padding of a marketing section */
  --section-pad-y-mobile:     64px;
  --section-gap:              96px;  /* vertical rhythm between stacked sections */
  --hero-pad-y-desktop:      120px;  /* hero is taller than a normal section */
  --hero-pad-y-mobile:        80px;

  /* ===================================================================
     SHADOWS (matches PRO theme.css exactly — spelling: SKEUOMORPHIC)
     =================================================================== */
  --shadow-xs:  0px 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:  0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.18), 0px 4px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.14), 0px 5px 5px -2.5px rgba(0, 0, 0, 0.04);

  /* Floating product-dashboard elevation (referenced as --shadow-dashboard
     by the hero/illustration prompt). */
  --shadow-dashboard: 0px 32px 64px -16px rgba(16, 24, 40, 0.20), 0px 8px 24px -8px rgba(16, 24, 40, 0.10);

  --shadow-skeuomorphic:    0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.05) inset;
  --shadow-xs-skeuomorphic: var(--shadow-skeuomorphic), var(--shadow-xs);

  --shadow-ring-brand:       0px 0px 0px 4px rgba(59, 130, 246, 0.24);
  --shadow-ring-error:       0px 0px 0px 4px rgba(240, 68, 56, 0.24);

  /* ===================================================================
     ANIMATIONS
     =================================================================== */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:  linear;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* ===================================================================
     LEGACY ALIASES (DO NOT USE IN NEW CODE)
     Kept so existing axify-app/*.jsx files don't break during migration.
     Remove once `ui_kits/axify-app/` is fully migrated to PRO token names.
     =================================================================== */
  --color-gray-25:  var(--color-neutral-25);
  --color-gray-50:  var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-neutral-900);
  --color-gray-950: var(--color-neutral-950);

  /* Old misspelled keys — typo kept as alias for older files */
  --shadow-skeumorphic:    var(--shadow-skeuomorphic);
  --shadow-xs-skeumorphic: var(--shadow-xs-skeuomorphic);
}

/* =========================================================================
   Base elements — semantic typography
   ========================================================================= */



/* Display (marketing / hero) */
.ds-display-2xl { font-size: var(--text-display-2xl); line-height: var(--text-display-2xl-lh); letter-spacing: var(--text-display-2xl-ls); font-weight: 600; }
.ds-display-xl  { font-size: var(--text-display-xl);  line-height: var(--text-display-xl-lh);  letter-spacing: var(--text-display-xl-ls);  font-weight: 600; }
.ds-display-lg  { font-size: var(--text-display-lg);  line-height: var(--text-display-lg-lh);  letter-spacing: var(--text-display-lg-ls);  font-weight: 600; }
.ds-display-md  { font-size: var(--text-display-md);  line-height: var(--text-display-md-lh);  letter-spacing: var(--text-display-md-ls);  font-weight: 600; }
.ds-display-ml  { 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); }
.ds-display-sm  { font-size: var(--text-display-sm);  line-height: var(--text-display-sm-lh);  font-weight: 600; }
.ds-display-xs  { font-size: var(--text-display-xs);  line-height: var(--text-display-xs-lh);  font-weight: 600; }

/* Headings */
h1 { font-size: var(--text-display-xs); line-height: var(--text-display-xs-lh); font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0; }
h2 { font-size: var(--text-xl); line-height: var(--text-xl-lh); font-weight: 600; color: var(--color-text-primary); margin: 0; }
h3 { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 600; color: var(--color-text-primary); margin: 0; }
h4 { font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 600; color: var(--color-text-primary); margin: 0; }

/* Body text */
.ds-text-xl { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
.ds-text-lg { font-size: var(--text-lg); line-height: var(--text-lg-lh); }
.ds-text-md { font-size: var(--text-md); line-height: var(--text-md-lh); }
.ds-text-sm { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.ds-text-xs { font-size: var(--text-xs); line-height: var(--text-xs-lh); }

p { font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--color-text-tertiary); margin: 0; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a:hover { color: var(--color-text-brand-secondary_hover); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border-secondary);
}

/* =========================================================================
   Marketing layout helpers (axify.io landing pages)
   Use .ds-section as the band wrapper, .ds-container as the centered column.
   ========================================================================= */
.ds-section {
  padding-top: var(--section-pad-y-mobile);
  padding-bottom: var(--section-pad-y-mobile);
  padding-left: var(--gutter-marketing-mobile);
  padding-right: var(--gutter-marketing-mobile);
  background: var(--color-bg-marketing-canvas);
}
@media (min-width: 768px) {
  .ds-section {
    padding-top: var(--section-pad-y-desktop);
    padding-bottom: var(--section-pad-y-desktop);
    padding-left: var(--gutter-marketing-desktop);
    padding-right: var(--gutter-marketing-desktop);
  }
}
.ds-section--band      { background: var(--color-bg-marketing-band); }
.ds-section--brand-tint{ background: var(--color-bg-marketing-band-tint); }
.ds-section--cta       { background: var(--color-bg-marketing-cta);      color: var(--color-text-on-marketing-cta); }
.ds-section--cta-deep  { background: var(--color-bg-marketing-cta-deep); color: var(--color-text-on-marketing-cta); }
.ds-section--footer    { background: var(--color-bg-marketing-footer);   color: var(--color-text-on-marketing-cta); }
.ds-section--hero {
  padding-top: var(--hero-pad-y-mobile);
  padding-bottom: var(--hero-pad-y-mobile);
}
@media (min-width: 768px) {
  .ds-section--hero {
    padding-top: var(--hero-pad-y-desktop);
    padding-bottom: var(--hero-pad-y-desktop);
  }
}

.ds-container {
  max-width: var(--container-marketing);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.ds-container--narrow { max-width: var(--container-marketing-sm); }
.ds-container--wide   { max-width: var(--container-marketing-md); }

/* Eyebrow — small caps brand-tinted label above section headings */
.ds-eyebrow {
  display: inline-block;
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
  font-weight: 600;
  color: var(--color-text-eyebrow);
  margin-bottom: var(--spacing-3);
}

/* ===== hifi-styles.css ===== */
/* =========================================================================
   Axify Homepage Hi-Fi — page-level styles
   Builds on axify-tokens.css. Component visuals live in JSX.
   ========================================================================= */

* { box-sizing: border-box; }




/* =========================================================================
   PAGE-LEVEL NARRATIVE GRADIENT (Option B)
   A single vertical gradient painted on the page acts as the story's "paper".
   Sections sit transparent on top, so the eye reads the whole page as one
   continuous ribbon of colour drifting from warm cream (hero) → cool brand
   tint (problem/cost) → warm cream again (social/CTA). The Impact section
   keeps its opaque dark band — that's the dramatic rupture in the middle.
   ========================================================================= */
.hf-page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(
      180deg,
      #FAF7F2 0%,    /* Hero — warm cream, opening */
      #F8F6F2 10%,
      #F4F4F1 22%,   /* Problem / Adoption — drifting cooler */
      #EFF1F4 36%,
      #ECF0F6 48%,   /* Cost trio — coolest, brand-tinted */
      #EEF1F6 58%,   /* Approach to Impact (covered by dark band ~60-70%) */
      #F0F0EC 74%,   /* Out of Impact — warming back up */
      #F5F1EA 86%,   /* Social — warm, human */
      #FAF5ED 100%   /* Final CTA — warmest, ready */
    );
}

/* Section wrapper */
.hf-section {
  position: relative;
  width: 100%;
}
/* The "white" and "band" tints become transparent — the page gradient shows
   through. Cards, devices, and MCP panels keep their own opaque white fills,
   so the hierarchy "ambient gradient / structured content surface" reads. */
.hf-section--white,
.hf-section--band  { background: transparent; }
.hf-section--ink   { background: var(--color-deck-ink); color: var(--color-white); }

/* The closing sections (Social + Final CTA) opt out of the gradient — they
   sit on a clean opaque surface so the page resolves to a calm finish.
   Social fades band → white over its lower half so the seam into CTA
   disappears. */
#social.hf-section {
  background: linear-gradient(
    180deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-secondary) 55%,
    var(--color-bg-primary) 100%
  );
}
#cta.hf-section    { background: var(--color-bg-primary); }.hf-section__inner {
  max-width: 1436px;
  margin: 0 auto;
  padding: 96px 46px;
}
.hf-section--narrow .hf-section__inner { max-width: 1280px; }
.hf-section--tight  .hf-section__inner { padding: 56px 46px; }

/* Eyebrow */
.hf-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-brand-tertiary);
  margin-bottom: 16px;
  text-transform: none;
}
.hf-eyebrow--muted { color: var(--color-text-tertiary); }
.hf-eyebrow--cloud { color: var(--color-deck-cloud); }

/* Display headlines */
.hf-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--color-text-primary);
  margin: 0;
}
.hf-display--xl { font-size: clamp(48px, 6vw, 76px); }
.hf-display--lg { font-size: 56px; line-height: 1.08; margin: 0 0 24px; }
.hf-display--md { font-size: 44px; line-height: 1.1; }

/* Lede */
.hf-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin: 0;
}
.hf-lede--lg { font-size: 21px; }

/* Inline accent */
.hf-accent { color: var(--color-text-brand-tertiary); }
.hf-on-ink .hf-accent { color: var(--color-brand-300); }

/* Pill / chip */
.hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 9999px;
  box-shadow: var(--shadow-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.hf-pill__tag {
  padding: 2px 8px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

/* Buttons */
.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 120ms ease;
}
.hf-btn--md { padding: 10px 16px; font-size: 14px; }
.hf-btn--lg { padding: 12px 20px; font-size: 15px; }
.hf-btn--xl { padding: 14px 22px; font-size: 16px; }
.hf-btn--primary {
  background: var(--color-bg-brand-solid);
  color: var(--color-text-white);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.hf-btn--primary:hover { background: var(--color-bg-brand-solid_hover); }
.hf-btn--secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-primary), var(--shadow-xs-skeuomorphic);
}
.hf-btn--secondary:hover { background: var(--color-bg-primary_hover); }
.hf-btn--tertiary {
  background: transparent;
  color: var(--color-text-tertiary);
}
.hf-btn--tertiary:hover { color: var(--color-text-secondary); background: var(--color-bg-primary_hover); }
.hf-btn--brand-on-dark {
  background: var(--color-brand-500);
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(59,130,246,0.35);
}
.hf-btn--brand-on-dark:hover { background: var(--color-brand-400); }
.hf-btn--ghost-on-dark {
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: 12px 20px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.hf-btn--ghost-on-dark:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Card */
.hf-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.hf-card--ink {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-white);
}

/* Mono label */
.hf-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}

/* Hero radial glow */
.hf-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -10%, var(--color-brand-50) 0%, transparent 55%);
  pointer-events: none;
}

/* Numbers — tabular */
.hf-num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   HERO · Orchestrated MCP → Dashboard
   ========================================================================= */
.hf-hero-orch {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: stretch;
  text-align: left;
}

/* MCP chat panel */
.hf-mcp {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.hf-mcp__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Chat header */
.hf-mcp__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-secondary);
  margin-bottom: 4px;
}
.hf-mcp__avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
  display: flex; align-items: center; justify-content: center;
}
.hf-mcp__header-text { flex: 1; }
.hf-mcp__header-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.hf-mcp__header-name-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  margin-left: 4px;
}
.hf-mcp__header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.hf-mcp__status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-success-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 20%, transparent);
}
.hf-mcp__header-menu {
  font-size: 18px;
  color: var(--color-text-quaternary);
  cursor: default;
  padding: 4px 8px;
}

/* Body holds turns + thinking */
.hf-mcp__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 340px;
  overflow: hidden;
}

/* Faded previous turn */
.hf-mcp__bubble--faded {
  opacity: 0.4;
  font-size: 13px;
  padding: 10px 12px;
}
.hf-mcp__bubble--faded .hf-mcp__text { font-size: 13px; }

/* Thinking / tool calls */
.hf-mcp__thinking {
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-primary);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: hf-bubble-in 200ms ease;
}
.hf-mcp__thinking-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.hf-mcp__thinking-dots {
  display: inline-flex;
  gap: 3px;
}
.hf-mcp__thinking-dots span {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--color-text-brand-tertiary);
  animation: hf-tdots 1.2s ease-in-out infinite;
}
.hf-mcp__thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.hf-mcp__thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hf-tdots {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.hf-mcp__tool-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 2px 0;
  animation: hf-bubble-in 220ms ease;
}
.hf-mcp__tool-check {
  color: var(--color-success-600);
  font-weight: 700;
  width: 14px;
  display: inline-flex;
  justify-content: center;
}
.hf-mcp__tool-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid var(--color-border-primary);
  border-top-color: var(--color-brand-500);
  border-radius: 999px;
  animation: hf-spin 0.7s linear infinite;
}
@keyframes hf-spin { to { transform: rotate(360deg); } }
.hf-mcp__tool-step--active { color: var(--color-text-primary); font-weight: 500; }

/* Device filters */
.hf-device__filters {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.hf-device__filter {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
}
.hf-device__filter.is-active {
  color: var(--color-text-brand-secondary);
  background: var(--color-brand-50);
  border-color: var(--color-brand-200);
}

/* Stat row */
.hf-statrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 14px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 10px;
  margin-bottom: 16px;
}
.hf-statrow__item { display: flex; flex-direction: column; gap: 2px; }
.hf-statrow__num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.hf-statrow__lbl {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}
.hf-mcp__bubble {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  animation: hf-bubble-in 240ms ease;
}
@keyframes hf-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hf-mcp__bubble--you {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
}
.hf-mcp__bubble--axify {
  background: var(--color-brand-50);
  color: var(--color-text-primary);
  border: 1px solid var(--color-brand-100);
}
.hf-mcp__speaker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hf-mcp__bubble--axify .hf-mcp__speaker { color: var(--color-text-brand-tertiary); }
.hf-mcp__text { color: var(--color-text-primary); }
.hf-mcp__accent {
  color: var(--color-text-brand-tertiary);
  font-weight: 600;
}
.hf-mcp__cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--color-text-brand-tertiary);
  vertical-align: -2px;
  margin-left: 2px;
  animation: hf-blink 1.05s steps(2) infinite;
}
@keyframes hf-blink { 50% { opacity: 0; } }

.hf-mcp__dots {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.hf-mcp__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-border-primary);
  transition: background 200ms ease, width 200ms ease;
}
.hf-mcp__dot.is-active {
  background: var(--color-brand-500);
  width: 18px;
}

/* Dashboard device */
.hf-device {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 16px;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hf-device__topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-device__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--color-bg-quaternary);
}
.hf-device__dot:nth-child(1) { background: #FF6058; }
.hf-device__dot:nth-child(2) { background: #FFBD2E; }
.hf-device__dot:nth-child(3) { background: #28CA42; }
.hf-device__url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.hf-device__body { padding: 20px 24px 24px; flex: 1; min-height: 340px; display: flex; flex-direction: column; }
.hf-device__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.hf-device__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  animation: hf-swap 360ms ease;
}
.hf-device__ruler {
  height: 1px;
  background: var(--color-border-secondary);
  margin: 8px 0 20px;
}
.hf-device__chart { animation: hf-swap 420ms ease; }
@keyframes hf-swap {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hf-device__foot {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 12px;
}

/* Bars */
.hf-bars {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  gap: 10px 14px;
  align-items: center;
}
.hf-bars__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.hf-bars__track {
  height: 10px;
  background: var(--color-bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}
.hf-bars__fill {
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
  animation: hf-bar-in 700ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes hf-bar-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hf-bars__fill--lead   { background: var(--color-brand-600); }
.hf-bars__fill--good   { background: var(--color-brand-500); }
.hf-bars__fill--muted  { background: var(--color-brand-200); }
.hf-bars__val {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: right;
}

/* Cost donut */
.hf-cost {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
  padding: 8px 0;
}
.hf-cost__donut { position: relative; width: 160px; height: 160px; }
.hf-cost__seg {
  transition: stroke-dasharray 700ms cubic-bezier(0.16,1,0.3,1),
              stroke-dashoffset 700ms cubic-bezier(0.16,1,0.3,1);
}
.hf-cost__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hf-cost__total {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.hf-cost__legend { display: flex; flex-direction: column; gap: 12px; }
.hf-cost__row {
  display: grid;
  grid-template-columns: 12px 18px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.hf-cost__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hf-cost__swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
}
.hf-cost__name { font-weight: 500; }
.hf-cost__amount {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* =========================================================================
   PROBLEM · Illustrated cards
   ========================================================================= */
.hf-illus-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.hf-illus-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hf-illus-card__art {
  position: relative;
  height: 160px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
}

/* Adoption · fog over bars */
.hf-illus__fog {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.55) 60%,
    rgba(255,255,255,0.30) 100%);
  backdrop-filter: blur(2px);
  transition: opacity 600ms ease, backdrop-filter 600ms ease;
}
.hf-illus-card:hover .hf-illus__fog {
  opacity: 0.15;
  backdrop-filter: blur(0);
}
.hf-illus__hint {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  z-index: 2;
}

/* Cost waste · idle seats */
.hf-seat-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--color-brand-500);
  display: inline-block;
}
.hf-seat-dot.is-idle { animation: hf-seat-fade 3s ease-in-out infinite; }
.hf-seat-dot--d1 { animation-delay: 0.15s; }
.hf-seat-dot--d2 { animation-delay: 0.45s; }
.hf-seat-dot--d3 { animation-delay: 0.75s; }
.hf-seat-dot--d4 { animation-delay: 1.05s; }
.hf-seat-dot--d5 { animation-delay: 1.35s; }
.hf-seat-dot--d6 { animation-delay: 1.65s; }
@keyframes hf-seat-fade {
  0%, 100% { background: var(--color-brand-500); }
  40%, 60% { background: var(--color-bg-quaternary); }
}

/* Forecast · uncertainty cone breathing */
.hf-cone {
  animation: hf-cone-breathe 5s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes hf-cone-breathe {
  0%, 100% { opacity: 0.18; transform: scaleX(1); }
  50%      { opacity: 0.32; transform: scaleX(1.04); }
}
.hf-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.hf-marquee__track {
  display: flex;
  gap: 64px;
  animation: hf-marquee 40s linear infinite;
  width: max-content;
}
.hf-marquee__item {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-quaternary);
  white-space: nowrap;
}
@keyframes hf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* =========================================================================
   SPLIT LAYOUT — copy + visual
   ========================================================================= */
.hf-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.hf-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.hf-split--reverse .hf-split__copy { order: 2; }
.hf-split__copy { text-align: left; }

/* Flag callout — styled like Untitled UI code-snippet container */
.hf-flag {
  margin-top: 32px;
  background: var(--color-bg-secondary_alt, var(--color-bg-secondary));
  border-radius: 20px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
}
.hf-flag__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
}
.hf-flag__title {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0;
  text-transform: none;
}
.hf-flag__copy {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-quaternary);
  border-radius: 6px;
  cursor: pointer;
}
.hf-flag__copy:hover {
  background: var(--color-bg-primary_hover);
  color: var(--color-fg-tertiary);
}
.hf-flag__body {
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  box-shadow: 0 0 0 1px var(--color-border-secondary), var(--shadow-lg);
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  font-family: var(--font-body, Inter, sans-serif);
}

/* =========================================================================
   ADOPTION — Live leaderboard
   ========================================================================= */
.hf-leaderboard { box-shadow: var(--shadow-2xl); }
.hf-lb {
  position: relative;
  transition: height 360ms cubic-bezier(0.16,1,0.3,1);
}
.hf-lb__row {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 36px 1fr 60px 50px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-secondary);
  transition: transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.hf-lb__rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.05em;
}
.hf-lb__main { display: flex; flex-direction: column; gap: 6px; }
.hf-lb__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-lb__track {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}
.hf-lb__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-600));
  border-radius: 999px;
  transition: width 800ms cubic-bezier(0.16,1,0.3,1);
}
.hf-lb__pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: right;
}
.hf-lb__live {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-brand-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hf-lb__live-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-brand-500);
  box-shadow: 0 0 0 0 var(--color-brand-500);
  animation: hf-pulse-dot 1.6s ease-out infinite;
}
@keyframes hf-pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-500) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =========================================================================
   IMPACT — Dark band + correlation viz
   ========================================================================= */
/* =========================================================================
   IMPACT — Variant system (3 differentiation directions)
   .hf-impact--dark      Wireframe-faithful: deep slate band, brand glow, white text
   .hf-impact--wash      Brand-tinted: brand-50 bg, brand-200 frame, brand top rule
   .hf-impact--editorial Newsprint feel: oversized italic serif, thick black rules
   ========================================================================= */
.hf-impact { position: relative; overflow: hidden;
  --impact-throughput: var(--color-text-primary);
}
.hf-impact .hf-section__inner { max-width: 1436px; margin: 0 auto; position: relative; padding: 120px 46px; }
.hf-impact__line--throughput { stroke: var(--impact-throughput); }
.hf-impact__pulse--throughput { fill: var(--impact-throughput); }
.hf-impact__legend-swatch--throughput { background: var(--impact-throughput); }

/* ---- Variant A: Dark band ---- */
.hf-impact--dark {
  --impact-accent: oklch(0.72 0.13 60);
  --impact-accent-soft: oklch(0.92 0.05 60);
  --impact-fg: #FAFAF8;
  --impact-fg-muted: #A8A89D;
  --impact-fg-dim: #6E6E63;
  background: #14140F;
  color: var(--impact-fg);
  --impact-throughput: var(--impact-accent);
}
.hf-impact--dark .hf-display,
.hf-impact--dark .hf-display--lg { color: var(--impact-fg); }
.hf-impact--dark .hf-display em,
.hf-impact--dark .hf-display [style*="italic"] { color: var(--impact-accent) !important; }
.hf-impact--dark .hf-lede { color: var(--impact-fg-muted); }

.hf-impact--dark .hf-impact__viz {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 28px 28px 22px;
}
.hf-impact--dark .hf-impact__viz-label,
.hf-impact--dark .hf-impact__legend { color: var(--impact-fg-muted); }
.hf-impact--dark .hf-impact__caption {
  color: var(--impact-fg-muted);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hf-impact--dark .hf-impact__caption span[style*="color"] { color: var(--impact-accent) !important; }
.hf-impact--dark .hf-impact__svg line { stroke: rgba(255,255,255,0.08) !important; }

/* KPIs — number white, label accent-color uppercase mono (wireframe style) */
.hf-impact--dark .hf-pro-kpi__num { color: var(--impact-fg); }
.hf-impact--dark .hf-pro-kpi__label { color: var(--impact-accent); letter-spacing: 0.12em; }

/* Add-on pill + eyebrow — accent color (warm) against the near-black */
.hf-impact--dark .hf-impact__addon {
  color: var(--impact-accent);
  border-color: var(--impact-accent);
  background: transparent;
}
.hf-impact--dark .hf-impact__addon-dot { background: var(--impact-accent); }
.hf-impact--dark .hf-impact__eyebrow { color: var(--impact-accent); }

/* Buttons — primary uses accent, secondary muted */
.hf-impact--dark .hf-btn--primary {
  background: transparent;
  color: var(--impact-accent);
  border: 1px solid var(--impact-accent);
}
.hf-impact--dark .hf-btn--primary:hover { background: rgba(204,143,79,0.10); }
.hf-impact--dark .hf-btn--secondary {
  background: transparent;
  color: var(--impact-fg-muted);
  border: 1px solid var(--impact-fg-dim);
}

/* ---- Variant B: Brand wash ---- */
.hf-impact--wash {
  background: var(--color-brand-50, #EFF6FF);
  border-top: 4px solid var(--color-brand-500);
  border-bottom: 1px solid var(--color-brand-200);
}
.hf-impact--wash .hf-impact__viz {
  background: #fff;
  border: 1px solid var(--color-brand-200);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 18px 48px -28px rgba(37,99,235,0.25);
}
.hf-impact--wash .hf-impact__caption {
  border-top: 1px solid var(--color-brand-100, #DBEAFE);
}
.hf-impact--wash .hf-impact__addon {
  color: var(--color-brand-700);
  border-color: var(--color-brand-500);
  background: rgba(255,255,255,0.7);
}
.hf-impact--wash .hf-impact__addon-dot { background: var(--color-brand-600); }
.hf-impact--wash .hf-pro-kpi__num { color: var(--color-brand-700); }
.hf-impact--wash .hf-pro-kpi__label { color: var(--color-text-secondary); }
.hf-impact--wash .hf-impact__eyebrow { color: var(--color-brand-700); }

/* ---- Variant C: Editorial ---- */
.hf-impact--editorial {
  background: #FAF9F6;
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}
.hf-impact--editorial::before,
.hf-impact--editorial::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--color-text-primary);
  pointer-events: none;
}
.hf-impact--editorial::before { top: 6px; }
.hf-impact--editorial::after  { bottom: 6px; }
.hf-impact--editorial .hf-impact__addon {
  background: var(--color-text-primary);
  color: #fff;
  border-color: var(--color-text-primary);
}
.hf-impact--editorial .hf-impact__addon-dot { background: #fff; }
.hf-impact--editorial .hf-impact__eyebrow { color: var(--color-text-primary); }
.hf-impact--editorial .hf-impact__eyebrow-line { background: var(--color-text-primary); }
.hf-impact--editorial .hf-display--lg {
  font-size: 88px;
  letter-spacing: -0.03em;
}
.hf-impact--editorial .hf-impact__viz {
  background: #fff;
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  padding: 28px 28px 22px;
}
.hf-impact--editorial .hf-impact__caption {
  border-top: 1px solid var(--color-text-primary);
  font-family: var(--font-serif);
  font-style: italic;
}
.hf-impact__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(96,165,250,0.4);
  background: rgba(59,130,246,0.12);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-300);
  margin-bottom: 24px;
}
.hf-impact__pill-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-brand-300);
  box-shadow: 0 0 8px var(--color-brand-300);
}

.hf-impact__viz {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 28px 20px;
  backdrop-filter: blur(20px);
  position: relative;
}
.hf-impact__viz-head {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hf-impact__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
}
.hf-impact__legend-swatch {
  width: 14px; height: 2px;
}
.hf-impact__svg {
  width: 100%;
  height: 220px;
  display: block;
}
.hf-impact__line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.65,0,0.35,1);
}
.hf-impact__line.is-drawn { stroke-dashoffset: 0; }
.hf-impact__line[stroke-dasharray="6 5"] {
  stroke-dasharray: 6 5;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hf-impact__line[stroke-dasharray="6 5"].is-drawn { opacity: 1; }
.hf-impact__fill {
  opacity: 0;
  transition: opacity 1s ease 0.6s;
}
.hf-impact__fill.is-shown { opacity: 1; }
.hf-impact__caption {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-secondary);
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ---------- Tagline row: Add-on pill + eyebrow on same line ---------- */
.hf-impact__tagline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hf-impact__tagline .hf-impact__eyebrow { margin-bottom: 0; }

/* ---------- Add-on pill (above eyebrow) ---------- */
.hf-impact__addon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--color-brand-400);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-300);
  margin-bottom: 0;
}
.hf-impact__addon-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-brand-400);
}

/* ---------- Eyebrow tag with line (matches wireframe) ---------- */
.hf-impact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-700);
  margin-bottom: 16px;
}
.hf-impact__eyebrow-line {
  width: 24px;
  height: 1px;
  background: var(--color-brand-400);
}

/* ---------- Viz label (top-left mono) ---------- */
.hf-impact__viz-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
}

/* ---------- Pulsing endpoints on correlation curves ---------- */
.hf-impact__pulse {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.hf-impact__pulse.is-shown {
  opacity: 1;
  animation: hf-impact-pulse 2s ease-in-out infinite;
}
@keyframes hf-impact-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}

/* ---------- Pro KPI cascade (matches wireframe) ---------- */
.hf-pro-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 28px 0;
  margin: 32px 0 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.hf-pro-kpi {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hf-pro-kpi.is-in {
  opacity: 1;
  transform: translateY(0);
}
.hf-pro-kpi__num {
  font-family: var(--font-display, var(--font-serif, Georgia, serif));
  font-size: 52px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-brand-300);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.hf-pro-kpi__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ---------- AI Insight card (Adoption section alternative) ---------- */
.hf-ai-insight {
  position: relative;
  margin-top: 28px;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(139,92,246,0.06) 60%, rgba(255,255,255,0) 100%),
    var(--color-bg-primary, #fff);
  border: 1px solid var(--color-brand-200, #BFDBFE);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px -12px rgba(37,99,235,0.18);
  overflow: hidden;
}
.hf-ai-insight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96,165,250,0.55), rgba(167,139,250,0.35) 50%, rgba(96,165,250,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hf-ai-insight__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hf-ai-insight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--color-brand-500, #3B82F6) 0%, #8B5CF6 100%);
  color: #fff;
}
.hf-ai-insight__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-brand-600, #2563EB), #7C3AED);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hf-ai-insight__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary, #98A2B3);
}
.hf-ai-insight__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.hf-ai-insight__team {
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-ai-insight__body strong {
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-ai-insight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hf-ai-insight__chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-brand-200, #BFDBFE);
  background: rgba(255,255,255,0.85);
  color: var(--color-brand-700, #1D4ED8);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hf-ai-insight__chip:hover {
  background: var(--color-brand-50, #EFF6FF);
  border-color: var(--color-brand-400, #60A5FA);
}
.hf-ai-insight__chip--ghost {
  border-color: var(--color-border-secondary, #EAECF0);
  color: var(--color-text-tertiary, #475467);
  background: transparent;
}
.hf-ai-insight__chip--ghost:hover {
  background: var(--color-bg-secondary, #F9FAFB);
  border-color: var(--color-border-primary, #D0D5DD);
}

/* =========================================================================
   COST · TODAY — donut + breakdown rows
   ========================================================================= */
.hf-cost-pivot-wrap {
  position: relative;
}
.hf-cost-pivot-bar {
  max-width: 1436px;
  margin: 0 auto;
  padding: 64px 46px 0;
  display: flex;
  justify-content: center;
}
.hf-cost-pivot-bar + section { padding-top: 24px; }
.hf-cost-pivot-bar .hf-cost-tabs {
  padding: 4px;
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  background: var(--color-bg-primary);
}
.hf-cost-pivot-bar .hf-cost-tabs__btn {
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 8px;
}
.hf-cost-pivot-wrap > section .hf-section__inner { padding-top: 32px; }
.hf-cost-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
}
.hf-cost-tabs__btn {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-tertiary);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.hf-cost-tabs__btn:hover { color: var(--color-text-secondary); }
.hf-cost-tabs__btn.is-active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.hf-cost-tabs__btn { position: relative; }
.hf-cost-tabs__pulse {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--color-brand-500);
  box-shadow: 0 0 0 0 rgba(59,130,246,0.55);
  animation: hf-cost-pulse 1.6s ease-in-out infinite;
}
@keyframes hf-cost-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(59,130,246,0);   }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0);     }
}
.hf-cost-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 0;
}
.hf-cost-donut {
  position: relative;
  width: 260px; height: 260px;
}
.hf-cost-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.hf-cost-rows {
  display: flex;
  flex-direction: column;
}
.hf-cost-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 14px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--color-border-secondary);
  font-size: 14px;
}
.hf-cost-row:last-child { border-bottom: 0; }
.hf-cost-row.is-flagged .hf-cost-row__name { color: var(--color-text-brand-secondary); font-weight: 600; }
.hf-cost-row__swatch {
  width: 8px; height: 8px; border-radius: 999px;
}
.hf-cost-row__name {
  font-weight: 500;
  color: var(--color-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.hf-cost-row__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.hf-cost-row__trend {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-quaternary);
  text-align: right;
  background: transparent;
  padding: 0;
}
.hf-cost-row__trend.is-up-strong {
  color: var(--color-text-brand-secondary);
  background: transparent;
}

/* =========================================================================
   COST · RECOVERED — seat reactivation grid
   ========================================================================= */
.hf-seats-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 8px;
  padding: 16px 0 20px;
}
.hf-seat {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.hf-seat.is-active {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.hf-seat.is-idle {
  background: transparent;
  border: 1px dashed var(--color-border-primary);
}
.hf-seat.is-reactivated {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  animation: hf-seat-pop 0.6s ease;
}
@keyframes hf-seat-pop {
  0%   { transform: scale(0.6); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.hf-seats-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-secondary);
}
.hf-seats-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--color-text-primary);
}
.hf-seats-legend__item.is-brand { color: var(--color-text-brand-secondary); }
.hf-seats-legend__item strong { font-weight: 700; }
.hf-seats-legend__swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--color-text-primary);
}
.hf-seats-legend__swatch.is-idle {
  background: transparent;
  border: 1px dashed var(--color-border-primary);
}
.hf-seats-legend__swatch.is-reactivated { background: var(--color-brand-500); }


/* =========================================================================
   COST · TOMORROW — Forecast chart
   ========================================================================= */
.hf-tag-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-bg-brand-secondary, rgba(59,130,246,0.1));
  color: var(--color-text-brand-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.hf-forecast { padding: 18px 0 4px; }
.hf-forecast__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 12px;
}
.hf-forecast__amount {
  font-family: var(--font-display, var(--font-serif));
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text-brand-secondary);
  line-height: 1;
}
.hf-forecast__delta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hf-forecast__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-brand-secondary);
  font-weight: 600;
}

.hf-forecast__chart {
  display: block;
  width: 100%;
  height: 200px;
  margin: 8px 0 16px;
}
.hf-forecast__line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-forecast__line.is-drawn { stroke-dashoffset: 0; }
.hf-forecast__line--proj {
  stroke-dasharray: 6 5;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.hf-forecast__line--proj.is-drawn { opacity: 1; }
.hf-forecast__fill {
  opacity: 0;
  transition: opacity 0.9s ease 1.1s;
}
.hf-forecast__fill.is-shown { opacity: 1; }

.hf-forecast__teams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-border-secondary);
  padding-top: 14px;
}
.hf-forecast__team {
  padding: 0 14px;
  border-right: 1px solid var(--color-border-secondary);
}
.hf-forecast__team:first-child { padding-left: 0; }
.hf-forecast__team:last-child  { border-right: 0; padding-right: 0; }
.hf-forecast__team-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  margin-bottom: 6px;
}
.hf-forecast__team-amount {
  font-family: var(--font-display, var(--font-serif));
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  line-height: 1;
}
.hf-forecast__team-trend {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   HOW IT WORKS — Flow diagram + 3 steps
   ========================================================================= */
.hf-how__head { margin-bottom: 56px; }
.hf-how__head .hf-eyebrow { margin-bottom: 16px; }
.hf-how__head-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: end;
}

.hf-flow {
  position: relative;
  height: 480px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 12px;
  background:
    linear-gradient(180deg, var(--color-bg-secondary), var(--color-bg-primary));
  overflow: hidden;
}
.hf-flow__legend {
  position: absolute;
  top: 16px; left: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--color-text-quaternary);
  z-index: 3;
}
.hf-flow__legend--right { left: auto; right: 24px; }

.hf-flow__col {
  position: absolute;
  top: 0; bottom: 0;
  width: 240px;
  z-index: 4;
}
.hf-flow__col--left  { left: 24px; }
.hf-flow__col--right { right: 24px; }

.hf-flow__chip {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.hf-flow__col--left  .hf-flow__chip { right: 0; }
.hf-flow__col--right .hf-flow__chip { left: 0; }
.hf-flow__chip-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hf-flow__chip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.hf-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hf-flow__path {
  fill: none;
  stroke: var(--color-brand-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
  opacity: 0.55;
  animation: hf-flow-dash 3s linear infinite;
}
@keyframes hf-flow-dash {
  to { stroke-dashoffset: -120; }
}

.hf-flow__hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 140px; height: 140px;
  border-radius: 999px;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-text-primary);
  box-shadow: 0 16px 40px rgba(15,23,42,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.hf-flow__hub-mark {
  color: var(--color-text-primary);
  margin-bottom: 4px;
  display: inline-flex;
}
.hf-flow__hub-name {
  font-family: var(--font-display, var(--font-serif));
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  line-height: 1;
}
.hf-flow__hub-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}

.hf-how__steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 56px;
  border-top: 1px solid var(--color-border-primary);
}
.hf-how__step {
  padding: 32px 28px 8px 0;
  border-right: 1px solid var(--color-border-secondary);
}
.hf-how__step:nth-child(2) { padding-left: 28px; }
.hf-how__step:last-child   { padding-left: 28px; padding-right: 0; border-right: 0; }
.hf-how__step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-text-brand-secondary);
  margin-bottom: 18px;
}
.hf-how__step-title {
  font-family: var(--font-display, var(--font-serif));
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: 6px;
}
.hf-how__step-sub {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
  font-style: italic;
}
.hf-how__step-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-quaternary);
  margin: 0;
  max-width: 320px;
}


/* =========================================================================
   THE AXIFY DIFFERENCE
   ========================================================================= */
.hf-diff__head { margin-bottom: 60px; max-width: 880px; }
.hf-diff__hl {
  position: relative;
  display: inline-block;
  color: var(--color-text-brand-secondary);
  font-style: italic;
}
.hf-diff__hl::after {
  content: '';
  position: absolute;
  left: 2%; right: 2%;
  bottom: -2px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, transparent 50%, rgba(59,130,246,0.18) 50%);
}

.hf-diff {
  border-top: 1px solid var(--color-border-primary);
}
.hf-diff__row {
  display: grid;
  grid-template-columns: 110px 1.25fr 1fr;
  gap: 56px;
  align-items: baseline;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-diff__row:last-child { border-bottom: 0; }
.hf-diff__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  padding-top: 14px;
}
.hf-diff__big {
  font-family: var(--font-display, var(--font-serif));
  font-size: clamp(48px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-weight: 600;
}
.hf-diff__small {
  font-family: var(--font-display, var(--font-serif));
  font-size: 26px;
  font-style: italic;
  color: var(--color-text-tertiary);
  margin-top: 8px;
  line-height: 1.2;
}
.hf-diff__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 460px;
}

/* =========================================================================
   SOCIAL — Testimonial
   ========================================================================= */
.hf-social {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hf-social .hf-eyebrow { justify-content: center; display: inline-flex; }
.hf-social__title {
  margin: 14px 0 0;
}
.hf-social__portrait {
  width: 88px; height: 88px;
  border-radius: 999px;
  margin: 36px auto 40px;
  background: #fff;
  border: 1px solid var(--color-border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -8px rgba(15,23,42,0.18);
}
.hf-social__bdc {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #2A2A6E;
}
.hf-social__quote {
  position: relative;
  font-family: var(--font-display, var(--font-serif));
  font-size: 36px;
  line-height: 1.3;
  font-style: italic;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  margin: 0 auto 32px;
  max-width: 760px;
  padding: 0 16px;
}
.hf-social__mark {
  position: absolute;
  left: -8px; top: -36px;
  font-family: var(--font-display, var(--font-serif));
  font-size: 96px;
  line-height: 1;
  color: var(--color-text-brand-secondary);
  opacity: 0.45;
}
.hf-social__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hf-social__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
}
.hf-social__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}

.hf-social__more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px dashed var(--color-border-secondary);
  text-align: left;
}
.hf-social__pull p {
  font-family: var(--font-display, var(--font-serif));
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.hf-social__pull-meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}

/* =========================================================================
   FINAL CTA — Inline ribbon (Option C)
   Single horizontal row, edge-to-edge brand-tinted band: title left,
   buttons right. Compact, breaks the centered-text rhythm of Social above.
   ========================================================================= */
.hf-finalcta-section {
  background: transparent;
  padding: 72px 0 96px;
}
.hf-finalcta-ribbon {
  max-width: 1436px;
  margin: 0 auto;
  padding: 0 46px;
}
.hf-finalcta-ribbon__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 36px 48px;
  background: var(--color-brand-25, #F8FBFF);
  border: 1px solid var(--color-brand-100, #DBEAFE);
  border-radius: 20px;
  box-shadow: 0 24px 60px -40px rgba(37, 99, 235, 0.25);
}
.hf-finalcta-ribbon__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.hf-finalcta-ribbon__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-700);
}
.hf-finalcta-ribbon__title {
  font-family: var(--font-display, var(--font-serif));
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}
.hf-finalcta-ribbon__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.hf-finalcta-ribbon__footnote {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-quaternary);
  text-align: center;
  letter-spacing: 0.01em;
}

@media (max-width: 880px) {
  .hf-finalcta-ribbon__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px;
  }
  .hf-finalcta-ribbon__actions { width: 100%; }
  .hf-finalcta-ribbon__actions a { flex: 1 1 auto; justify-content: center; }
}

/* ===== hifi-styles-v2.css ===== */
/* =========================================================================
   Axify Homepage Hi-Fi v2 — overrides & additions
   Loaded AFTER hifi-styles.css. Scope all rules under [data-v2] or v2-only
   classnames so v1 is unaffected.
   ========================================================================= */

/* ---- Problem cards: clickable + accent thread ---------------------------- */
.hf-illus-card {
  position: relative;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms ease-out,
              border-color 200ms ease-out;
}

.hf-illus-card[data-v2-clickable] {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  /* leave room for the top accent bar */
  border-top: 3px solid transparent;
}

.hf-illus-card[data-v2-clickable]::before {
  content: "";
  position: absolute;
  inset: -3px 0 auto 0;
  height: 3px;
  background: var(--v2-accent, var(--color-brand-500));
  border-radius: 12px 12px 0 0;
  opacity: 1;
  transition: opacity 200ms ease-out;
}

.hf-illus-card[data-v2-accent="01"] { --v2-accent: var(--color-brand-400); }
.hf-illus-card[data-v2-accent="02"] { --v2-accent: var(--color-brand-600); }
.hf-illus-card[data-v2-accent="03"] { --v2-accent: var(--color-brand-800); }

/* ---- Multi-hue palette (sibling hues from design system) ---------------- */
.hf-page[data-v2-palette="multi"] .hf-illus-card[data-v2-accent="01"] { --v2-accent: var(--color-brand-500); }
.hf-page[data-v2-palette="multi"] .hf-illus-card[data-v2-accent="02"] { --v2-accent: var(--color-teal-500); }
.hf-page[data-v2-palette="multi"] .hf-illus-card[data-v2-accent="03"] { --v2-accent: var(--color-purple-600); }

.hf-illus-card[data-v2-clickable]:hover,
.hf-illus-card[data-v2-clickable]:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-secondary);
  outline: none;
}

.hf-illus-card[data-v2-clickable]:focus-visible {
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--color-focus-ring);
}

.hf-illus-card[data-v2-clickable] .hf-illus-card__cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-accent, var(--color-text-brand-secondary));
  opacity: 0.55;
  transition: opacity 200ms ease-out, gap 200ms ease-out;
}
.hf-illus-card[data-v2-clickable]:hover .hf-illus-card__cta,
.hf-illus-card[data-v2-clickable]:focus-visible .hf-illus-card__cta {
  opacity: 1;
  gap: 10px;
}
.hf-illus-card[data-v2-clickable] .hf-illus-card__cta svg {
  transition: transform 200ms ease-out;
}
.hf-illus-card[data-v2-clickable]:hover .hf-illus-card__cta svg {
  transform: translateX(3px);
}

/* Tint the PROBLEM 0N mono label */
.hf-illus-card[data-v2-accent] .hf-mono.hf-illus-card__num {
  color: var(--v2-accent) !important;
}

/* ---- Solution eyebrows: matching accent ---------------------------------- */
.hf-eyebrow[data-v2-accent="01"] { color: var(--color-brand-400); }
.hf-eyebrow[data-v2-accent="02"] { color: var(--color-brand-600); }
.hf-eyebrow[data-v2-accent="03"] { color: var(--color-brand-800); }

.hf-page[data-v2-palette="multi"] .hf-eyebrow[data-v2-accent="01"] { color: var(--color-brand-500); }
.hf-page[data-v2-palette="multi"] .hf-eyebrow[data-v2-accent="02"] { color: var(--color-teal-500); }
.hf-page[data-v2-palette="multi"] .hf-eyebrow[data-v2-accent="03"] { color: var(--color-purple-600); }

.hf-eyebrow[data-v2-accent]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  margin-right: 10px;
  background: currentColor;
  transform: translateY(-2px);
}

/* ---- Cost pivot: master eyebrow above the Today/Tomorrow tabs ----------- */
.hf-cost-pivot-eyebrow {
  display: flex;
  justify-content: center;
  max-width: 1344px;
  margin: 0 auto;
  padding: 64px 46px 0;
}
.hf-cost-pivot-eyebrow + .hf-cost-pivot-bar { padding-top: 16px; }

/* When master eyebrow is present, neutralize the inner section's top padding
   AND hide the per-view "Cost · today" / "Cost · tomorrow" eyebrows since the
   master eyebrow already labels the section. */
.hf-cost-pivot-wrap section .hf-eyebrow {
  display: none;
}

/* ---- Sticky solutions tracker ------------------------------------------- */
.hf-solutions-tracker {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 50;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 9999px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease-out, transform 250ms cubic-bezier(0.16,1,0.3,1);
  font-family: var(--font-body, Inter, sans-serif);
}
.hf-solutions-tracker.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hf-solutions-tracker__item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  font-family: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.hf-solutions-tracker__item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.hf-solutions-tracker__num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.hf-solutions-tracker__item:hover .hf-solutions-tracker__num {
  background: var(--color-bg-tertiary);
}

.hf-solutions-tracker__item.is-active {
  background: var(--v2-accent, var(--color-brand-50));
  color: var(--color-text-primary);
}
.hf-solutions-tracker__item.is-active .hf-solutions-tracker__num {
  background: var(--v2-accent, var(--color-brand-500));
  color: var(--color-white);
}

.hf-solutions-tracker__item[data-v2-accent="01"].is-active { --v2-accent: var(--color-brand-400); background: color-mix(in srgb, var(--color-brand-400) 12%, transparent); }
.hf-solutions-tracker__item[data-v2-accent="02"].is-active { --v2-accent: var(--color-brand-600); background: color-mix(in srgb, var(--color-brand-600) 12%, transparent); }
.hf-solutions-tracker__item[data-v2-accent="03"].is-active { --v2-accent: var(--color-brand-800); background: color-mix(in srgb, var(--color-brand-800) 12%, transparent); }

.hf-page[data-v2-palette="multi"] .hf-solutions-tracker__item[data-v2-accent="01"].is-active { --v2-accent: var(--color-brand-500);  background: color-mix(in srgb, var(--color-brand-500) 12%, transparent); }
.hf-page[data-v2-palette="multi"] .hf-solutions-tracker__item[data-v2-accent="02"].is-active { --v2-accent: var(--color-teal-500);   background: color-mix(in srgb, var(--color-teal-500) 12%, transparent); }
.hf-page[data-v2-palette="multi"] .hf-solutions-tracker__item[data-v2-accent="03"].is-active { --v2-accent: var(--color-purple-600); background: color-mix(in srgb, var(--color-purple-600) 12%, transparent); }

/* ---- Section accent thread (subtle left edge bar on each solution) ------ */
.hf-section[data-v2-accent="01"] .hf-split__copy,
.hf-section[data-v2-accent="02"] .hf-split__copy,
.hf-section[data-v2-accent="03"] .hf-split__copy {
  position: relative;
  padding-left: 16px;
}
.hf-section[data-v2-accent="01"] .hf-split__copy::before,
.hf-section[data-v2-accent="02"] .hf-split__copy::before,
.hf-section[data-v2-accent="03"] .hf-split__copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--v2-accent);
}
.hf-section[data-v2-accent="01"] { --v2-accent: var(--color-brand-400); }
.hf-section[data-v2-accent="02"] { --v2-accent: var(--color-brand-600); }
.hf-section[data-v2-accent="03"] { --v2-accent: var(--color-brand-800); }

.hf-page[data-v2-palette="multi"] .hf-section[data-v2-accent="01"] { --v2-accent: var(--color-brand-500); }
.hf-page[data-v2-palette="multi"] .hf-section[data-v2-accent="02"] { --v2-accent: var(--color-teal-500); }
.hf-page[data-v2-palette="multi"] .hf-section[data-v2-accent="03"] { --v2-accent: var(--color-purple-600); }

/* Smooth scroll for the anchor jumps */


/* =========================================================================
   SDLC → ADLC illustration (replaces the old productivity x adoption chart
   inside the dark HFImpact section).
   ========================================================================= */
.hf-sdlc { color: var(--color-white); }

.hf-sdlc .hf-impact__viz-label {
  color: var(--color-brand-300);
  letter-spacing: 0.08em;
}

.hf-sdlc__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
  position: relative;
}
.hf-sdlc__compare::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255,255,255,0.12);
  transform: translateX(-50%);
}
.hf-sdlc__col {
  min-width: 0;
}
.hf-sdlc__col-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-brand-300);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hf-sdlc__col-title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  min-height: 50px;
}
.hf-sdlc__col-title em {
  font-style: italic;
  color: var(--color-brand-300);
  font-weight: 600;
}

.hf-sdlc__bars {
  display: grid;
  align-items: end;
  gap: 8px;
  height: 120px;
  margin-bottom: 10px;
}
.hf-sdlc__bar-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}
.hf-sdlc__bar {
  width: 100%;
  border-radius: 8px;
  background: rgba(110,168,254,0.22);
  transition: height 600ms cubic-bezier(0.16,1,0.3,1);
}
.hf-sdlc__bar.is-primary { background: var(--color-brand-500); }

.hf-sdlc__phases {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.hf-sdlc__phases span {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-sdlc__phases span.is-primary {
  color: var(--color-white);
  font-weight: 600;
}

/* ADLC column — 4 cells: framing · parallel-stack · validation · deploy */
.hf-sdlc__bars--adlc {
  grid-template-columns: 1.6fr 1.4fr 1.6fr 0.7fr;
}
.hf-sdlc__phases--adlc {
  grid-template-columns: 1.6fr 1.4fr 1.6fr 0.7fr;
}
.hf-sdlc__phases--adlc span.muted {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 500;
}

.hf-sdlc__bar-cell--parallel {
  align-items: stretch;
  position: relative;
  padding: 0 4px;
}
.hf-sdlc__parallel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16,1,0.3,1);
}
.hf-sdlc__parallel span {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: rgba(110,168,254,0.35);
}
.hf-sdlc__parallel span:nth-child(1) { width: 78%; background: var(--color-brand-500); }
.hf-sdlc__parallel span:nth-child(2) { width: 92%; background: rgba(110,168,254,0.55); }
.hf-sdlc__parallel span:nth-child(3) { width: 62%; background: rgba(110,168,254,0.4); }

.hf-sdlc__parallel-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 9999px;
  background: var(--color-brand-500);
  color: var(--color-white);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(21,112,239,0.45);
  z-index: 2;
}

@media (max-width: 1100px) {
  .hf-sdlc__compare { grid-template-columns: 1fr; gap: 36px; }
  .hf-sdlc__compare::before { display: none; }
}

/* Related reading — 2 article cards inside the dark HFImpact section */
.hf-sdlc-articles {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hf-sdlc-articles__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
}
.hf-sdlc-articles__all {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-300);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease-out;
}
.hf-sdlc-articles__all:hover { color: var(--color-white); }

.hf-sdlc-articles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.hf-sdlc-article {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.hf-sdlc-article:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.hf-sdlc-article:hover .hf-sdlc-article__title {
  color: var(--color-brand-300);
}

.hf-sdlc-article__cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(110,168,254,0.18), rgba(110,168,254,0.04));
}

.hf-sdlc-article__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.hf-sdlc-article__tag {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-300);
  margin-bottom: 2px;
}

.hf-sdlc-article__title {
  font-family: var(--font-display, var(--font-body, Inter, sans-serif));
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
  letter-spacing: -0.01em;
  transition: color 200ms ease-out;
}

.hf-sdlc-article__excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hf-sdlc-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 13px;
}
.hf-sdlc-article__avatar {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-700));
  flex-shrink: 0;
}
.hf-sdlc-article__author {
  font-weight: 600;
  color: var(--color-white);
}
.hf-sdlc-article__date {
  color: rgba(255,255,255,0.55);
  margin-left: auto;
}

@media (max-width: 1100px) {
  .hf-sdlc-articles__grid { grid-template-columns: 1fr; }
  .hf-sdlc-article { grid-template-columns: 160px 1fr; }
}
@media (max-width: 720px) {
  .hf-sdlc-article { grid-template-columns: 1fr; }
}

/* =========================================================================
   How it works — output column grouped by mode (EXPLORE / ASK / NOTIFY)
   ========================================================================= */
.hf-flow__group {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

/* Source-side groups mirror the output side: anchor to the right edge of
   the column so the chips sit adjacent to the SVG hub paths, and right-align
   the label so it sits directly above the first chip. */
.hf-flow__group--src {
  left: auto;
  right: 0;
  align-items: flex-end;
}
.hf-flow__group--src .hf-flow__group-label {
  margin-left: 0;
  margin-right: 14px;
  text-align: right;
}

.hf-flow__group-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-brand-tertiary, var(--color-brand-600));
  margin-left: 14px;
  margin-bottom: 2px;
}
.hf-flow__group-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The floating group-tag pill is no longer used — sources use the same
   group-label pattern as outputs. */

/* Output chips inside a group flow naturally; reset the absolute positioning
   that the global .hf-flow__chip rule applies. */
.hf-flow__chip--out,
.hf-flow__chip--src {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  height: 30px;
  padding: 0 12px;
  align-self: flex-start;
}
.hf-flow__chip--src { align-self: flex-end; }

.hf-flow__chip--out .hf-flow__chip-label,
.hf-flow__chip--src .hf-flow__chip-label {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}
/* Email / dashboard / reports glyphs are stroke-based with currentColor — tint */
.hf-flow__chip--out .hf-flow__chip-logo {
  color: var(--color-text-tertiary);
}

/* Ghost "+ many more" chip — dashed border, muted text, signals that
   the list is non-exhaustive without competing with real integrations. */
.hf-flow__chip--ghost {
  background: transparent;
  border: 1px dashed var(--color-border-secondary, var(--color-border-primary));
  box-shadow: none;
}
.hf-flow__chip--ghost .hf-flow__chip-label {
  color: var(--color-text-tertiary);
  font-style: italic;
  font-weight: 500;
}
.hf-flow__chip-logo--ghost {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

/* =========================================================================
   Beyond AI — feature section card (same DNA as the Usage split card,
   but with a brand-tinted shell to distinguish it as the "broader SEI" play)
   ========================================================================= */
.hf-beyond {
  background: var(--color-warning-50, #FFFAEB);
  border-radius: 24px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px var(--color-warning-200, #FEDF89);
  max-width: 1344px;
  margin: 0 auto;
}
.hf-beyond__pillar-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  margin-top: 7px;
  background: var(--color-warning-500, #F79009);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning-500, #F79009) 18%, transparent);
}
.hf-beyond__inner {
  background: var(--color-bg-primary);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10,13,18,0.05),
              inset 0 0 0 1px var(--color-border-secondary);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  padding: 56px 56px 52px;
}
.hf-beyond__copy { display: flex; flex-direction: column; gap: 18px; }
.hf-beyond__copy .hf-display { margin: 0; }
.hf-beyond__copy .hf-lede { margin: 0; }

.hf-beyond__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hf-beyond__tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-warning-500, #F79009);
  color: var(--color-white);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(247,144,9,0.4);
}

.hf-beyond__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-secondary);
}
.hf-beyond__pillar {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hf-beyond__pillar-title {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-beyond__pillar-sub {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.hf-beyond__viz {
  background: var(--color-bg-secondary);
  border: 1.5px dashed var(--color-border-secondary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.hf-beyond__viz-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-quaternary);
}

@media (max-width: 980px) {
  .hf-beyond__inner { grid-template-columns: 1fr; padding: 40px; }
  .hf-beyond__pillars { grid-template-columns: 1fr; }
}
.hf-diff__row--no-kicker {
  grid-template-columns: 1.25fr 1fr;
}

/* =========================================================================
   Header — floating pill (Untitled UI variant)
   ========================================================================= */
.hf-header-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 24px 0;
  pointer-events: none;
}
.hf-header-pill {
  pointer-events: auto;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.hf-header-pill__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px 12px 20px;
}
.hf-header-pill__left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.hf-header-pill__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}
.hf-header-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.hf-header-pill__link:hover {
  background: var(--color-bg-primary_hover);
  color: var(--color-text-primary);
}
.hf-header-pill__chev {
  display: block;
  flex-shrink: 0;
  opacity: 0.7;
}
.hf-header-pill__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.hf-header-pill__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.hf-header-pill__btn--secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-xs-skeumorphic, var(--shadow-xs));
}
.hf-header-pill__btn--secondary:hover {
  background: var(--color-bg-primary_hover);
  color: var(--color-text-primary);
}
.hf-header-pill__btn--primary {
  background: var(--color-bg-brand-solid);
  color: var(--color-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs-skeumorphic, var(--shadow-xs));
}
.hf-header-pill__btn--primary:hover {
  background: var(--color-bg-brand-solid_hover, var(--color-brand-700));
}

@media (max-width: 980px) {
  .hf-header-pill__nav { display: none; }
}

/* =========================================================================
   Social — centered testimonial card (Untitled UI variant)
   ========================================================================= */
.hf-tcard-sec {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hf-tcard-sec__card {
  margin: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  border-radius: 24px;
  padding: 56px 64px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: none;
}
.hf-tcard-sec__eyebrow {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-brand-secondary, #6941C6);
  margin-bottom: 20px;
}
.hf-tcard-sec__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 32px;
}
.hf-tcard-sec__quote {
  margin: 0 0 40px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 30px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.hf-tcard-sec__person {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hf-tcard-sec__avatar {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  margin-bottom: 16px;
  background: var(--color-bg-secondary);
}
.hf-tcard-sec__name {
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-tcard-sec__role {
  margin-top: 4px;
  font-size: 16px;
  color: var(--color-text-tertiary);
}

/* Nav: arrows + dots */
.hf-tcard-sec__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}
.hf-tcard-sec__arrow {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10,13,18,0.05);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.hf-tcard-sec__arrow:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.hf-tcard-sec__arrow:active { transform: scale(0.94); }
.hf-tcard-sec__dots {
  display: inline-flex;
  gap: 10px;
}
.hf-tcard-sec__dot {
  appearance: none;
  border: none;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 9999px;
  background: var(--color-border-primary);
  cursor: pointer;
  transition: background 160ms ease, width 200ms ease;
}
.hf-tcard-sec__dot:hover { background: var(--color-fg-quaternary, #98A2B3); }
.hf-tcard-sec__dot.is-active {
  width: 26px;
  background: var(--color-brand-600);
}

@media (max-width: 720px) {
  .hf-tcard-sec__card { padding: 40px 28px 32px; }
  .hf-tcard-sec__quote { font-size: 23px; }
}

/* =========================================================================
   AI usage efficiency — split layout (Usage / Cost cards)
   ========================================================================= */
.hf-eff-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 96px;
  overflow: hidden;
  max-height: 400px;
}
.hf-eff-head.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  display: none;
}
.hf-eff-head .hf-display { margin: 0 0 16px; }
.hf-eff-head .hf-lede { margin: 0; }
.hf-eff-head strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Cards grid — animates between 1fr 1fr → 1fr 0fr / 0fr 1fr.
   Transitions.dev "card resize": tween the column tracks (width) + gap with a
   soft ease so clicking a card resizes it open/closed like a resizing modal. */
.hf-page {
  --resize-dur: 340ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-eff-cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 1344px;
  margin: 0 auto;
  transition: gap var(--resize-dur) var(--resize-ease);
}
.hf-eff-cards.is-expanded-usage,
.hf-eff-cards.is-expanded-cost { align-items: start; gap: 0; }

.hf-eff-card-wrap {
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  transition: flex-basis var(--resize-dur) var(--resize-ease);
  will-change: flex-basis;
}
/* Card-resize: the clicked card grows to full width, the other shrinks to 0
   (flex-basis is interpolable, unlike fr-track grid-template-columns). */
.hf-eff-card-wrap.is-active { flex-basis: 100%; }
.hf-eff-card-wrap.is-collapsing { flex-basis: 0%; }
.hf-eff-card-wrap.is-collapsing { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hf-eff-cards, .hf-eff-card-inner, .hf-eff-card-wrap { transition: none !important; }
}
/* Soft cross-fade of the swapped content so the resize doesn't "pop" */
.hf-eff-content--expanded { animation: hfEffResizeIn var(--resize-dur) var(--resize-ease) both; }
@keyframes hfEffResizeIn { from { opacity: 0; } to { opacity: 1; } }

/* Double container — outer "shell" + inner card (Untitled UI code-snippet vibe) */
.hf-eff-card-shell {
  background: var(--color-bg-secondary, #F5F5F5);
  border-radius: 20px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-secondary);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hf-eff-card-inner {
  background: var(--color-bg-primary);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10,13,18,0.05),
              inset 0 0 0 1px var(--color-border-secondary);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease),
    box-shadow 220ms ease-out;
  will-change: width, height;
}

/* Summary content (button when collapsed) */
.hf-eff-summary {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: inherit;
  width: 100%;
  flex: 1;
}
/* Hover affordance on collapsed cards — shadow only (no lift), so the only
   motion in the component is the card-resize tween. */
.hf-eff-card-inner:has(.hf-eff-summary:hover),
.hf-eff-card-wrap:not(.is-active):not(.is-collapsing) .hf-eff-card-inner:hover {
  box-shadow: var(--shadow-lg),
              inset 0 0 0 1px var(--color-border-secondary);
}

.hf-eff-card__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-brand-tertiary, var(--color-brand-600));
  text-transform: uppercase;
}
.hf-eff-card__title {
  font-family: var(--font-display, var(--font-body, Inter, sans-serif));
  font-size: 28px;
  line-height: 1.18;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}
.hf-eff-card__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin: 0;
}
.hf-eff-card__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-secondary);
}
/* When the card has a viz, drop the divider from kpis (viz has it) and let viz
   carry the bottom-aligned weight via margin-top: auto. */
.hf-eff-card__viz + .hf-eff-card__kpis {
  border-top: 0;
  padding-top: 0;
  margin-top: 12px;
}

.hf-eff-card__viz {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-secondary);
  display: flex;
  flex-direction: column;
}
/* When the viz contains the forecast chart, let it absorb the leftover
   vertical space so the Cost card matches the Usage card's height. */
.hf-eff-card__viz:has(.hf-eff-viz-chart) {
  margin-top: 12px;
  flex: 1;
}

/* Mini seat grid preview */
.hf-eff-viz-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  padding: 4px 0 2px;
}
.hf-eff-viz-seat {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--color-brand-500);
}
.hf-eff-viz-seat.is-idle    { background: var(--color-bg-tertiary, #E4E7EC); }
.hf-eff-viz-seat.is-coached { background: var(--color-brand-300); box-shadow: 0 0 0 1px var(--color-brand-500); }

/* Mini forecast chart preview — grows to match the height of the
   neighbouring card's viz so both cards stay the same height. */
.hf-eff-viz-chart {
  width: 100%;
  min-height: 110px;
  flex: 1;
  display: block;
}
.hf-eff-card__kpi-value {
  font-family: var(--font-display, var(--font-body, Inter, sans-serif));
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hf-eff-card__kpi-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin-top: 4px;
}
.hf-eff-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-brand-secondary, var(--color-brand-600));
  transition: gap 200ms ease-out;
}
.hf-eff-summary:hover .hf-eff-card__cta { gap: 10px; }

/* Expanded content inside the same card chrome */
.hf-eff-content--expanded {
  display: flex;
  flex-direction: column;
}
.hf-eff-content-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-eff-back {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: 8px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  box-shadow: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.hf-eff-back:hover {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 0 0 1px var(--color-border-secondary);
}
.hf-eff-active-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-brand-tertiary, var(--color-brand-600));
  text-transform: uppercase;
}

/* When expanded, the inner HFSection lives inside the card-inner — reset its
   own outer padding so it doesn't double up. */
.hf-eff-content-body > section.hf-section { background: transparent; }
.hf-eff-content-body > section.hf-section .hf-section__inner {
  padding: 32px;
  max-width: none;
}

@media (max-width: 880px) {
  .hf-eff-cards { flex-direction: column; }
  .hf-eff-cards.is-expanded-usage,
  .hf-eff-cards.is-expanded-cost { flex-direction: column; }
  .hf-eff-cards.is-expanded-usage .hf-eff-card-wrap:nth-child(2),
  .hf-eff-cards.is-expanded-cost  .hf-eff-card-wrap:nth-child(1) {
    display: none;
  }
}

/* ===== hifi-styles-v3.css ===== */
/* =========================================================================
   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: none;
  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;
}

/* SEO: the hero headline block is a <div>; only "Scale AI adoption." lives in a
   nested <h1>. That <h1> must render inline and inherit every type property so
   the hero stays pixel-identical to when the whole block was the <h1>. */
.hf-hero-v3__headline-h1 {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.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)
    ),
    none 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;
  /* Reserve the fixed floating-menu height at the top so the vertically-
     centred, pinned content never tucks under the menu. box-sizing is
     border-box here, so this shrinks the content area without changing the
     sticky top/height (pin + scrub timing stay identical). */
  padding-top: var(--ax-pin-offset, 72px);
  display: flex;
  /* `safe center`: centre when the content fits, but fall back to top-align
     (i.e. just below the menu) when it is taller than the visible area — so
     the TOP of the content is always reachable instead of being clipped
     under the fixed menu on shorter viewports. */
  align-items: safe 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);
}

/* ===== hifi-cost-dashboard.css ===== */
/* =========================================================================
   Axify Hi-Fi v3 — COST dashboard styles (solution 2, cost angle).
   Chrome (shell, rail, KPI row, floating cards, bottom fade) is the SAME as the
   productivity beautyshot — the block below is cloned from #productivity with the
   selector swapped to #cost-efficiency, so the design is byte-identical. Only the
   3-card grid + inner card CONTENT (leaderboard tabs, forecast bars, donut) differ.
   ========================================================================= */

.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-bs {
  position: relative;
  z-index: 1;
  background: transparent;
  overflow: visible;
  color: var(--color-text-primary);
}

/* Top bar */
.hf-page #cost-efficiency .hf-bs__top-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-bs__top-stat-sep { color: var(--color-text-quaternary); font-weight: 500; }
.hf-page #cost-efficiency .hf-bs__top-stat-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* Body: rail + main */
.hf-page #cost-efficiency .hf-bs__body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
}
.hf-page #cost-efficiency .hf-bs__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-bs__rail-logo img { display: block; filter: brightness(0) invert(1); }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-bs__rail-item.is-active {
  color: var(--color-brand-600);
  background: var(--color-brand-50);
}

.hf-page #cost-efficiency .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 #cost-efficiency .hf-bs__main-head { order: 1; }
.hf-page #cost-efficiency .hf-bs__metrics { order: 2; }
.hf-page #cost-efficiency .hf-bs__tcards { order: 3; margin-top: 12px; }

/* Container header: page title + headline stat */
.hf-page #cost-efficiency .hf-bs__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-bs__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 24px 0;
  margin-bottom: 10px;
}
.hf-page #cost-efficiency .hf-metric {
  border-radius: 10px;
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hf-page #cost-efficiency .hf-metric:hover { background: var(--color-bg-secondary); }
.hf-page #cost-efficiency .hf-metric--clickable { cursor: pointer; }
.hf-page #cost-efficiency .hf-metric.is-active,
.hf-page #cost-efficiency .hf-metric.is-active:hover {
  background: var(--color-brand-50);
  box-shadow: inset 0 0 0 1px var(--color-brand-200);
}
.hf-page #cost-efficiency .hf-metric.is-active .hf-metric__label { color: var(--color-brand-700); font-weight: 600; }
.hf-page #cost-efficiency .hf-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-metric__icon { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #cost-efficiency .hf-metric__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hf-page #cost-efficiency .hf-metric__figs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  max-width: 56%;
}
.hf-page #cost-efficiency .hf-metric__spark {
  flex: 1;
  min-width: 0;
  height: 46px;
  align-self: center;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-metric__unit {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-delta--up { color: #00a63e; }
.hf-page #cost-efficiency .hf-delta--down { color: var(--color-error-600); }
.hf-page #cost-efficiency .hf-delta__ico { flex-shrink: 0; }
.hf-page #cost-efficiency .hf-delta__val { letter-spacing: -0.1px; }
.hf-page #cost-efficiency .hf-delta__suffix {
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: 2px;
}

/* Teams block */
.hf-page #cost-efficiency .hf-bs__teams { padding: 0 24px; }
.hf-page #cost-efficiency .hf-bs__teams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hf-page #cost-efficiency .hf-bs__teams-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
}
.hf-page #cost-efficiency .hf-bs__teams-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .hf-bs__switch {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--color-brand-500);
  position: relative;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-bs__tcards {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
  padding: 0 24px;
  align-items: stretch;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-chartlegend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-chartlegend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-chartlegend__dot--ad { background: var(--color-brand-600); }
.hf-page #cost-efficiency .hf-chartlegend__dot--tp { background: var(--color-pro-500); }

/* Chart body: plot fills the card height, x-axis pinned below */
.hf-page #cost-efficiency .hf-tcard--chart .hf-tcard__head { padding-bottom: 8px; }
.hf-page #cost-efficiency .hf-chartcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 14px;
  min-height: 0;
}
.hf-page #cost-efficiency .hf-chartcard__plot { flex: 1; min-height: 235px; }
.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-dualtrend-wrap .hf-dualtrend { animation: hfChartSwap 620ms ease-in-out both; }
.hf-page #cost-efficiency .hf-fcard__swap { animation: hfChartSwap 620ms ease-in-out both; }
.hf-page #cost-efficiency .hf-dualtrend-wrap .hf-dualtrend { position: absolute; inset: 0; }
.hf-page #cost-efficiency .hf-dt-hit { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }
.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-dt-dot--ad { background: var(--color-brand-600); }
.hf-page #cost-efficiency .hf-dt-dot--tp { background: var(--color-pro-500); }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-dt-tip--right { transform: translateX(12px); }
.hf-page #cost-efficiency .hf-dt-tip--left { transform: translateX(calc(-100% - 12px)); }
.hf-page #cost-efficiency .hf-dt-tip__m {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 7px;
}
.hf-page #cost-efficiency .hf-dt-tip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-neutral-300);
}
.hf-page #cost-efficiency .hf-dt-tip__row + .hf-dt-tip__row { margin-top: 4px; }
.hf-page #cost-efficiency .hf-dt-tip__row b {
  margin-left: auto;
  padding-left: 16px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-dt-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-chartcard__xaxis {
  position: relative;
  height: 13px;
  margin-top: 9px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-tcard--board .hf-tcard__head { padding-bottom: 6px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-mtbl.hf-board .hf-mtbl__tr {
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.hf-page #cost-efficiency .hf-board__impact {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.2;
  text-align: right;
}
.hf-page #cost-efficiency .hf-board__val {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success-700);
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-board__metric {
  font-size: 10.5px;
  color: var(--color-text-quaternary);
  white-space: nowrap;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-tcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 10px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-tcard__more { color: var(--color-text-quaternary); flex-shrink: 0; }
.hf-page #cost-efficiency .hf-tcard__tabs {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-tcard__tab.is-active {
  color: var(--color-brand-600);
  font-weight: 600;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-mtbl { padding: 4px 16px 6px; }
.hf-page #cost-efficiency .hf-mtbl__head,
.hf-page #cost-efficiency .hf-mtbl__tr {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 28px minmax(0, 1.1fr);
  align-items: center;
  gap: 9px;
}
.hf-page #cost-efficiency .hf-mtbl__head {
  padding: 8px 0 6px;
}
.hf-page #cost-efficiency .hf-mtbl__th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}
.hf-page #cost-efficiency .hf-mtbl__tr {
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background 140ms ease;
}
.hf-page #cost-efficiency .hf-mtbl__tr:hover { background: var(--color-bg-secondary); }
.hf-page #cost-efficiency .hf-mtbl__td {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #cost-efficiency .hf-mtbl__c-num { justify-content: flex-end; font-weight: 500; }
.hf-page #cost-efficiency .hf-mtbl__c-name { gap: 8px; }
.hf-page #cost-efficiency .hf-mtbl__c-team { gap: 10px; }
.hf-page #cost-efficiency .hf-mtbl__avatar { width: 22px; height: 22px; font-size: 10px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-mtbl__c-bar { gap: 8px; }
.hf-page #cost-efficiency .hf-mtbl__c-tool { justify-content: flex-start; }
.hf-page #cost-efficiency .hf-mtbl__c-int { justify-content: flex-end; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-page #cost-efficiency .hf-toollogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-mtbl__bar { flex: 1; min-width: 18px; height: 6px; }
.hf-page #cost-efficiency .hf-mtbl__bar-fill { background: var(--color-brand-500); display: block; height: 100%; border-radius: 999px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-avgroup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-action { padding: 6px 16px 8px; }
.hf-page #cost-efficiency .hf-action__group { border-top: 1px solid var(--color-border-secondary); }
.hf-page #cost-efficiency .hf-action__group:first-child { border-top: none; }
.hf-page #cost-efficiency .hf-action__grouphead {
  width: 100%;
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}
.hf-page #cost-efficiency .hf-action__bullet {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-action__bullet--high { background: var(--color-error-500); }
.hf-page #cost-efficiency .hf-action__bullet--medium { background: var(--color-warning-500, #F79009); }
.hf-page #cost-efficiency .hf-action__bullet--low { background: var(--color-brand-500); }
.hf-page #cost-efficiency .hf-action__grouplabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.hf-page #cost-efficiency .hf-action__groupcount {
  font-size: 12.5px;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-action__chev { color: var(--color-text-quaternary); margin-left: auto; }
.hf-page #cost-efficiency .hf-action__rows { padding-bottom: 4px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-action__row:hover { background: var(--color-bg-secondary); }
.hf-page #cost-efficiency .hf-action__avatar { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.hf-page #cost-efficiency .hf-action__info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.hf-page #cost-efficiency .hf-action__team {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-action__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

/* ── Teams table ───────────────────────────────────────────────────── */
.hf-page #cost-efficiency .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 #cost-efficiency .hf-uitbl__head,
.hf-page #cost-efficiency .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 #cost-efficiency .hf-uitbl__head {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
  padding-top: 8px;
  padding-bottom: 8px;
}
.hf-page #cost-efficiency .hf-uitbl__th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .hf-uitbl__tr {
  border-bottom: 1px solid var(--color-border-secondary);
}
.hf-page #cost-efficiency .hf-uitbl__tr:last-child { border-bottom: none; }
.hf-page #cost-efficiency .hf-uitbl__td {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 0;
}
.hf-page #cost-efficiency .hf-uitbl__col--team { gap: 10px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-uitbl__avatar[data-team="mobile"]   { background: var(--color-brand-600); }
.hf-page #cost-efficiency .hf-uitbl__avatar[data-team="platform"] { background: var(--color-brand-400); }
.hf-page #cost-efficiency .hf-uitbl__avatar[data-team="data"]     { background: var(--color-neutral-500); }
.hf-page #cost-efficiency .hf-uitbl__avatar[data-team="growth"]   { background: var(--color-neutral-400); }
.hf-page #cost-efficiency .hf-uitbl__avatar[data-team="core"]     { background: var(--color-error-500); }
.hf-page #cost-efficiency .hf-uitbl__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.hf-page #cost-efficiency .hf-uitbl__col--lic,
.hf-page #cost-efficiency .hf-uitbl__col--active,
.hf-page #cost-efficiency .hf-uitbl__col--inter {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hf-page #cost-efficiency .hf-uitbl__col--inter { justify-content: flex-start; }
.hf-page #cost-efficiency .hf-uitbl__col--bar { gap: 10px; }
.hf-page #cost-efficiency .hf-uitbl__bar {
  flex: 1;
  height: 7px;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.hf-page #cost-efficiency .hf-uitbl__bar-fill { height: 100%; border-radius: 999px; }
.hf-page #cost-efficiency .hf-uitbl__bar-fill--success { background: var(--color-success-500); }
.hf-page #cost-efficiency .hf-uitbl__bar-fill--brand   { background: var(--color-brand-500); }
.hf-page #cost-efficiency .hf-uitbl__bar-fill--neutral { background: var(--color-neutral-400); }
.hf-page #cost-efficiency .hf-uitbl__bar-fill--error   { background: var(--color-error-500); }
.hf-page #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .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 #cost-efficiency .hf-fcard--chart {
  left: -8px;
  right: auto;
  bottom: auto;
  top: 140px;
  width: 318px;
  padding: 16px 18px 14px;
}
.hf-page #cost-efficiency .hf-fcard__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .hf-fcard__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-fcard__unit { font-size: 22px; color: var(--color-text-tertiary); letter-spacing: -0.5px; }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-fcard__chart { display: block; width: 100%; height: 64px; margin-top: 2px; }
.hf-page #cost-efficiency .hf-fcard__caption {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  margin-top: 8px;
}

/* Card 2 — insight (upper-LEFT, overhanging the wrapper's left edge) */
.hf-page #cost-efficiency .hf-fcard--insight {
  left: -4px;
  right: auto;
  top: 300px;
  width: 296px;
  padding: 15px 17px 14px;
}
.hf-page #cost-efficiency .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 #cost-efficiency .hf-fcard__star {
  color: var(--color-brand-600);
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-fcard__insight-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.hf-page #cost-efficiency .hf-fcard__team { font-weight: 600; color: var(--color-text-primary); }
.hf-page #cost-efficiency .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 #cost-efficiency .hf-fcard__cta:hover { gap: 9px; color: var(--color-brand-700); }

/* ── Cost-specific overrides (win over the cloned block: placed after it) ── */
.hf-page #cost-efficiency .hf-bs__tcards {
  grid-template-columns: 1fr 1.5fr 1fr;
}
/* No Y-axis number labels on the forecast */
.hf-page #cost-efficiency .hf-cd-fc__ytick { display: none; }
/* Usage leaderboard: small unit after the per-day value */
.hf-page #cost-efficiency .hf-cd-lb__unit { font-size: 10px; font-weight: 500; color: var(--color-text-quaternary); margin-left: 1px; }
/* ── Usage seat-grid heatmap ─────────────────────────────────────────── */
.hf-page #cost-efficiency .hf-uheat {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 16px 14px;
  min-height: 0;
}
.hf-page #cost-efficiency .hf-uheat__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  align-content: stretch;
  min-height: 150px;
}
.hf-page #cost-efficiency .hf-uheat__seat {
  border-radius: 4px;
  min-height: 0;
  transition: transform 120ms ease, filter 120ms ease;
}
.hf-page #cost-efficiency .hf-uheat__seat:hover { transform: scale(1.18); filter: brightness(1.05); }
.hf-page #cost-efficiency .hf-uheat__seat--power    { background: var(--color-brand-700); }
.hf-page #cost-efficiency .hf-uheat__seat--active   { background: var(--color-brand-400); }
.hf-page #cost-efficiency .hf-uheat__seat--optimize { background: var(--color-pro-400); }
.hf-page #cost-efficiency .hf-uheat__seat--idle     { background: var(--color-neutral-200, #E9EAEB); }
.hf-page #cost-efficiency .hf-uheat__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 0;
  margin-bottom: 12px;
}
.hf-page #cost-efficiency .hf-uheat__legitem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .hf-uheat__legdot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── USAGE dashboard specifics (KPI row on TOP; wide central Action card) ── */
.hf-page #cost-efficiency .hf-beauty--usage .hf-bs__main-head { order: 1; }
.hf-page #cost-efficiency .hf-beauty--usage .hf-bs__metrics { order: 2; margin-top: 0; margin-bottom: 14px; }
.hf-page #cost-efficiency .hf-beauty--usage .hf-bs__tcards { order: 3; margin-top: 0; }
/* KPI variation to the RIGHT of the big value (figs default to column in clone) */
.hf-page #cost-efficiency .hf-beauty--usage .hf-metric__figs {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
}
.hf-page #cost-efficiency .hf-beauty--usage .hf-metric__value { flex-shrink: 0; }
.hf-page #cost-efficiency .hf-beauty--usage .hf-delta { flex-wrap: nowrap; white-space: nowrap; }
.hf-page #cost-efficiency .hf-beauty--usage .hf-delta__suffix { white-space: nowrap; }
/* High priority is locked open — head not interactive */
.hf-page #cost-efficiency .hf-action__grouphead--static { cursor: default; }
/* Action card is the central (wide) card → no truncated reasons, no empty bar col */
.hf-page #cost-efficiency .hf-beauty--usage .hf-action__row {
  grid-template-columns: auto minmax(0, 1fr);
}
.hf-page #cost-efficiency .hf-beauty--usage .hf-action__reason {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
/* Let the forecast hover tooltip escape the card and render over everything */
.hf-page #cost-efficiency .hf-tcard--chart { overflow: visible; }
.hf-page #cost-efficiency .hf-cd-fc,
.hf-page #cost-efficiency .hf-cd-fc__plot,
.hf-page #cost-efficiency .hf-cd-fc__bars,
.hf-page #cost-efficiency .hf-cd-fc__col { overflow: visible; }
.hf-page #cost-efficiency .hf-cd-tip { z-index: 40; }

/* Expanded state: drop the card container so the dashboard runs full-width
   like the Productivity beautyshot. The Back-to-compare bar sits above it,
   frameless. (Applies to whichever first-level card is expanded.) */
/* Card-resize tween: re-assert the gap transition over the reveal rule
   (which otherwise limits .hf-eff-cards to opacity/transform only). The
   width change itself is driven by .hf-eff-card-wrap flex-basis. */
.hf-page #cost-efficiency .hf-eff-cards {
  transition:
    opacity 0.12s linear,
    transform 0.12s linear,
    gap var(--resize-dur) var(--resize-ease);
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active { overflow: visible; }
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-card-shell {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-card-inner {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content-body { overflow: visible; }
/* Back control: pulled OUT of the top flow — a full-HEIGHT rounded tab in the
   left gutter, vertically centered label, with a hover fill. */
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content--expanded {
  position: relative;
  padding-left: 74px;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 66px;
  padding: 4px;
  transform: none;
  border-bottom: none;
  z-index: 30;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-back {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  justify-content: center;
  gap: 5px;
  color: var(--color-text-tertiary);
  box-shadow: none;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-back svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-back:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-shadow: none;
}
.hf-page #cost-efficiency .hf-tcard {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.hf-page #cost-efficiency .hf-tcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.hf-page #cost-efficiency .hf-tcard__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-quaternary);
}

/* Floating cards keep the EXACT productivity positions (inherited from the
   cloned block) — no overrides here. */
/* KPI row BELOW the 3 cards (head → cards → KPIs) */
.hf-page #cost-efficiency .hf-bs__main-head { order: 1; }
.hf-page #cost-efficiency .hf-bs__tcards { order: 2; margin-top: 0; }
.hf-page #cost-efficiency .hf-bs__metrics { order: 3; margin-top: 12px; margin-bottom: 0; }

/* ── Leaderboard ─────────────────────────────────────────────────────── */
.hf-page #cost-efficiency .hf-cd-lb {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 14px 12px;
}
.hf-page #cost-efficiency .hf-cd-lb__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 2px 10px;
  background: var(--color-bg-secondary);
  border-radius: 9px;
}
.hf-page #cost-efficiency .hf-cd-lb__tab {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  padding: 6px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.hf-page #cost-efficiency .hf-cd-lb__tab:hover { color: var(--color-text-primary); }
.hf-page #cost-efficiency .hf-cd-lb__tab.is-active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 0 0 1px var(--color-border-secondary);
}
.hf-page #cost-efficiency .hf-cd-lb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.hf-page #cost-efficiency .hf-cd-lb__row {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
}
.hf-page #cost-efficiency .hf-cd-lb__rank {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-cd-lb__av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
.hf-page #cost-efficiency .hf-cd-lb__tooldot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  justify-self: center;
}
.hf-page #cost-efficiency .hf-cd-lb__id {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.hf-page #cost-efficiency .hf-cd-lb__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #cost-efficiency .hf-cd-lb__sub {
  font-size: 10.5px;
  color: var(--color-text-quaternary);
}
.hf-page #cost-efficiency .hf-cd-lb__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 64px;
}
.hf-page #cost-efficiency .hf-cd-lb__val {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-cd-lb__bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-bg-secondary);
  overflow: hidden;
}
.hf-page #cost-efficiency .hf-cd-lb__barfill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--color-brand-500);
}

/* ── Forecast stacked bars ───────────────────────────────────────────── */
.hf-page #cost-efficiency .hf-cd-fc {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 6px 16px 12px;
}
.hf-page #cost-efficiency .hf-cd-fc__plot {
  position: relative;
  flex: 1;
  min-height: 168px;
  margin-bottom: 4px;
}
.hf-page #cost-efficiency .hf-cd-fc__grid {
  position: absolute;
  inset: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hf-page #cost-efficiency .hf-cd-fc__gridline {
  position: relative;
  border-top: 1px dashed var(--color-border-secondary);
}
.hf-page #cost-efficiency .hf-cd-fc__ytick {
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--color-text-quaternary);
  background: var(--color-bg-primary);
  padding-right: 4px;
}
.hf-page #cost-efficiency .hf-cd-fc__projzone {
  position: absolute;
  top: 0;
  bottom: 18px;
  right: 0;
  background: rgba(16, 24, 40, 0.05);
  opacity: 1;
  border-radius: 6px;
  pointer-events: none;
}
.hf-page #cost-efficiency .hf-cd-fc__projlabel {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  white-space: nowrap;
}
.hf-page #cost-efficiency .hf-cd-fc__bars {
  position: absolute;
  inset: 0 0 18px 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0 4px;
}
.hf-page #cost-efficiency .hf-cd-fc__col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hf-page #cost-efficiency .hf-cd-fc__stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5px;
}
.hf-page #cost-efficiency .hf-cd-fc__seg {
  width: 100%;
  box-sizing: border-box;
  transition: filter 120ms ease;
}
.hf-page #cost-efficiency .hf-cd-fc__seg.is-top { border-radius: 5px 5px 0 0; }
.hf-page #cost-efficiency .hf-cd-fc__seg.is-bot { border-radius: 0 0 5px 5px; }
.hf-page #cost-efficiency .hf-cd-fc__seg.is-top.is-bot { border-radius: 5px; }
.hf-page #cost-efficiency .hf-cd-fc__col.is-hover .hf-cd-fc__seg { filter: brightness(1.06); }
.hf-page #cost-efficiency .hf-cd-fc__col.is-proj .hf-cd-fc__seg { opacity: 0.9; }
/* Total cost label sitting on TOP of each stacked bar */
.hf-page #cost-efficiency .hf-cd-fc__total {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-cd-fc__total.is-proj { color: var(--color-text-quaternary); font-style: italic; }
.hf-page #cost-efficiency .hf-cd-fc__xtick {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-quaternary);
}
.hf-page #cost-efficiency .hf-cd-fc__col.is-proj .hf-cd-fc__xtick { color: var(--color-text-tertiary); font-style: italic; }

/* Legend */
.hf-page #cost-efficiency .hf-cd-fc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 14px;
}
.hf-page #cost-efficiency .hf-cd-fc__legitem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.hf-page #cost-efficiency .hf-cd-fc__legdot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ── Donut ───────────────────────────────────────────────────────────── */
.hf-page #cost-efficiency .hf-cd-donut {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 4px 16px 14px;
  gap: 10px;
}
.hf-page #cost-efficiency .hf-cd-donut__chart {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}
.hf-page #cost-efficiency .hf-cd-donut__svg { width: 100%; height: 100%; }
.hf-page #cost-efficiency .hf-cd-donut__arc {
  cursor: pointer;
  transition: stroke-width 130ms ease;
}
.hf-page #cost-efficiency .hf-cd-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hf-page #cost-efficiency .hf-cd-donut__big {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-cd-donut__sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-quaternary);
}
.hf-page #cost-efficiency .hf-cd-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hf-page #cost-efficiency .hf-cd-donut__leg {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: default;
  transition: background 120ms ease;
}
.hf-page #cost-efficiency .hf-cd-donut__leg.is-active { background: var(--color-bg-secondary); }
.hf-page #cost-efficiency .hf-cd-donut__legdot { width: 10px; height: 10px; border-radius: 3px; }
.hf-page #cost-efficiency .hf-cd-donut__legname {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-page #cost-efficiency .hf-cd-donut__legval {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Dark tooltip (shared by forecast) ───────────────────────────────── */
.hf-page #cost-efficiency .hf-cd-tip {
  position: absolute;
  bottom: 60%;
  z-index: 20;
  min-width: 152px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--color-neutral-900, #16181D);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28);
  pointer-events: none;
}
.hf-page #cost-efficiency .hf-cd-tip--right { left: calc(100% + 8px); }
.hf-page #cost-efficiency .hf-cd-tip--left { right: calc(100% + 8px); }
.hf-page #cost-efficiency .hf-cd-tip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.hf-page #cost-efficiency .hf-cd-tip__head b { color: #fff; font-size: 13px; }
.hf-page #cost-efficiency .hf-cd-tip__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  padding: 1.5px 0;
}
.hf-page #cost-efficiency .hf-cd-tip__row b {
  margin-left: auto;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hf-page #cost-efficiency .hf-cd-tip__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ===== hifi-logos.css ===== */
/* =========================================================================
   Axify Hi-Fi v3 — real logo treatments (clients + integrations)
   Replaces the placeholder wordmarks/SVGs with the design-system logos.
   ========================================================================= */

/* ---- Client logos in the hero "Trusted by" marquee ----
   Design-system treatment: grayscale + dimmed, → full colour on hover. */
.hf-page .hf-hero-v3__trust .hf-marquee__item {
  display: inline-flex;
  align-items: center;
}
/* Slightly faster client-logo scroll (base is 40s). */
.hf-page .hf-hero-v3__trust .hf-marquee__track {
  animation-duration: 28s;
}
.hf-page .hf-client-logo {
  /* width/height are set inline per logo (optical area normalisation). */
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.hf-page .hf-hero-v3__trust .hf-marquee__item:hover .hf-client-logo {
  filter: grayscale(0);
  opacity: 1;
}

/* ---- Integration logos in the How-it-works conveyor + output chips ----
   The placeholders were inline <svg> sized by `… svg { … }` rules; real logos
   are <img>, so mirror those sizes and keep aspect with object-fit. */
.hf-page .hf-intflow__tile img.hf-tool-logo {
  max-width: 42px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.hf-page .hf-intflow__chip-logo img.hf-tool-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* ===== hifi-responsive.css ===== */
/* =========================================================================
   Axify Hi-Fi — Responsive layer (single source of truth)
   -------------------------------------------------------------------------
   Desktop-first. Two breakpoints only:
     · max-width: 1024px  → TABLET   (degrade grids, tighten spacing)
     · max-width: 640px   → MOBILE   (single column, stacked, compact)
   Loaded LAST so it wins over the legacy scattered media queries while we
   migrate them out. Built section by section, in page order.
   ========================================================================= */

/* ======================================================================
   1 · FOUNDATIONS — type scale + section rhythm
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-section__inner { padding: 72px 32px; }
  .hf-page .hf-section--tight .hf-section__inner { padding: 48px 32px; }

  .hf-page .hf-display--lg { font-size: 44px; }
  .hf-page .hf-display--md { font-size: 36px; }
}

@media (max-width: 640px) {
  /* Unified vertical rhythm — 24px top/bottom on every section so the GAP
     between two adjacent sections is 24+24 = 48px (overrides the legacy mix
     of 56 / 44 / 140 / 64). Side padding stays 20px. */
  .hf-page .hf-section__inner { padding: 24px 20px !important; }
  .hf-page .hf-section--tight .hf-section__inner { padding: 24px 20px !important; }
  /* problem sits right under the full-bleed hero (which has no bottom
     padding), so it alone carries the hero→problem gap → 48px top. */
  .hf-page #problem .hf-section__inner { padding-top: 48px !important; }
  /* pinned solution sections (their inner was 0 top / 44 bottom). */
  .hf-page .hf-pin__inner .hf-section__inner { padding-top: 24px !important; padding-bottom: 24px !important; }
  /* final CTA uses section padding directly (was 48 / 64). */
  .hf-page .hf-finalcta-section { padding-top: 24px !important; padding-bottom: 24px !important; }

  .hf-page .hf-display--xl { font-size: clamp(32px, 8.5vw, 46px); line-height: 1.06; }
  .hf-page .hf-display--lg { font-size: 34px; line-height: 1.1; }
  .hf-page .hf-display--md { font-size: 28px; line-height: 1.12; }

  .hf-page .hf-lede { font-size: 17px; }
  .hf-page .hf-lede--lg { font-size: 18px; }
}

/* ======================================================================
   2 · HEADER — floating pill
   Nav links collapse below the tablet breakpoint; logo + CTAs stay.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-header-pill__nav { display: none; }
}

@media (max-width: 640px) {
  .hf-page .hf-header-shell { padding-left: 10px; padding-right: 10px; }
  .hf-page .hf-header-pill__inner { padding: 8px 8px 8px 14px; gap: 8px; }
  /* Tighten the action buttons so logo + 2 CTAs fit a 360–390px row. */
  .hf-page .hf-header-pill__right { gap: 6px; }
  .hf-page .hf-header-pill__btn { padding-left: 12px; padding-right: 12px; font-size: 14px; }
  /* Drop the secondary "Log in" on the narrowest screens — keep one primary CTA. */
  .hf-page .hf-header-pill__btn--secondary { display: none; }
}

/* ======================================================================
   3 · HERO (v3) — full-viewport opener
   The stage carries the side padding; don't double it on .__content.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-hero-v3 { margin: 14px 14px 0; }
  .hf-page .hf-hero-v3__stage { padding: 40px 28px 48px; }
  .hf-page .hf-hero-v3__lede { max-width: 540px; }
}

@media (max-width: 640px) {
  .hf-page .hf-hero-v3 { margin: 10px 10px 0; border-radius: 20px; }
  /* Touch devices skip the WebGPU cursor shader — give the static gradient a
     gentle ambient loop instead (no pointer interaction, very light). */
  .hf-page .hf-hero-v3__bg {
    background-size: 135% 135%;
    animation: hf-hero-bg-drift 22s ease-in-out infinite alternate;
  }
  .hf-page .hf-hero-v3__stage { padding: 28px 18px 32px; min-height: calc(100vh - 20px); }
  /* Left-align the whole hero on mobile (title, lede, CTAs, trust strip). */
  .hf-page .hf-hero-v3__content { align-items: flex-start; text-align: left; }
  .hf-page .hf-hero-v3__headline { font-size: 38px; line-height: 1.06; margin-bottom: 18px; }
  .hf-page .hf-hero-v3__lede { font-size: 16px; margin-bottom: 28px; max-width: 100%; }
  .hf-page .hf-hero-v3__ctas { width: auto; justify-content: flex-start; }
  .hf-page .hf-hero-v3__ctas .hf-btn { width: auto; justify-content: center; border-radius: 9999px; padding: 12px 26px; font-size: 15px; }
  /* "Trusted by engineering teams" strip stays centered (the rest of the
     hero is left-aligned). */
  .hf-page .hf-hero-v3__trust { text-align: center; }
  .hf-page .hf-hero-v3__trust-window { margin-left: auto; margin-right: auto; }
  /* Trust marquee: a touch smaller so ~3 wordmarks read cleanly */
  .hf-page .hf-hero-v3__trust .hf-marquee__item { font-size: 18px; }
  .hf-page .hf-hero-v3__trust-window { max-width: 300px; }
}

/* ======================================================================
   4 · SCROLLYTELLING PINS (adoption · cost-efficiency · productivity)
   On touch / small screens, pinned scroll-scrubbed reveals are awkward.
   Unpin them: collapse the scroll budget, let the inner flow normally,
   and force the reveal vars to their END state so all content is visible.
   The JS writes these vars inline WITHOUT !important, so these win.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-pin {
    height: auto;
    --section-progress: 1 !important;
    --reveal: 1 !important;
    --scroll-progress: 0 !important;
    --exit-progress: 0 !important;
  }
  .hf-page .hf-pin__inner {
    position: static;
    height: auto;
    min-height: 0;
  }
  /* problem was forced to 100vh, leaving a big empty gap below the cards. */
  .hf-page #problem { min-height: 0; display: block; }
  .hf-page .hf-pin[data-pin="cost-efficiency"] .hf-pin__inner { padding-top: 0; }
  /* Restore vertical breathing room now that they flow instead of fill 100vh. */
  .hf-page .hf-pin__inner .hf-section__inner { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 640px) {
  .hf-page .hf-pin__inner .hf-section__inner { padding-top: 44px; padding-bottom: 44px; }
}

/* ======================================================================
   5 · PROBLEM
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-problem-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Title carries an inline 48px → needs !important to scale down on mobile. */
  .hf-page #problem .hf-display--lg { font-size: 24px !important; }

  /* 3 problem cards → swipeable horizontal carousel with peek + spacing. */
  .hf-page .xp-stage {
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 0;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    /* Full-bleed RIGHT: cancel the section's 20px right gutter so the 2nd card
       peek runs flush to the screen edge (no white band on the right). Card 1
       keeps its left gutter alignment with the title. */
    margin-right: -20px;
    cursor: grab;
    /* Hide the horizontal scrollbar — drag/swipe to move instead. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hf-page .xp-stage::-webkit-scrollbar { display: none; }
  .hf-page .xp-stage.is-dragging { cursor: grabbing; }
  .hf-page .xp-card {
    flex: 0 0 84%;
    height: 430px;
    border-radius: 16px;
    transition: none;
    /* Not clickable on mobile — they're a swipeable preview, not links.
       Pointer events pass through to the stage so drag works anywhere. */
    pointer-events: none;
    cursor: default;
  }
  /* Neutralise the desktop hover-expand on touch */
  .hf-page .xp-stage:hover .xp-card,
  .hf-page .xp-stage:hover .xp-card:hover { flex: 0 0 84%; }
  /* Keep every card's body text visible (no hover state on touch) */
  .hf-page .xp-stage:hover .xp-card:not(:hover) .xp-body { opacity: 1; transform: none; }

  /* Left-align everything inside the cards — including the 01/02/03 numbers. */
  .hf-page .xp-card { padding: 22px; }
  .hf-page .xp-top { align-items: flex-start; padding-top: 28px; }
  .hf-page .xp-num,
  .hf-page .xp-title,
  .hf-page .xp-body { text-align: left; }
  /* 01/02/03 pinned to the top-left corner of each card. */
  .hf-page .xp-num {
    position: absolute;
    top: 20px;
    left: 22px;
    margin: 0;
    z-index: 2;
  }
  /* Left-align the illustration (justify = horizontal) and drop it to the
     BOTTOM of its flex area (align-items = vertical) so it sits right above the
     paragraph with a defined 12px gap, instead of floating with a big void. */
  .hf-page .xp-illus { justify-content: flex-start; align-items: flex-end; padding-top: 12px; padding-bottom: 12px; }
  .hf-page .xp-illus > * { margin-left: 0; margin-right: auto; }

  /* No hover on touch → play the card illustrations continuously. */
  .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: running !important; }
}

/* ======================================================================
   6 · SOLUTION SECTIONS — adoption · cost-efficiency · productivity
   The .hf-split is single-column here, so the copy stacks above the
   embedded product dashboard. Collapse the head grids. The dashboards
   themselves are dense multi-pane product UIs — squeezing them to ~335px
   makes the inner charts/tables illegible, so instead we keep each board
   at a legible min-width and let it scroll horizontally inside its frame.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page #adoption .hf-adopt-headgrid,
  .hf-page #productivity .hf-adopt-headgrid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 0;
  }
  .hf-page #adoption .hf-split,
  .hf-page #productivity .hf-split { gap: 48px; }
}

@media (max-width: 640px) {
  /* Keep the dense product dashboards at their natural width and let the
     whole frame scroll horizontally inside the column (instead of squeezing
     every inner grid until it's illegible). minmax(0,1fr) stops the grid
     track from expanding to the dashboard's content width. */
  .hf-page #adoption .hf-split,
  .hf-page #productivity .hf-split { grid-template-columns: minmax(0, 1fr); }

  .hf-page #adoption .hf-beauty,
  .hf-page #productivity .hf-beauty,
  .hf-page #cost-efficiency .hf-beauty {
    min-width: 0;
    max-width: none;
  }
  /* The dashboard FRAME is the scroll viewport; the inner board keeps its
     natural width and scrolls horizontally inside the framed window. */
  .hf-page #adoption .hf-bs-shell,
  .hf-page #productivity .hf-bs-shell,
  .hf-page #cost-efficiency .hf-bs-shell {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hf-page #adoption .hf-bs,
  .hf-page #productivity .hf-bs,
  .hf-page #cost-efficiency .hf-bs { min-width: 0; width: 880px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  /* Scale each dashboard DOWN (zoom affects layout, so the shell collapses to
     the scaled size) to ~315px tall — Linear-style — keeping horizontal scroll
     because the scaled width still exceeds the viewport. */
  .hf-page #adoption .hf-bs { zoom: 0.558; }
  .hf-page #productivity .hf-bs { zoom: 0.583; }
  .hf-page #cost-efficiency .hf-beauty--usage .hf-bs { zoom: 0.529; }
  .hf-page #cost-efficiency .hf-beauty:not(.hf-beauty--usage) .hf-bs { zoom: 0.56; }
  /* Dashboard frame: full-bleed container, with the scroll viewport starting
     at the title gutter (≈20px) and running to the screen's right edge so the
     board overflows off-screen → invites horizontal scroll. */
  .hf-page #adoption .hf-beauty,
  .hf-page #productivity .hf-beauty,
  .hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-beauty {
    display: block;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
  .hf-page #adoption .hf-bs-shell,
  .hf-page #productivity .hf-bs-shell,
  .hf-page #cost-efficiency .hf-bs-shell {
    width: auto;
    margin: 0 0 0 20px;
    padding-left: 0;
    padding-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Dashboards stay horizontally scrollable, but hide the scrollbar itself. */
  .hf-page .hf-bs-shell,
  .hf-page .hf-uitbl,
  .hf-page #cost-efficiency .hf-eff-content-body,
  .hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hf-page .hf-bs-shell::-webkit-scrollbar,
  .hf-page .hf-uitbl::-webkit-scrollbar,
  .hf-page #cost-efficiency .hf-eff-content-body::-webkit-scrollbar {
    display: none;
  }

  /* Efficiency: 2 cards SIDE BY SIDE, fitting the viewport (no horizontal
     scroll). Only applies in the collapsed/compare state — the expand→
     dashboard→back behavior (is-active / is-collapsing) is left untouched. */
  .hf-page #cost-efficiency .hf-eff-head { text-align: left; margin-left: 0; margin-bottom: 24px; }
  .hf-page #cost-efficiency .hf-eff-cards:not(.is-expanded-usage):not(.is-expanded-cost) {
    flex-direction: row;
    overflow-x: visible;
    gap: 10px;
    align-items: flex-start;
  }
  .hf-page #cost-efficiency .hf-eff-card-wrap:not(.is-active):not(.is-collapsing) {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Drop the lede + KPIs from both first-level cards; shrink the titles so
     they read cleanly in the narrow 2-up columns. */
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__lede,
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__kpis { display: none; }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__title { font-size: 16px; line-height: 1.18; min-height: 3.54em; }
  /* Tighter inner padding + smaller eyebrow badge for the narrow 2-up cards. */
  .hf-page #cost-efficiency .hf-eff-card-shell { padding: 5px; }
  .hf-page #cost-efficiency .hf-eff-summary { padding: 16px 14px; }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__eyebrow { padding: 3px 8px; font-size: 10px; }
  /* Left-align everything in both cards (override the right/left mirror). */
  .hf-page #cost-efficiency .hf-eff-summary { align-items: flex-start; text-align: left; }
  .hf-page #cost-efficiency .hf-eff-summary[data-align="right"] .hf-eff-card__title,
  .hf-page #cost-efficiency .hf-eff-summary[data-align="left"] .hf-eff-card__title { text-align: left; }
  /* Eyebrow badge left on BOTH cards. */
  .hf-page #cost-efficiency .hf-eff-summary[data-align="right"] .hf-eff-card__eyebrow,
  .hf-page #cost-efficiency .hf-eff-summary[data-align="left"] .hf-eff-card__eyebrow { align-self: flex-start; }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__cta { align-self: flex-start; }
  /* Remove the "Actual / Projected →" labels above the cost chart. */
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-fc__labels { display: none; }

  /* Both illustrations share one compact height so the two cards line up.
     (align-items:center on the card would otherwise shrink the viz to 0
     width — force full width + equal height.) */
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-card__viz { width: 100%; align-self: stretch; min-height: 0; height: 92px !important; margin-top: 12px; padding-top: 0; border-top: 0; flex: 0 0 auto; }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-viz-chart { min-height: 0 !important; height: 100%; flex: 1; }
  /* Usage seat grid: fewer, larger, legible squares (was 14 cols × 56 seats —
     unreadable at this width). Show 24 in a 6-col grid, vertically centered. */
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-viz-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    height: 100%;
    align-content: center;
  }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-viz-seat:nth-child(n+25) { display: none; }
  .hf-page #cost-efficiency .hf-eff-summary .hf-eff-viz-seat { border-radius: 3px; }

  /* When a card is expanded on mobile, put the Back control on TOP (a normal
     horizontal bar above the dashboard) instead of the left-gutter tab. */
  .hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content--expanded { padding-left: 0; }
  .hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-content-bar {
    position: static;
    width: 100%;
    height: auto;
    padding: 0 0 12px;
  }
  .hf-page #cost-efficiency .hf-eff-card-wrap.is-active .hf-eff-back {
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
  }

  /* Solution section titles → 24px, subtitles → 16px (all 3 sections). */
  .hf-page #adoption .hf-adopt-headgrid h2,
  .hf-page #productivity .hf-adopt-headgrid h2,
  .hf-page #cost-efficiency .hf-eff-head .hf-display {
    font-size: 24px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.2px !important;
  }
  /* Harmonise the tail span's tracking with the rest of the title (it carried
     a tight -1.3px sized for the desktop 40px headline). */
  .hf-page #adoption .hf-adopt-headgrid h2 span,
  .hf-page #productivity .hf-adopt-headgrid h2 span,
  .hf-page #cost-efficiency .hf-eff-head .hf-display span {
    letter-spacing: -0.2px !important;
  }
  .hf-page #adoption .hf-adopt-headgrid p,
  .hf-page #productivity .hf-adopt-headgrid p,
  .hf-page #cost-efficiency .hf-eff-head .hf-lede {
    font-size: 16px !important;
  }
  /* Let the gray tail flow INLINE after "…with AI." (instead of a forced
     line break) so it wraps naturally and fills the width. */
  .hf-page #adoption .hf-adopt-headgrid h2 span { display: inline !important; }
}

/* ======================================================================
   7 · THE AXIFY DIFFERENCE
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-diff__row { grid-template-columns: 96px 1fr; gap: 24px 32px; }
  .hf-page .hf-diff__row--no-kicker { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hf-page .hf-diff__row,
  .hf-page .hf-diff__row--no-kicker { grid-template-columns: 1fr; gap: 12px; }
  .hf-page .hf-diff__kicker { padding-top: 0; }

  /* Match the hero headline size (38px) for the main title, the big number,
     and each row title; subtitles 24px, body copy 16px. */
  .hf-page #difference .hf-display { font-size: 38px !important; line-height: 1.06 !important; }
  .hf-page #difference .hf-diff__big { font-size: 24px !important; }
  .hf-page #difference .hf-diff__small { font-size: 16px !important; }
  .hf-page #difference .hf-diff__body { font-size: 16px !important; display: none !important; }
  /* Tighter row rhythm on mobile: 24px top/bottom (was 44). */
  .hf-page #difference .hf-diff__row { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ======================================================================
   8 · BEYOND AI (PRO)
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page #beyond-ai .hf-beyond { margin: 0 14px; }
  .hf-page #beyond-ai .hf-beyond__inner { padding: 48px 24px 44px; }
  .hf-page #beyond-ai .hf-beyond__pillars { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* Container keeps its rounded card + matches the page's side gutter (it had
     an extra 14px margin on top of the section padding → too inset). */
  .hf-page #beyond-ai .hf-beyond { margin: 0; }
  /* The inner card carries a faint drop-shadow that, with the stacked mobile
     layout, reads as a gray divider line right under the badge — drop it. */
  .hf-page #beyond-ai .hf-beyond__inner { padding: 22px 20px 32px; box-shadow: none !important; }
  .hf-page #beyond-ai .hf-beyond__pillars { grid-template-columns: 1fr; }
  .hf-page #beyond-ai .hf-beyond__ctas { flex-direction: column; align-items: stretch; }
  .hf-page #beyond-ai .hf-beyond__ctas .hf-btn { width: 100%; justify-content: center; }
  .hf-page #beyond-ai .hf-beyond__art { max-width: 100%; height: auto; }
  /* Keep the normal 28px rhythm for title/lede, but ZERO the space directly
     around the illustration: cancel the flex gap on both sides with negative
     margins so lede→viz and viz→pillars are 0. */
  .hf-page #beyond-ai .hf-beyond__inner--stacked .hf-beyond__copy { gap: 18px; }
  .hf-page #beyond-ai .hf-beyond__viz--horizontal { margin-top: -18px; margin-bottom: -18px; }
  .hf-page #beyond-ai .hf-beyond__pillars { margin-top: 0; }

  /* PRO badge: stays INSIDE the card, centered above the title, with
     breathing room from the top border (no longer touching it). */
  .hf-page #beyond-ai .hf-pro-badge--corner-right {
    position: static;
    display: flex;
    justify-content: center;
    top: auto;
    right: auto;
    transform: none;
    margin: 28px 0 0;
  }
  /* Title 38px; subtitle 16px (reads as a paragraph). */
  .hf-page #beyond-ai .hf-beyond__headline { font-size: 38px !important; line-height: 1.08 !important; }
  .hf-page #beyond-ai .hf-beyond__lede { font-size: 16px !important; }
}

/* ======================================================================
   9 · HOW IT WORKS
   The integration-flow diagram is a fixed-size animated widget; let it
   scale down. Head grid + 3-up steps collapse.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-how__head-grid { grid-template-columns: 1fr; gap: 28px; }
  .hf-page .hf-how__steps { grid-template-columns: 1fr; }
  .hf-page .hf-how__step {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-secondary);
    padding: 28px 0 24px;
  }
  .hf-page .hf-how__step:nth-child(2),
  .hf-page .hf-how__step:last-child { padding-left: 0; }
  .hf-page .hf-how__step:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .hf-page .hf-how__step-title { font-size: 26px; }
  /* Section head: title 38px, subtitle 16px. */
  .hf-page #how-it-works .hf-how__head-grid h2 { font-size: 38px !important; line-height: 1.06 !important; }
  .hf-page #how-it-works .hf-how__head-grid p { font-size: 16px !important; }
  /* Head-grid carries an inline 0 32px padding → title starts 32px in,
     misaligned vs the rest of the page. Zero it so it aligns at the gutter. */
  .hf-page #how-it-works .hf-how__head-grid { padding-left: 0 !important; padding-right: 0 !important; }
  /* Conveyor diagram: clip + center; it overflows by design and fades at edges */
  .hf-page .hf-intflow { overflow: hidden; }
  /* Remove the gap between the paragraph and the illustration. */
  .hf-page #how-it-works .hf-how__head { margin-bottom: 0 !important; }
  .hf-page #how-it-works .hf-intflow { margin-top: -40px; }

  /* (1) Shrink the conveyor TILES + Axify HUB ~30% (animation untouched —
     the rail's travel distance/keyframes are unchanged). */
  .hf-page #how-it-works .hf-intflow__tile {
    width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 13px;
  }
  .hf-page #how-it-works .hf-intflow__tile svg { width: 24px; height: 24px; }
  .hf-page #how-it-works .hf-intflow__hub {
    width: 100px; height: 100px; border-radius: 23px;
  }
  /* The inner plate + frame (::before/::after) keep the desktop 29px radius,
     which is ROUNDER than the shrunk 23px outer tile → their corners bulge
     past it ("doesn't fit its container"). Re-nest them concentrically:
     outer 23px − 4px inset = 19px. */
  .hf-page #how-it-works .hf-intflow__hub::before,
  .hf-page #how-it-works .hf-intflow__hub::after { border-radius: 19px; }
  .hf-page #how-it-works .hf-intflow__hub svg { width: 43px; height: 43px; }
  /* Reduce conveyor travel ~30% so the smaller tiles tuck under the smaller
     hub with the same "feed into the logo" effect as at full size. */
  .hf-page #how-it-works .hf-intflow__rail { --reach: 330px; --near: 32px; }

  /* (2) Outputs: equal columns, single-line content-sized chips (no wasted
     right space). Anchored to the bottom (below the arrows); since chips are
     now single-line (equal height), the 3 labels line up on their own. */
  .hf-page #how-it-works .hf-intflow__outputs { align-items: flex-end; }
  .hf-page #how-it-works .hf-intflow__out-group { min-width: 0; justify-content: flex-end; padding: 0 4px; }
  .hf-page #how-it-works .hf-intflow__chip { padding: 7px 9px; gap: 5px; }
  .hf-page #how-it-works .hf-intflow__chip-logo svg { width: 14px; height: 14px; }
  .hf-page #how-it-works .hf-intflow__chip-label { font-size: 10px; white-space: nowrap; }
}

/* ======================================================================
   10 · SOCIAL (testimonial)
   ====================================================================== */
@media (max-width: 640px) {
  .hf-page .hf-social__more { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .hf-page .hf-social__quote { font-size: 24px; padding: 0; }
}

/* ======================================================================
   11 · FINAL CTA (already stacks at 880 — align to our scale)
   ====================================================================== */
@media (max-width: 640px) {
  .hf-page .hf-finalcta-section { padding: 48px 0 64px; }
  .hf-page .hf-finalcta-ribbon { padding: 0 16px; }
  .hf-page .hf-finalcta-ribbon__inner { padding: 28px 22px; }
  .hf-page .hf-finalcta-ribbon__actions { flex-direction: column; }
  .hf-page .hf-finalcta-ribbon__actions a { width: 100%; }
}

/* ======================================================================
   12 · FOOTER (inline-styled grid → needs !important to override)
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-footer__cols { grid-template-columns: 1fr 1fr 1fr !important; gap: 36px !important; }
  .hf-page .hf-footer__cols > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .hf-page .hf-footer__cols { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
  .hf-page .hf-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start !important; }
}

/* ======================================================================
   13 · FLOATING CARDS
   · .hf-fcards  = fixed left-edge scrollytelling nav rail (desktop only —
     the chapters are now stacked & self-explanatory, so hide it on touch).
   · .hf-fcard   = insight / metric cards that float OVER the dashboards at
     desktop coordinates. On mobile, drop them into normal flow as stacked
     cards so they neither overflow nor cover the (narrow) dashboard.
   ====================================================================== */
@media (max-width: 1024px) {
  .hf-page .hf-fcards { display: none; }
}

@media (max-width: 640px) {
  /* Hidden on mobile for now (not removed) — to revisit later. */
  .hf-page #adoption .hf-fcard,
  .hf-page #productivity .hf-fcard,
  .hf-page #cost-efficiency .hf-fcard {
    display: none !important;
  }
}

/* Ambient hero background loop (mobile) — gentle gradient drift, no cursor. */
@keyframes hf-hero-bg-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-page .hf-hero-v3__bg { animation: none !important; }
}