/* ================================================================
   CONSALTEK PREMIUM LIGHT SURFACE / DEPTH SYSTEM — CORE TOKENS
   (§1) White-as-a-Material + (§3) 4 elevation levels
   7 token families: surfaces / text / accent / radius / elevation
                      / border / transitions
   --cf-* backward-compatible aliases for homepage/cards pre-§18
   ================================================================ */

:root {

  /* ============================================================
     A. SURFACE HIERARCHY (§1 + §3 CORRECTION PASS)
     canvas (A) < recessed (D) < surface (B) < raised (C)
     DELIBERATE 10-20 value separations now visible not 3/255 invisible.
     §3 user targets: canvas ~#F5F7FA, surface #FCFDFE, raised #FFFFFF,
     recessed ~#EEF1F5–#F1F3F6. Still appears white at first glance.
     ============================================================ */

  --cs-canvas:      #FBFCFE;  /* A. PAGE BACKGROUND */
  --cs-surface:     #FFFFFF;  /* B. NORMAL component surface */
  --cs-raised:      #FFFFFF;  /* C. RAISED white card/button */
  --cs-recessed:    #F7F9FC;  /* D. RECESSED containers/bases */
  --cs-card-surface: #FFFFFF;
  --cs-card-border: rgba(255, 255, 255, 0.92);
  --cs-card-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.98),
    inset -5px -7px 13px rgba(47, 58, 72, 0.035),
    0 12px 18px rgba(38, 49, 64, 0.075),
    0 2px 4px rgba(38, 49, 64, 0.045);

  --cs-canvas-2:    #F7F9FC;  /* subtle canvas 2nd tone for continuous shift */
  --cs-raised-gradient: linear-gradient(
    145deg,
    #FFFFFF 0%,
    #FCFCFD 52%,
    #FFFFFF 100%
  );  /* §4 USER TARGET — extremely subtle face tonal fall-off, NOT decorative */

  --cs-highlight:   rgba(255, 255, 255, 0.95); /* §1 REQUESTED — illuminated top/left edge spec */
  --cs-shadow-inset: inset 0 1px 2px rgba(15, 28, 48, 0.04); /* §1 REQUESTED — recessed inset shadow helper */
  --cs-shadow-inset-soft: inset 0 2px 4px rgba(15, 28, 48, 0.035);

  /* ============================================================
     B. TEXT / TYPOGRAPHY (§11 dark navy/charcoal restrained)
     ============================================================ */

  --cs-text:         #121826;   /* body/default */
  --cs-text-strong:  #121826;   /* headings/primary emphasis */
  --cs-text-deep:    #0A1222;   /* deep dark premium near-black */
  --cs-muted:        #667085;   /* secondary/support */
  --cs-muted-2:      #94A3B8;   /* tertiary meta */

  /* ============================================================
     C. ACCENT / BRAND (§5 blue used LESS, small selective only)
     ============================================================ */

  --cs-blue:           #5E70CF;
  --cs-blue-hover:     #4D60BF;
  --cs-blue-focus:     rgba(94, 112, 207, 0.22);
  --cs-blue-bg:        rgba(94, 112, 207, 0.08);
  --cs-blue-bg-2:      rgba(94, 112, 207, 0.04);
  --cs-blue-border:    rgba(94, 112, 207, 0.24);
  --cs-blue-border-hi: rgba(94, 112, 207, 0.42);

  --cs-success:        #169B62;
  --cs-success-bg:     rgba(22, 155, 98, 0.08);
  --cs-success-border: rgba(22, 155, 98, 0.22);
  --cs-warning:        #C98512;
  --cs-warning-bg:     rgba(201, 133, 18, 0.08);
  --cs-warning-border: rgba(201, 133, 18, 0.22);
  --cs-danger:         #C53F3F;
  --cs-danger-bg:      rgba(197, 63, 63, 0.08);
  --cs-danger-border:  rgba(197, 63, 63, 0.22);

  /* ============================================================
     D. RADIUS — RESTRAINED (§4 anti-neumorphic max 16 ≤ r ≤ 10)
     NO giant 22/24 bubble radii unless L3 featured card 16px MAX
     ============================================================ */

  --cs-radius-xs:  8px;
  --cs-radius-sm:  10px;   /* small surfaces / compact cards */
  --cs-radius-md:  16px;   /* default: cards / controls / L2 card */
  --cs-radius-lg:  20px;   /* large: L3 featured, forms */
  --cs-radius-xl:  24px;
  --cs-radius-pill:999px;  /* reserved only for chips/badges */

  /* ============================================================
     E. ELEVATION (§6 CORRECTION PASS REBUILD)
     Light top-left source / depth bottom-right (§7)
     EVERY elevated level = 4-part physical model:
       1) cs-highlight top-edge inset (0 1px 0 var(--cs-highlight))
       2) TIGHT CONTACT SHADOW (small/close/low-opacity directly under)
       3) TRANSITION mid shadow (connects contact→ambient)
       4) BROAD SOFT AMBIENT (larger/lower-opa diffuse elevation)
     §8: "ONE LARGE BLUR IS NOT ENOUGH." Separate contact + ambient REQUIRED.
     ALL neutral rgba(15, 28, 48, X) — NO blue tint (removed old blue 0.05/0.07 cast layers)
     ============================================================ */

  --cs-elev-0: none;   /* L0 canvas / recessed — NO floating */

  --cs-ridge:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(232, 238, 245, 0.84);

  --cs-elev-1:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    7px 7px 14px rgba(214, 221, 231, 0.44),
    -5px -5px 12px rgba(255, 255, 255, 0.96);

  --cs-elev-2:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    12px 12px 24px rgba(212, 219, 229, 0.5),
    -10px -10px 22px rgba(255, 255, 255, 0.97);

  --cs-elev-3:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    18px 18px 34px rgba(210, 217, 228, 0.56),
    -14px -14px 30px rgba(255, 255, 255, 0.99);

  --cs-elev-2-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    16px 16px 30px rgba(210, 217, 228, 0.56),
    -12px -12px 26px rgba(255, 255, 255, 0.99);

  --cs-elev-3-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    20px 20px 38px rgba(206, 214, 227, 0.62),
    -14px -14px 30px rgba(255, 255, 255, 1);

  --cs-shadow-inset:
    inset 5px 5px 10px rgba(220, 226, 235, 0.68),
    inset -5px -5px 10px rgba(255, 255, 255, 0.99);

  /* §9 BUTTON-SPECIFIC ELEVATION CORRECTION
     User: "dark buttons are too obviously floating/plastic — REDUCE floating"
     Tactile control: tight contact shadow + MODEST ambient shadow (not giant card blur)
     HOVER translate MAX -1px (not -1.5 as before) per user mandate §9 */
  --cs-action-primary-bg: #121C29;
  --cs-action-primary-color: #FFFFFF;
  --cs-action-primary-border: #121C29;
  --cs-elev-primary-btn:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 3px 8px rgba(83, 102, 204, 0.10);

  --cs-elev-primary-btn-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 5px 12px rgba(83, 102, 204, 0.16);

  /* Secondary button hover elevation (tight tactile not card blur) */
  --cs-elev-secondary-btn-hover:
    var(--cs-ridge),
    var(--cs-elev-2);

  /* ============================================================
     F. BORDERS / EDGE DEFINITION (§5 CORRECTION PASS)
     User complaint: "Current cards rely too much on visible grey borders."
     Solution: REDEFINE hierarchy so DEFAULT border-soft = 0.045 (faint lighting)
     NOT the old 0.08 (prominent outline). Edge via lighting > heavy outlines.
     Target: rgba(20, 40, 70, 0.045) ≈ rgba(15,28,48,0.045) ≈ 0.045
     ============================================================ */

  --cs-border-faint:  rgba(240, 243, 248, 0.78);  /* ultra-faint separators only */
  --cs-border-soft:   rgba(236, 240, 246, 0.98);  /* default surface line */
  --cs-border-medium: rgba(228, 234, 242, 0.98);  /* stronger card edge */
  --cs-border-strong: rgba(15, 28, 48, 0.14);   /* strong contrast only */
  --cs-border-blue-rail: rgba(94, 112, 207, 0.22);

  --cs-divider:      1px solid rgba(15, 28, 48, 0.06);

  /* ============================================================
     G. MOTION + TRANSITIONS (§14 subtle only)
     ============================================================ */

  --cs-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --cs-ease-express: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-surface-t:    220ms var(--cs-ease);
  --cs-fast-t:       140ms var(--cs-ease);
  --cs-elevation-t:  260ms var(--cs-ease-express);

  /* ============================================================
     H. LAYOUT / SPACING tokens
     ============================================================ */

  --cs-shell-max:      1248px;
  --cs-shell-gutter:   32px;
  --cs-section-pad-y:  clamp(52px, 5vw, 76px);
  --cs-section-pad-compact: clamp(34px, 4vw, 52px);
  --cs-public-header-height: 72px;
  --cs-public-header-offset: 72px;
  --cs-public-title-size: clamp(25px, 2.2vw, 31px);
  --cs-public-title-weight: 540;
  --cs-public-title-line: 1.17;

  /* ============================================================
     I. STRUCTURAL LAYERED SURFACE TOKENS (NEW: layered-geometry pass)
     Rear plate = structural base layer offset below front.
     Cool neutral NOT dark grey — two precisely manufactured surfaces
     separated by "a few physical millimetres" (not neumorphism).
     ============================================================ */

  --cs-rear-plate:       #ECF0F4;  /* base cool neutral rear (A) */
  --cs-rear-plate-2:     #E9EDF3;  /* rear 2nd tone for subtle shift */
  --cs-rear-plate-gradient: linear-gradient(145deg,
    var(--cs-rear-plate) 0%,
    var(--cs-rear-plate-2) 100%
  );

  /* Rear plate geometry offsets.
     SMALL  (product cards): lower depth, closer plates
     MD     (normal portfolio cards)
     FEATURED (CTA / featured portfolio): larger separation
     Offset convention: translate(h-offset 1-3px RIGHT, v-offset 5-8px BOTTOM)
     Light TOP-LEFT → depth/rear biased BOTTOM-RIGHT per §7 rule. */
  --cs-layered-offset-sm:       translate(1px, 4px);   /* product cards */
  --cs-layered-offset-md:       translate(2px, 6px);   /* standard project cards */
  --cs-layered-offset-featured: translate(3px, 8px);   /* CTA / featured showcase */
  --cs-layered-rear-border-adj: 0.5px;                 /* rear radius slightly smaller or same as front */

  /* Rear plate shadow = ultra-tight contact depth directly under (NOT ambient).
     Ambient elevation stays on the front plate as before. */
  --cs-rear-plate-shadow:
    0 1px 2px rgba(15, 28, 48, 0.035),
    0 3px 8px rgba(15, 28, 48, 0.045);

  /* ============================================================
     FOOTER DARK SURFACE (inverted, preserved)
     ============================================================ */

  --cs-footer-1: #FFFFFF;
  --cs-footer-2: #F8FAFC;
  --cs-footer-text: #253044;
  --cs-footer-muted: #6B7280;

  /* ================================================================
     BACKWARD-COMPATIBLE ALIASES — legacy --cf-* tokens pre-migration
     All homepage + old components keep working; gradually migrate.
     ================================================================ */

  --cf-pearl:          var(--cs-canvas);
  --cf-white:          var(--cs-raised);
  --cf-graph:          #202733;
  --cf-graph-2:        #2A3240;
  --cf-ink:            var(--cs-text-strong);
  --cf-blue:           var(--cs-blue);
  --cf-blue-hover:     var(--cs-blue-hover);
  --cf-blue-light:     #8FA8F2;
  --cf-blue-bg:        var(--cs-blue-bg);
  --cf-blue-border:    var(--cs-blue-border);
  --cf-text-1:         var(--cs-text);
  --cf-text-2:         var(--cs-muted);
  --cf-text-3:         var(--cs-muted-2);
  --cf-panel:          #CFD6E1;
  --cf-panel-light:    #E4EAF2;
  --cf-metal:          #BCC7D6;
  --cf-green:          var(--cs-success);
  --cf-green-bg:       var(--cs-success-bg);
  --cf-green-border:   var(--cs-success-border);
  --cf-amber:          var(--cs-warning);
  --cf-amber-bg:       var(--cs-warning-bg);
  --cf-amber-border:   var(--cs-warning-border);

  --cf-radius:         var(--cs-radius-md);
  --cf-radius-lg:      var(--cs-radius-lg);
  --cf-radius-sm:      var(--cs-radius-sm);
  --cf-shadow-sm:      var(--cs-elev-1);
  --cf-shadow-md:      var(--cs-elev-2);
  --cf-shadow-lg:      var(--cs-elev-2);
  --cf-shadow-blue:    0 6px 18px rgba(94, 112, 207, 0.24);
  --cf-ease:           var(--cs-ease);
  --cf-shell-max:      var(--cs-shell-max);
  --cf-shell-gutter:   var(--cs-shell-gutter);
  --cf-public-header-height: var(--cs-public-header-height);
  --cf-public-header-offset: var(--cs-public-header-offset);
  --cf-section-space:  var(--cs-section-pad-y);
  --cf-section-space-compact: var(--cs-section-pad-compact);
  --cf-page-hero-space: clamp(36px, 4.5vw, 62px);
  --cf-page-hero-bottom-space: clamp(28px, 3.8vw, 44px);
  --cf-surface-border: var(--cs-border-soft);
  --cf-surface-shadow: var(--cs-elev-2);
  --cf-surface-shadow-lg: var(--cs-elev-3);
  --cf-footer-surface: var(--cs-footer-1);
  --cf-footer-surface-2: var(--cs-footer-2);
}

/* ================================================================
   BASE CANVAS — new canvas background (A), not pure white (§1 rule)
   ================================================================ */

html, body {
  background-color: var(--cs-canvas);
}

body {
  background: var(--cs-canvas);
  color: var(--cs-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.home {
  background: var(--cs-canvas);
  color: var(--cs-text);
}

/* ================================================================
   §2 PREMIUM SURFACE MODEL — reusable gradient base classes
   + Recessed primitive (form shells, module bases)
   ================================================================ */

.cs-surface-raised {
  background: var(--cs-raised-gradient);
}

.cs-recessed {
  background:
    linear-gradient(180deg,
      var(--cs-recessed) 0%,
      #EBEEF3 100%
    );
  border: 1px solid var(--cs-border-faint);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    var(--cs-shadow-inset);
  border-radius: var(--cs-radius-lg);
}

/* =================================================================
   § LAYERED RAISED SURFACE PRIMITIVES (STRUCTURAL GEOMETRY PASS)
   Problem target: "flat white rectangle + shadow" → layered physical object
   Construction:
     MAIN ELEMENT  = clean white front plate (raises gradient / border /
                     edge highlight as before → content carried)
     ::before      = structural REAR/BASE PLATE positioned 5–8px lower and
                     1–3px horizontally (bottom-right biased for top-left light)
   Result at a glance:
     CANVAS → REAR PLATE (#E9EDF3/ECF0F4, COOL NEUTRAL not dark) →
              CONTACT DEPTH (rear shadow) → RAISED FRONT WHITE PLATE →
              EDGE HIGHLIGHT → CONTENT.
   NOT neumorphism. NOT a second card. NOT a thick border.
   Use pseudo-element so NO markup wrapper needed.
   pointer-events:none, z-index behind front, border-radius:inherit follows
   front plate geometry, overflow-safe. Responsive rear offset reduction at
   mobile via canonical tokens.
   ================================================================= */

/* -------- Base mechanics (position: relative; z-content elevated; overflow visible for rear) -------- */

.cs-layered-surface,
.cs-layered-grid-shell,
/* — selective component application: PORTFOLIO base + PRODUCT + CTA — */
.cs-card,
.cs-card-lg,
.cf-module-card,
.cf-module-card--project,
.cf-module-card--featured,
.cf-case-card,
.cf-case-primary,
.cf-case-feature,
.cf-tool-card,
.cf-trial-card,
.cf-trial-preview-card,
.cf-admin-panel,
.cf-page-cta,
.cf-form-shell,
.cf-route-card,
.cf-surface,
.cf-services-architecture,
.cf-service-blueprint,
.cf-feature-panel,
.cf-service-panel,
.cf-visual-shell--light,
.cf-tool-directory-card,
.cf-tool-main-surface,
.pf-module-card,
.pf-surface,
.pf-cta {
  position: relative;
  z-index: 1;                          /* front plate content above ::before */
}

.cs-layered-surface > *,
.cs-layered-grid-shell > *,
/* front content z-order inside applied layered selectors: */
.cs-card > *,
.cs-card-lg > *,
.cf-module-card > *,
.cf-case-card > *,
.cf-case-primary > *,
.cf-tool-card > *,
.cf-trial-card > *,
.cf-trial-preview-card > *,
.cf-admin-panel > *,
.cf-page-cta > *,
.cf-form-shell > *,
.cf-route-card > *,
.cf-surface > *,
.cf-services-architecture > *,
.cf-service-blueprint > *,
.cf-feature-panel > *,
.cf-service-panel > *,
.cf-visual-shell--light > *,
.cf-tool-directory-card > *,
.cf-tool-main-surface > *,
.pf-module-card > *,
.pf-surface > *,
.pf-cta > * {
  position: relative;
  z-index: 2;                          /* content children strictly above rear */
}

/* Shared ::before rear-plate mechanics (all tiers) */
.cs-layered-surface::before,
.cs-layered-grid-shell::before,
/* — applied rear plate pseudo (all selected components unless tier modifier): */
.cs-card::before,
.cs-card-lg::before,
.cf-module-card::before,
.cf-module-card--project::before,
.cf-module-card--featured::before,
.cf-case-card::before,
.cf-case-primary::before,
.cf-case-feature::before,
.cf-tool-card::before,
.cf-trial-card::before,
.cf-trial-preview-card::before,
.cf-admin-panel::before,
.cf-page-cta::before,
.cf-form-shell::before,
.cf-route-card::before,
.cf-surface::before,
.cf-services-architecture::before,
.cf-service-blueprint::before,
.cf-feature-panel::before,
.cf-service-panel::before,
.cf-visual-shell--light::before,
.cf-tool-directory-card::before,
.cf-tool-main-surface::before,
.pf-module-card::before,
.pf-surface::before,
.pf-cta::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: transparent;
  border-radius: calc(var(--cs-radius-md) - 2px);
  border: 1px solid var(--cs-border-faint);
  z-index: 0;                          /* BEHIND front; inside relative container at z:1 → rear is negative relative to content */
  pointer-events: none;                /* never intercept clicks on card/cta content */
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition:
    transform var(--cs-fast-t),
    box-shadow var(--cs-surface-t),
    opacity var(--cs-surface-t);
  will-change: transform;
}

.cs-surface::after,
.cs-surface--standard::after,
.cs-surface--featured::after,
.cs-surface--product::after,
.cs-layered-surface::after,
.cs-layered-grid-shell::after,
.cs-card::after,
.cs-card-lg::after,
.cf-module-card::after,
.cf-module-card--project::after,
.cf-module-card--featured::after,
.cf-case-card::after,
.cf-case-primary::after,
.cf-case-feature::after,
.cf-tool-card::after,
.cf-trial-card::after,
.cf-trial-preview-card::after,
.cf-page-cta::after,
.cf-route-card::after,
.cf-surface::after,
.cf-services-architecture::after,
.cf-service-blueprint::after,
.cf-feature-panel::after,
.cf-service-panel::after,
.cf-visual-shell--light::after,
.cf-tool-directory-card::after,
.cf-tool-main-surface::after,
.pf-module-card::after,
.pf-surface::after,
.pf-cta::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--cs-radius-md) - 2px);
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(var(--cs-accent-color, var(--cs-blue)), var(--cs-accent-color, var(--cs-blue))) top left / 42px 2px no-repeat,
    linear-gradient(var(--cs-accent-color, var(--cs-blue)), var(--cs-accent-color, var(--cs-blue))) top left / 2px 34px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--cs-accent-color, var(--cs-blue-hover))), var(--cs-accent-color-2, var(--cs-accent-color, var(--cs-blue-hover)))) bottom right / 42px 2px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--cs-accent-color, var(--cs-blue-hover))), var(--cs-accent-color-2, var(--cs-accent-color, var(--cs-blue-hover)))) bottom right / 2px 34px no-repeat;
  opacity: 0.46;
}

/* Tier SMALL — product cards / lower depth surfaces
   Offset closer, plates almost flush. */
.cs-layered-surface--sm::before,
/* PRODUCT CARD depth tier (close flush, less separation 4px/1px user mandate): */
.cf-tool-card::before,
.cf-trial-card::before,
.cf-trial-preview-card::before,
.cf-admin-panel::before,
.cf-route-card::before,
.cf-surface::before {
  transform: none;
}

/* Tier DEFAULT MD — standard portfolio / generic layered cards */
.cs-layered-surface::before,
.cs-layered-surface--md::before,
.cs-card::before,
.cf-module-card::before,
.cf-case-card::before {
  transform: none;
}

/* Tier FEATURED LARGE — CTA surface / major showcase cards
   Rear plate moves further = clearer 2-plate separation. */
.cs-layered-surface--featured::before,
.cs-layered-grid-shell::before,
/* FEATURED COMPONENTS (showcase depth tier 8px/3px user mandate target): */
.cs-card-lg::before,
.cf-module-card--project::before,
.cf-module-card--featured::before,
.cf-case-primary::before,
.cf-case-feature::before,
.cf-page-cta::before,
.cf-form-shell::before {
  transform: none;
}

/* Hover behaviour: rear plate shifts SMALL fraction (deepen the 3d illusion)
   front plate uses existing translateY/motion; rear shifts LESS so gap visual widens subtly */
.cs-layered-surface:hover::before,
.cs-layered-grid-shell:hover::before,
/* hover rear for all applied components: rear drops slightly more (gap widens) */
.cs-card:hover::before,
.cs-card-lg:hover::before,
.cf-module-card:hover::before,
.cf-module-card--project:hover::before,
.cf-module-card--featured:hover::before,
.cf-case-card:hover::before,
.cf-case-primary:hover::before,
.cf-case-feature:hover::before,
.cf-tool-card:hover::before,
.cf-trial-card:hover::before,
.cf-trial-preview-card:hover::before,
.cf-admin-panel:hover::before,
.cf-page-cta:hover::before,
.cf-form-shell:hover::before,
.cf-route-card:hover::before,
.cf-surface:hover::before {
  transform: none;
  opacity: 0.96;
}

/* Rear plate on featured hover → even deeper displacement */
.cs-layered-surface--featured:hover::before,
/* Featured tier hover rear displacement (deeper) */
.cs-card-lg:hover::before,
.cf-module-card--project:hover::before,
.cf-module-card--featured:hover::before,
.cf-case-primary:hover::before,
.cf-case-feature:hover::before,
.cf-page-cta:hover::before,
.cf-form-shell:hover::before {
  transform: none;
}

/* Canonical front-plate material shared by public cards, CTAs and product surfaces. */
.cs-surface,
.cs-surface--standard,
.cs-surface--featured,
.cs-surface--product,
.cs-layered-surface,
.cs-card,
.cs-card-lg,
.cf-module-card,
.cf-module-card--project,
.cf-module-card--featured,
.cf-case-card,
.cf-case-primary,
.cf-case-feature,
.cf-tool-card,
.cf-trial-card,
.cf-trial-preview-card,
.cf-page-cta,
.cf-form-shell,
.cf-route-card,
.cf-surface,
.cf-services-architecture,
.cf-service-blueprint,
.cf-feature-panel,
.cf-service-panel,
.cf-visual-shell--light,
.cf-tool-directory-card,
.cf-tool-main-surface,
.pf-module-card,
.pf-surface,
.pf-cta {
  background: var(--cs-card-surface);
  border: 1px solid var(--cs-card-border);
  border-radius: 15px;
  box-shadow: var(--cs-card-shadow);
  overflow: hidden;
}

.cs-surface--featured,
.cs-card-lg,
.cf-module-card--featured,
.cf-case-primary,
.cf-case-feature,
.cf-page-cta,
.cf-feature-panel,
.cf-visual-shell--light,
.cf-tool-main-surface,
.pf-surface,
.pf-cta {
  border-radius: 18px;
  box-shadow: var(--cs-card-shadow);
}

.cs-surface:hover,
.cs-surface--standard:hover,
.cs-surface--featured:hover,
.cs-surface--product:hover,
.cf-module-card:hover,
.cf-case-card:hover,
.cf-tool-card:hover,
.cf-route-card:hover,
.cf-surface:hover,
.cf-services-architecture:hover,
.cf-service-blueprint:hover,
.cf-feature-panel:hover,
.cf-service-panel:hover,
.cf-tool-directory-card:hover,
.pf-module-card:hover {
  border-color: var(--cs-border-medium);
  box-shadow: var(--cs-ridge), var(--cs-elev-3-hover);
}

/* Grid shell special (service matrix outer):
   Rear / inner children = RECESSED / FLUSH inside outer raised shell,
   NOT each floating individually (user mandate explicitly).
   Set up outer as layered-shell, then inner cells become recessed. */
.cs-layered-grid-shell,
/* APPLY: service matrix outer shell (2x3 tools grid) → raised layered shell with rear plate */
.cf-tools-grid {
  padding: 14px;                       /* outer shell wall thickness (subtle) */
  border-radius: var(--cs-radius-lg);  /* outer container L3 radius for architectural precision */
  background:
    linear-gradient(180deg,
      var(--cs-recessed) 0%,
      #EAEEF4 100%
    );
  border: 1px solid var(--cs-border-faint);
  box-shadow: var(--cs-elev-3);        /* outer shell CARRIES the physical elevation */
  gap: 1px;                            /* interior cell seam = 1px, EXTREMELY SUBTLE separator */
}

/* Make direct grid children (cells) inside outer raised shell → recessed/flush
   Remove their own elevation/borders (stop "six bordered cells float").
   Cell background = light flush tone; no individual shadow/border.
   Separators = grid gap (1px above) creates ultra-subtle lines without visible frames. */
.cs-layered-grid-shell > *,
/* DEMOTE service matrix individual cells (.cf-service-card inside cf-tools-grid) → recessed/flush NOT each floating */
.cf-tools-grid > .cf-service-card,
.cf-tools-grid > .cf-tool-primary,
.cf-tools-grid > .cf-tool-card {
  background:
    linear-gradient(145deg,
      #FBFCFD 0%,
      #F7F9FC 100%
    );
  border: 1px solid var(--cs-border-faint);  /* ultra-faint cell boundary (almost nothing) */
  border-radius: var(--cs-radius-md);        /* cells still precise geometry */
  box-shadow: none !important;               /* REMOVE individual elevation per user mandate */
  transform: none !important;                /* cells do NOT float, outer shell does */
  position: relative;
}

.cs-layered-grid-shell > *:hover,
.cf-tools-grid > .cf-service-card:hover,
.cf-tools-grid > .cf-tool-primary:hover,
.cf-tools-grid > .cf-tool-card:hover {
  border-color: var(--cs-border-medium);     /* cell hover = subtle outline, NO lift */
  background:
    linear-gradient(145deg,
      #FCFDFE 0%,
      #F8FAFD 100%
    );
  z-index: 3;
}

/* ================================================================
   BASE FOCUS VISIBLE (§5 blue used selectively — focus-visible only)
   ================================================================ */

:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.cf-wrap {
  width: min(100%, calc(var(--cf-shell-max) + (var(--cf-shell-gutter) * 2)));
  margin: 0 auto;
  padding-inline: var(--cf-shell-gutter);
}

.cf-icon-svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* =================================================================
   SHARED ACTION SYSTEM
   One tactile implementation shared by hp-btn, cf-btn and platform buttons.
   ================================================================= */

.cs-btn,
/* ---- backward-compat aliases ---- */
.cf-btn,
.cf-mobile-utility-link,
.cf-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--cs-border-soft);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  min-height: 42px;
  height: auto;
  padding: 0 16px;
  font-size: 12.5px;
  line-height: 1;
  transition:
    transform var(--cs-fast-t),
    background-color var(--cs-surface-t),
    border-color var(--cs-surface-t),
    color var(--cs-surface-t),
    box-shadow var(--cs-elevation-t);
}

.cs-btn { font-family: inherit; }
.cs-btn:disabled, .cf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* -------- PRIMARY -------- */

.cs-btn--primary,
.cf-btn-primary,
.cf-btn-featured,
.cf-mobile-utility-link-primary,
.cf-footer-cta {
  background: var(--cs-action-primary-bg);
  color: var(--cs-action-primary-color);
  border-color: var(--cs-action-primary-border);
  box-shadow: var(--cs-elev-primary-btn);
}

.cs-btn--primary:hover,
.cf-btn-primary:hover,
.cf-btn-featured:hover,
.cf-mobile-utility-link-primary:hover,
.cf-footer-cta:hover,
.cs-btn--primary:focus-visible,
.cf-btn-primary:focus-visible,
.cf-btn-featured:focus-visible,
.cf-mobile-utility-link-primary:focus-visible,
.cf-footer-cta:focus-visible {
  background: var(--cs-action-primary-bg);
  color: var(--cs-action-primary-color);
  border-color: var(--cs-action-primary-border);
  box-shadow: var(--cs-elev-primary-btn-hover);
  transform: translateY(-2px);
}

/* -------- SECONDARY (§9 mandate: raised white + cs-elev-1 tactile, not card) -------- */

.cs-btn--secondary,
.cf-btn-secondary {
  background: var(--cs-raised-gradient);
  color: var(--cs-text);
  border: 1px solid var(--cs-border-soft);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.cs-btn--secondary:hover,
.cf-btn-secondary:hover,
.cs-btn--secondary:focus-visible,
.cf-btn-secondary:focus-visible {
  color: var(--cs-text-strong);
  border-color: var(--cs-border-medium);
  box-shadow: var(--cs-elev-secondary-btn-hover);  /* button tactile NOT card L2 */
  transform: translateY(-2px);
}

/* -------- TERTIARY (text / link) -------- */

.cs-btn--tertiary,
.cf-btn-tertiary {
  background: transparent;
  color: var(--cs-blue);
  border-color: transparent;
  box-shadow: none;
  min-height: 36px;
  height: 36px;
  padding: 0 6px;
  font-weight: 600;
  font-size: 13px;
}

.cs-btn--tertiary:hover,
.cs-btn--tertiary:focus-visible {
  color: var(--cs-blue-hover);
  background: var(--cs-blue-bg-2);
  transform: none;
  box-shadow: none;
}

/* -------- DARK INVERTED (footer surfaces) -------- */

.cs-btn--dark-outline,
.cf-btn-dark-outline,
.cf-btn-dark-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--cs-radius-md);
  box-shadow: none;
}

.cs-btn--dark-outline:hover,
.cf-btn-dark-outline:hover,
.cf-btn-dark-outline:focus-visible,
.cf-btn-dark-secondary:hover,
.cf-btn-dark-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  transform: translateY(-1.2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* -------- DASHBOARD LINK (blue tertiary-action button) -------- */

.cs-btn--ghost-blue,
.cf-dashboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cs-blue-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-blue-bg-2);
  color: var(--cs-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform var(--cs-fast-t),
    border-color var(--cs-surface-t),
    background-color var(--cs-surface-t),
    color var(--cs-surface-t),
    box-shadow var(--cs-surface-t);
  box-shadow: none;
}

.cs-btn--ghost-blue:hover,
.cf-dashboard-link:hover,
.cs-btn--ghost-blue:focus-visible,
.cf-dashboard-link:focus-visible {
  background: var(--cs-raised);
  border-color: var(--cs-blue);
  color: var(--cs-blue-hover);
  box-shadow: var(--cs-elev-1);
  transform: translateY(-1.2px);
}

/* -------- UTILITY / TEXT LINK -------- */

.cf-utility-link,
.cf-text-link {
  color: var(--cs-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--cs-fast-t), opacity var(--cs-fast-t);
}

.cf-utility-link:hover,
.cf-utility-link:focus-visible,
.cf-text-link:hover,
.cf-text-link:focus-visible {
  color: var(--cs-text-strong);
}

/* =================================================================
   BADGE SYSTEM (cs-chip / cf-badge) — small radius, NOT pill 999
   ================================================================= */

.cs-chip,
.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--cs-radius-sm);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.cs-chip--blue,
.cf-badge-blue {
  background: var(--cs-blue-bg-2);
  border-color: var(--cs-blue-border);
  color: var(--cs-blue);
}

.cs-chip--success,
.cf-badge-success {
  background: var(--cs-success-bg);
  border: 1px solid var(--cs-success-border);
  color: var(--cs-success);
}

.cs-chip--slate,
.cf-badge-slate {
  background: var(--cs-canvas-2);
  border: 1px solid var(--cs-border-soft);
  color: var(--cs-muted);
}

.cs-chip--dark,
.cf-badge-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.84);
}

/* =================================================================
   §6 CARD PRIMITIVES — 3 radius tiers + 3 elevation bindings
   Physical gradient base (§2 145deg) + edge highlight + elevation
   ================================================================= */

.cs-card {
  background: var(--cs-raised-gradient);
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-elev-2);
  position: relative;
  transition:
    transform var(--cs-fast-t),
    box-shadow var(--cs-elevation-t),
    border-color var(--cs-surface-t),
    background-color var(--cs-surface-t);
}

.cs-card:hover,
.cs-card:focus-within {
  border-color: var(--cs-border-medium);
  box-shadow: var(--cs-elev-2-hover);
  transform: translateY(-1.2px);
}

.cs-card-sm {
  background: var(--cs-raised-gradient);
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-elev-1);
  position: relative;
  transition:
    transform var(--cs-fast-t),
    box-shadow var(--cs-elevation-t),
    border-color var(--cs-surface-t);
}

.cs-card-sm:hover,
.cs-card-sm:focus-within {
  border-color: var(--cs-border-blue-rail);
  box-shadow: var(--cs-elev-2);
  transform: translateY(-1px);
}

.cs-card-lg {
  background:
    linear-gradient(145deg,
      #FFFFFF 0%,
      #FAFBFD 52%,
      #F1F4F9 100%
    );
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-elev-3);
  position: relative;
  transition:
    transform var(--cs-fast-t),
    box-shadow var(--cs-elevation-t),
    border-color var(--cs-surface-t);
}

.cs-card-lg:hover {
  border-color: var(--cs-border-medium);
  box-shadow: var(--cs-elev-3-hover);
  transform: translateY(-1.6px);
}

/* Card content shell — excellent internal spacing (§6) */

.cs-card__pad {
  padding: clamp(18px, 2.2vw, 24px);
}

.cs-card__pad-lg {
  padding: clamp(22px, 3vw, 30px);
}

.cs-card__top-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.92) 22%,
    rgba(255, 255, 255, 0.88) 78%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* =================================================================
   §5 ICON CONTAINER PRIMITIVE (icon accent blue only, NO bg wash)
   §6 cs-icon = raised 40×40 L1 white surface, fine border, radius sm
   ================================================================= */

.cs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: var(--cs-raised-gradient);
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-elev-1);
  color: var(--cs-blue);
  transition:
    color var(--cs-surface-t),
    border-color var(--cs-surface-t),
    box-shadow var(--cs-elevation-t),
    transform var(--cs-fast-t);
}

.cs-icon svg {
  width: 20px;
  height: 20px;
}

.cs-icon:hover,
.cs-card-icon:hover {
  color: var(--cs-blue-hover);
  border-color: var(--cs-border-blue-rail);
  box-shadow: var(--cs-elev-2);
  transform: translateY(-1px);
}

.cs-icon--lg {
  width: 52px;
  height: 52px;
  border-radius: var(--cs-radius-md);
}

.cs-icon--lg svg {
  width: 26px;
  height: 26px;
}

.cs-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =================================================================
   SECTION HEAD TYPOGRAPHY (§11 compact, dark navy)
   No oversized editorial typography / no uppercase label pills
   ================================================================= */

.cf-section-head h2,
.cf-tools-head h2,
.cf-case-head h2,
.cf-admin-copy h2,
.cf-portal-copy h2,
.cf-trial-copy h2,
.cf-final-copy h2 {
  margin: 0 0 10px;
  color: var(--cs-text-strong);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.cf-section-head p,
.cf-tools-head p,
.cf-case-head p,
.cf-admin-copy p,
.cf-portal-copy p,
.cf-trial-copy p,
.cf-final-copy p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 14.5px;
  line-height: 1.64;
  letter-spacing: -0.004em;
}

.cf-section-head-center {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.cf-section-head-center .cf-btn {
  margin-top: 20px;
}

.cf-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cf-inset {
  background: var(--cf-pearl);
  border: 1px solid var(--cf-panel-light);
  border-radius: 8px;
}

.cf-inset p,
.cf-inset span,
.cf-inset small {
  margin: 0;
}

.cf-check-list {
  display: grid;
  gap: 10px;
}

.cf-check-list > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.58;
}

.cf-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--cf-green-bg);
  color: var(--cf-green);
  border: 1px solid var(--cf-green-border);
}

.cf-progress {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 118, 214, 0.16);
}

.cf-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--cf-blue);
}

.cf-floating-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cf-public-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(226, 232, 240, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease;
}

.cf-public-header-offset {
  height: var(--cf-public-header-offset);
}

.cf-public-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(188, 199, 214, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(18, 24, 36, 0.05);
}

body.admin-bar {
  --cf-public-header-offset: 104px;
}

body.admin-bar .cf-public-header {
  top: 32px;
}

body.admin-bar .cf-mobile-nav {
  top: var(--cf-public-header-offset);
}

.cf-public-header-inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--cf-public-header-height);
  padding: 0 14px 0 16px;
  border: 1px solid rgba(218, 225, 235, 0.94);
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(241, 244, 248, 0.68),
    0 2px 8px rgba(15, 28, 48, 0.04);
}

.cf-public-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-right: 0;
  margin-right: 0;
}

.cf-public-logo .site-logo-img {
  width: auto;
  height: 44px;
  max-height: none;
}

.cf-public-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: clamp(14px, 1.35vw, 22px);
  margin: 0;
}

.cf-public-nav > a,
.cf-public-nav > .cf-nav-dropdown {
  position: relative;
}

.cf-public-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0 6px;
  border-radius: 0;
  background-image: linear-gradient(#5366CC, #5366CC);
  background-position: center calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 2px;
  box-shadow: none;
  color: #39465A;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.14s ease,
    background-size 0.16s var(--cf-ease);
}

.cf-public-nav a.cf-nav-dropdown-toggle {
  padding-right: 0;
}

.cf-public-nav a:hover,
.cf-public-nav a:focus-visible,
.cf-nav-dropdown:hover > a.cf-nav-dropdown-toggle,
.cf-nav-dropdown.is-open > a.cf-nav-dropdown-toggle {
  color: var(--cf-text-1);
  background-color: transparent;
  background-size: 22px 2px;
}

.cf-nav-dropdown.is-open > a.cf-nav-dropdown-toggle,
.cf-nav-dropdown > a.cf-nav-dropdown-toggle[aria-expanded="true"] {
  color: #121826;
  font-weight: 580;
  background-size: 22px 2px;
}

.cf-public-nav a.active,
.cf-nav-dropdown > a.active {
  color: #121826;
  font-weight: 580;
  background-size: 22px 2px;
}

.cf-dropdown-menu {
  --cf-frame-animation: cf-mega-frame-top-left;
  position: fixed;
  top: calc(var(--cf-public-header-offset) - 7px);
  left: 50%;
  box-sizing: border-box;
  width: min(1000px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid rgba(77, 96, 191, 0.24);
  border-radius: 12px;
  background: #fffdfb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(94, 112, 207, 0.08),
    0 2px 5px rgba(15, 28, 48, 0.05),
    0 16px 38px rgba(15, 28, 48, 0.11);
  transform: translate(-50%, -4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s var(--cf-ease),
    transform 0.18s var(--cf-ease),
    visibility 0s linear 0.2s;
  z-index: 120;
}

.cf-nav-dropdown.is-open > .cf-dropdown-menu,
.cf-nav-dropdown > .cf-dropdown-menu:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.cf-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.cf-dropdown-menu::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-top: 1px solid #4D60BF;
  border-right: 1px solid #5E70CF;
  border-bottom: 1px solid #7B86DC;
  border-left: 1px solid #5E70CF;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.cf-mega-menu--services { --cf-frame-animation: cf-mega-frame-left; }
.cf-mega-menu--templates { --cf-frame-animation: cf-mega-frame-opposing; }
.cf-mega-menu--tools { --cf-frame-animation: cf-mega-frame-top; }
.cf-mega-menu--portfolio { --cf-frame-animation: cf-mega-frame-sides; }
.cf-mega-menu--about { --cf-frame-animation: cf-mega-frame-simple; }

.cf-nav-dropdown.is-open > .cf-dropdown-menu::after,
.cf-nav-dropdown > .cf-dropdown-menu:focus-within::after {
  animation: var(--cf-frame-animation) 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 45ms both;
}

.cf-mega-menu {
  display: grid;
  grid-template-columns: minmax(250px, 28%) minmax(0, 72%);
  grid-template-rows: minmax(292px, auto) 48px;
  padding: 0;
  overflow: hidden;
}

.cf-mega-menu a { white-space: normal; }

.cf-mega-menu__anchor {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px 30px;
  background: #202552;
  border-right: 2px solid #5E70CF;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 110ms ease, transform 130ms ease;
}

.cf-mega-menu__anchor strong {
  display: block;
  max-width: 15ch;
  color: #ffffff;
  font-family: var(--cf-font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.cf-mega-menu__anchor p {
  max-width: 26ch;
  margin: 17px 0 0;
  color: rgba(239, 242, 255, 0.76);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
}

.cf-mega-menu__body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(230px, 0.88fr) minmax(0, 1.32fr);
  align-items: start;
  gap: 30px;
  min-width: 0;
  padding: 30px 32px 26px;
}

.cf-mega-feature {
  align-self: stretch;
  min-width: 0;
  padding: 23px 24px;
  border: 1px solid rgba(83, 102, 204, 0.2);
  border-radius: 8px;
  background: #f4f5fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 110ms ease, transform 130ms ease;
}

.cf-mega-feature h2 {
  margin: 0 0 11px;
  color: #4458C3;
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.cf-mega-feature__title {
  display: block;
  color: #171C2D;
  font-family: var(--cf-font-display);
  font-size: 19px;
  font-weight: 680;
  line-height: 1.22;
  text-decoration: none;
  transition: color 140ms ease, transform 140ms ease;
}

.cf-mega-feature__title:hover,
.cf-mega-feature__title:focus-visible {
  color: #4458C3;
  transform: translateX(2px);
}

.cf-mega-feature p {
  margin: 9px 0 0;
  color: #5F6A80;
  font-size: 12.8px;
  line-height: 1.48;
}

.cf-mega-feature__experience {
  display: block;
  margin-top: 12px;
  color: #4458C3;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

.cf-mega-feature__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(83, 102, 204, 0.16);
}

.cf-mega-feature__links a {
  position: relative;
  color: #536078;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
}

.cf-mega-directory {
  display: grid;
  align-content: start;
  min-width: 0;
}

.cf-mega-directory__categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  min-width: 0;
}

.cf-mega-menu--tools .cf-mega-directory__categories,
.cf-mega-menu--templates .cf-mega-directory__categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
}

.cf-mega-directory__category {
  position: relative;
  display: grid;
  align-items: end;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(83, 102, 204, 0.22);
  background: transparent;
  color: #202536;
  font-family: var(--cf-font-display);
  font-size: 13.2px;
  font-weight: 660;
  line-height: 1.28;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.cf-mega-directory__category::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: #5E70CF;
  transform: scaleX(0.45);
  transform-origin: left center;
  transition: transform 150ms ease;
}

.cf-mega-directory__category:hover,
.cf-mega-directory__category:focus-visible,
.cf-mega-directory__category.is-active {
  color: #4458C3;
  border-bottom-color: rgba(83, 102, 204, 0.4);
}

.cf-mega-directory__category:hover::after,
.cf-mega-directory__category:focus-visible::after,
.cf-mega-directory__category.is-active::after { transform: scaleX(1); }

.cf-mega-directory__panels {
  margin-top: 18px;
  min-width: 0;
}

.cf-mega-directory__panel[hidden] { display: none; }

.cf-mega-directory__panel {
  min-width: 0;
  opacity: 0;
  transform: translateY(4px);
}

.cf-mega-directory__panel.is-active { animation: cf-mega-panel-in 150ms ease both; }

.cf-mega-directory__panel h2 { display: none; }

.cf-mega-directory__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 20px;
}

.cf-mega-directory__items > a {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 4px 0;
  color: #566177;
  font-size: 13px;
  font-weight: 490;
  line-height: 1.34;
  text-decoration: none;
  transition: color 140ms ease, transform 140ms ease;
}

.cf-mega-directory__items > a strong { color: inherit; font: inherit; }

.cf-mega-directory__items > a span {
  color: #5366CC;
  font-size: 11.5px;
  font-weight: 620;
}

.cf-mega-directory__items > a::after,
.cf-mega-feature__links a::after,
.cf-mega-menu__action::after {
  content: "";
  position: absolute;
  width: 24px;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: #5E70CF;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease;
}

.cf-mega-menu__action::after {
  right: 32px;
  left: auto;
  width: 28px;
  transform-origin: right center;
}

.cf-mega-directory__items > a:hover,
.cf-mega-directory__items > a:focus-visible,
.cf-mega-feature__links a:hover,
.cf-mega-feature__links a:focus-visible {
  color: #202536;
  transform: translateX(2px);
}

.cf-mega-directory__items > a:hover::after,
.cf-mega-directory__items > a:focus-visible::after,
.cf-mega-feature__links a:hover::after,
.cf-mega-feature__links a:focus-visible::after,
.cf-mega-menu__action:hover::after,
.cf-mega-menu__action:focus-visible::after { transform: scaleX(1); }

.cf-mega-menu__action {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  border-top: 1px solid rgba(83, 102, 204, 0.22);
  background: #fffdfa;
  color: #4458C3;
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
  opacity: 0;
  transition: color 140ms ease, opacity 110ms ease;
}

.cf-mega-menu__action:hover,
.cf-mega-menu__action:focus-visible { color: #171C2D; }

.cf-mega-menu__empty {
  grid-column: 1 / -1;
  margin: 30px;
  color: #5F6A80;
  font-size: 13px;
  line-height: 1.5;
}

.cf-mega-menu :is(a, button):focus-visible {
  outline: 2px solid rgba(94, 112, 207, 0.58);
  outline-offset: 3px;
}

.cf-nav-dropdown.is-open .cf-mega-menu__anchor,
.cf-dropdown-menu:focus-within .cf-mega-menu__anchor { animation: cf-mega-anchor-in 180ms ease 90ms both; }

.cf-nav-dropdown.is-open .cf-mega-feature,
.cf-dropdown-menu:focus-within .cf-mega-feature { animation: cf-mega-content-in 180ms ease 155ms both; }

.cf-nav-dropdown.is-open .cf-mega-directory__categories,
.cf-dropdown-menu:focus-within .cf-mega-directory__categories { animation: cf-mega-content-in 175ms ease 205ms both; }

.cf-nav-dropdown.is-open .cf-mega-menu__action,
.cf-dropdown-menu:focus-within .cf-mega-menu__action { animation: cf-mega-action-in 160ms ease 390ms both; }

@keyframes cf-mega-frame-top-left {
  from { clip-path: inset(0 100% 100% 0); opacity: 0; }
  45% { clip-path: inset(0 0 100% 0); opacity: 1; }
  to { clip-path: inset(0); opacity: 1; }
}

@keyframes cf-mega-frame-left { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes cf-mega-frame-opposing { from { clip-path: inset(0 48%); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes cf-mega-frame-top { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes cf-mega-frame-sides { from { clip-path: inset(48% 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes cf-mega-frame-simple { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-mega-anchor-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cf-mega-content-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cf-mega-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cf-mega-action-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cf-nav-dropdown.is-open > .cf-dropdown-menu::after,
  .cf-nav-dropdown > .cf-dropdown-menu:focus-within::after,
  .cf-nav-dropdown.is-open .cf-mega-menu__anchor,
  .cf-dropdown-menu:focus-within .cf-mega-menu__anchor,
  .cf-nav-dropdown.is-open .cf-mega-feature,
  .cf-dropdown-menu:focus-within .cf-mega-feature,
  .cf-nav-dropdown.is-open .cf-mega-directory__categories,
  .cf-dropdown-menu:focus-within .cf-mega-directory__categories,
  .cf-mega-directory__panel.is-active,
  .cf-nav-dropdown.is-open .cf-mega-menu__action,
  .cf-dropdown-menu:focus-within .cf-mega-menu__action {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .cf-dropdown-menu,
  .cf-dropdown-menu::after,
  .cf-mega-menu__anchor,
  .cf-mega-feature,
  .cf-mega-directory__category,
  .cf-mega-directory__panel,
  .cf-mega-menu__action,
  .cf-mega-menu a::after { transition: none; }
}

.cf-public-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.cf-public-actions .cf-dashboard-link,
.cf-public-actions .cf-utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #5A687C;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.14s ease,
    background-color 0.14s ease;
}

.cf-public-actions .cf-dashboard-link:hover,
.cf-public-actions .cf-dashboard-link:focus-visible,
.cf-public-actions .cf-utility-link:hover,
.cf-public-actions .cf-utility-link:focus-visible {
  background: rgba(238, 242, 252, 0.68);
  color: var(--cf-text-1);
  transform: none;
  border-color: transparent;
}

.cf-utility-link,
.cf-dashboard-link {
  white-space: nowrap;
}

.cf-footer-cta svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.cf-public-hamburger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--cf-panel);
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.cf-public-hamburger:hover,
.cf-public-hamburger:focus-visible {
  border-color: var(--cf-blue-border);
  background: var(--cf-white);
  box-shadow: var(--cf-shadow-sm);
}

.cf-public-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--cf-text-1);
  transition: transform 160ms ease, opacity 140ms ease, width 140ms ease;
}

.cf-public-hamburger span:nth-child(2) {
  width: 13px;
}

.cf-public-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cf-public-hamburger.active span:nth-child(2) { width: 0; opacity: 0; }
.cf-public-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.mobile-menu-open {
  overflow: hidden;
  touch-action: none;
}

.cf-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(18, 24, 36, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--cf-ease);
}

.cf-mobile-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cf-mobile-nav {
  position: fixed;
  top: var(--cf-public-header-offset);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10020;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}

.cf-mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
}

.cf-mobile-panel {
  width: 100%;
  height: calc(100vh - var(--cf-public-header-offset));
  height: calc(100dvh - var(--cf-public-header-offset));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(247, 247, 244, 0.98);
  border-top: 1px solid var(--cf-panel);
  transform: translateY(-10px);
  opacity: 0;
  transition:
    transform 0.22s var(--cf-ease),
    opacity 0.22s var(--cf-ease);
}

.cf-mobile-nav.is-open .cf-mobile-panel {
  transform: translateY(0);
  opacity: 1;
}

body.admin-bar .cf-mobile-panel {
  height: calc(100vh - var(--cf-public-header-offset));
  height: calc(100dvh - var(--cf-public-header-offset));
}

.cf-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--cf-panel-light);
}

.cf-mobile-brand .site-logo-img {
  width: auto;
  height: 42px;
}

.cf-mobile-close {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--cf-panel);
  border-radius: 12px;
  background: transparent;
}

.cf-mobile-close:hover,
.cf-mobile-close:focus-visible {
  background: var(--cf-white);
  border-color: var(--cf-blue-border);
}

.cf-mobile-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--cf-text-1);
}

.cf-mobile-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cf-mobile-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cf-mobile-scroll {
  padding: 0 24px 28px;
}

.cf-mobile-section {
  display: flex;
  flex-direction: column;
}

.cf-mobile-accordion {
  border-bottom: 1px solid var(--cf-panel-light);
}

.cf-mobile-link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--cf-panel-light);
  color: var(--cf-text-1);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 0.14s ease,
    background-color 0.14s ease;
}

.cf-mobile-link:hover,
.cf-mobile-link:focus-visible,
.cf-mobile-link.active {
  color: var(--cs-action-primary-bg);
}

.cf-mobile-accordion__toggle {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 0 12px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--cf-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.cf-mobile-accordion__label {
  min-width: 0;
}

.cf-mobile-disclosure {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #7B86DC;
}

.cf-mobile-disclosure::before,
.cf-mobile-disclosure::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 10px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 150ms ease, opacity 150ms ease;
}

.cf-mobile-disclosure::after {
  transform: rotate(90deg);
}

.cf-mobile-accordion.is-open .cf-mobile-disclosure::after,
.cf-mobile-accordion__toggle[aria-expanded="true"] .cf-mobile-disclosure::after {
  opacity: 0;
  transform: rotate(90deg) scaleX(0);
}

.cf-mobile-accordion__toggle:hover,
.cf-mobile-accordion__toggle:focus-visible,
.cf-mobile-accordion__toggle.active,
.cf-mobile-accordion.is-open > .cf-mobile-accordion__toggle {
  color: var(--cs-action-primary-bg);
  border-left-color: rgba(83, 102, 204, 0.76);
  background: rgba(83, 102, 204, 0.045);
}

.cf-mobile-accordion__panel {
  display: grid;
  gap: 0;
  padding: 2px 0 8px;
}

.cf-mobile-accordion__panel[aria-hidden="true"] {
  display: none;
}

.cf-mobile-submenu-link {
  min-height: 44px;
  display: grid;
  align-items: center;
  gap: 3px;
  padding: 0 0 0 14px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(18, 24, 38, 0.06);
  box-shadow: none;
  color: var(--cf-text-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.cf-mobile-submenu-link span {
  display: block;
  color: inherit;
}

.cf-mobile-submenu-link small {
  display: block;
  max-width: 34ch;
  color: #78859A;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.cf-mobile-submenu-link:hover,
.cf-mobile-submenu-link:focus-visible,
.cf-mobile-submenu-link.active {
  color: var(--cs-action-primary-bg);
  background: rgba(94, 112, 207, 0.05);
}

.cf-mobile-submenu-link--overview {
  color: var(--cf-text-1);
  font-weight: 600;
}

.cf-mobile-feature {
  display: grid;
  gap: 5px;
  margin: 10px 12px 14px;
  padding: 15px 16px;
  border: 1px solid rgba(83, 102, 204, 0.2);
  border-radius: 7px;
  background: #f4f5fc;
  color: #202536;
  text-decoration: none;
}

.cf-mobile-feature strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

.cf-mobile-feature small {
  color: #667187;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}

.cf-mobile-category {
  border-top: 1px solid rgba(83, 102, 204, 0.18);
}

.cf-mobile-category:first-child { border-top: 0; }

.cf-mobile-category__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px 0 18px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #30384A;
  font-size: 13.5px;
  font-weight: 610;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.cf-mobile-category__toggle:hover,
.cf-mobile-category__toggle:focus-visible,
.cf-mobile-category.is-open > .cf-mobile-category__toggle {
  border-left-color: #5366CC;
  background: rgba(83, 102, 204, 0.045);
  color: #4458C3;
}

.cf-mobile-category.is-open .cf-mobile-disclosure::after,
.cf-mobile-category__toggle[aria-expanded="true"] .cf-mobile-disclosure::after {
  opacity: 0;
  transform: rotate(90deg) scaleX(0);
}

.cf-mobile-category__panel {
  display: grid;
  padding: 0 12px 8px 18px;
}

.cf-mobile-category__panel[hidden] { display: none; }

.cf-mobile-category__panel .cf-mobile-submenu-link {
  min-height: 40px;
  padding: 8px 0 8px 12px;
  border-top: 1px solid rgba(18, 24, 38, 0.06);
}

.cf-mobile-category__panel .cf-mobile-submenu-link em {
  color: #5366CC;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 620;
}

.cf-mobile-menu-action {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 14px;
  border-top: 1px solid rgba(83, 102, 204, 0.24);
  color: #4458C3;
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
}

.cf-mobile-menu-empty {
  margin: 0;
  padding: 12px 14px;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.cf-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
}

.cf-mobile-utility-link {
  min-height: 44px;
  padding: 12px 18px;
  border-color: var(--cf-panel);
  background: var(--cf-white);
  color: var(--cf-text-1);
  font-size: 14px;
}

.cf-mobile-utility-link:hover,
.cf-mobile-utility-link:focus-visible {
  border-color: var(--cf-blue);
  color: var(--cf-blue);
  transform: translateY(-1px);
}

.cf-mobile-utility-link-primary:hover,
.cf-mobile-utility-link-primary:focus-visible {
  color: var(--cf-white);
}

.cf-public-footer {
  background: linear-gradient(180deg, var(--cf-footer-surface) 0%, var(--cf-footer-surface-2) 100%);
  padding: 30px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.cf-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-bottom: 18px;
}

.cf-footer-brand {
  min-width: 0;
}

.cf-footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(255,255,255,0.62) inset, 0 6px 16px rgba(0, 0, 0, 0.14);
}

.cf-footer-logo .footer-logo-img {
  width: auto;
  height: 38px;
}

.cf-footer-copy {
  max-width: 32ch;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.64;
}

.cf-footer-cta {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 12px;
  border-radius: 999px;
}

.cf-footer-links-col h2,
.cf-footer-disclosure > summary {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cf-footer-disclosure {
  min-width: 0;
}

.cf-footer-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: default;
}

.cf-footer-disclosure > summary::-webkit-details-marker {
  display: none;
}

.cf-footer-disclosure > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
}

.cf-footer-links {
  display: grid;
  gap: 6px;
}

.cf-footer-links a,
.cf-footer-mini-links a,
.cf-footer-cookie-button,
.cf-footer-bottom p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.14s ease;
}

.cf-footer-links a:hover,
.cf-footer-links a:focus-visible,
.cf-footer-mini-links a:hover,
.cf-footer-mini-links a:focus-visible,
.cf-footer-cookie-button:hover,
.cf-footer-cookie-button:focus-visible {
  color: rgba(255, 255, 255, 0.98);
}

.cf-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cf-footer-bottom p,
.cf-footer-mini-links a,
.cf-footer-cookie-button {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.cf-footer-cookie-button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.cf-footer-mini-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

@media (max-width: 1024px) {
  :root {
    --cf-shell-gutter: 24px;
  }

  .cf-public-nav a {
    font-size: 11.5px;
  }

  .cf-mega-menu {
    grid-template-columns: minmax(220px, 27%) minmax(0, 73%);
  }

  .cf-mega-menu__body {
    grid-template-columns: minmax(205px, 0.82fr) minmax(0, 1.25fr);
    gap: 22px;
    padding-inline: 24px;
  }

  .cf-mega-menu--tools .cf-mega-directory__categories,
  .cf-mega-menu--templates .cf-mega-directory__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --cf-public-header-offset: 72px;
  }

  .cf-public-nav,
  .cf-public-actions {
    display: none;
  }

  .cf-public-hamburger {
    display: inline-flex;
  }

  .cf-public-header-inner {
    grid-template-columns: 1fr auto;
    min-height: 58px;
  }

  .cf-public-logo {
    padding-right: 0;
    margin-right: 0;
  }

  .cf-public-logo::after,
  .cf-public-actions {
    border: 0;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 782px) {
  body.admin-bar .cf-public-header {
    top: 46px;
  }

  body.admin-bar {
    --cf-public-header-offset: 118px;
  }

  body.admin-bar .cf-mobile-nav {
    top: var(--cf-public-header-offset);
  }

  body.admin-bar .cf-mobile-panel {
    height: calc(100vh - var(--cf-public-header-offset));
    height: calc(100dvh - var(--cf-public-header-offset));
  }
}

@media (max-width: 768px) {
  .cf-pricing-stage {
    padding-top: 18px;
  }

  .cf-pricing-stage .cf-wrap {
    width: min(100% - 24px, 1160px);
  }

  .cf-pricing-stage__surface {
    padding: 36px 14px 0;
    border-radius: 20px;
  }

  .cf-pricing-stage__head h1,
  .cf-pricing-stage__head h2 {
    font-size: clamp(32px, 8vw, 40px);
  }

  .cf-pricing-stage__head p {
    font-size: 13px;
  }

  .cf-pricing-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 430px);
    left: auto;
    transform: none;
    margin: 22px auto 34px;
    border-radius: 18px;
  }

  .cf-pricing-tab {
    min-height: 36px;
    padding-inline: 10px;
    border-radius: 14px;
    font-size: 12px;
  }

  .cf-pricing-panels {
    margin-bottom: -54px;
  }

  .cf-pricing-cards,
  .cf-pricing-panel--2 .cf-pricing-cards,
  .cf-pricing-panel--1 .cf-pricing-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
  }

  .cf-plan-card.is-featured {
    transform: none;
  }

  .cf-plan-body {
    min-height: 0;
    padding: 22px 20px 20px;
  }

  :root {
    --cf-shell-gutter: 20px;
  }

  .cf-footer-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cf-footer-brand {
    grid-column: 1 / -1;
  }

  .cf-footer-copy {
    max-width: none;
    font-size: 14px;
    line-height: 1.6;
  }

  .cf-footer-cta {
    min-height: 52px;
    padding: 0 18px;
    font-size: 14px;
  }

  .cf-footer-disclosure {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .cf-footer-disclosure > summary {
    min-height: 54px;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
  }

  .cf-footer-disclosure > summary::after {
    opacity: 0.78;
  }

  .cf-footer-disclosure[open] > summary::after {
    transform: rotate(-135deg);
  }

  .cf-footer-links {
    gap: 4px;
    padding: 0 0 10px;
  }

  .cf-footer-links a {
    min-height: 46px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .cf-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .cf-footer-mini-links {
    gap: 10px 14px;
  }
}

@media (max-width: 520px) {
  :root {
    --cf-shell-gutter: 16px;
  }

  .cf-public-logo .site-logo-img {
    height: 42px;
  }

  .cf-mobile-top,
  .cf-mobile-scroll {
    padding-inline: 16px;
  }

  .cf-mobile-top {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .cf-mobile-brand .site-logo-img {
    height: 36px;
  }

  .cf-mobile-close {
    width: 38px;
    height: 38px;
  }

  .cf-mobile-link,
  .cf-mobile-accordion__toggle {
    min-height: 54px;
    font-size: 15px;
  }

  .cf-mobile-submenu-link {
    min-height: 44px;
    padding: 0 0 0 14px;
    font-size: 13.5px;
  }

  .cf-mobile-cta {
    gap: 10px;
    padding-top: 14px;
  }

  .cf-mobile-utility-link {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .cf-footer-cta {
    width: 100%;
  }
}

main.cf-page-shell,
main.cf-tool-public-shell {
  display: block;
  background: transparent;  /* inherit body continuous canvas (§13) — no hard block */
  color: var(--cf-text-1);
}

.cf-page-shell *,
.cf-page-shell *::before,
.cf-page-shell *::after,
.cf-tool-public-shell *,
.cf-tool-public-shell *::before,
.cf-tool-public-shell *::after {
  box-sizing: border-box;
}

.cf-page-shell a,
.cf-tool-public-shell a {
  text-decoration: none;
}

.cf-page-shell img,
.cf-tool-public-shell img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── DEPRECATED OLD cf-page-hero (L1528) SUPERSEDED by BEM L1570+ ─────────
   Keep shell-selector legacy for old templates but remove §17 blue SaaS blobs
   (radial-gradient blue 0.12 / blue-light 0.18 "gradient blob" splashes).
   ──────────────────────────────────────────────────────────────────────── */
.cf-page-hero {
  padding: var(--cf-page-hero-space) 0 var(--cf-page-hero-bottom-space);
  /* §13 continuous environment only — no hard blocks. Gradient moved to BEM. */
  background: transparent;
}

.cf-page-section {
  padding: var(--cf-section-space) 0;
  background: transparent;  /* inherit body canvas — NO hard pearl/white blocks */
}

.cf-page-section--white {
  background: transparent;
}

.cf-page-section--compact {
  padding-block: var(--cf-section-space-compact);
}

.cf-page-hero-grid,
.cf-split-grid,
.cf-feature-spotlight,
.cf-platform-preview,
.cf-contact-grid,
.cf-case-feature,
.cf-page-cta {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}

/* --------------------------------------------------------------------------
   Shared public-page hero foundation (one authoritative source).
   All public marketing templates (services, tools, pricing, about, contact,
   resources, blog, portfolio, legal, generic pages) use this BEM system.
   Homepage-specific composition, real-work frames, and the homepage-only
   capability transition remains isolated in the homepage section rules below.
   The platform-specific call-center preserved hero uses its isolated partial.
   -------------------------------------------------------------------------- */

.cf-page-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(30px, 4.5vw, 52px);
  padding-bottom: clamp(24px, 3.8vw, 42px);
  border-bottom: 1px solid var(--cs-border-faint);
  background: var(--cs-canvas);
}

.cf-page-hero::before {
  content: none;
}

.cf-page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 3.8vw, 48px);
  align-items: center;
}

.cf-page-hero__title {
  max-width: 27ch;
  margin: 0;
  color: var(--cf-text-1);
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: var(--cs-public-title-size);
  font-weight: var(--cs-public-title-weight);
  line-height: var(--cs-public-title-line);
  letter-spacing: 0;
  text-wrap: balance;
}

.cf-page-hero__description {
  max-width: 50ch;
  margin: 0;
  color: #4F5C70;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.55;
  letter-spacing: 0;
}

.cf-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

/* ── Variants (minimal; one per genuine structural need) ────────────────── */

.cf-page-hero--simple .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 72ch;
}

.cf-page-hero--simple {
  padding-bottom: clamp(24px, 4vw, 44px);
}

.cf-page-hero--split .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
}

.cf-page-hero--product .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.cf-page-hero--work .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cf-page-hero__content {
  display: grid;
  align-content: start;
  gap: clamp(12px, 1.9vw, 20px);
  position: relative;
  z-index: 1;
}

.cf-page-hero__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.cf-page-hero__visual > .cf-surface,
.cf-page-hero__visual > .cf-image-frame,
.cf-page-hero__visual > .cf-surface--soft {
  width: 100%;
}

/* ── Nested breadcrumb / chip / meta / search helpers inside hero content ── */

.cf-page-hero__content .cf-breadcrumb {
  margin-bottom: -4px;
}

.cf-page-hero__content .cf-chip-list {
  margin-top: -2px;
}

.cf-page-hero__content .cf-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--cf-text-2);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0;
}

.cf-page-hero__content .cf-article-meta [aria-hidden="true"] {
  color: var(--cf-text-3);
  opacity: 0.85;
}

.cf-page-hero__content .cf-search-form {
  margin-top: 2px;
}

/* ── Responsive: stack single-column under 1024px ──────────────────────── */

@media (max-width: 1024px) {
  .cf-page-hero {
    padding-top: clamp(28px, 5.4vw, 52px);
    padding-bottom: clamp(22px, 4vw, 42px);
  }

  .cf-page-hero--split .cf-page-hero__inner,
  .cf-page-hero--product .cf-page-hero__inner,
  .cf-page-hero--work .cf-page-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vw, 32px);
  }

  .cf-page-hero__title {
    max-width: 27ch;
    font-size: var(--cs-public-title-size);
  }
}

@media (max-width: 680px) {
  .cf-page-hero {
    padding-top: clamp(20px, 5.2vw, 38px);
    padding-bottom: clamp(18px, 4vw, 32px);
  }

  .cf-page-hero::before {
    opacity: 0.45;
    transform: scale(0.86) translate(10%, -8%);
  }

  .cf-page-hero__description {
    max-width: 44ch;
  }

  .cf-page-hero__actions {
    gap: 8px 10px;
  }
}

/* Legacy public-page hero selectors (cf-page-hero-grid, cf-page-hero-copy,
   cf-page-lead, cf-page-hero-visual) — OBSOLETE. Templates are migrating to
   the BEM foundation above; these selectors are being removed and MUST NOT be
   reintroduced. Inline migration rule: use cf-page-hero__inner / __content /
   __title / __description / __actions / __visual with the closest structural
   modifier (simple / split / product / work). */

.cf-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.cf-page-hero-visual {
  min-width: 0;
}

.cf-image-frame,
.cf-route-card,
.cf-module-card,
.cf-surface,
.cf-page-cta,
.cf-form-shell,
.cf-case-feature {
  border: 1px solid var(--cf-surface-border);
  box-shadow: var(--cf-surface-shadow);
}

.cf-image-frame {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
}

.cf-image-frame--hero {
  aspect-ratio: 1.16;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 242, 252, 0.94) 100%);
}

.cf-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-visual-shell {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--cf-surface-border);
  border-radius: 24px;
  box-shadow: var(--cf-surface-shadow-lg);
}

.cf-visual-shell--light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 252, 0.98) 100%);
}

.cf-visual-shell--dark {
  background:
    linear-gradient(180deg, #202733 0%, #171d27 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.cf-visual-shell-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cf-visual-shell-top h2 {
  margin: 6px 0 0;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.cf-visual-shell--light .cf-visual-shell-top h2,
.cf-visual-shell--light .cf-mini-list span,
.cf-visual-shell--light .cf-mini-list strong {
  color: var(--cf-text-1);
}

.cf-visual-shell--dark .cf-visual-shell-top h2,
.cf-visual-shell--dark .cf-mini-list span,
.cf-visual-shell--dark .cf-mini-list strong {
  color: rgba(255, 255, 255, 0.96);
}

.cf-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cf-summary-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(18, 24, 36, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.cf-visual-shell--dark .cf-summary-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.cf-workflow-track {
  display: grid;
  gap: 10px;
}

.cf-workflow-step {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--cs-border-medium);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-raised);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.cf-workflow-step strong {
  color: var(--cs-text);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 680;
}

.cf-workflow-step span {
  color: var(--cs-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.cf-visual-shell--dark .cf-workflow-step {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.cf-visual-shell--dark .cf-workflow-step strong {
  color: rgba(255, 255, 255, 0.94);
}

.cf-visual-shell--dark .cf-workflow-step span {
  color: rgba(255, 255, 255, 0.58);
}

.cf-summary-card p {
  margin: 0 0 6px;
  color: var(--cf-text-3);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cf-visual-shell--dark .cf-summary-card p {
  color: rgba(255, 255, 255, 0.48);
}

.cf-summary-card strong {
  display: block;
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cf-summary-card span {
  color: var(--cf-text-3);
  font-size: 11px;
  line-height: 1.45;
}

.cf-visual-shell--dark .cf-summary-card span {
  color: rgba(255, 255, 255, 0.56);
}

.cf-usage-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(18, 24, 36, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.cf-visual-shell--dark .cf-usage-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.cf-mini-list,
.cf-link-stack,
.cf-copy-stack {
  display: grid;
  gap: 10px;
}

.cf-mini-list div,
.cf-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cf-mini-list span,
.cf-mini-list strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.cf-mini-list em,
.cf-link-row em {
  margin: 0;
  color: var(--cf-text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  text-align: right;
}

.cf-mini-list--dark em {
  color: rgba(255, 255, 255, 0.56);
}

.cf-mini-list--loose {
  gap: 14px;
}

.cf-mini-list--loose div {
  align-items: flex-start;
}

.cf-card-grid {
  display: grid;
  gap: 16px;
}

.cf-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cf-card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cf-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--cf-blue-border);
  border-radius: 14px;
  background: var(--cf-blue-bg);
  color: var(--cf-blue);
}

.cf-card-icon svg {
  width: 18px;
  height: 18px;
}

.cf-card-icon--xl {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.cf-card-icon--xl svg {
  width: 24px;
  height: 24px;
}

.cf-module-card,
.cf-route-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: clamp(16px, 2.2vw, 20px);
  border-radius: 15px;
  background: var(--cs-card-surface);
  border: 1px solid var(--cs-card-border);
  box-shadow: var(--cs-card-shadow);
}

.cf-module-card h3,
.cf-route-card h3,
.cf-surface h2,
.cf-case-feature-body h2,
.cf-page-cta h2,
.cf-form-shell h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.cf-module-card h3,
.cf-route-card h3 {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.3;
}

.cf-module-card p,
.cf-route-card p,
.cf-surface p,
.cf-case-feature-body p,
.cf-page-cta p,
.cf-form-shell > p,
.cf-copy-stack p {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
}

.cf-module-card--soft,
.cf-surface--soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 252, 0.98) 100%);
}

.cf-module-card--featured {
  padding: clamp(22px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 242, 252, 0.98) 100%);
}

.cf-module-card--tool {
  gap: 12px;
}

.cf-module-card--project {
  overflow: hidden;
}

.cf-module-card--project .cf-image-frame {
  margin: calc(clamp(18px, 2.5vw, 24px) * -1) calc(clamp(18px, 2.5vw, 24px) * -1) 4px;
  border-width: 0 0 1px;
  border-radius: 22px 22px 18px 18px;
  aspect-ratio: 1.38;
}

.cf-module-meta,
.cf-module-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cf-module-meta {
  margin-top: auto;
  padding-top: 4px;
}

.cf-module-meta span {
  color: var(--cf-text-3);
  font-size: 12px;
  font-weight: 600;
}

.cf-tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}

.cf-tool-card-meta {
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}

.cf-tools-hero .cf-page-hero__title {
  max-width: 27ch;
}

@media (min-width: 1025px) {
  .cf-tools-hero .cf-page-hero__inner {
    max-width: none;
  }

  .cf-tools-hero .cf-page-hero__content {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
}

.cf-tools-catalog {
  padding-block: clamp(34px, 5vw, 58px);
}

.cf-tool-catalog-group + .cf-tool-catalog-group {
  margin-top: clamp(32px, 5vw, 52px);
}

.cf-tool-catalog-heading {
  margin: 0 0 14px;
  color: var(--cf-text-1);
  font-size: 20px;
  line-height: 1.25;
}

.cf-tool-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cf-tool-catalog-card,
.cf-tool-directory-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 190px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 18px 18px;
  border: 1.5px solid var(--cs-accent-color, var(--cs-blue));
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.cf-tool-catalog-card::before,
.cf-tool-directory-card::before {
  content: "";
  position: absolute;
  inset: 9px 10px 9px 8px;
  border: 1px solid var(--cs-card-border);
  border-radius: 15px;
  background: var(--cs-card-surface);
  box-shadow: var(--cs-card-shadow);
  pointer-events: none;
}

.cf-tool-catalog-card::after,
.cf-tool-directory-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 56px;
  border-radius: 11px 0 0 11px;
  background: var(--cs-accent-color, var(--cs-blue));
  transform: translateY(-50%);
  pointer-events: none;
}

.cf-tool-catalog-card > *,
.cf-tool-directory-card > * {
  position: relative;
  z-index: 1;
}

.cf-tool-catalog-card .cf-tool-card-arrow,
.cf-tool-directory-card .cf-tool-card-arrow {
  position: absolute;
  top: -5px;
  right: -1px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--cs-accent-color, var(--cs-blue));
  border-right: 1.5px solid var(--cs-accent-color, var(--cs-blue));
  transform: rotate(45deg);
  pointer-events: none;
}

.cf-tool-catalog-card:nth-child(3n + 2) { --cs-accent-color: #315FC1; }
.cf-tool-catalog-card:nth-child(3n + 3) { --cs-accent-color: #1C9DA8; }

.cf-tool-catalog-card h3 {
  margin: 0;
  color: var(--cf-text-1);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.35;
}

.cf-tool-catalog-card p {
  margin: 7px 0 0;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.55;
}

.cf-tools-platform-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tools-platform-bridge h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: 20px;
  line-height: 1.3;
}

.cf-tools-platform-bridge p {
  margin: 6px 0 0;
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.55;
}

.cf-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--cs-radius-pill);
  border: 1px solid var(--cs-border-medium);
  background: var(--cs-raised);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
  color: var(--cs-muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 660;
  white-space: nowrap;
}

.cf-status-pill--free {
  color: var(--cs-blue);
  border-color: var(--cs-blue-border);
}

.cf-status-pill--pro,
.cf-status-pill--paid,
.cf-status-pill--plan-access,
.cf-status-pill--included {
  color: var(--cs-text);
}

.cf-status-pill--trial {
  border-color: rgba(120, 72, 12, 0.18);
  background: rgba(255, 246, 224, 0.9);
  color: #8A5A12;
}

.cf-pricing-stage {
  padding: clamp(26px, 4vw, 44px) 0 clamp(30px, 5vw, 54px);
  background: #ffffff;
  scroll-margin-top: calc(var(--cf-public-header-offset, 72px) + 18px);
}

.cf-pricing-stage .cf-wrap {
  width: min(1160px, calc(100% - 32px));
}

.cf-pricing-stage__surface {
  position: relative;
  min-height: 620px;
  padding: clamp(54px, 6vw, 76px) clamp(18px, 3vw, 38px) 0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, #4D60BF 0%, #5E70CF 54%, #7B86DC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 24px 54px rgba(77, 96, 191, 0.18);
  overflow: visible;
}

.cf-pricing-stage__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.5;
  pointer-events: none;
}

.cf-pricing-stage__backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.cf-pricing-stage__backdrop span {
  position: absolute;
  bottom: 150px;
  width: 150px;
  height: 360px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.cf-pricing-stage__backdrop span:nth-child(1) { left: -52px; height: 360px; }
.cf-pricing-stage__backdrop span:nth-child(2) { left: 78px; height: 308px; opacity: 0.78; }
.cf-pricing-stage__backdrop span:nth-child(3) { left: 200px; height: 246px; opacity: 0.55; }
.cf-pricing-stage__backdrop span:nth-child(4) { right: -52px; height: 360px; }
.cf-pricing-stage__backdrop span:nth-child(5) { right: 78px; height: 308px; opacity: 0.78; }
.cf-pricing-stage__backdrop span:nth-child(6) { right: 200px; height: 246px; opacity: 0.55; }

.cf-pricing-stage__head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
}

.cf-pricing-stage__head h1,
.cf-pricing-stage__head h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 540;
  line-height: 1.12;
  letter-spacing: 0;
}

.cf-pricing-stage__head p {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.55;
}

.cf-pricing-tabs {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  left: 50%;
  transform: translateX(-50%);
  margin: 26px auto 46px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 32px rgba(23, 39, 100, 0.18);
}

.cf-pricing-tab {
  appearance: none;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(18, 24, 36, 0.62);
  font: inherit;
  font-size: 13px;
  font-weight: 660;
  line-height: 1;
  cursor: pointer;
}

.cf-pricing-tab.is-active {
  background: #5E70CF;
  border-color: #4D60BF;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(77, 96, 191, 0.32);
}

.cf-pricing-tab:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.cf-pricing-panels {
  position: relative;
  z-index: 3;
  margin: 0 auto -78px;
}

.cf-pricing-panel[hidden] {
  display: none;
}

.cf-pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 24px);
  max-width: 880px;
  margin: 0 auto;
}

.cf-pricing-panel--2 .cf-pricing-cards {
  grid-template-columns: repeat(2, minmax(0, 290px));
  justify-content: center;
}

.cf-pricing-panel--1 .cf-pricing-cards {
  grid-template-columns: minmax(0, 300px);
  justify-content: center;
}

.cf-plan-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(213, 221, 235, 0.98);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 2px 5px rgba(15, 28, 48, 0.08),
    0 16px 34px rgba(35, 55, 108, 0.13);
}

.cf-plan-card::before,
.cf-plan-card::after {
  display: none;
}

.cf-plan-card.is-featured {
  transform: translateY(-2px);
  border-color: rgba(94, 112, 207, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 4px 8px rgba(15, 28, 48, 0.1),
    0 28px 54px rgba(35, 55, 108, 0.26);
}

.cf-plan-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 340px;
  padding: 24px 22px 22px;
}

.cf-plan-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.cf-plan-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  overflow: hidden;
}

.cf-plan-marker img {
  display: block;
  width: 58px;
  height: 58px;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.cf-plan-name {
  min-width: 0;
  margin: 0;
  color: var(--cf-text-1);
  font-size: 16px;
  font-weight: 730;
  line-height: 1.2;
  letter-spacing: 0;
}

.cf-plan-card h2 {
  margin: 6px 0 0;
  color: var(--cf-text-1);
  font-size: clamp(28px, 2.7vw, 36px);
  font-weight: 730;
  line-height: 1.04;
  letter-spacing: 0;
}

.cf-plan-audience {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.58;
}

.cf-plan-features {
  display: grid;
  align-content: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}

.cf-plan-features li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  color: var(--cf-text-1);
  font-size: 12.8px;
  line-height: 1.45;
  font-weight: 560;
}

.cf-plan-features li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 999px;
  background: #5E70CF;
  color: #ffffff;
  font-size: 9px;
  font-weight: 780;
  line-height: 1;
}

.cf-plan-features li > span {
  display: block;
  grid-column: 2;
  justify-self: stretch;
  width: auto;
  inline-size: auto;
  min-width: 0;
  max-width: none;
  max-inline-size: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.cf-plan-card .cf-btn {
  align-self: end;
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  border-radius: 999px;
}

.cf-section-intro {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.cf-section-intro--left {
  margin-inline: 0;
  text-align: left;
}

.cf-section-intro h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 540;
  line-height: 1.25;
  letter-spacing: 0;
}

.cf-section-intro p {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.72;
}

.cf-split-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.cf-surface {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 26px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
}

.cf-check-list > div {
  align-items: flex-start;
}

.cf-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 10px;
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.7;
}

.cf-list--ordered {
  padding-left: 1.35rem;
}

.cf-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cf-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--cf-panel);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cf-text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.cf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.45;
}

.cf-breadcrumb a {
  color: var(--cf-text-3);
}

.cf-breadcrumb a:hover,
.cf-breadcrumb a:focus-visible {
  color: var(--cf-text-1);
}

.cf-feature-spotlight {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
}

.cf-feature-spotlight .cf-card-grid {
  align-content: stretch;
}

/* --------------------------------------------------------------------------
   Remaining public-page migration components.
   These are deliberately fewer than the old all-card system: one featured
   surface, compact rows for utility content, and narrow editorial panels.
   -------------------------------------------------------------------------- */

.cf-services-architecture,
.cf-service-blueprint,
.cf-feature-panel,
.cf-service-panel,
.cf-table-surface,
.cf-editorial-panel,
.cf-resource-side-card,
.cf-resource-empty,
.cf-article-aside-card,
.cf-article-content-shell,
.cf-article-block,
.cf-article-author,
.cf-article-nav {
  position: relative;
  border: 1px solid var(--cf-surface-border);
  border-radius: 15px;
  background: var(--cs-card-surface);
  box-shadow: var(--cs-card-shadow);
}

.cf-services-architecture,
.cf-service-blueprint,
.cf-feature-panel,
.cf-service-panel {
  overflow: hidden;
}

.cf-services-architecture::after,
.cf-service-blueprint::after,
.cf-feature-panel::after,
.cf-service-panel::after {
  content: "";
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  border-radius: calc(var(--cs-radius-md) - 2px);
  background:
    linear-gradient(var(--cs-accent-color, var(--cs-blue)), var(--cs-accent-color, var(--cs-blue))) top left / 42px 2px no-repeat,
    linear-gradient(var(--cs-accent-color, var(--cs-blue)), var(--cs-accent-color, var(--cs-blue))) top left / 2px 34px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--cs-blue-hover)), var(--cs-accent-color-2, var(--cs-blue-hover))) bottom right / 42px 2px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--cs-blue-hover)), var(--cs-accent-color-2, var(--cs-blue-hover))) bottom right / 2px 34px no-repeat;
  opacity: 0.46;
  pointer-events: none;
}

.cf-services-architecture,
.cf-service-blueprint {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--cs-card-surface);
  border: 1px solid var(--cs-card-border);
  box-shadow: var(--cs-card-shadow);
}

.cf-services-architecture__head,
.cf-service-blueprint__head {
  display: grid;
  gap: 5px;
}

.cf-services-architecture__head strong,
.cf-service-blueprint__head strong {
  color: var(--cf-text-1);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.cf-services-architecture__head span,
.cf-service-blueprint__head span {
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.55;
}

.cf-services-architecture__layers,
.cf-service-blueprint__rows {
  display: grid;
  gap: 10px;
}

.cf-services-architecture__layers div,
.cf-service-blueprint__rows div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(188, 199, 214, 0.62);
  border-radius: var(--cs-radius-sm);
  background: #FFFFFF;
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.cf-services-architecture__layers div::before,
.cf-service-blueprint__rows div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: var(--cf-blue);
}

.cf-services-architecture__layers strong,
.cf-service-blueprint__rows strong {
  color: var(--cf-text-1);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 720;
}

.cf-services-architecture__layers span,
.cf-service-blueprint__rows span {
  color: var(--cf-text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.cf-services-architecture p {
  margin: 0;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.cf-feature-panel h3,
.cf-capability-row strong,
.cf-outcome-row strong,
.cf-delivery-step strong,
.cf-service-panel h2,
.cf-editorial-panel h2,
.cf-process-row strong,
.cf-related-layout h2,
.cf-table-surface h2 {
  color: var(--cf-text-1);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.cf-capability-row em,
.cf-link-row em {
  display: block;
  margin-top: 5px;
  color: var(--cf-text-2);
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
  text-align: left;
}

.cf-feature-panel p,
.cf-service-panel p,
.cf-delivery-step p,
.cf-outcome-row p,
.cf-editorial-panel p,
.cf-related-layout p,
.cf-process-row p {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.58;
}

.cf-capability-layout,
.cf-outcome-layout,
.cf-process-layout,
.cf-related-layout,
.cf-editorial-panel {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.cf-capability-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
}

.cf-feature-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
}

.cf-feature-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: 0;
}

.cf-capability-list,
.cf-route-list,
.cf-outcome-list,
.cf-process-list,
.cf-delivery-flow {
  display: grid;
  gap: 12px;
}

.cf-capability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--cs-border-medium);
  border-radius: var(--cs-radius-md);
  background: var(--cs-raised);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s var(--cf-ease),
    border-color 0.18s var(--cf-ease),
    box-shadow 0.18s var(--cf-ease);
}

.cf-capability-row:hover,
.cf-capability-row:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cs-border-medium);
  box-shadow: var(--cs-ridge), var(--cs-elev-2);
}

.cf-capability-row strong {
  display: block;
  font-size: clamp(17px, 1.6vw, 21px);
}

.cf-outcome-layout,
.cf-related-layout {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.cf-outcome-row,
.cf-process-row,
.cf-delivery-step {
  padding: 17px 18px;
  border: 1px solid var(--cs-border-medium);
  border-radius: var(--cs-radius-md);
  background: var(--cs-raised);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.cf-outcome-row:first-child,
.cf-process-row:first-child,
.cf-delivery-step:first-child {
  padding-top: 17px;
}

.cf-outcome-row:last-child,
.cf-process-row:last-child,
.cf-delivery-step:last-child {
  padding-bottom: 17px;
}

.cf-outcome-row strong,
.cf-delivery-step strong {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(18px, 2vw, 24px);
}

.cf-delivery-flow {
  max-width: 900px;
  margin-inline: auto;
}

.cf-editorial-panel {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  padding: clamp(22px, 3.4vw, 36px);
}

.cf-editorial-panel h2,
.cf-related-layout h2,
.cf-service-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 540;
  letter-spacing: 0;
}

.cf-service-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cf-service-panel,
.cf-table-surface,
.cf-resource-side-card,
.cf-resource-empty,
.cf-article-aside-card,
.cf-article-content-shell,
.cf-article-block,
.cf-article-author,
.cf-article-nav {
  padding: clamp(20px, 2.8vw, 30px);
}

.cf-service-panel--quiet {
  box-shadow: var(--cf-shadow-sm);
}

/* Informational panels use the same framed infographic language as the
   homepage cards, while keeping their existing content and layouts. */
.cf-feature-panel,
.cf-service-panel {
  --cf-panel-accent: var(--cs-blue);
  border: 1.5px solid var(--cf-panel-accent);
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.cf-service-columns > .cf-service-panel:nth-child(2) {
  --cf-panel-accent: #E9795F;
}

.cf-service-columns > .cf-service-panel:nth-child(3) {
  --cf-panel-accent: #7650D8;
}

.cf-feature-panel::before,
.cf-service-panel::before {
  inset: 9px 10px 9px 8px;
  border: 1px solid var(--cs-card-border);
  border-radius: 15px;
  background: var(--cs-card-surface);
  box-shadow: var(--cs-card-shadow);
}

.cf-feature-panel::after,
.cf-service-panel::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(var(--cf-panel-accent), var(--cf-panel-accent)) top left / 42px 2px no-repeat,
    linear-gradient(var(--cf-panel-accent), var(--cf-panel-accent)) top left / 2px 34px no-repeat,
    linear-gradient(var(--cf-panel-accent), var(--cf-panel-accent)) bottom 0 left 24px / 78px 6px no-repeat;
  opacity: 0.92;
}

.cf-feature-panel > *,
.cf-service-panel > * {
  position: relative;
  z-index: 2;
}

.cf-service-panel h2 {
  font-size: 20px;
  font-weight: 560;
}

.cf-feature-panel .cf-plain-list,
.cf-service-panel .cf-plain-list {
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
}

.cf-plain-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.65;
}

.cf-plain-list li {
  position: relative;
  padding-left: 18px;
}

.cf-plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cf-blue);
}

.cf-process-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
}

.cf-process-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.cf-table-surface {
  overflow: hidden;
}

.cf-audience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cf-audience-list span {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(188, 199, 214, 0.62);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 610;
}

.dt-contact-status {
  margin-bottom: 22px;
}

@media (max-width: 1024px) {
  .cf-capability-layout,
  .cf-outcome-layout,
  .cf-process-layout,
  .cf-related-layout,
  .cf-editorial-panel {
    grid-template-columns: 1fr;
  }

  .cf-service-columns {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 680px) {
  .cf-services-architecture,
  .cf-service-blueprint,
  .cf-feature-panel,
  .cf-service-panel,
  .cf-table-surface,
  .cf-editorial-panel,
  .cf-resource-side-card,
  .cf-resource-empty,
  .cf-article-aside-card,
  .cf-article-content-shell,
  .cf-article-block,
  .cf-article-author,
  .cf-article-nav {
    border-radius: 18px;
    padding: 18px;
  }

  .cf-feature-panel,
  .cf-service-panel {
    border-radius: 11px 0 0 11px;
    padding: 22px 18px;
  }

  .cf-capability-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cf-services-architecture__layers,
  .cf-service-blueprint__rows,
  .cf-audience-list {
    grid-template-columns: 1fr;
  }

  .cf-capability-row,
  .cf-process-row,
  .cf-outcome-row,
  .cf-delivery-step {
    padding-block: 14px;
  }
}

.cf-link-row {
  padding: 14px 16px;
  border: 1px solid var(--cf-panel);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--cf-text-1);
  transition:
    transform 0.18s var(--cf-ease),
    border-color 0.18s var(--cf-ease),
    box-shadow 0.18s var(--cf-ease);
}

.cf-link-row span {
  color: var(--cf-text-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.cf-link-row:hover,
.cf-link-row:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cf-blue-border);
  box-shadow: var(--cf-shadow-sm);
}

.cf-note {
  margin: 0;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.62;
}

.cf-compare-wrap {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 18px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.cf-compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.cf-compare-scroll-cue {
  display: none;
  margin: 0 0 10px;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.cf-compare-table th,
.cf-compare-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(18, 24, 36, 0.08);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.55;
}

.cf-compare-table thead th {
  color: var(--cf-text-1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(238, 242, 252, 0.7);
}

.cf-compare-table tbody th,
.cf-compare-table td {
  color: var(--cf-text-2);
}

.cf-compare-table tbody th {
  color: var(--cf-text-1);
  font-weight: 600;
}

.cf-faq-list {
  display: grid;
  gap: 8px;
}

.cf-faq-item {
  border: 1px solid var(--cf-surface-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cf-shadow-sm);
}

.cf-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  color: var(--cf-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.cf-faq-item summary::-webkit-details-marker {
  display: none;
}

.cf-faq-item p {
  padding: 0 18px 16px;
}

#pricing-faq {
  padding-top: clamp(34px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 58px);
}

#pricing-faq .cf-section-intro {
  margin-bottom: 18px;
}

.cf-contact-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  align-items: start;
}

.cf-contact-side {
  display: grid;
  gap: 16px;
}

.cf-form-shell {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 15px;
  background: var(--cs-card-surface);
  border-color: var(--cs-card-border);
  box-shadow: var(--cs-card-shadow);
}

.cf-form-shell > p {
  margin-top: 6px;
  margin-bottom: 0;
}

.cf-form-shell .dt-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cf-form-shell .dt-field {
  display: grid;
  gap: 8px;
}

.cf-form-shell .dt-field label,
.cf-form-shell .dt-field-label {
  color: var(--cf-text-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.cf-form-shell input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.cf-form-shell select,
.cf-form-shell textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--cf-panel);
  border-radius: 14px;
  background: var(--cf-white);
  color: var(--cf-text-1);
  font: inherit;
  transition:
    border-color 0.18s var(--cf-ease),
    box-shadow 0.18s var(--cf-ease),
    background-color 0.18s var(--cf-ease);
}

.cf-form-shell textarea {
  min-height: 160px;
  resize: vertical;
}

.cf-form-shell input:focus-visible,
.cf-form-shell select:focus-visible,
.cf-form-shell textarea:focus-visible,
.cf-tool-public-shell .form-control:focus-visible,
.cf-tool-public-shell input:focus-visible,
.cf-tool-public-shell select:focus-visible,
.cf-tool-public-shell textarea:focus-visible {
  outline: none;
  border-color: var(--cf-blue-border);
  box-shadow: 0 0 0 4px rgba(90, 118, 214, 0.12);
}

.cf-form-shell .dt-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cf-form-shell .dt-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.cf-form-shell .dt-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cf-form-shell .dt-choice-ui {
  display: flex;
  align-items: flex-start;
  min-height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cf-panel);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  transition:
    border-color 0.18s var(--cf-ease),
    background-color 0.18s var(--cf-ease),
    box-shadow 0.18s var(--cf-ease),
    transform 0.18s var(--cf-ease);
}

.cf-form-shell .dt-choice:hover .dt-choice-ui,
.cf-form-shell .dt-choice input:focus-visible + .dt-choice-ui {
  border-color: var(--cf-blue-border);
  box-shadow: var(--cf-shadow-sm);
  transform: translateY(-1px);
}

.cf-form-shell .dt-choice input:checked + .dt-choice-ui {
  border-color: var(--cf-blue-border);
  background: var(--cf-blue-bg);
  box-shadow: 0 10px 22px rgba(90, 118, 214, 0.12);
}

.cf-form-shell .dt-choice-title {
  color: var(--cf-text-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.cf-form-shell .dt-field-help,
.cf-form-shell .dt-contact-note,
.cf-form-shell .dt-contact-feedback {
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.62;
}

.cf-legal-meta {
  margin: 14px 0 0;
  color: var(--cf-text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.cf-legal-surface {
  padding: clamp(26px, 4vw, 40px);
}

.cf-legal-content {
  max-width: 860px;
  margin: 0 auto;
}

.cf-legal-content h2 {
  margin: 34px 0 12px;
  color: var(--cf-text-1);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.cf-legal-content h2:first-of-type {
  margin-top: 0;
}

.cf-legal-content p,
.cf-legal-content ul,
.cf-legal-content ol {
  margin: 0 0 16px;
  color: var(--cf-text-2);
  line-height: 1.8;
}

.cf-legal-content ul,
.cf-legal-content ol {
  padding-left: 20px;
}

.cf-legal-content a {
  color: var(--cf-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.cf-form-shell .dt-contact-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.cf-route-card {
  padding: 22px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 252, 0.96) 100%);
}

.cf-case-feature {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  padding: clamp(18px, 2.5vw, 24px);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
}

.cf-case-feature-media {
  overflow: hidden;
  border-radius: 22px;
  min-height: 280px;
}

.cf-case-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-case-feature-body {
  display: grid;
  align-content: start;
  gap: 18px;
}

.cf-case-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cf-case-meta-grid p {
  margin: 0 0 6px;
  color: var(--cf-text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cf-case-meta-grid span {
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.65;
}

.cf-platform-preview {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
}

.cf-platform-preview-copy {
  display: grid;
  gap: 16px;
}

.cf-platform-preview-copy h3 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.cf-platform-preview-copy p {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.7;
}

.cf-page-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 252, 0.98) 100%);
}

.cf-page-cta p {
  max-width: 56ch;
}

.cf-page-shell .content {
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.8;
}

.cf-page-shell .content > *:first-child {
  margin-top: 0;
}

.cf-page-shell .content > *:last-child {
  margin-bottom: 0;
}

.cf-page-shell .content h2,
.cf-page-shell .content h3,
.cf-page-shell .content h4 {
  color: var(--cf-text-1);
  line-height: 1.2;
}

.cf-page-shell .pagination {
  margin-top: 24px;
}

.cf-page-shell .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cf-page-shell .pagination a,
.cf-page-shell .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--cf-panel);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--cf-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.cf-page-shell .pagination .current,
.cf-page-shell .pagination a:hover,
.cf-page-shell .pagination a:focus-visible {
  border-color: var(--cf-blue-border);
  background: var(--cf-blue-bg);
  color: var(--cf-blue);
}

.cf-content-surface {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
}

.cf-work-card {
  color: inherit;
}

.cf-work-card h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.cf-work-meta {
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 2px;
}

.cf-work-single-media {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.cf-work-single-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
}

.cf-work-single-content {
  padding: clamp(24px, 4vw, 40px);
}

.cf-work-single-aside {
  display: grid;
  align-content: start;
  gap: 16px;
}

/* Hawks Networks flagship case study and featured archive project */
.cf-work-archive .cf-page-hero {
  min-height: clamp(420px, 31vw, 460px);
  padding-block: 0;
  display: flex;
  align-items: flex-start;
  background: var(--cs-canvas);
  background-image: url('../images/ourworkbg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cf-work-archive .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  align-items: start;
  padding-top: clamp(14px, 3vw, 34px);
}

.cf-work-archive .cf-page-hero__content {
  max-width: 460px;
}

.cf-work-archive .cf-page-hero__title {
  max-width: 12ch;
  font-size: clamp(32px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.08;
}

.cf-hawks-case-study .cf-page-hero {
  background: var(--cs-canvas);
}

.cf-work-archive > .cf-page-section {
  padding-block: clamp(34px, 4vw, 54px) clamp(64px, 7vw, 88px);
}

.cf-work-projects {
  padding-top: clamp(28px, 4vw, 52px);
}

.cf-work-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.cf-work-filter {
  min-height: 34px;
  padding: 7px 18px;
  border: 1px solid rgba(23, 32, 51, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.64);
  color: #263247;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cf-work-filter:hover,
.cf-work-filter:focus-visible {
  border-color: #17324b;
}

.cf-work-filter.is-active {
  border-color: #17324b;
  background: #17324b;
  color: #fff;
}

.cf-work-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

.cf-work-project-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(18px, 2.8vw, 34px);
  align-items: center;
  min-height: 154px;
  padding: 22px 24px;
  border: 1px solid rgba(23, 32, 51, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 22px rgba(40, 46, 56, 0.035);
}

.cf-work-project-card__logo {
  display: grid;
  min-width: 0;
  min-height: 76px;
  place-items: center;
}

.cf-work-project-card__logo img {
  display: block;
  width: min(100%, 190px);
  height: auto;
  max-height: 76px;
  object-fit: contain;
}

.cf-work-project-card--crash-411 .cf-work-project-card__logo img {
  width: min(100%, 176px);
  max-height: 76px;
}

.cf-work-project-card__content {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.cf-work-project-card__content h3 {
  margin: 0;
  color: #172033;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  line-height: 1.2;
}

.cf-work-project-card__content p {
  margin: 0;
  color: #3f4653;
  font-size: 13px;
  line-height: 1.55;
}

.cf-work-project-card__content .cf-work-project-card__category {
  color: #5366cc;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.cf-work-project-card__link {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  color: #173f63;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.cf-work-project-card__link:hover,
.cf-work-project-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf-hawks-case-study,
.cf-hawks-case-study * {
  letter-spacing: 0;
}

.cf-hawks-case-study .cf-wrap {
  width: min(100%, calc(1200px + (var(--cf-shell-gutter) * 2)));
}

.cf-hawks-case-study .cf-page-section {
  padding-block: clamp(64px, 6vw, 82px);
}

.cf-hawks-case-study .cf-case-study-hero {
  padding-bottom: clamp(54px, 6vw, 76px);
}

.cf-hawks-case-study .cf-case-study-hero .cf-page-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 42px);
}

.cf-hawks-case-study .cf-case-study-hero .cf-page-hero__content {
  max-width: 820px;
  gap: 14px;
}

.cf-hawks-case-study .cf-case-study-hero .cf-page-hero__title {
  max-width: 27ch;
  margin: 0 0 4px;
}

.cf-case-study-client,
.cf-case-study-product {
  display: block;
}

.cf-case-study-client {
  text-transform: uppercase;
}

.cf-case-study-product {
  margin-top: 8px;
  color: #5366cc;
  font-size: 0.5em;
  font-weight: 700;
  line-height: 1.2;
}

.cf-hawks-case-study .cf-case-study-hero .cf-page-hero__description {
  max-width: 760px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
}

.cf-hawks-case-study .cf-btn {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.cf-hawks-case-study .cf-btn.cf-btn-primary {
  border-color: #5366cc;
  background: #5366cc;
  color: #fff;
  box-shadow: 0 6px 14px rgba(83, 102, 204, 0.2);
}

.cf-hawks-case-study .cf-btn.cf-btn-primary:hover,
.cf-hawks-case-study .cf-btn.cf-btn-primary:focus-visible {
  border-color: #4659bd;
  background: #4659bd;
  color: #fff;
}

.cf-hawks-case-study .cf-btn.cf-btn-secondary {
  border-color: rgba(23, 32, 51, 0.18);
  background: #fff;
  color: #172033;
  box-shadow: 0 4px 12px rgba(23, 32, 51, 0.06);
}

.cf-case-study-screen {
  --cf-case-study-frame-space: 22px;
  margin: 0 auto;
  width: min(100%, calc(var(--cf-case-study-source-width, 100vw) + var(--cf-case-study-frame-space)));
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(23, 32, 51, 0.13);
  border-radius: 9px;
  background: #f4f6fa;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.08);
}

.cf-case-study-screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 5px;
  background: #fff;
}

.cf-case-study-screen--hero {
  --cf-case-study-frame-space: clamp(22px, calc(3vw + 2px), 34px);
  width: min(100%, calc(var(--cf-case-study-source-width, 100vw) + var(--cf-case-study-frame-space)));
  padding: clamp(10px, 1.5vw, 16px);
}

.cf-case-study-context-grid {
  background: #fff;
}

.cf-case-study-context-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 64px);
}

.cf-case-study-context-grid__inner article + article {
  padding-left: clamp(34px, 5vw, 64px);
  border-left: 1px solid rgba(23, 32, 51, 0.14);
}

.cf-case-study-context-grid h2,
.cf-case-study-section-head h2,
.cf-case-study-outcome h2,
.cf-case-study-proof h2 {
  margin: 0 0 14px;
  color: #172033;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.12;
}

.cf-case-study-context-grid h3 {
  margin: 0 0 10px;
  color: #5366cc;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.25;
}

.cf-case-study-context-grid p,
.cf-case-study-build p,
.cf-case-study-agent-note p,
.cf-case-study-outcome p,
.cf-case-study-proof p,
.cf-case-study-gallery-item__caption p {
  margin: 0;
  color: #4f5c70;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.66;
}

.cf-case-study-build,
.cf-case-study-workflow {
  background: var(--cs-canvas);
}

.cf-case-study-narrow {
  max-width: 900px;
}

.cf-case-study-narrow h2,
.cf-case-study-workflow h2 {
  margin: 0 0 14px;
  color: #172033;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.12;
}

.cf-case-study-narrow p {
  margin: 0;
}

.cf-case-study-capabilities,
.cf-case-study-outcome,
.cf-case-study-proof {
  background: #f8f9fc;
}

.cf-case-study-section-head {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.cf-case-story:nth-child(even) {
  background: #fff;
}

.cf-case-story:nth-child(odd) {
  background: var(--cs-canvas);
}

.cf-case-story__intro,
.cf-case-story__copy {
  max-width: 900px;
}

.cf-case-story--columns .cf-case-story__intro,
.cf-case-study-gallery .cf-case-story__intro {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.cf-case-story h2 {
  margin: 0 0 14px;
  color: #172033;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.12;
}

.cf-case-story__intro p,
.cf-case-story__copy p,
.cf-case-story__visual figcaption {
  margin: 0;
  color: #4f5c70;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.66;
}

.cf-case-story__intro p + p,
.cf-case-story__copy p + p {
  margin-top: 12px;
}

.cf-case-story__media-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}

.cf-case-story--media-left .cf-case-story__visual {
  order: -1;
}

.cf-case-story__visual {
  min-width: 0;
  margin: 0;
}

.cf-case-story__visual figcaption {
  padding-top: 12px;
  font-size: 13px;
}

.cf-case-story__visual figcaption strong {
  color: #172033;
}

.cf-case-story__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 42px);
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cf-case-story__list li {
  position: relative;
  padding: 13px 0 13px 18px;
  border-top: 1px solid rgba(23, 32, 51, 0.15);
  color: #334057;
  font-size: 14px;
  line-height: 1.5;
}

.cf-case-story__list li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5366cc;
}

.cf-case-study-capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 6vw, 74px);
}

.cf-case-study-capability-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.cf-case-study-capability-group {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.045);
}

.cf-case-study-capability-group h3,
.cf-case-study-agent-note h3 {
  margin: 0 0 13px;
  color: #172033;
  font-size: 18px;
  font-weight: 720;
  line-height: 1.3;
}

.cf-case-study-capability-group ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-case-study-capability-group li {
  position: relative;
  padding-left: 16px;
  color: #4f5c70;
  font-size: 14px;
  line-height: 1.48;
}

.cf-case-study-capability-group li::before {
  content: "";
  position: absolute;
  top: 0.64em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5366cc;
}

.cf-case-study-agent-note {
  max-width: 960px;
  margin-top: clamp(24px, 4vw, 36px);
  padding: 20px 22px;
  border-left: 3px solid #5366cc;
  background: rgba(255, 255, 255, 0.62);
}

.cf-case-study-agent-note p {
  margin: 0;
}

.cf-case-study-workflow__layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: start;
}

.cf-case-study-workflow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-case-study-workflow-list li {
  position: relative;
  padding: 15px 0 15px 18px;
  border-top: 1px solid rgba(23, 32, 51, 0.15);
  color: #334057;
  font-size: 15px;
  line-height: 1.58;
}

.cf-case-study-workflow-list li::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5366cc;
}

.cf-case-study-capability-item {
  padding: 18px 0 20px;
  border-top: 1px solid rgba(23, 32, 51, 0.16);
}

.cf-case-study-capability-item h3,
.cf-case-study-gallery-item__caption h3 {
  margin: 0 0 7px;
  color: #172033;
  font-size: 18px;
  font-weight: 720;
  line-height: 1.3;
}

.cf-case-study-capability-item p {
  max-width: 52ch;
  margin: 0;
  color: #4f5c70;
  font-size: 15px;
  line-height: 1.58;
}

.cf-case-study-gallery {
  background: #fff;
}

.cf-case-study-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 52px) clamp(22px, 3vw, 34px);
}

.cf-case-study-gallery-item {
  min-width: 0;
}

.cf-case-study-gallery-item--featured {
  grid-column: 1 / -1;
}

.cf-case-study-gallery-item__caption {
  padding-top: 15px;
}

.cf-case-study-gallery-item__caption p {
  max-width: 64ch;
  font-size: 15px;
}

.cf-case-study-gallery-item--featured .cf-case-study-gallery-item__caption {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 0.64fr);
  gap: 28px;
  align-items: baseline;
}

.cf-case-study-outcome__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(44px, 7vw, 86px);
  align-items: start;
}

.cf-case-study-outcome-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-case-study-outcome-list li {
  position: relative;
  padding: 14px 0 14px 20px;
  border-top: 1px solid rgba(23, 32, 51, 0.15);
  color: #172033;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
}

.cf-case-study-outcome-list li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5366cc;
}

.cf-hawks-case-study .cf-case-study-proof {
  padding-block: clamp(48px, 5vw, 64px);
}

.cf-case-study-proof__inner {
  max-width: 940px;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 4px solid #5366cc;
}

.cf-case-study-proof__inner p {
  max-width: 72ch;
}

.cf-hawks-case-study .cf-case-study-final {
  padding-block: clamp(52px, 5vw, 68px);
  background: #fff;
}

.cf-hawks-case-study .cf-case-study-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(23, 32, 51, 0.14);
  border-radius: 10px;
  background: #f8f9fc;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.06);
}

.cf-case-study-cta .cf-page-actions {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .cf-case-study-context-grid__inner,
  .cf-case-study-outcome__layout,
  .cf-case-study-workflow__layout,
  .cf-hawks-case-study .cf-case-study-cta {
    grid-template-columns: 1fr;
  }

  .cf-case-study-context-grid__inner article + article {
    padding-top: 32px;
    padding-left: 0;
    border-top: 1px solid rgba(23, 32, 51, 0.14);
    border-left: 0;
  }

  .cf-case-study-cta .cf-page-actions {
    justify-content: flex-start;
  }

  .cf-case-story__media-layout {
    grid-template-columns: 1fr;
  }

  .cf-case-story--media-left .cf-case-story__visual {
    order: 0;
  }
}

@media (max-width: 768px) {
  .cf-case-study-gallery-grid,
  .cf-case-study-gallery-item--featured .cf-case-study-gallery-item__caption {
    grid-template-columns: 1fr;
  }

  .cf-case-study-gallery-item--featured {
    grid-column: auto;
  }

  .cf-case-study-gallery-item--featured .cf-case-study-gallery-item__caption {
    gap: 0;
  }
}

@media (max-width: 640px) {
  .cf-work-archive .cf-page-hero {
    min-height: 520px;
    padding-block: 0;
    background-image: url('../images/ourworkmblbg.png');
    background-position: center center;
    background-size: cover;
  }

  .cf-work-archive .cf-page-hero__content {
    display: none;
  }

  .cf-work-filters {
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .cf-work-filter {
    flex: 0 0 auto;
    padding-inline: 14px;
  }

  .cf-work-project-grid {
    grid-template-columns: 1fr;
  }

  .cf-work-project-card {
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
    padding: 18px;
  }

  .cf-work-project-card__logo img {
    width: min(100%, 150px);
    max-height: 64px;
  }

  .cf-work-project-card--crash-411 .cf-work-project-card__logo {
    min-height: 58px;
    padding-block: 4px;
  }

  .cf-work-project-card--crash-411 .cf-work-project-card__logo img {
    width: min(100%, 142px);
    max-height: 70px;
  }

  .cf-hawks-case-study .cf-page-section {
    padding-block: 52px;
  }

  .cf-hawks-case-study .cf-case-study-hero .cf-page-hero__title {
    font-size: var(--cs-public-title-size);
  }

  .cf-case-study-capability-list,
  .cf-case-study-capability-groups,
  .cf-case-story__list,
  .cf-case-study-outcome-list {
    grid-template-columns: 1fr;
  }

  .cf-case-study-screen,
  .cf-case-study-screen--hero {
    --cf-case-study-frame-space: 14px;
    padding: 6px;
  }

}

/* ================================================================
   CONSALTEK HOMEPAGE — BRAND SYSTEM v3
   Locked sequence:
   Hero -> direct proof -> Build with Consaltek -> Use Cases
   -> Build More with Consaltek -> ConsaltekSolutions.online CTA
   ================================================================ */
.chp-home {
  --chp-ink:#0F172A;
  --chp-copy:#5B6678;
  --chp-blue:#5E70CF;
  --chp-blue-deep:#4D60BF;
  --chp-line:#E2E8F0;
  --chp-soft:#F5F7FB;
  --chp-white:#FFFFFF;
  overflow:clip;
  background:#FBFCFE;
  color:var(--chp-ink);
  font-family:'Inter',system-ui,sans-serif;
}
.chp-home,.chp-home *{box-sizing:border-box}
.chp-home .cf-wrap{width:min(100%,1240px);margin-inline:auto;padding-inline:28px}
.chp-home a{text-decoration:none}
.chp-home :is(a,button):focus-visible{outline:3px solid rgba(94,112,207,.25);outline-offset:3px}

.chp-actions{display:flex;flex-wrap:wrap;gap:12px}
.chp-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 23px;
  border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:500;line-height:1;
  transition:transform .16s ease,border-color .16s ease,background-color .16s ease,color .16s ease;
}
.chp-btn:hover{transform:translateY(-1px)}
.chp-btn--primary{background:#121C29;border-color:#121C29;color:#fff}
.chp-btn--primary:hover,.chp-btn--primary:focus-visible{background:#1B2635;color:#fff}
.chp-btn--secondary{background:#fff;border-color:#C7D0DD;color:#172033}
.chp-btn--secondary:hover,.chp-btn--secondary:focus-visible{border-color:#9EABBC;color:#0F172A}

/* Hero is always visible. Motion must never be allowed to hide the message. */
.chp-hero{
  position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;
  background:#FBFCFE;border-bottom:1px solid var(--chp-line);
}
.chp-hero::before,.chp-hero::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  border:1px solid rgba(94,112,207,.14);pointer-events:none;
}
.chp-hero::before{left:-410px;top:30px}
.chp-hero::after{right:-410px;top:30px}
.chp-hero__inner{position:relative;width:100%;padding-block:112px 106px}
.chp-hero__content{
  width:min(100%,1100px);margin:auto;text-align:center;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
.chp-hero__content h1{
  max-width:1060px;margin:0 auto;color:var(--chp-ink);font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(56px,5.75vw,84px);font-weight:380;line-height:1.015;letter-spacing:-.057em;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
.chp-hero__content>p{
  max-width:760px;margin:27px auto 0;color:#5B6678;font-size:19px;font-weight:400;line-height:1.58;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
.chp-hero__actions{
  justify-content:center;margin-top:31px;opacity:1!important;visibility:visible!important;transform:none!important;
}

/* Strong visible motion-frame: animated partial traces, never a permanent border. */
.chp-motion-trace{
  position:absolute;left:50%;bottom:28px;width:360px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,transparent 0%,#7B86DC 24%,#4D60BF 50%,#7B86DC 76%,transparent 100%);
  transform:translateX(-50%);transform-origin:center;
  animation:chp-trace-strong 3.2s cubic-bezier(.2,.75,.2,1) infinite;
}
.chp-motion-edge{
  position:absolute;top:58px;width:3px;height:190px;border-radius:999px;
  background:linear-gradient(180deg,transparent,#7B86DC 30%,#4D60BF 64%,transparent);
  opacity:0;pointer-events:none;
}
.chp-motion-edge--left{left:34px;animation:chp-edge-run 4.2s .15s ease-in-out infinite}
.chp-motion-edge--right{right:34px;animation:chp-edge-run 4.2s 1.05s ease-in-out infinite}
@keyframes chp-trace-strong{
  0%,12%{opacity:0;transform:translateX(-50%) scaleX(.15)}
  28%,62%{opacity:.95;transform:translateX(-50%) scaleX(1)}
  82%,100%{opacity:0;transform:translateX(-50%) scaleX(.25)}
}
@keyframes chp-edge-run{
  0%,20%{opacity:0;transform:translateY(-70px) scaleY(.25)}
  38%,62%{opacity:.9;transform:translateY(0) scaleY(1)}
  82%,100%{opacity:0;transform:translateY(70px) scaleY(.3)}
}

/* Direct proof: same visual box, no destructive crop. */
.chp-proof{padding:0 0 72px;background:linear-gradient(180deg,#FBFCFE 0%,#F7F9FC 100%)}
.chp-proof__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:translateY(-32px);padding-inline:28px;
}
.chp-proof__frame{
  position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;
  aspect-ratio:16/9;border:1px solid #DDE4ED;border-radius:18px;background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.055);
}
.chp-proof__frame img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center top;
  filter:saturate(.48) brightness(1.025) contrast(1.02);
  transition:transform .22s ease;
}
.chp-proof__frame:hover img{transform:scale(1.006)}
.chp-proof__frame::before{
  content:"";position:absolute;z-index:2;left:-42%;top:0;width:42%;height:3px;
  background:linear-gradient(90deg,transparent,#5E70CF 35%,#4D60BF);
  animation:chp-proof-top 4.6s ease-in-out infinite;
}
.chp-proof__frame::after{
  content:"";position:absolute;z-index:2;right:0;top:-55%;width:3px;height:52%;
  background:linear-gradient(180deg,transparent,#7B86DC,#4D60BF);
  animation:chp-proof-side 4.6s .55s ease-in-out infinite;
}
.chp-proof__frame:nth-child(2)::before{animation-delay:.7s}
.chp-proof__frame:nth-child(2)::after{animation-delay:1.25s}
@keyframes chp-proof-top{
  0%,12%{left:-42%;opacity:0}
  25%,64%{left:100%;opacity:1}
  76%,100%{left:100%;opacity:0}
}
@keyframes chp-proof-side{
  0%,24%{top:-55%;opacity:0}
  40%,72%{top:100%;opacity:.95}
  84%,100%{top:100%;opacity:0}
}

.chp-section{
  position:relative;padding-block:82px;border-top:1px solid var(--chp-line);background:#FBFCFE;
}
.chp-section>.cf-wrap{position:relative}
.chp-section>.cf-wrap::before{
  content:"";position:absolute;top:-30px;left:28px;width:230px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,#7B86DC 30%,#4D60BF 68%,transparent);
  transform-origin:left;animation:chp-section-sweep 5.2s ease-in-out infinite;pointer-events:none;
}
.chp-section:nth-of-type(even)>.cf-wrap::before{left:auto;right:28px;transform-origin:right;animation-delay:.7s}
@keyframes chp-section-sweep{
  0%,16%{opacity:0;transform:scaleX(.15) translateX(-30px)}
  32%,62%{opacity:.9;transform:scaleX(1) translateX(0)}
  78%,100%{opacity:0;transform:scaleX(.2) translateX(45px)}
}

.chp-section-head h2,.chp-build-more__intro h2,.chp-online-cta__copy h2{
  margin:0;color:var(--chp-ink);font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(40px,4vw,58px);font-weight:400;line-height:1;letter-spacing:-.045em;
}
.chp-section-head h2 span,.chp-build-more__intro h2 span,.chp-online-cta__copy h2 span{color:var(--chp-blue-deep)}
.chp-section-head p,.chp-build-more__intro p,.chp-online-cta__copy p{
  max-width:650px;margin:16px 0 0;color:var(--chp-copy);font-size:17px;line-height:1.58;
}
.chp-section-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}

/* Embedded project logos */
.chp-logo-wall{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:38px;border:0;
}
.chp-logo-wall__item{
  min-height:106px;display:grid;place-items:center;padding:18px;background:#F2F3F5;
  border:1px solid #EEF0F3;border-radius:15px;cursor:pointer;
  transition:background-color .16s ease,transform .16s ease,border-color .16s ease;
}
.chp-logo-wall__item img{
  display:block;width:100%;max-width:168px;max-height:52px;height:auto;object-fit:contain;
  opacity:.8;filter:none;transition:opacity .16s ease,transform .16s ease;
}
.chp-logo-wall__item:hover,.chp-logo-wall__item:focus-visible{
  background:#ECEEF1;border-color:#E0E4E8;transform:translateY(-1px)
}
.chp-logo-wall__item:hover img,.chp-logo-wall__item:focus-visible img{opacity:.98;transform:scale(1.015)}
.chp-project-experiences-link{display:none!important}

/* Use cases: one aligned media system. */
.chp-use-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px}
.chp-use-card{
  min-width:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;
  min-height:300px;padding:28px;border:1px solid #E0E6EE;border-radius:18px;background:#fff;color:var(--chp-ink);
  box-shadow:0 12px 32px rgba(15,23,42,.035);transition:transform .18s ease,border-color .18s ease;
}
.chp-use-card:last-child{grid-column:1/-1;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.chp-use-card:hover{transform:translateY(-2px);border-color:#D0D9E5}
.chp-use-card__copy h3{margin:0;font-size:25px;font-weight:500;line-height:1.08;letter-spacing:-.03em}
.chp-use-card__copy p{margin:12px 0 0;color:var(--chp-copy);font-size:15px;line-height:1.55}
.chp-use-card__media{
  display:grid;place-items:center;overflow:hidden;min-height:178px;
  border:1px solid #E0E6EE;border-radius:13px;background:#F8FAFC;
}
.chp-use-card__media img{
  display:block;width:100%;height:auto;max-height:220px;object-fit:contain;object-position:center;
  filter:saturate(.28) brightness(1.035) contrast(1.035);
}
.chp-use-card--dnc .chp-use-card__media img{max-height:170px}
.chp-use-card--portal .chp-use-card__media img{max-height:196px}
.chp-use-card--leadgen .chp-use-card__media img{max-height:190px}
.chp-use-card--website .chp-use-card__media img{max-height:235px}
.chp-use-card:last-child .chp-use-card__media img{max-height:245px}

.chp-csv-visual{overflow:hidden;border:1px solid #E0E6EE;border-radius:13px;background:#F8FAFC}
.chp-csv-visual>div{display:grid;grid-template-columns:1.45fr .7fr .75fr;align-items:center;min-height:44px;border-bottom:1px solid #E6EBF1}
.chp-csv-visual>div:last-child{border-bottom:0}
.chp-csv-visual span{padding:0 12px;color:#647184;font-size:12px}
.chp-csv-visual__head{background:#EEF2F7}
.chp-csv-visual__head span{color:#334155;font-weight:600}

.chp-build-more__layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px}
.chp-service-list{border-top:1px solid #111827}
.chp-service-row{
  display:grid;grid-template-columns:280px minmax(0,1fr) 40px;gap:24px;align-items:center;
  min-height:82px;border-bottom:1px solid var(--chp-line);color:var(--chp-ink)
}
.chp-service-row h3{margin:0;font-size:19px;font-weight:500;letter-spacing:-.02em}
.chp-service-row p{margin:0;color:var(--chp-copy);font-size:14px;line-height:1.48}
.chp-service-row>span{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid #C7D1DE;border-radius:50%;
  color:#5B6678;transition:transform .16s ease,border-color .16s ease
}
.chp-service-row:hover>span{transform:translateX(2px);border-color:#9EABBC}

.chp-online-cta{padding-top:62px;padding-bottom:78px}
.chp-online-cta__panel{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:38px;align-items:center;padding:38px;border:1px solid #DCE3ED;border-radius:20px;background:#F2F5FA;
}
.chp-online-cta__panel::before{
  content:"";position:absolute;left:-36%;bottom:0;width:36%;height:3px;
  background:linear-gradient(90deg,transparent,#7B86DC,#4D60BF);
  animation:chp-cta-frame 4.5s ease-in-out infinite;
}
.chp-online-cta__panel::after{
  content:"";position:absolute;right:0;top:-50%;width:3px;height:46%;
  background:linear-gradient(180deg,transparent,#7B86DC,#4D60BF);
  animation:chp-cta-side 4.5s .55s ease-in-out infinite;
}
@keyframes chp-cta-frame{0%,14%{left:-36%;opacity:0}30%,66%{left:100%;opacity:1}80%,100%{left:100%;opacity:0}}
@keyframes chp-cta-side{0%,26%{top:-50%;opacity:0}42%,74%{top:100%;opacity:.95}86%,100%{top:100%;opacity:0}}

.chp-online-cta__copy .chp-btn{margin-top:20px}
.chp-online-cta__tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.chp-online-tool{
  min-height:142px;padding:16px;display:flex;flex-direction:column;
  border:1px solid #E0E6EE;border-radius:13px;background:#fff;
}
.chp-online-tool strong{font-size:13px;font-weight:600}
.chp-online-tool>span{margin-top:auto;padding-top:10px;color:#768193;font-size:11px;line-height:1.4}
.chp-online-mini{margin-top:13px;min-height:58px;border:1px solid #E4E9F0;border-radius:9px;background:#F8FAFC}
.chp-online-mini--rows{padding:9px;display:grid;gap:6px}
.chp-online-mini--rows i{height:7px;border-radius:99px;background:#D5DDE8}
.chp-online-mini--rows i:nth-child(2){width:78%}
.chp-online-mini--rows i:nth-child(3){width:62%}
.chp-online-mini--pages{display:flex;align-items:center;justify-content:center;gap:8px}
.chp-online-mini--pages i{width:25px;height:35px;border:1px solid #C9D3E1;border-radius:4px;background:#fff}
.chp-online-mini--dnc{display:flex;align-items:center;justify-content:space-between;padding:10px}
.chp-online-mini--dnc i{width:62%;height:12px;border-radius:6px;background:#D5DDE8}
.chp-online-mini--dnc b{font-size:10px;color:#3D6A4C;background:#EAF5ED;border-radius:999px;padding:5px 7px}
.chp-online-mini--flow{display:flex;align-items:center;justify-content:space-between;padding:10px}
.chp-online-mini--flow i{width:11px;height:11px;border-radius:50%;background:#64748B;position:relative}
.chp-online-mini--flow i:not(:last-child)::after{content:"";position:absolute;left:11px;top:5px;width:18px;height:1px;background:#C8D1DE}

@media(max-width:1024px){
  .chp-proof__grid{grid-template-columns:1fr}
  .chp-logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chp-use-grid{grid-template-columns:1fr}
  .chp-use-card:last-child{grid-column:auto;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .chp-build-more__layout{grid-template-columns:1fr;gap:38px}
  .chp-online-cta__panel{grid-template-columns:1fr}
}
@media(max-width:700px){
  .chp-home .cf-wrap{padding-inline:18px}
  .chp-hero{min-height:auto}
  .chp-hero__inner{padding-block:84px 82px}
  .chp-hero__content h1{font-size:clamp(44px,12vw,58px);line-height:1.04;font-weight:400}
  .chp-hero__content>p{font-size:17px}
  .chp-motion-edge{display:none}
  .chp-proof{padding-bottom:54px}
  .chp-proof__grid{padding-inline:14px;transform:translateY(-16px)}
  .chp-section{padding-block:64px}
  .chp-section-head--split{align-items:flex-start;flex-direction:column}
  .chp-logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chp-logo-wall__item{min-height:92px;padding:15px}
  .chp-use-card,.chp-use-card:last-child{grid-template-columns:1fr;min-height:0;padding:20px}
  .chp-use-card__media{min-height:0}
  .chp-use-card__media img,.chp-use-card:last-child .chp-use-card__media img{height:auto;max-height:250px}
  .chp-service-row{grid-template-columns:minmax(0,1fr) 34px;gap:12px;padding-block:18px}
  .chp-service-row p{grid-column:1/3}
  .chp-online-cta__panel{padding:26px 20px}
  .chp-online-cta__tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .chp-home *,.chp-home *::before,.chp-home *::after{animation:none!important;transition-duration:.01ms!important}
  .chp-btn:hover,.chp-use-card:hover,.chp-proof__frame:hover img{transform:none}
}

.cf-empty-state {
  width: min(100%, 760px);
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}

.cf-empty-state h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.cf-empty-state p {
  max-width: 58ch;
}

.cf-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cf-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.cf-text-link::after {
  content: "->";
  transform: translateX(0);
  transition: transform 0.18s var(--cf-ease);
}

.cf-text-link:hover::after,
.cf-text-link:focus-visible::after,
.cf-btn:hover svg,
.cf-btn:focus-visible svg,
.cf-footer-cta:hover svg,
.cf-footer-cta:focus-visible svg {
  transform: translateX(2px);
}

.cf-btn svg,
.cf-footer-cta svg {
  transition: transform 0.18s var(--cf-ease);
}

.cf-tool-public-shell {
  background:
    radial-gradient(circle at 18% 12%, rgba(86, 117, 226, 0.08), transparent 28%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 45%, #FFFFFF 100%);
  color: var(--cf-text-1);
}

.cf-tool-public-shell .container {
  width: min(100% - 44px, 1220px);
}

.cf-tool-hero {
  position: relative;
  padding: clamp(14px, 2.1vw, 24px) 0 4px;
  background: transparent;
  border-bottom: 0;
}

.cf-tool-back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 9px;
  color: var(--cf-blue);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.4;
}

.cf-tool-back-link::before {
  content: "\2190";
  margin-right: 8px;
  line-height: 1;
}

.cf-tool-back-link:hover,
.cf-tool-back-link:focus-visible {
  color: var(--cf-blue);
}

.cf-tool-public-shell .dt-hero-access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.cf-tool-public-shell .dt-hero-access-row .cf-status-pill {
  min-height: 24px;
  padding: 3px 10px;
  box-shadow: 0 8px 18px rgba(18, 24, 36, 0.06);
  font-size: 11px;
}

.cf-tool-public-shell .dt-hero-access-row .cf-status-pill--pro {
  border-color: var(--cf-blue-border);
  background: rgba(255, 255, 255, 0.84);
  color: var(--cf-text-1);
}

.cf-tool-public-shell .dt-hero-title {
  margin: 0;
  max-width: 27ch;
  color: var(--cf-text-1);
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: var(--cs-public-title-size);
  font-weight: var(--cs-public-title-weight);
  line-height: var(--cs-public-title-line);
  letter-spacing: 0;
}

.cf-tool-public-shell .dt-hero-lead {
  max-width: 58ch;
  margin: 5px 0 0;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.42;
}

.cf-tool-stage {
  margin-top: -2px;
  padding: 0 0 14px;
  background: transparent;
}

.cf-tool-public-shell #tool-interface {
  scroll-margin-top: calc(var(--cf-public-header-offset, 72px) + 16px);
}

.cf-tool-public-shell .tool-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 24px;
}

.cf-tool-public-shell .tool-page-layout--workspace {
  grid-template-columns: minmax(0, 1fr);
}

.cf-tool-public-shell .tool-page-layout > aside {
  position: sticky;
  top: 92px;
}

body.admin-bar .cf-tool-public-shell .tool-page-layout > aside {
  top: 124px;
}

.cf-tool-public-shell #tool-interface > .alert,
.cf-tool-public-shell #tool-interface > .card,
.cf-tool-public-shell .cf-tool-main-surface,
.cf-tool-public-shell .tool-panel,
.cf-tool-public-shell .dt-preview-card,
.cf-tool-public-shell .dt-section-surface,
.cf-tool-public-shell details.card {
  position: relative;
  border: 1px solid var(--cs-border-medium);
  border-radius: var(--cs-radius-md);
  background: var(--cs-raised);
  box-shadow: var(--cs-ridge), var(--cs-elev-2);
  overflow: hidden;
}

.cf-tool-public-shell .cf-tool-main-surface {
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-ridge), var(--cs-elev-3);
}

.cf-tool-public-shell .cf-tool-main-surface::before,
.cf-tool-public-shell .tool-panel::before,
.cf-tool-public-shell .dt-preview-card::before,
.cf-tool-public-shell .dt-section-surface::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--cs-border-faint);
  border-radius: calc(var(--cs-radius-md) - 4px);
  pointer-events: none;
  z-index: 0;
}

.cf-tool-public-shell .cf-tool-main-surface::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--cs-radius-lg) - 10px);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--cs-blue), var(--cs-blue)) top left / 44px 2px no-repeat,
    linear-gradient(var(--cs-blue), var(--cs-blue)) top left / 2px 40px no-repeat;
  opacity: 0.72;
}

.cf-tool-public-shell .cf-tool-main-surface > *,
.cf-tool-public-shell .tool-panel > *,
.cf-tool-public-shell .dt-preview-card > *,
.cf-tool-public-shell .dt-section-surface > * {
  position: relative;
  z-index: 1;
}

.cf-tool-public-shell .cf-tool-main-surface {
  min-width: 0;
  padding: clamp(12px, 1.45vw, 16px);
  border-color: rgba(86, 117, 226, 0.2);
  border-radius: 16px;
}

.cf-tool-public-shell .cf-tool-main-surface > form.tool-upload-form,
.cf-tool-public-shell .cf-tool-main-surface > .tool-upload-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.cf-tool-public-shell .cf-tool-main-surface > form.tool-upload-form + form.tool-upload-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-workflow-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.cf-tool-workflow-rail--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cf-tool-workflow-rail span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--cs-border-faint);
  border-radius: 14px;
  background: rgba(238, 242, 252, 0.56);
  color: var(--cf-text-2);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.2;
}

.cf-tool-workflow-rail b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cs-blue);
  color: #FFFFFF;
  font-size: 11px;
  line-height: 1;
}

.cf-tool-result-area {
  margin-top: 18px;
}

.dt-functional-workspace-form {
  display: grid;
  gap: 18px;
}

.dt-functional-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 18px;
  align-items: stretch;
}

.dt-functional-workspace-grid > .tool-panel {
  min-width: 0;
  margin: 0;
}

.dt-functional-workspace-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.dt-functional-workspace-actions p {
  max-width: 62ch;
  margin: 0;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.55;
}

.cf-tool-recent-panel--workspace {
  margin-top: 18px;
}

.cf-tool-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.cf-tool-public-shell details.card {
  padding: 18px 20px;
}

.cf-tool-public-shell details.card summary {
  color: var(--cf-text-1);
  font-size: 16px;
  font-weight: 600;
}

.cf-tool-public-shell .tool-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 0;
  border: 0;
  background: transparent;
}

.cf-tool-public-shell .tool-panel-header > span:not(.tool-panel-title) {
  display: none;
}

.cf-tool-public-shell .tool-panel-title,
.cf-tool-public-shell .dt-preview-title {
  color: var(--cf-text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.cf-tool-public-shell .tool-panel-body {
  padding: 16px 20px 20px;
}

.cf-tool-status-row {
  display: grid;
  gap: 10px;
}

.cf-tool-status-row p,
.cf-tool-retention-note {
  margin: 0;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.65;
}

.cf-tool-compact-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.cf-tool-compact-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.cf-tool-compact-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cs-blue);
}

.cf-tool-retention-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cs-border-faint);
  color: var(--cf-text-3);
  font-size: 12px;
}

.cf-tool-public-shell .tool-status-badge,
.cf-tool-public-shell .status-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--cf-green-border);
  background: var(--cf-green-bg);
  color: var(--cf-green);
  font-size: 12px;
  font-weight: 700;
}

.cf-tool-public-shell .tool-status-badge.is-warning {
  border-color: rgba(120, 72, 12, 0.18);
  background: rgba(255, 246, 224, 0.9);
  color: #8A5A12;
}

.cf-tool-public-shell .tool-status-badge.is-error {
  border-color: rgba(190, 18, 60, 0.2);
  background: rgba(255, 241, 242, 0.95);
  color: #BE123C;
}

.cf-tool-public-shell .tool-status-badge.is-success {
  border-color: var(--cf-green-border);
  background: var(--cf-green-bg);
  color: var(--cf-green);
}

.cf-tool-public-shell .upload-zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 22px;
  border: 1.5px dashed var(--cf-blue-border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(238, 242, 252, 0.72) 0%, rgba(255, 255, 255, 0.94) 100%);
  text-align: center;
  transition:
    border-color 0.18s var(--cf-ease),
    background-color 0.18s var(--cf-ease),
    transform 0.18s var(--cf-ease),
    box-shadow 0.18s var(--cf-ease);
}

.cf-tool-public-shell .upload-zone:hover,
.cf-tool-public-shell .upload-zone:focus-within,
.cf-tool-public-shell .upload-zone.drag-over {
  border-color: var(--cf-blue);
  background:
    linear-gradient(180deg, rgba(230, 236, 252, 0.88) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 14px 28px rgba(90, 118, 214, 0.12);
  transform: translateY(-1px);
}

.cf-tool-public-shell .upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.cf-tool-public-shell .upload-zone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--cs-radius-sm);
  border: 1px solid var(--cs-border-medium);
  background: var(--cs-raised);
  color: var(--cs-blue);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
  font-size: 0;
}

.cf-tool-public-shell .upload-zone-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.cf-tool-public-shell .upload-zone-title {
  color: var(--cf-text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.cf-tool-public-shell .upload-zone-hint {
  max-width: 34rem;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.cf-tool-public-shell .form-control,
.cf-tool-public-shell input[type="text"]:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.cf-tool-public-shell input[type="number"],
.cf-tool-public-shell input[type="email"],
.cf-tool-public-shell input[type="tel"],
.cf-tool-public-shell select,
.cf-tool-public-shell textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--cf-panel);
  border-radius: 14px;
  background: var(--cf-white);
  color: var(--cf-text-1);
  font: inherit;
}

.cf-tool-public-shell textarea {
  min-height: 140px;
  resize: vertical;
}

.cf-tool-public-shell .dt-preview-card,
.cf-tool-public-shell .dt-section-surface {
  overflow: hidden;
}

.cf-tool-public-shell .dt-preview-card-header,
.cf-tool-public-shell .dt-section-surface-body {
  padding: 20px;
}

.cf-tool-public-shell .dt-preview-table {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid rgba(18, 24, 36, 0.08);
  border-radius: 16px;
  scrollbar-gutter: stable;
}

.cf-tool-public-shell .dt-preview-table table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.cf-tool-public-shell .dt-preview-table th,
.cf-tool-public-shell .dt-preview-table td {
  overflow-wrap: anywhere;
}

.cf-tool-public-shell .dt-preview-table th,
.cf-tool-public-shell .dt-preview-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(18, 24, 36, 0.08);
  text-align: left;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.55;
}

.cf-tool-public-shell .dt-preview-table th {
  color: var(--cf-text-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(238, 242, 252, 0.72);
}

.cf-tool-public-shell .dt-preview-footnote {
  margin-top: 14px;
  color: var(--cf-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.cf-tool-access-surface {
  display: grid;
  gap: 22px;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px);
}

.cf-tool-access-copy h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cf-tool-access-copy p {
  max-width: 66ch;
  margin: 12px 0 0;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.7;
}

.cf-tool-access-actions,
.cf-tool-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cf-tool-access-note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--cs-border-faint);
  color: var(--cf-text-3);
  font-size: 13px;
  line-height: 1.55;
}

.cf-tool-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cf-tool-benefit-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cs-border-faint);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.cf-tool-benefit-grid strong {
  display: block;
  color: var(--cf-text-1);
  font-size: 14px;
  line-height: 1.35;
}

.cf-tool-benefit-grid p {
  margin: 7px 0 0;
  color: var(--cf-text-2);
  font-size: 13px;
  line-height: 1.55;
}

.cf-tool-related-strip {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-related-strip > span {
  color: var(--cf-text-3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cf-tool-related-strip > div,
.cf-tool-link-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cf-tool-related-strip a,
.cf-tool-link-cluster a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--cs-border-faint);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--cf-text-2);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.cf-tool-related-strip a:hover,
.cf-tool-related-strip a:focus-visible,
.cf-tool-link-cluster a:hover,
.cf-tool-link-cluster a:focus-visible {
  border-color: var(--cf-blue-border);
  color: var(--cf-blue);
}

.cf-tool-recent-list {
  display: grid;
  gap: 0;
  padding: 10px 14px 16px;
}

.cf-tool-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cs-border-faint);
}

.cf-tool-recent-item span {
  display: block;
  color: var(--cf-text-3);
  font-size: 11px;
  line-height: 1.4;
}

.cf-tool-recent-item strong,
.cf-tool-recent-item a {
  color: var(--cf-text-1);
  font-size: 12px;
  line-height: 1.4;
}

.cf-tool-recent-item a {
  color: var(--cf-blue);
  font-weight: 700;
}

.cf-tool-info-section {
  padding: clamp(32px, 4vw, 48px) 0;
  background: #FFFFFF;
}

.cf-tool-public-shell .cf-tool-info-container {
  width: min(100%, 1120px);
}

.cf-tool-editorial-shell,
.cf-tool-info-groups {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.cf-tool-information {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--cs-border-faint);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.cf-tool-information > h2,
.cf-tool-compact-section > h2 {
  margin: 0 0 18px;
  color: var(--cf-text-1);
  font-size: 22px;
  line-height: 1.2;
}

.cf-tool-information-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
}

.cf-tool-information h3 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: 16px;
  line-height: 1.3;
}

.cf-tool-information p {
  margin: 9px 0 0;
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.65;
}

.cf-tool-information-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-information-note p + p {
  margin-top: 7px;
}

.cf-tool-compact-section {
  padding-top: 22px;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-compact-section--faq {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1.6fr);
  gap: 24px;
}

.cf-tool-compact-section--faq > h2 {
  margin-bottom: 0;
}

.cf-tool-info-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 34px);
  padding-top: clamp(18px, 3vw, 28px);
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-info-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.cf-tool-info-block h2,
.cf-tool-info-block h3 {
  margin: 0;
  color: var(--cf-text-1);
  letter-spacing: -0.03em;
}

.cf-tool-info-block h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.08;
}

.cf-tool-info-block h3 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
}

.cf-tool-info-block p {
  margin: 12px 0 0;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.75;
}

.cf-tool-editorial-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--cf-text-2);
  font-size: 15px;
  line-height: 1.65;
}

.cf-tool-editorial-list--numbered {
  counter-reset: tool-step;
  padding-left: 0;
  list-style: none;
}

.cf-tool-editorial-list--numbered li {
  position: relative;
  padding-left: 34px;
  counter-increment: tool-step;
}

.cf-tool-editorial-list--numbered li::before {
  content: counter(tool-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cf-blue-bg);
  color: var(--cf-blue);
  font-size: 12px;
  font-weight: 750;
}

.cf-tool-note-stack {
  display: grid;
  gap: 22px;
}

.cf-tool-note-stack > div + div {
  padding-top: 22px;
  border-top: 1px solid var(--cs-border-faint);
}

.cf-tool-note-stack .dt-preview-table,
.cf-tool-info-block--output .dt-preview-table {
  margin-top: 14px;
}

.cf-tool-disclaimer {
  padding: 12px 14px;
  border: 1px solid rgba(120, 72, 12, 0.18);
  border-radius: 14px;
  background: rgba(255, 246, 224, 0.62);
}

.cf-tool-info-block--privacy {
  align-items: center;
}

.cf-tool-info-block--faq {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
}

.cf-tool-faq-list {
  display: grid;
  gap: 12px;
}

.cf-tool-public-shell--single-check .tool-page-layout--single-check {
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 18px;
}

.dt-single-scrubber,
.dt-single-scrubber-form {
  min-width: 0;
}

.dt-single-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(300px, 0.86fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}

.dt-single-check-panel,
.dt-single-result-panel {
  min-width: 0;
}

.dt-single-result-panel {
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 1px solid var(--cs-border-faint);
}

.dt-single-section-head h2,
.dt-single-result-head h2,
.dt-single-support-card h2 {
  margin: 0;
  color: var(--cf-text-1);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.dt-single-result-head h2 span {
  color: var(--cf-text-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

.dt-single-phone-group {
  margin: 16px 0 14px;
}

.dt-single-scrubber .form-label,
.dt-single-validator-head {
  color: var(--cf-text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.dt-single-scrubber .form-control {
  min-height: 44px;
  padding: 10px 14px;
  border-color: rgba(18, 24, 36, 0.13);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: inset 0 1px 2px rgba(18, 24, 36, 0.045), 0 8px 18px rgba(18, 24, 36, 0.035);
  font-size: 14px;
}

.dt-single-scrubber .form-control::placeholder {
  color: rgba(82, 95, 121, 0.62);
  font-weight: 450;
}

.dt-single-scrubber .form-control:focus {
  border-color: rgba(86, 117, 226, 0.55);
  box-shadow: 0 0 0 4px rgba(86, 117, 226, 0.1), inset 0 1px 2px rgba(18, 24, 36, 0.045);
  outline: none;
}

.dt-single-validator-block {
  display: grid;
  gap: 9px;
}

.dt-single-scrubber .dt-scrubber-validator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.dt-single-scrubber .dt-checkcard {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 11px 9px 36px;
  border: 1px solid rgba(86, 117, 226, 0.16);
  border-radius: 9px;
  background: rgba(248, 250, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.dt-single-scrubber .dt-checkcard input {
  position: absolute;
  top: 50%;
  left: 12px;
  right: auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cs-blue);
  transform: translateY(-50%);
}

.dt-single-scrubber .dt-checkcard-title {
  color: var(--cf-text-2);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.2;
  overflow-wrap: normal;
}

.dt-single-scrubber .dt-checkcard:has(input:checked) {
  border-color: rgba(86, 117, 226, 0.34);
  background: rgba(244, 247, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(86, 117, 226, 0.08);
}

.dt-single-actions {
  margin-top: 14px;
}

.dt-single-scrubber .dt-single-submit {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cs-blue) 0%, var(--cs-blue-hover) 100%);
  color: #FFFFFF;
  box-shadow: 0 11px 22px rgba(86, 117, 226, 0.22);
  font-size: 14px;
  font-weight: 760;
}

.dt-single-result {
  margin-top: 11px;
}

.dt-single-preview-list {
  display: grid;
  gap: 0;
}

.dt-single-preview-row,
.dt-single-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 35px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(18, 24, 36, 0.08);
}

.dt-single-preview-row:last-child,
.dt-single-kv:last-child {
  border-bottom: 0;
}

.dt-single-preview-row span,
.dt-single-kv span,
.dt-single-meta {
  color: var(--cf-text-2);
  font-size: 12px;
  line-height: 1.35;
}

.dt-single-preview-row strong,
.dt-single-result-phone,
.dt-single-kv strong {
  color: var(--cf-text-1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.dt-single-chip,
.dt-single-result .tool-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.dt-single-chip--clean,
.dt-single-chip--good,
.dt-single-result .tool-status-badge.is-success {
  border: 1px solid var(--cf-green-border);
  background: var(--cf-green-bg);
  color: var(--cf-green);
}

.dt-single-chip--risk,
.dt-single-result .tool-status-badge.is-warning {
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: rgba(255, 239, 240, 0.92);
  color: #C92832;
}

.dt-single-preview-row--final {
  margin-top: 4px;
  padding-top: 10px;
}

.dt-single-result > .tool-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.dt-single-result > .tool-panel::before {
  display: none;
}

.dt-single-result > .tool-panel .tool-panel-header {
  display: none;
}

.dt-single-result > .tool-panel .tool-panel-body {
  padding: 0;
}

.dt-single-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18, 24, 36, 0.08);
}

.dt-single-result-grid {
  display: grid;
  gap: 0;
}

.dt-single-reason {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(120, 72, 12, 0.18);
  border-radius: 12px;
  background: rgba(255, 246, 224, 0.62);
  color: var(--cf-text-2);
  font-size: 12px;
  line-height: 1.5;
}

.dt-single-meta {
  margin-top: 8px;
  color: var(--cf-text-3);
  font-size: 12px;
}

.cf-tool-side--single-check {
  gap: 14px;
}

.cf-tool-side-card .tool-panel-body {
  padding: 14px 16px;
}

.cf-tool-side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.cf-tool-check-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cf-text-2);
  font-size: 12px;
  line-height: 1.4;
}

.cf-tool-check-list li {
  position: relative;
  padding-left: 21px;
}

.cf-tool-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--cf-blue-border);
  background: var(--cf-blue-bg);
}

.cf-tool-check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cs-blue);
}

.cf-tool-info-section--single-check {
  padding: 10px 0 clamp(24px, 4vw, 40px);
  background: transparent;
}

.dt-single-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.86fr);
  gap: 14px;
}

.dt-single-support-card {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--cs-border-medium);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--cs-ridge), 0 16px 34px rgba(18, 24, 36, 0.06);
  overflow: hidden;
}

.dt-single-step-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dt-single-step-row > div {
  position: relative;
  min-width: 0;
  padding-left: 34px;
}

.dt-single-step-row span {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--cf-blue-bg);
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 800;
}

.dt-single-step-row strong {
  display: block;
  color: var(--cf-text-1);
  font-size: 13px;
  line-height: 1.35;
}

.dt-single-step-row p,
.dt-single-support-card p,
.dt-single-faq-list p {
  margin: 6px 0 0;
  color: var(--cf-text-2);
  font-size: 12px;
  line-height: 1.45;
}

.dt-single-faq-card {
  margin-top: 14px;
}

.dt-single-faq-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--cs-border-faint);
  border-radius: 12px;
  overflow: hidden;
}

.dt-single-faq-list details {
  padding: 0;
  background: rgba(255, 255, 255, 0.74);
}

.dt-single-faq-list details + details {
  border-top: 1px solid var(--cs-border-faint);
}

.dt-single-faq-list summary {
  cursor: pointer;
  padding: 10px 14px;
  color: var(--cf-text-1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.dt-single-faq-list details p {
  padding: 0 14px 11px;
}

@media (max-width: 1180px) {
  .cf-tool-public-shell--single-check .tool-page-layout--single-check {
    grid-template-columns: minmax(0, 1fr) 286px;
  }

  .dt-single-product-grid {
    grid-template-columns: 1fr;
  }

  .dt-single-result-panel {
    padding: 18px 0 0;
    border-top: 1px solid var(--cs-border-faint);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .cf-tool-public-shell--single-check .tool-page-layout--single-check,
  .dt-single-support-grid {
    grid-template-columns: 1fr;
  }

  .cf-tool-public-shell--single-check .tool-page-layout > aside {
    position: static;
  }

  .dt-single-scrubber .dt-scrubber-validator-grid,
  .dt-single-step-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cf-tool-public-shell .container {
    width: min(100% - 36px, 1260px);
  }

  .cf-tool-public-shell .cf-tool-hero {
    padding-top: 14px;
  }

  .cf-tool-public-shell .dt-hero-title {
    font-size: var(--cs-public-title-size);
    line-height: var(--cs-public-title-line);
  }

  .cf-tool-public-shell .cf-tool-main-surface,
  .dt-single-support-card {
    border-radius: 14px;
  }

  .dt-single-scrubber .dt-scrubber-validator-grid,
  .dt-single-step-row {
    grid-template-columns: 1fr;
  }

  .dt-single-step-row > div {
    min-height: 30px;
  }
}

#dt-cookie-banner.dt-cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 10030;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(560px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid rgba(18, 24, 36, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(18, 24, 36, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    opacity 0.22s var(--cf-ease),
    transform 0.22s var(--cf-ease);
}

#dt-cookie-banner.dt-cookie-banner[hidden] {
  display: none;
}

#dt-cookie-banner.dt-cookie-banner.is-hiding {
  opacity: 0;
  transform: translateY(10px);
}

#dt-cookie-banner .dt-cookie-copy {
  display: grid;
  gap: 6px;
}

#dt-cookie-banner .dt-cookie-copy strong {
  color: var(--cf-text-1);
  font-size: 14px;
  line-height: 1.35;
}

#dt-cookie-banner .dt-cookie-copy span {
  color: var(--cf-text-2);
  font-size: 12.5px;
  line-height: 1.6;
}

#dt-cookie-banner .dt-cookie-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

#dt-cookie-banner .btn {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 12px;
}

#dt-cookie-banner .btn.btn-primary {
  border: 1px solid transparent;
  background: var(--cf-blue);
  box-shadow: 0 10px 24px rgba(90, 118, 214, 0.22);
  color: var(--cf-white);
}

#dt-cookie-banner .btn.btn-primary:hover,
#dt-cookie-banner .btn.btn-primary:focus-visible {
  background: var(--cf-blue-hover);
  box-shadow: 0 12px 28px rgba(90, 118, 214, 0.28);
}

#dt-cookie-banner .btn.btn-ghost {
  border: 1px solid rgba(18, 24, 36, 0.12);
  background: rgba(255, 255, 255, 0.98);
  color: var(--cf-text-1);
}

#dt-cookie-banner .btn.btn-ghost:hover,
#dt-cookie-banner .btn.btn-ghost:focus-visible {
  border-color: var(--cf-blue-border);
  background: var(--cf-blue-bg);
  color: var(--cf-blue);
}

#dt-cookie-banner .dt-cookie-link {
  color: var(--cf-blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

body.dt-cookie-visible #toast-container {
  bottom: 112px;
}

.cf-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.62s var(--cf-ease),
    transform 0.62s var(--cf-ease);
  transition-delay: var(--cf-delay, 0ms);
  will-change: opacity, transform;
}

.cf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cf-progress > span,
.cf-dark-progress span,
.cf-health-track span {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.8s var(--cf-ease);
}

.cf-progress > span.is-visible,
.cf-dark-progress span.is-visible,
.cf-health-track span.is-visible {
  transform: scaleX(1);
}

/* ==========================================================================
   PLATFORM PAGE MIGRATION — canonical public product system
   ========================================================================== */

.pf-platform-page {
  --pf-white: var(--cs-raised);
  --pf-text: var(--cs-text);
  --pf-text-soft: var(--cs-text);
  --pf-text-muted: var(--cs-muted);
  --pf-text-faint: var(--cs-muted-2);
  --pf-cobalt: var(--cs-blue);
  --pf-cobalt-deep: var(--cs-blue-hover);
  --pf-cobalt-light: var(--cs-blue-border-hi);
  --pf-emerald: #16a34a;
  --pf-amber: #d97706;
  --pf-violet: #7c3aed;
  --pf-canvas: var(--cs-canvas);
  --pf-line: var(--cs-border-soft);
  --pf-line-strong: var(--cs-border-medium);
  --pf-radius-surface: var(--cs-radius-md);
  --pf-radius-card: var(--cs-radius-sm);
  --pf-ridge: var(--cs-ridge);
  --pf-shadow-sm: var(--cs-elev-1);
  --pf-shadow-md: var(--cs-elev-2);
  --pf-shadow-lg: var(--cs-elev-3);
  --pf-shadow-inset: var(--cs-shadow-inset-soft);
}

.pf-platform-page {
  background: var(--cs-canvas);
  color: var(--pf-text);
  overflow-x: clip;
}

.pf-platform-page * {
  box-sizing: border-box;
}

.pf-platform-page .cf-wrap {
  width: min(1180px, calc(100% - 40px));
}

.pf-platform-page .cf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 5px;
  border: 1px solid var(--cs-border-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform 0.18s var(--cf-ease), box-shadow 0.18s var(--cf-ease), background-color 0.18s var(--cf-ease), border-color 0.18s var(--cf-ease), color 0.18s var(--cf-ease);
}

.pf-platform-page .cf-btn:hover {
  transform: translateY(-2px);
}

.pf-platform-page .cf-btn:active {
  transform: translateY(1px) scale(0.988);
}

.pf-platform-page .cf-btn-primary {
  background: var(--cs-action-primary-bg);
  color: var(--cs-action-primary-color);
  border-color: var(--cs-action-primary-border);
  box-shadow: var(--cs-elev-primary-btn);
}

.pf-platform-page .cf-btn-secondary {
  background: var(--cs-raised);
  color: var(--cs-text);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.pf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pf-product-nav {
  padding: 14px 0 0;
  background: var(--cs-canvas);
}

.pf-product-nav .cf-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  width: max-content;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  padding: 5px 7px;
  border: 1px solid var(--pf-line-strong);
  border-radius: 12px;
  background: var(--cs-card-surface);
  box-shadow: var(--cs-ridge), var(--cs-elev-1);
}

.pf-product-nav .cf-wrap::-webkit-scrollbar {
  display: none;
}

.pf-product-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  background: transparent;
  color: var(--pf-text-muted);
  font-size: 13px;
  font-weight: 640;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.pf-product-nav a::after {
  content: '';
  position: absolute;
  right: 11px;
  bottom: 3px;
  left: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--pf-cobalt);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;
}

.pf-product-nav a.is-default::after,
.pf-product-nav a:hover::after,
.pf-product-nav a:focus-visible::after {
  transform: scaleX(1);
}

.pf-platform-page:has(#capabilities:target) .pf-product-nav a.is-default::after,
.pf-platform-page:has(#pricing:target) .pf-product-nav a.is-default::after,
.pf-platform-page:has(#pricing-faq:target) .pf-product-nav a.is-default::after {
  transform: scaleX(0);
}

.pf-platform-page:has(#capabilities:target) .pf-product-nav a[href="#capabilities"]::after,
.pf-platform-page:has(#pricing:target) .pf-product-nav a[href="#pricing"]::after,
.pf-platform-page:has(#pricing-faq:target) .pf-product-nav a[href="#pricing-faq"]::after {
  transform: scaleX(1);
}

.pf-product-nav a:hover,
.pf-product-nav a:focus-visible {
  background: var(--cs-blue-bg-2);
  color: var(--pf-cobalt);
  outline: none;
}

.pf-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 650;
  color: var(--pf-cobalt);
}

.pf-inline-link::after {
  content: '\2192';
  font-size: 14px;
  line-height: 1;
  transition: transform var(--motion-duration-micro, 140ms) var(--motion-fast, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.pf-inline-link:hover::after,
.pf-inline-link:focus-visible::after {
  transform: translateX(3px);
}

.pf-section {
  padding: 76px 0;
}

.pf-section--modules {
  margin-top: 14px;
  border-block: 1px solid var(--cs-border-faint);
  background: var(--pf-canvas);
}

.pf-section--systems {
  background: var(--cs-canvas);
}

.pf-section__intro {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 720px;
}

.pf-section__intro--tight {
  margin-bottom: 18px;
}

.pf-section__intro h2,
.pf-cta__copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 560;
  color: var(--pf-text);
  text-wrap: balance;
}

.pf-section__intro p,
.pf-cta__copy p {
  margin: 0;
  max-width: 55ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pf-text-muted);
}

.pf-hero {
  padding: 44px 0 42px;
  border-bottom: 1px solid var(--cs-border-faint);
  background: var(--cs-canvas);
  scroll-margin-top: calc(var(--cf-public-header-offset, 72px) + 12px);
}

.pf-hero__grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
  gap: 38px;
  align-items: center;
}

.pf-hero__content {
  max-width: 560px;
}

.pf-hero__title {
  margin: 0;
  max-width: 27ch;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: var(--cs-public-title-size);
  line-height: var(--cs-public-title-line);
  letter-spacing: 0;
  font-weight: var(--cs-public-title-weight);
  color: var(--cs-text-strong);
  text-wrap: balance;
}

.pf-hero__copy {
  margin: 14px 0 0;
  max-width: 47ch;
  font-size: 14px;
  line-height: 1.58;
  color: var(--pf-text-muted);
}

.pf-hero__visual {
  min-width: 0;
}

.pf-workspace,
.pf-surface,
.pf-cta {
  position: relative;
  background: var(--cs-card-surface);
  border: 1px solid var(--pf-line-strong);
  box-shadow: var(--pf-ridge), var(--pf-shadow-md);
  overflow: hidden;
}

.pf-workspace::before,
.pf-surface::before,
.pf-cta::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.62);
  pointer-events: none;
}

.pf-workspace::after,
.pf-surface::after,
.pf-cta::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(var(--cs-accent-color, var(--pf-cobalt)), var(--cs-accent-color, var(--pf-cobalt))) top left / 34px 2px no-repeat,
    linear-gradient(var(--cs-accent-color, var(--pf-cobalt)), var(--cs-accent-color, var(--pf-cobalt))) top left / 2px 30px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--pf-cobalt-light)), var(--cs-accent-color-2, var(--pf-cobalt-light))) bottom right / 34px 2px no-repeat,
    linear-gradient(var(--cs-accent-color-2, var(--pf-cobalt-light)), var(--cs-accent-color-2, var(--pf-cobalt-light))) bottom right / 2px 30px no-repeat;
  opacity: 0.36;
}

.pf-workspace {
  --cs-accent-color: var(--pf-cobalt);
  --cs-accent-color-2: var(--pf-emerald);
  padding: 10px;
  border-radius: var(--pf-radius-surface);
}

.pf-workspace__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--cs-surface);
  border: 1px solid var(--pf-line);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
}

.pf-workspace__dots {
  display: flex;
  gap: 6px;
}

.pf-workspace__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pf-workspace__dots span:nth-child(1) { background: #ff7b66; }
.pf-workspace__dots span:nth-child(2) { background: #ffc24c; }
.pf-workspace__dots span:nth-child(3) { background: #2dd177; }

.pf-workspace__title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 620;
  color: var(--pf-text-muted);
  text-align: center;
}

.pf-workspace__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--cs-surface);
  border: 1px solid var(--pf-line);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
  font-size: 12px;
  line-height: 1;
  font-weight: 620;
  color: var(--pf-emerald);
}

.pf-workspace__status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-emerald);
}

.pf-workspace__body {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: var(--cs-recessed);
  box-shadow: var(--pf-shadow-inset);
}

.pf-workspace__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pf-stat,
.pf-rail-card,
.pf-control-row,
.pf-workflow-step {
  background: var(--cs-card-surface);
}

.pf-stat {
  position: relative;
  min-width: 0;
  padding: 12px 11px 11px;
  border-radius: 12px;
  border: 1px solid var(--pf-line-strong);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
  overflow: hidden;
}

.pf-stat::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--pf-stat-accent, var(--pf-cobalt)), var(--pf-stat-accent, var(--pf-cobalt))) top left / 22px 2px no-repeat,
    linear-gradient(var(--pf-stat-accent, var(--pf-cobalt)), var(--pf-stat-accent, var(--pf-cobalt))) top left / 2px 18px no-repeat;
  opacity: 0.45;
}

.pf-stat--cobalt { --pf-stat-accent: var(--pf-cobalt); }
.pf-stat--emerald { --pf-stat-accent: var(--pf-emerald); }
.pf-stat--amber { --pf-stat-accent: var(--pf-amber); }
.pf-stat--violet { --pf-stat-accent: var(--pf-violet); }
.pf-stat { --cs-accent-color: var(--pf-stat-accent, var(--pf-cobalt)); }

.pf-stat small,
.pf-stat strong,
.pf-stat span {
  display: block;
}

.pf-stat small {
  margin-bottom: 6px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pf-text-faint);
}

.pf-stat strong {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--pf-text);
}

.pf-stat span {
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 620;
  color: var(--pf-text-soft);
}

.pf-workspace__panel {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--pf-line-strong);
  background: var(--cs-card-surface);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
}

.pf-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.pf-panel-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
  color: var(--pf-text);
}

.pf-panel-head small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--pf-text-muted);
}

.pf-job-list {
  display: grid;
  gap: 6px;
}

.pf-job-list__head,
.pf-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 0.7fr auto;
  gap: 8px;
  align-items: center;
}

.pf-job-list__head {
  padding: 0 2px 2px;
}

.pf-job-list__head span {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pf-text-faint);
}

.pf-job-row {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--pf-line-strong);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 540;
  color: var(--pf-text-soft);
}

.pf-job-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-job-row .is-emerald { color: var(--pf-emerald); font-weight: 650; }
.pf-job-row .is-cobalt { color: var(--pf-cobalt); font-weight: 650; }
.pf-job-row .is-violet { color: var(--pf-violet); font-weight: 650; }

.pf-workspace__rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pf-rail-card {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid var(--pf-line-strong);
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
}

.pf-rail-card small,
.pf-rail-card strong {
  display: block;
}

.pf-rail-card small {
  margin-bottom: 5px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pf-text-faint);
}

.pf-rail-card strong {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 620;
  color: var(--pf-text-soft);
}

.pf-module-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.pf-module-card {
  position: relative;
  display: grid;
  grid-column: span 2;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 174px;
  padding: 18px;
  --pf-module-accent: var(--pf-cobalt);
  border: 1.5px solid var(--pf-module-accent);
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.pf-module-card::before {
  inset: 9px 10px 9px 8px;
  border-radius: 15px;
  border-color: var(--cs-card-border);
  background: var(--cs-card-surface);
  box-shadow: var(--cs-card-shadow);
}

.pf-module-card::after {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: 8px;
  height: 56px;
  border-radius: 11px 0 0 11px;
  background:
    var(--pf-module-accent);
  transform: translateY(-50%);
  opacity: 1;
}

.pf-module-card__arrow {
  position: absolute;
  top: -5px;
  right: -1px;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--pf-module-accent);
  border-right: 1.5px solid var(--pf-module-accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.pf-module-card.is-operational {
  min-height: 218px;
}

.pf-platform-page .pf-module-card:hover,
.pf-platform-page .pf-module-card:focus-within {
  border-color: var(--pf-module-accent);
  box-shadow: none;
}

.pf-module-card__copy {
  min-width: 0;
}

.pf-module-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 520;
  color: var(--pf-text);
}

.pf-module-card p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--pf-text-muted);
}

.pf-module-card .pf-inline-link {
  align-self: end;
  justify-self: start;
  margin-top: 16px;
}

.pf-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pf-surface {
  --cs-accent-color: var(--pf-cobalt);
  --cs-accent-color-2: var(--pf-violet);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
  border-radius: var(--pf-radius-surface);
}

.pf-surface--controls {
  --cs-accent-color: var(--pf-emerald);
  --cs-accent-color-2: var(--pf-amber);
}

.pf-workflow {
  position: relative;
  display: grid;
  flex: 1;
  gap: 0;
  padding: 5px 18px 5px 38px;
  border: 1px solid var(--pf-line-strong);
  border-radius: 14px;
  background: var(--pf-canvas);
  box-shadow: var(--pf-shadow-inset);
}

.pf-workflow::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 20px;
  width: 1px;
  background: rgba(94, 112, 207, 0.24);
}

.pf-workflow-step {
  position: relative;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(214, 222, 233, 0.82);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.pf-workflow-step:last-child {
  border-bottom: 0;
}

.pf-workflow-step::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -22px;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--pf-step-accent, var(--pf-cobalt));
  box-shadow: 0 0 0 1px var(--pf-step-accent, var(--pf-cobalt));
}

.pf-workflow-step::after {
  display: none;
}

.pf-workflow-step--cobalt { --pf-step-accent: var(--pf-cobalt); }
.pf-workflow-step--emerald { --pf-step-accent: var(--pf-emerald); }
.pf-workflow-step--amber { --pf-step-accent: var(--pf-amber); }
.pf-workflow-step--violet { --pf-step-accent: var(--pf-violet); }
.pf-workflow-step { --cs-accent-color: var(--pf-step-accent, var(--pf-cobalt)); }

.pf-workflow-step__head {
  margin-bottom: 5px;
}

.pf-workflow-step__head strong {
  font-size: 15.5px;
  line-height: 1.2;
  font-weight: 680;
  color: var(--pf-text);
}

.pf-workflow-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.48;
  color: var(--pf-text-muted);
}

.pf-control-list {
  display: grid;
  flex: 1;
  gap: 0;
  border: 1px solid var(--pf-line-strong);
  border-radius: 14px;
  background: var(--pf-canvas);
  box-shadow: var(--pf-shadow-inset);
  overflow: hidden;
}

.pf-control-row {
  position: relative;
  padding: 14px 16px 14px 20px;
  border: 0;
  border-bottom: 1px solid rgba(214, 222, 233, 0.82);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.pf-control-row:last-child {
  border-bottom: 0;
}

.pf-control-row::before {
  content: '';
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 10px;
  width: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--pf-control-accent, var(--pf-cobalt));
  opacity: 0.76;
}

.pf-control-row::after {
  display: none;
}

.pf-control-row--cobalt { --pf-control-accent: var(--pf-cobalt); }
.pf-control-row--emerald { --pf-control-accent: var(--pf-emerald); }
.pf-control-row--amber { --pf-control-accent: var(--pf-amber); }
.pf-control-row--violet { --pf-control-accent: var(--pf-violet); }
.pf-control-row { --cs-accent-color: var(--pf-control-accent, var(--pf-cobalt)); }

.pf-control-row__body strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 680;
  color: var(--pf-text);
}

.pf-control-row__body p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.48;
  color: var(--pf-text-muted);
}

.pf-control-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
}

.pf-cta {
  --cs-accent-color: var(--pf-cobalt);
  --cs-accent-color-2: var(--pf-violet);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--cs-radius-lg);
}

.pf-cta__copy {
  max-width: 720px;
}

.pf-cta__copy h2 {
  max-width: 14ch;
}

.pf-cta__copy p {
  margin-top: 10px;
  max-width: 42ch;
}

.pf-surface .pf-section__intro h2 {
  font-size: 28px;
  line-height: 1.14;
}

.pf-platform-page #capabilities,
.pf-platform-page #pricing,
.pf-platform-page #pricing-faq {
  scroll-margin-top: calc(var(--cf-public-header-offset, 72px) + 18px);
}

.pf-platform-page .cf-pricing-stage {
  padding-top: 68px;
  padding-bottom: 56px;
  border-top: 1px solid var(--cs-border-faint);
}

.pf-platform-page #plan-comparison {
  padding: 72px 0 64px;
  border-top: 1px solid var(--cs-border-faint);
  background: var(--pf-canvas);
}

.pf-platform-page #pricing-faq {
  padding: 64px 0;
}

.pf-platform-page #plan-comparison .cf-section-intro h2,
.pf-platform-page #pricing-faq .cf-section-intro h2,
.pf-final-cta h2 {
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 560;
}

.pf-platform-page #plan-comparison .cf-section-intro,
.pf-platform-page #pricing-faq .cf-section-intro {
  margin-bottom: 24px;
}

.pf-platform-page #pricing-faq .cf-faq-list {
  max-width: 880px;
  margin-inline: auto;
}

.pf-platform-page #pricing-faq .cf-faq-item {
  border-color: var(--pf-line-strong);
  border-radius: 14px;
  box-shadow: var(--pf-ridge), var(--cs-elev-1);
  overflow: hidden;
}

.pf-platform-page #pricing-faq .cf-faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
}

.pf-platform-page #pricing-faq .cf-faq-item summary::after {
  content: '+';
  color: var(--pf-cobalt);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.pf-platform-page #pricing-faq .cf-faq-item[open] summary::after {
  content: '-';
}

.pf-platform-page #pricing-faq .cf-faq-item p {
  max-width: 70ch;
  margin: 0;
  color: var(--pf-text-muted);
  font-size: 15px;
  line-height: 1.58;
}

.pf-final-section {
  padding: 0 0 72px;
  background: var(--cs-canvas);
}

.pf-final-cta {
  --cs-accent-color: var(--pf-cobalt);
  --cs-accent-color-2: var(--pf-violet);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 28px;
  align-items: center;
  padding: 26px 28px;
  border-color: var(--pf-line-strong);
  border-radius: var(--pf-radius-surface);
  background: var(--cs-card-surface);
  box-shadow: var(--cs-card-shadow);
}

.pf-final-cta__copy {
  max-width: 700px;
}

.pf-final-cta h2 {
  max-width: 22ch;
  margin: 0;
}

.pf-final-cta p {
  max-width: 55ch;
  margin: 9px 0 0;
  color: var(--pf-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .pf-hero__grid {
    grid-template-columns: minmax(330px, 0.84fr) minmax(0, 1.16fr);
    gap: 28px;
  }

  .pf-hero__title {
    font-size: var(--cs-public-title-size);
  }
}

@media (max-width: 1024px) {
  .pf-platform-page .cf-wrap {
    width: min(1180px, calc(100% - 32px));
  }

  .pf-hero__grid {
    grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
    gap: 24px;
  }

  .pf-workspace__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-module-card {
    grid-column: auto;
  }

  .pf-module-card:nth-child(3),
  .pf-module-card:nth-child(6) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .dt-functional-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .pf-hero__grid,
  .pf-system-grid,
  .pf-final-cta {
    grid-template-columns: 1fr;
  }

  .pf-hero__grid {
    gap: 30px;
  }

  .pf-hero__content {
    max-width: 720px;
  }

  .pf-hero__title {
    max-width: 27ch;
    font-size: var(--cs-public-title-size);
  }

  .pf-hero__copy {
    max-width: 58ch;
    font-size: 14px;
  }

  .pf-hero__visual {
    width: min(100%, 760px);
  }

  .pf-section {
    padding: 68px 0;
  }

  .pf-system-grid {
    gap: 18px;
  }

  .pf-final-cta .cf-page-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .pf-platform-page .cf-wrap {
    width: min(100%, calc(100% - 24px));
  }

  .pf-hero {
    padding: 34px 0 36px;
  }

  .pf-hero__title {
    max-width: 27ch;
    font-size: var(--cs-public-title-size);
    line-height: var(--cs-public-title-line);
  }

  .pf-hero__copy {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.55;
  }

  .pf-actions {
    flex-direction: column;
    gap: 9px;
  }

  .pf-actions .cf-btn {
    width: 100%;
  }

  .pf-product-nav {
    padding-top: 10px;
    overflow-x: clip;
  }

  .pf-product-nav .cf-wrap {
    justify-content: flex-start;
    width: calc(100% - 24px);
    max-width: none;
    padding: 5px;
    scroll-padding-inline: 5px;
    -webkit-overflow-scrolling: touch;
  }

  .pf-product-nav a {
    flex: 0 0 auto;
    padding-inline: 10px;
  }

  .pf-section {
    padding: 52px 0;
  }

  .pf-section--modules {
    margin-top: 10px;
  }

  .pf-section__intro h2,
  .pf-cta__copy h2,
  .pf-platform-page #plan-comparison .cf-section-intro h2,
  .pf-platform-page #pricing-faq .cf-section-intro h2,
  .pf-final-cta h2 {
    font-size: 30px;
    line-height: 1.12;
  }

  .pf-section__intro {
    margin-bottom: 22px;
  }

  .pf-section__intro p,
  .pf-cta__copy p {
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
  }

  .pf-workspace,
  .pf-surface,
  .pf-cta,
  .pf-module-card {
    border-radius: var(--pf-radius-surface);
  }

  .pf-workspace {
    padding: 8px;
  }

  .pf-workspace__top {
    padding: 9px 10px;
    border-radius: 11px;
  }

  .pf-workspace__body {
    gap: 7px;
    padding: 7px;
    border-radius: 12px;
  }

  .pf-workspace__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .pf-stat {
    min-height: 82px;
    padding: 10px 9px 9px;
    border-radius: 10px;
  }

  .pf-stat strong {
    font-size: 16px;
  }

  .pf-stat span {
    margin-top: 4px;
    font-size: 10px;
  }

  .pf-workspace__panel {
    padding: 10px;
    border-radius: 11px;
  }

  .pf-panel-head {
    margin-bottom: 7px;
  }

  .pf-panel-head small {
    font-size: 10.5px;
  }

  .pf-job-list__head,
  .pf-job-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pf-job-list__head span:nth-child(3),
  .pf-job-row span:nth-child(3) {
    display: none;
  }

  .pf-job-row {
    min-height: 36px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .pf-workspace__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .pf-rail-card {
    padding: 9px 10px;
  }

  .pf-module-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pf-module-card {
    grid-column: auto;
    min-height: 0;
    padding: 18px;
    border-radius: 11px 0 0 11px;
  }

  .pf-module-card:nth-child(3),
  .pf-module-card:nth-child(6) {
    grid-column: auto;
  }

  .pf-module-card h3 {
    font-size: 15px;
  }

  .pf-module-card p {
    font-size: 14px;
    line-height: 1.52;
  }

  .pf-surface {
    padding: 20px;
  }

  .pf-surface .pf-section__intro h2 {
    font-size: 27px;
  }

  .pf-workflow {
    padding-right: 14px;
    padding-left: 34px;
  }

  .pf-workflow::before {
    left: 18px;
  }

  .pf-workflow-step::before {
    left: -20px;
  }

  .pf-control-row {
    padding: 13px 14px 13px 19px;
  }

  .pf-control-row__body p {
    font-size: 14px;
  }

  .pf-control-links {
    gap: 12px 16px;
  }

  .pf-platform-page .cf-pricing-stage {
    padding-top: 52px;
  }

  .pf-platform-page #plan-comparison {
    padding: 54px 0 50px;
  }

  .pf-platform-page #pricing-faq {
    padding: 50px 0;
  }

  .pf-platform-page #pricing-faq .cf-faq-item summary {
    padding: 14px 16px;
  }

  .pf-platform-page #pricing-faq .cf-faq-item p {
    padding: 0 16px 15px;
  }

  .pf-final-section {
    padding: 0 0 52px;
  }

  .pf-final-cta {
    padding: 22px 20px;
  }

  .pf-final-cta .cf-page-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .pf-final-cta .cf-btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .pf-hero__title {
    font-size: var(--cs-public-title-size);
  }

  .pf-platform-page .cf-wrap {
    width: calc(100% - 20px);
  }

  .pf-product-nav .cf-wrap {
    width: calc(100% - 20px);
  }

  .pf-workspace__title {
    font-size: 12px;
  }

  .pf-workspace__status {
    padding-inline: 8px;
  }

  .pf-stat small,
  .pf-rail-card small {
    font-size: 8px;
  }

  .pf-stat span,
  .pf-rail-card strong {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1200px) {
  .cf-tool-public-shell .dt-hero-title {
    max-width: 27ch;
  }

  .cf-card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .cf-page-hero-grid,
  .cf-split-grid,
  .cf-feature-spotlight,
  .cf-platform-preview,
  .cf-contact-grid,
  .cf-case-feature,
  .cf-page-cta,
  .cf-tool-public-shell .tool-page-layout,
  .cf-tool-benefit-grid,
  .cf-tool-info-block,
  .cf-tool-info-block--faq {
    grid-template-columns: 1fr;
  }

  .cf-tool-information-grid,
  .cf-tool-compact-section--faq {
    grid-template-columns: 1fr;
  }

  .cf-tool-public-shell .tool-page-layout > aside {
    position: static;
  }

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

  .cf-tool-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-case-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .cf-tool-catalog-grid {
    grid-template-columns: 1fr;
  }

  .cf-tools-platform-bridge {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .cf-page-cta {
    align-items: start;
  }

  .cf-pricing-stage__surface {
    min-height: 0;
    padding-top: 46px;
  }

  .cf-pricing-cards {
    max-width: 660px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-pricing-panel--1 .cf-pricing-cards {
    grid-template-columns: minmax(0, 300px);
  }

  .cf-pricing-panel--2 .cf-pricing-cards {
    grid-template-columns: repeat(2, minmax(0, 290px));
  }
}

@media (max-width: 767px) {
  .cf-pricing-stage .cf-wrap {
    width: min(100%, calc(100% - 24px));
  }

  .cf-pricing-stage {
    padding: 30px 0 38px;
    scroll-margin-top: calc(var(--cf-public-header-offset, 72px) + 20px);
  }

  .cf-pricing-stage__surface {
    min-height: 0;
    padding: 38px 14px 0;
    border-radius: 20px;
    overflow: hidden;
  }

  .cf-pricing-stage__backdrop span {
    bottom: 102px;
    width: 92px;
    height: 230px;
    border-radius: 22px;
  }

  .cf-pricing-stage__backdrop span:nth-child(1) { left: -58px; height: 230px; }
  .cf-pricing-stage__backdrop span:nth-child(2) { left: 28px; height: 190px; }
  .cf-pricing-stage__backdrop span:nth-child(3) { left: 106px; height: 150px; }
  .cf-pricing-stage__backdrop span:nth-child(4) { right: -58px; height: 230px; }
  .cf-pricing-stage__backdrop span:nth-child(5) { right: 28px; height: 190px; }
  .cf-pricing-stage__backdrop span:nth-child(6) { right: 106px; height: 150px; }

  .cf-pricing-stage__head {
    gap: 10px;
    max-width: 100%;
  }

  .cf-pricing-stage__head h1,
  .cf-pricing-stage__head h2 {
    font-size: clamp(40px, 11vw, 46px);
    line-height: 1.05;
  }

  .cf-pricing-stage__head p {
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.48;
  }

  .cf-pricing-tabs {
    left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    gap: 5px;
    margin: 22px auto 30px;
    padding: 5px;
    border-radius: 18px;
    transform: none;
  }

  .cf-pricing-tab {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.15;
    white-space: normal;
  }

  .cf-pricing-panels {
    margin: 0 auto -50px;
  }

  .cf-pricing-cards,
  .cf-pricing-panel--1 .cf-pricing-cards,
  .cf-pricing-panel--2 .cf-pricing-cards {
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: 100%;
    max-width: 410px;
    gap: 14px;
  }

  .cf-plan-card {
    width: 100%;
    min-width: 0;
  }

  .cf-plan-card.is-featured {
    transform: none;
  }

  .cf-plan-body {
    display: block;
    grid-template-rows: auto;
    height: auto;
    min-height: 0;
    padding: 20px 18px;
  }

  .cf-plan-head {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }

  .cf-plan-marker {
    width: 28px;
    height: 28px;
  }

  .cf-plan-marker img {
    width: 50px;
    height: 50px;
  }

  .cf-plan-name {
    font-size: 20px;
    line-height: 1.12;
  }

  .cf-plan-card h2 {
    margin: 0 0 10px;
    font-size: clamp(34px, 9.2vw, 39px);
    line-height: 1;
  }

  .cf-plan-audience {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.42;
  }

  .cf-plan-features {
    gap: 8px;
    margin: 0;
  }

  .cf-plan-features li {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    font-size: 15px;
    line-height: 1.36;
  }

  .cf-plan-features li::before {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    font-size: 10px;
  }

  .cf-plan-card .cf-btn {
    min-height: 44px;
    margin-top: 18px;
  }

  .cf-table-surface {
    overflow: hidden;
  }

  .cf-compare-scroll-cue {
    display: block;
  }

  .cf-compare-wrap {
    margin-inline: -2px;
    padding-bottom: 6px;
    overflow-x: auto;
  }

  .cf-compare-table {
    width: max-content;
    min-width: 960px;
  }

  .cf-compare-table th,
  .cf-compare-table td {
    padding: 13px 14px;
    font-size: 13px;
    line-height: 1.45;
  }

  .cf-compare-table thead th:first-child,
  .cf-compare-table tbody th {
    min-width: 170px;
  }
}

@media (max-width: 768px) {
  /* §16 CORRECTION PASS MOBILE SHADOW REDUCTION
     User mandate: reduce ambient spread/blur, lower visual elevation
     Canvas < Surface separation is subtle, so reduce elevation tokens
     directly (one :root override → all components cascade correctly; no selector magic §18)
     Ambient shrunk 55-70% so mobile not "muddy" from giant desktop shadows  */
  :root {
    --cs-elev-1:
      0 1px 0 var(--cs-highlight) inset,
      0 1px 2px rgba(15, 28, 48, 0.035),
      0 3px 8px  rgba(15, 28, 48, 0.04);
    --cs-elev-2:
      0 1px 0 var(--cs-highlight) inset,
      0 1px 2px rgba(15, 28, 48, 0.04),      /* contact shrunk */
      0 5px 12px rgba(15, 28, 48, 0.055),    /* transition shrunk */
      0 10px 20px rgba(15, 28, 48, 0.045);   /* ambient 22px → 10px (-55%) */
    --cs-elev-3:
      0 1px 0 var(--cs-highlight) inset,
      0 2px 3px rgba(15, 28, 48, 0.045),     /* contact */
      0 8px 18px rgba(15, 28, 48, 0.065),    /* transition 14→8 */
      0 14px 28px rgba(15, 28, 48, 0.058);   /* ambient 32→14 (-65% spread 70→28 -60%) */
    --cs-elev-2-hover:
      0 1px 0 var(--cs-highlight) inset,
      0 1px 3px rgba(15, 28, 48, 0.045),
      0 6px 14px rgba(15, 28, 48, 0.06),
      0 12px 24px rgba(15, 28, 48, 0.05);
    --cs-elev-3-hover:
      0 1px 0 var(--cs-highlight) inset,
      0 2px 4px rgba(15, 28, 48, 0.05),
      0 10px 22px rgba(15, 28, 48, 0.07),
      0 16px 32px rgba(15, 28, 48, 0.062);
    /* button mobile — even tighter than desktop */
    --cs-elev-primary-btn:
      0 1px 0 rgba(255, 255, 255, 0.11) inset,
      0 1px 2px rgba(14, 21, 36, 0.18),
      0 4px 10px rgba(14, 21, 36, 0.10);
    --cs-elev-primary-btn-hover:
      0 1px 0 rgba(255, 255, 255, 0.13) inset,
      0 1px 2px rgba(14, 21, 36, 0.20),
      0 5px 12px rgba(14, 21, 36, 0.12);
    --cs-elev-secondary-btn-hover:
      0 1px 0 var(--cs-highlight) inset,
      0 1px 2px rgba(15, 28, 48, 0.045),
      0 4px 10px rgba(15, 28, 48, 0.05);

    /* ================================================================
       MOBILE LAYERED REAR PLATE DISPLACEMENT REDUCTION (30-40% user mandate)
       DO NOT REMOVE the layered material effect entirely.
       Shrink translate offsets so rear plate is closer (but still layered)
       and the screen doesn't look cluttered with big gaps.
       BEFORE (desktop) → AFTER (mobile):
         sm       translate(1px,4px) → (1px,2px)   Y -50% (keeps within 30-40% target)
         md       translate(2px,6px) → (1px,4px)   Y -33% / X -50% (within range)
         featured translate(3px,8px) -> (2px,5px)   Y -38% / X -33% (target 30-40%)
       Also grid-shell outer wall padding shrinks 14px -> 10px for mobile density.
       ================================================================ */
    --cs-layered-offset-sm:       translate(1px, 2px);
    --cs-layered-offset-md:       translate(1px, 4px);
    --cs-layered-offset-featured: translate(2px, 5px);
    --cs-rear-plate-shadow:
      0 1px 1px rgba(15, 28, 48, 0.030),
      0 2px 5px rgba(15, 28, 48, 0.038);
  }

  /* Grid shell padding mobile adjustment (outer wall thinner at small screens) */
  .cs-layered-grid-shell,
  .cf-tools-grid {
    padding: 10px;
  }

  .cf-page-hero {
    padding-top: clamp(40px, 10vw, 54px);
  }

  .cf-card-grid--2,
  .cf-card-grid--3,
  .cf-card-grid--4,
  .cf-summary-grid,
  .cf-form-shell .dt-contact-fields,
  .cf-form-shell .dt-choice-grid {
    grid-template-columns: 1fr;
  }

  .cf-page-actions,
  .cf-tool-access-actions,
  .cf-tool-info-actions,
  .cf-page-cta .cf-page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cf-page-actions .cf-btn,
  .cf-tool-access-actions .cf-btn,
  .cf-tool-info-actions .cf-btn,
  .cf-page-cta .cf-btn,
  .cf-form-shell .dt-contact-footer .btn,
  .cf-form-shell .dt-contact-footer .cf-btn {
    width: auto;
  }

  .cf-form-shell .dt-contact-footer {
    align-items: stretch;
  }

  .cf-case-feature-media {
    min-height: 220px;
  }

  #dt-cookie-banner.dt-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  #dt-cookie-banner .dt-cookie-actions {
    justify-content: stretch;
    margin-left: 0;
  }

  #dt-cookie-banner .dt-cookie-actions .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 640px) {
  .cf-tool-public-shell .container {
    padding-inline: 16px;
  }

  .cf-tool-workflow-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-tool-workflow-rail--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dt-functional-workspace-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dt-functional-workspace-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .cf-tool-public-shell .cf-tool-main-surface,
  .cf-tool-access-surface {
    padding: 18px;
  }

  .cf-module-card--project .cf-image-frame {
    margin-inline: -18px;
  }

  .cf-tool-public-shell .dt-preview-table table {
    min-width: 360px;
  }

  body.dt-cookie-visible #toast-container {
    bottom: 162px;
  }
}

@media (max-width: 390px) {
  .cf-route-card,
  .cf-module-card,
  .cf-surface,
  .cf-page-cta,
  .cf-form-shell,
  .cf-tool-public-shell .tool-panel,
  .cf-tool-public-shell .dt-preview-card,
  .cf-tool-public-shell .dt-section-surface,
  .cf-tool-public-shell details.card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-reveal,
  .cf-home .cf-floating-card,
  .cf-progress > span,
  .cf-dark-progress span,
  .cf-health-track span,
  #dt-cookie-banner.dt-cookie-banner,
  .cf-link-row,
  .cf-btn svg,
  .cf-footer-cta svg,
  .cf-text-link::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
   CONSALTEK PUBLIC HEADER + FOOTER — BRAND SYSTEM v1
   Simple, premium, light. Public contexts only.
   ================================================================ */
.cf-public-header {
  background:rgba(251,252,254,.94);
  border-bottom:1px solid #E2E8F0;
  box-shadow:none;
  backdrop-filter:blur(16px);
}
.cf-public-header.scrolled { background:rgba(251,252,254,.98); box-shadow:0 8px 24px rgba(15,23,42,.035); }
.cf-public-header-inner {
  grid-template-columns:minmax(210px,1fr) auto minmax(170px,1fr);
  min-height:72px; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.cf-public-logo .site-logo-img { height:46px; }
.cf-public-nav { gap:clamp(20px,2vw,32px); }
.cf-public-nav a {
  min-height:36px; padding:7px 0; color:#334155;
  font-size:13.5px; font-weight:500; background-size:0 1px;
}
.cf-public-nav a:hover,.cf-public-nav a:focus-visible,.cf-nav-dropdown:hover > a.cf-nav-dropdown-toggle,.cf-nav-dropdown.is-open > a.cf-nav-dropdown-toggle,.cf-public-nav a.active,.cf-nav-dropdown > a.active {
  color:#0F172A; background-size:18px 1px;
}
.cf-public-actions { justify-self:end; display:flex; align-items:center; gap:12px; }
.cf-project-cta,.cf-dashboard-link {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border:1px solid #121C29; border-radius:10px; background:#121C29; color:#fff !important;
  font-size:13px; font-weight:500; text-decoration:none; box-shadow:none;
}
.cf-project-cta:hover,.cf-project-cta:focus-visible,.cf-dashboard-link:hover,.cf-dashboard-link:focus-visible { background:#1B2635; border-color:#1B2635; color:#fff !important; }
.cf-utility-link { color:#465367; font-size:13px; font-weight:500; }

.cf-public-footer {
  padding:46px 0 24px; background:#FFFFFF; border-top:1px solid #E2E8F0; box-shadow:none; color:#253044;
}
.cf-footer-grid { grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)); gap:34px; margin-bottom:30px; }
.cf-footer-logo { margin:0 0 14px; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.cf-footer-logo .footer-logo-img { height:42px; }
.cf-footer-copy { max-width:34ch; margin:0; color:#667085; font-size:13px; line-height:1.65; }
.cf-footer-links-col h2,.cf-footer-disclosure > summary {
  margin:0 0 12px; color:#253044; font-size:13px; font-weight:600; line-height:1.3; letter-spacing:0; text-transform:none;
}
.cf-footer-links { gap:7px; }
.cf-footer-links a,.cf-footer-mini-links a,.cf-footer-cookie-button,.cf-footer-bottom p {
  color:#667085; font-size:13px; line-height:1.5;
}
.cf-footer-links a:hover,.cf-footer-links a:focus-visible,.cf-footer-mini-links a:hover,.cf-footer-mini-links a:focus-visible,.cf-footer-cookie-button:hover,.cf-footer-cookie-button:focus-visible { color:#0F172A; }
.cf-footer-bottom { padding-top:18px; border-top:1px solid #E2E8F0; }
.cf-footer-bottom p,.cf-footer-mini-links a,.cf-footer-cookie-button { color:#7A8494; font-size:12px; }

@media (max-width:1024px) {
  .cf-public-header-inner { grid-template-columns:minmax(190px,1fr) auto minmax(150px,1fr); }
  .cf-public-nav { gap:18px; }
  .cf-public-nav a { font-size:12.5px; }
  .cf-footer-grid { grid-template-columns:1.3fr repeat(3,1fr); gap:24px; }
}
@media (max-width:900px) {
  .cf-public-header-inner { grid-template-columns:1fr auto; min-height:66px; padding-inline:0; }
  .cf-public-actions { display:none; }
  .cf-public-logo .site-logo-img { height:42px; }
  .cf-footer-grid { grid-template-columns:1fr 1fr; }
  .cf-footer-brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .cf-public-footer { padding-top:38px; }
  .cf-footer-grid { grid-template-columns:1fr 1fr; gap:26px 18px; }
  .cf-footer-bottom { align-items:flex-start; flex-direction:column; }
}