/*
Theme Name: Pureblu
Theme URI: https://pureblu.in
Author: Pureblu Technologies Pvt. Ltd.
Author URI: https://pureblu.in
Description: India's managed HVAC&R services platform. Full Site Editing block theme converted from the original Pureblu HTML site, preserving the exact design (Sora + Plus Jakarta Sans, blue/white SaaS + enterprise aesthetic).
Version: 1.0.34
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pureblu
Tags: full-site-editing, block-templates, custom-colors, custom-menu, blog, business
*/

/* Below is the ORIGINAL Pureblu stylesheet, unchanged. */
/* ═══════════════════════════════════════════════════════
   PUREBLU — SHARED STYLESHEET
   Blue/White premium SaaS + Enterprise aesthetic
   Font: Sora (display) + Plus Jakarta Sans (body)
═══════════════════════════════════════════════════════ */

/* Google Fonts (Sora + Plus Jakarta Sans) are enqueued via wp_enqueue_style
   in functions.php (handle: pureblu-fonts), loaded BEFORE this stylesheet so
   they're a parallel, non-blocking request. The old @import here was removed:
   it forced the browser to download+parse style.css before even starting the
   font request (render-blocking + chained), delaying first paint. */

/* ─── TOKENS ──────────────────────────────────────────── */
:root {
  --n950: #040d1a;
  --n900: #071426;
  --n850: #0a1c36;
  --n800: #0d2347;
  --n700: #113069;
  --n600: #1a4494;
  --n500: #1e55b8;
  --n400: #2d6fd4;
  --n350: #3b82f6;
  --n300: #60a5fa;
  --n200: #93c5fd;
  --n150: #bfdbfe;
  --n100: #dbeafe;
  --n50:  #eff6ff;
  --n10:  #f8fbff;
  --white: #ffffff;

  --shadow-sm:  0 1px 3px rgba(4,13,26,0.08), 0 1px 2px rgba(4,13,26,0.04);
  --shadow-md:  0 4px 16px rgba(4,13,26,0.1),  0 2px 6px rgba(4,13,26,0.06);
  --shadow-lg:  0 12px 40px rgba(4,13,26,0.14), 0 4px 12px rgba(4,13,26,0.08);
  --shadow-xl:  0 24px 64px rgba(4,13,26,0.2),  0 8px 24px rgba(4,13,26,0.1);
  --shadow-blue: 0 8px 32px rgba(30,85,184,0.25);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  color: var(--n900);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Disable WordPress core's automatic block-spacing margins (margin-block-start:24px
   on every flow-layout child) — this theme controls all spacing manually. */
:root :where(.wp-site-blocks) > * {
  margin-block-start: 0 ;
  margin-block-end: 0 ;
}
:root :where(.is-layout-flow) > * {
  margin-block-start: unset ;
  margin-block-end: unset ;
}

/* ─── NAV ─────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 70px;
  background: rgba(10, 30, 60, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center;
  transition: background var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  background: rgba(7,20,38,0.98);
  box-shadow: 0 4px 24px rgba(4,13,26,0.3);
}

.nav-inner {
  max-width: 1240px; margin: 0 auto !important; width: 100%;
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-brand .nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
}

.nav-logo .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--n350);
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: middle;
  position: relative; top: -3px;
}

.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Block-theme logo: wp:group.nav-logo wrapping wp:site-logo + wp:site-title.
   Editors swap the image / rename the site from the Site Editor. */
.navbar .nav-logo .wp-block-site-logo {
  margin: 0;
  display: flex;
  align-items: center;
}
.navbar .nav-logo .wp-block-site-logo a {
  display: flex;
  align-items: center;
}
.navbar .nav-logo .wp-block-site-logo img {
  height: 34px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
}
.navbar .nav-logo p.wp-block-site-title,
.navbar .nav-logo .wp-block-site-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.navbar .nav-logo .wp-block-site-title a {
  color: var(--white);
  text-decoration: none;
}

.footer-logo-img,
.footer-logo-img-block img {
  height: 38px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
}

/* core/navigation block (SaaS Platform / Smart AMC / Blog) renders its own
   <nav><ul><li> wrappers inside .nav-links — collapse them so the links
   become direct flex items and pick up the .nav-links a styling below. */
.nav-links .wp-block-navigation,
.nav-links .wp-block-navigation__container {
  display: contents;
}
.nav-links .wp-block-navigation-item {
  list-style: none;
  margin: 0;
}

/* The header is built from wp:group blocks (.navbar / .nav-inner / .nav-links).
   Neutralise the editor layout margins so the flex rows stay aligned. */
.wp-block-group.navbar,
.wp-block-group.nav-inner,
.wp-block-group.nav-links,
.navbar > *,
.nav-inner > *,
.nav-links > * {
  margin: 0;
}

/* The doubled .wp-block-navigation-item__content below matches core's own
   specificity hack — block-library ships
   `.wp-block-navigation .wp-block-navigation-item__content
    .wp-block-navigation-item__content { color: inherit }` (3 classes),
   which would otherwise override our colors. Doubling ties it, and source
   order (our sheet loads after core) makes ours win. */
.nav-links a,
.nav-links .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-links a:hover, .nav-links a.active,
.nav-links .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.nav-links .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav-login {
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  transition: all var(--transition) !important;
}
.nav-login:hover {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.07) !important;
}


/* ─── LOGIN DROPDOWN ──────────────────────────────────── */
/* (The old custom-HTML .nav-dropdown rules were removed — the markup no
   longer exists anywhere; the Login dropdown is a core/navigation submenu
   styled below.) */

/* ── LOGIN DROPDOWN — core/navigation submenu version ──
   The block theme header renders Login as a wp:navigation-submenu
   (openSubmenusOnClick). These rules restyle the core markup to match
   the original .nav-dropdown look above. */
.nav-links .wp-block-navigation-submenu {
  position: relative;
}
/* The Login toggle, scoped ONLY to the .nav-login-item submenu so nothing
   else is affected. Values copied 1:1 from .nav-dropdown-btn + .nav-login
   above (the original HTML button). The 3-class selector out-ranks the
   shared nav-link rules without needing !important. */
.nav-links .nav-login-item button.wp-block-navigation-submenu__toggle {
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: inherit;
  color: rgba(255,255,255,0.7);
  padding: 7px 16px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.nav-links .nav-login-item button.wp-block-navigation-submenu__toggle:hover,
.nav-links .nav-login-item button.wp-block-navigation-submenu__toggle[aria-expanded="true"] {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.07);
}
/* The original button reads "Login â–¾" (a text caret). Hide core's SVG
   chevron and append the same character, so the size matches the HTML. */
.nav-links .nav-login-item .wp-block-navigation__submenu-icon {
  display: none;
}
.nav-links .nav-login-item button.wp-block-navigation-submenu__toggle::after {
  content: " \25BE";
}
.nav-links ul.wp-block-navigation__submenu-container {
  left: auto !important;
  right: 0;
  top: calc(100% + 10px) !important;
  background: var(--n900) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 16px 40px rgba(4,13,26,0.4);
  z-index: 200;
}
.nav-links ul.wp-block-navigation__submenu-container li {
  list-style: none;
  margin: 0;
}
.nav-links ul.wp-block-navigation__submenu-container a,
.nav-links ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-links ul.wp-block-navigation__submenu-container a:hover {
  background: rgba(255,255,255,0.07);
  color: var(--white);
}

.nav-cta,
.nav-links .nav-cta-item a {
  background: var(--n500) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}

.nav-cta:hover,
.nav-links .nav-cta-item a:hover {
  background: var(--n400) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px;
  background: none; border: none;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; top: 70px; left: 0; right: 0;
  background: var(--n900);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 20px 24px 28px;
  z-index: 999;
  flex-direction: column; gap: 4px;
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.mobile-menu a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.mobile-menu .nav-cta {
  margin-top: 8px; text-align: center;
  background: var(--n500); color: var(--white); font-weight: 600;
  padding: 13px 20px; border-radius: var(--radius-sm);
}

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-blue {
  background: var(--n500);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(30,85,184,0.3);
}
.btn-blue:hover {
  background: var(--n400);
  box-shadow: 0 8px 28px rgba(30,85,184,0.4);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--n700);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover {
  background: var(--n10);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
}

.btn-outline-blue {
  background: transparent;
  color: var(--n500);
  border: 1.5px solid var(--n200);
}
.btn-outline-blue:hover {
  border-color: var(--n400);
  background: var(--n50);
  color: var(--n600);
}

.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-sm { padding: 9px 20px; font-size: 0.8125rem; }

/* ─── TYPOGRAPHY ──────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.eyebrow-blue {
  color: var(--n400);
  background: var(--n50);
  border: 1px solid var(--n100);
  padding: 5px 14px;
  border-radius: 100px;
}

.eyebrow-white {
  color: var(--n200);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 14px;
  border-radius: 100px;
}

.eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
}

.eyebrow-blue .eyebrow-dot { background: var(--n400); }
.eyebrow-white .eyebrow-dot { background: var(--n200); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.025em; }

.display-xl {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
}
.display-lg {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
}
.display-md {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 700;
}
.display-sm {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
}

.lead {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
}

.body-md { font-size: 1rem; line-height: 1.7; }
.body-sm { font-size: 0.875rem; line-height: 1.65; }

/* ─── LAYOUT ──────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.section-lg { padding: 130px 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ─── CARDS ───────────────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card-white {
  background: var(--white);
  border: 1px solid var(--n100);
  box-shadow: var(--shadow-sm);
}

.card-white:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--n200);
}

.card-blue-deep {
  background: var(--n800);
  border: 1px solid rgba(255,255,255,0.08);
}
.card-blue-deep:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
}

/* ─── SECTION HEADERS ─────────────────────────────────── */
.section-header { margin-bottom: 64px; }
.section-header.center { text-align: center; }
.section-header.center .lead { max-width: 580px; margin: 16px auto 0; }
.section-header .lead { margin-top: 16px; }

/* Cancel WP core's auto margin-block-start:24px on flow-layout children —
   .section-header already provides spacing via margin-bottom. */
.quote-form-wrap { margin-block-start: 0 !important; }

/* ─── CHECK LIST ──────────────────────────────────────── */
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.check-icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.check-icon-blue { background: var(--n100); }
.check-icon-blue svg { stroke: var(--n500); }
.check-icon-white { background: rgba(255,255,255,0.15); }
.check-icon-white svg { stroke: var(--white); }

/* ─── GRADIENT BACKGROUNDS ───────────────────────────── */
.bg-dark { background: var(--n900); }
.bg-darker { background: var(--n950); }
.bg-mid { background: var(--n800); }
.bg-light { background: var(--n10); }
.bg-white { background: var(--white); }

.bg-hero-dark {
  background: linear-gradient(135deg, var(--n950) 0%, var(--n850) 50%, var(--n800) 100%);
}

.bg-hero-light {
  background: linear-gradient(135deg, var(--n10) 0%, var(--white) 60%, var(--n50) 100%);
}

.bg-stripe {
  background: linear-gradient(180deg, var(--n900) 0%, var(--n850) 100%);
}

/* Mesh overlay */
.mesh-overlay {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(17,48,105,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ─── FEATURE ICON ────────────────────────────────────── */
.feat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.375rem;
  overflow: hidden;
}
.feat-icon-blue { background: var(--n50); border: 1px solid var(--n100); }
.feat-icon-mid  { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.feat-icon.wp-block-image,
figure.wp-block-image.feat-icon { margin: 0 0 20px; }
.feat-icon img { width: 1.375rem; height: 1.375rem; object-fit: contain; display: block; }
.feat-icon-24 img { width: 1.5rem; height: 1.5rem; object-fit: contain; display: block; }
.feat-icon-20 img { width: 1.25rem; height: 1.25rem; object-fit: contain; display: block; }
.card-icon { margin-bottom: 8px; display: block; }
.card-icon img { width: 2.25rem; height: 2.25rem; object-fit: contain; display: block; }
.problem-icon img { width: 1.5rem; height: 1.5rem; object-fit: contain; display: block; }

/* ─── DIVIDER ─────────────────────────────────────────── */
.divider {
  border: none;
  height: 1px;
  background: var(--n100);
}
.divider-dark {
  background: rgba(255,255,255,0.07);
}

/* ─── BADGE ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
}
.badge-popular {
  background: var(--n500);
  color: var(--white);
}

/* ─── FOOTER ──────────────────────────────────────────── */
footer {
  background: var(--n950);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 36px;
}

.footer-brand .nav-logo { font-size: 1.5rem; margin-bottom: 16px; display: inline-flex; }
.footer-brand .nav-logo-text { font-size: 1.5rem; }
.footer-brand p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.75;
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: rgba(255,255,255,0.85); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.25);
}
/* Privacy Policy link — matches legal.html's underlined inline style.
   Done in CSS because the Site Editor strips inline styles on re-save. */
.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social-links {
  display: flex; gap: 12px;
}
.social-link {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: all var(--transition);
}
.social-link img {
  width: 16px; height: 16px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--transition);
}
.social-link:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.social-link:hover img {
  opacity: 1;
}

/* ─── SCROLL REVEAL ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ─── CLIENT LOGO TICKER ─────────────────────────────── */
@keyframes logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-ticker-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: logo-scroll 22s linear infinite;
}
.logo-ticker-track:hover {
  animation-play-state: paused;
}
.logo-ticker-item {
  flex-shrink: 0;
}

/* ─── PARTNER LOGO CARD (light bg) ───────────────────── */
.partner-logo-card {
  background: var(--white);
  border: 1px solid var(--n100);
  border-radius: 14px;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  min-width: 160px;
  max-width: 220px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(4,13,26,0.05);
}
.partner-logo-card img {
  max-height: 48px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.partner-ticker {
  animation-duration: 30s;
}

/* ─── CLIENT LOGO GRID ────────────────────────────────── */
.client-logo-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  min-width: 180px;
  max-width: 240px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.client-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}
.client-logo-card img {
  max-height: 60px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ticker-wrap {
  overflow: hidden;
  position: relative;
  padding: 28px 0;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: 2;
}
.ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--n900), transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--n900), transparent); }

.ticker-track {
  display: flex; gap: 0;
  animation: ticker 30s linear infinite;
  width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  display: flex; align-items: center; justify-content: center;
  min-width: 200px;
  padding: 0 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.ticker-logo {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
}

/* ─── STEP TIMELINE ───────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 28px; top: 32px; bottom: 32px;
  width: 2px;
  background: linear-gradient(180deg, var(--n400), rgba(30,85,184,0.1));
}

.timeline-step {
  display: flex; gap: 28px;
  padding: 0 0 40px 0;
  position: relative;
}
.timeline-step:last-child { padding-bottom: 0; }

.step-num {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--n700);
  border: 2px solid var(--n400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--n200);
  position: relative; z-index: 1;
  box-shadow: 0 0 0 6px rgba(30,85,184,0.1);
}

.step-content { padding-top: 12px; }
.step-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}
.step-content p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  font-weight: 300;
}

/* ─── STAT BAR ────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-cell {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.stat-cell:last-child { border-right: none; }

.stat-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}

/* ─── PRICING ─────────────────────────────────────────── */
.pricing-card {
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  position: relative;
}

.pricing-card.standard {
  background: var(--white);
  border: 1px solid var(--n100);
  box-shadow: var(--shadow-sm);
}

.pricing-card.featured {
  background: var(--n700);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-xl);
  transform: scale(1.03);
}

.pricing-card.enterprise {
  background: var(--n850);
  border: 1px solid rgba(255,255,255,0.08);
}

.price-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin: 20px 0 6px;
}

.price-period { font-size: 0.875rem; font-weight: 400; opacity: 0.5; }

.price-features { display: flex; flex-direction: column; gap: 10px; margin: 28px 0 32px; }
.price-feature {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.875rem; line-height: 1.5;
}

/* ─── FORM ────────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--n100);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--n900);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-field::placeholder { color: rgba(4,13,26,0.3); }
.input-field:focus {
  border-color: var(--n400);
  box-shadow: 0 0 0 3px rgba(30,85,184,0.1);
}

/* ─── TEAM CARD ───────────────────────────────────────── */
.team-card {
  text-align: center;
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--n100);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--n200);
}

.team-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--n600), var(--n400));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  border: 3px solid var(--n100);
  overflow: hidden;
}
.team-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.ticker-logo-img {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.2s;
}
.ticker-item:hover .ticker-logo-img {
  opacity: 0.75;
}

.team-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--n900);
  margin-bottom: 4px;
}

.team-role {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--n500);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.team-bio {
  font-size: 0.875rem;
  color: rgba(4,13,26,0.5);
  line-height: 1.65;
}
.team-card .team-bio a {
  color: var(--n500) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.team-card .team-bio a:hover {
  color: var(--n400) !important;
}

.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--n50);
  color: var(--n500);
  border: 1px solid var(--n100);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.team-linkedin:hover {
  background: var(--n500);
  color: var(--white);
  border-color: var(--n500);
}

/* ─── DEMO MODAL ──────────────────────────────────────── */
.demo-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,13,26,0.7);
  backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.demo-modal-overlay.open {
  display: flex;
}
.demo-modal-card {
  background: var(--white);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 32px 80px rgba(4,13,26,0.3);
  max-height: 90vh;
  overflow-y: auto;
}
.demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--n50);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--n500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.demo-modal-close:hover { background: var(--n100); }
.demo-modal-card h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--n900);
  margin-bottom: 6px;
}
.demo-modal-card p.demo-sub {
  font-size: 0.875rem;
  color: rgba(4,13,26,0.45);
  margin-bottom: 28px;
  font-weight: 300;
}
.demo-field {
  margin-bottom: 16px;
}
.demo-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--n700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.demo-field input,
.demo-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--n100);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--n900);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.demo-field input:focus,
.demo-field select:focus {
  border-color: var(--n400);
  box-shadow: 0 0 0 3px rgba(30,85,184,0.08);
}
.demo-submit-btn {
  width: 100%;
  padding: 13px;
  background: var(--n500);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.15s;
}
.demo-submit-btn:hover:not(:disabled) {
  background: var(--n400);
  transform: translateY(-1px);
}
.demo-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.demo-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  gap: 12px;
}
.demo-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(30,85,184,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.demo-success h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--n900);
}
.demo-success p {
  font-size: 0.875rem;
  color: rgba(4,13,26,0.5);
  font-weight: 300;
}
@media (max-width: 768px) {
  .demo-modal-card { padding: 28px 24px; }
}

/* Contact Form 7 inside the modals AND the inline pricing quote card —
   makes any CF7 form dropped in (via a shortcode block in the Site Editor)
   match the design without needing custom classes in the form editor. */
:is(.demo-modal-card, .quote-form-wrap) .wpcf7 p { margin: 0 0 16px; }
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--n700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form-control-wrap { display: block; }
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form select,
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--n100);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--n900);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form input:focus,
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form select:focus,
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form textarea:focus {
  border-color: var(--n400);
  box-shadow: 0 0 0 3px rgba(30,85,184,0.08);
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 13px;
  background: var(--n500);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.15s;
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form input[type="submit"]:hover:not(:disabled) {
  background: var(--n400);
  transform: translateY(-1px);
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 4px;
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--n100) !important;
  font-size: 0.8rem;
  color: var(--n700);
}
:is(.demo-modal-card, .quote-form-wrap) .wpcf7-spinner { display: block; margin: 8px auto 0; }

/* The inline pricing quote card itself (was inline styles in the pattern) */
.quote-form-wrap {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--n100);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow-md);
}

/* Inline pricing card: the original design lays the fields out in a
   2-column grid (Name/Company, Phone/Address, City/Technicians). The
   modals keep CF7's stacked single-column layout — this is scoped to
   .quote-form-wrap only. Grid items are the form's direct children. */
.quote-form-wrap .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.quote-form-wrap .wpcf7 p { margin: 0; } /* grid gap handles spacing */
.quote-form-wrap .wpcf7-form > .hidden-fields-container,
.quote-form-wrap .wpcf7-form > p:has(> .wpcf7-hidden) {
  display: none; /* CF7 housekeeping fields must not occupy grid cells */
}
.quote-form-wrap .wpcf7-form > p:has(input[type="submit"]),
.quote-form-wrap .wpcf7-form > .wpcf7-response-output {
  grid-column: 1 / -1; /* submit button + status message span both columns */
}
@media (max-width: 480px) {
  .quote-form-wrap .wpcf7-form { grid-template-columns: 1fr; }
}

/* ─── BIG CTA SECTION ─────────────────────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 100px 40px;
}

.cta-section h2 { color: var(--white); margin-bottom: 16px; }
.cta-section p  { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.0625rem; font-weight: 300; }

/* ─── CREDENTIAL PILL (RATA BADGE) ────────────────────── */
.credential-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n500);
  background: var(--n50);
  border: 1px solid var(--n100);
  padding: 5px 12px;
  border-radius: 100px;
  margin: 6px 0 10px;
  line-height: 1;
}
.credential-pill-icon {
  color: var(--n400);
  flex-shrink: 0;
}

/* ─── HERO STATS (4-column row, responsive) ───────────── */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.hero-stat-cell {
  padding: 28px 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.hero-stat-cell:last-child { border-right: none; }
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
}
.hero-stat-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}

/* ─── FLYWHEEL ────────────────────────────────────────── */
.flywheel {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-image: url('/wp-content/themes/pureblu-theme/assets/images/flywheel-backdrop.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.flywheel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes flywheelRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.flywheel-ring {
  animation: flywheelRotate 60s linear infinite;
  transform-origin: center;
  transform-box: view-box;
}

.flywheel-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--n800), var(--n700));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(4,13,26,0.4), inset 0 0 40px rgba(59,130,246,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.flywheel-core-inner {
  padding: 16px;
}

.flywheel-core-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n200);
  margin-bottom: 10px;
}

.flywheel-core-title {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.flywheel-core-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 300;
  line-height: 1.4;
}

/* Positioned node card — the node IS the card (no inner wrapper needed) */
.flywheel-node {
  position: absolute;
  width: 200px;
  padding: 18px 20px;
  background: rgba(7, 20, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(4,13,26,0.5), 0 0 0 4px rgba(30,85,184,0.08);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.flywheel-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--n350);
  box-shadow: 0 16px 48px rgba(30,85,184,0.4), 0 0 0 4px rgba(59,130,246,0.15);
}

.flywheel-node-num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--n500);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30,85,184,0.4);
  border: 2px solid var(--n900);
}

.flywheel-node-icon {
  font-size: 1.375rem;
  margin-bottom: 6px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
figure.wp-block-image.flywheel-node-icon { margin: 0 0 6px; }
.flywheel-node-icon img,
.flywheel-node-icon-img { width: 1.375rem; height: 1.375rem; object-fit: contain; display: block; }

.flywheel-node-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 6px;
}

.flywheel-node-body {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  font-weight: 300;
}

/* Stacked list fallback (hidden on desktop) */
.flywheel-list {
  display: none;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
}
.flywheel-list-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: var(--radius-md);
}
.flywheel-list-num {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--n500);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.flywheel-list-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.flywheel-list-item p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  font-weight: 300;
}

/* ─── HORIZONTAL TIMELINE (smart-amc 6-step) ──────────── */
.horizontal-timeline {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
}
.htl-line {
  position: absolute;
  top: 68px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, var(--n700), var(--n500), var(--n400), var(--n500), var(--n700));
  border-radius: 1px;
}
.htl-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.htl-step {
  text-align: center;
  padding: 0 8px;
}
.htl-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--n600);
  border: 2px solid var(--n350);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--n150);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--n900);
}
.htl-num-alt {
  background: var(--n700);
  border-color: var(--n400);
  color: var(--n200);
}
.htl-step h4 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.3;
}
.htl-step p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
  font-weight: 300;
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  /* Flywheel: collapse SVG diagram to stacked list */
  .flywheel { display: none; }
  .flywheel-list { display: flex; }
}

@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: 0 24px; } /* keep header gutters aligned with .container */
  .section,
  body section.wp-block-group.section { padding: 72px 0; } /* `body` prefix outspecifies the desktop rule at style.css:2763 (which appears later in source) */
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .timeline::before { left: 24px; }
  .step-num { width: 48px; height: 48px; }
  .pricing-card.featured { transform: scale(1); }

  /* Hero stats: 3 → 2+1 on tablet */
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .hero-stat-cell:nth-child(2n) { border-right: none; }
  .hero-stat-cell:nth-last-child(-n+1) { border-bottom: none; }
  .hero-stat-cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }

  /* Horizontal timeline: 6 → 2×3 on tablet */
  .htl-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .htl-line { display: none; }
  .htl-step { padding: 0; }
  .htl-step h4 { font-size: 0.8125rem; }
  .htl-step p { font-size: 0.75rem; }

  /* Inline grids: start collapsing at tablet */
  .feat-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .feat-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-2col   { grid-template-columns: 1fr !important; gap: 0 !important; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .display-xl { font-size: 2.25rem; }
  .display-lg { font-size: 1.875rem; }

  /* Hero stats: 1 column on mobile */
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat-cell { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .hero-stat-cell:last-child { border-bottom: none; }

  /* Horizontal timeline → vertical timeline on mobile */
  .horizontal-timeline {
    padding: 20px 0;
    overflow: visible; /* allow box-shadow rings to breathe */
  }
  .htl-line { display: none; }
  .htl-grid {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    padding-left: 4px;
  }
  .htl-grid::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--n700), var(--n500), var(--n400), var(--n500), var(--n700));
  }
  .htl-step {
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 0 0 36px 0;
    align-items: start;
  }
  .htl-step:last-child { padding-bottom: 0; }
  .htl-num {
    margin: 0;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    box-shadow: 0 0 0 5px var(--n900);
  }
  .htl-step h4 {
    margin-top: 12px;
    font-size: 0.9375rem;
    line-height: 1.3;
  }
  .htl-step p {
    grid-column: 2; /* force into text column, not number column */
    font-size: 0.8125rem;
    margin-top: 4px;
  }

  /* Hide decorative mockups on mobile */
  .dashboard-mockup { display: none; }
  .enterprise-mockup { display: none; }

  /* Hide feature screenshots on mobile — desktop UI doesn't scale well */
  .feat-screenshot { display: none; }

  /* Give hero-2col feature rows breathing room when stacked */
  .feat-row-gap { gap: 40px !important; }

  /* Collapse inline grids on mobile */
  .hero-2col  { grid-template-columns: 1fr !important; gap: 0 !important; }
  .feat-grid-2 { grid-template-columns: 1fr !important; }
  .feat-grid-3 { grid-template-columns: 1fr !important; }
  .feat-grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* Ticker cards — always fixed width, never stretch */
  .logo-ticker-item.client-logo-card,
  .logo-ticker-item.partner-logo-card { flex: 0 0 auto; min-width: 130px; max-width: 180px; padding: 14px 20px; height: 70px; }
  .logo-ticker-item.client-logo-card img,
  .logo-ticker-item.partner-logo-card img { max-height: 44px; max-width: 110px; }

  /* Reduce card padding on mobile */
  .card { padding: 28px 24px !important; }
}

@media (max-width: 480px) {
  .btn-lg { padding: 14px 24px; font-size: 0.9375rem; }
  .stat-row { grid-template-columns: 1fr; }
  .nav-logo-img { height: 30px; }
  .footer-logo-img,
  .footer-logo-img-block img { height: 34px; }
  .feat-grid-4 { grid-template-columns: 1fr !important; }
  .display-xl { font-size: 1.875rem; }
}

/* ─── BLOG CARDS ──────────────────────────────────────── */
.blog-card {
  background: var(--white);
  border: 1px solid var(--n100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(4,13,26,0.1);
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--n400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--n900);
  line-height: 1.35;
  margin-bottom: 12px;
}
.blog-card-excerpt {
  font-size: 0.875rem;
  color: rgba(4,13,26,0.5);
  line-height: 1.65;
  font-weight: 300;
  flex: 1;
  margin-bottom: 20px;
}
.blog-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--n500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition), gap var(--transition);
}
.blog-card-link:hover {
  color: var(--n400);
  gap: 8px;
}

/* ───────────────────────────────────────────────────────
   WordPress theme additions (not in original HTML's shared
   style.css — these reproduce per-page inline rules so the
   FSE theme renders identically).
─────────────────────────────────────────────────────── */

/* From legal.html's inline <style> — Privacy Policy prose. */
.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--n900);
  margin: 40px 0 12px;
}
.legal-body p {
  color: rgba(4,13,26,0.6);
  font-size: 0.9375rem;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 16px;
}
.legal-body a {
  color: var(--n500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* smart-amc.html used <body style="background:var(--n900)">.
   In FSE the body is theme-controlled, so we set the dark
   background on the page wrapper instead. Visually identical. */
.pureblu-dark-page { background: var(--n900); }

/* Remove the default block-theme root padding/margins so the
   full-bleed sections (hero gradients, tickers) reach edge-to-edge
   exactly like the original static pages did. */
.wp-site-blocks > main.wp-block-group,
main.wp-block-group { margin-top: 0; margin-bottom: 0; }
/* page.html generic page header (matches blog.html / legal.html header). */
.pureblu-page-header {
  background: linear-gradient(150deg, var(--n10) 0%, var(--white) 50%, var(--n50) 100%);
  position: relative;
  overflow: hidden;
}
.pureblu-page-header::before,
.pureblu-page-header::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--n100);
  pointer-events: none;
}
.pureblu-page-header::before { right: -100px; width: 400px; height: 400px; }
.pureblu-page-header::after { right: 60px; width: 220px; height: 220px; }
.pureblu-page-header .container { position: relative; z-index: 1; }
.pureblu-page-header h1 { color: var(--n900); margin-bottom: 16px; }
.pureblu-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n400);
  margin-bottom: 12px;
}
/* ───── Dynamic blog (home.html Query Loop) ─────
   WordPress wraps the post template in <ul><li>. Make that wrapper
   the 3-col grid and let each .blog-card fill its cell, matching the
   original static blog.html grid exactly. */
.pureblu-blog-grid.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pureblu-blog-grid.wp-block-post-template > li {
  margin: 0;
  display: flex;
}
.pureblu-blog-grid .blog-card { width: 100%; }

/* The featured image block must render like the original .blog-card-img. */
.pureblu-blog-card-img,
.pureblu-blog-card-img img,
.blog-card .wp-block-post-featured-image,
.blog-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  margin: 0;
}
/* Lock every featured image to the same 16:9 box, cropping to fill —
   so all blog cards are the same size as in the original HTML. */
.pureblu-blog-card-img img,
.blog-card .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* Pagination links styled subtly to fit the design. */
.wp-block-query-pagination { font-family: var(--font-body); font-weight: 600; }
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers { color: var(--n500); }

@media (max-width: 900px) {
  .pureblu-blog-grid.wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pureblu-blog-grid.wp-block-post-template { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   SINGLE POST / BLOG DETAIL  (templates/single.html)
   Richer reading experience: breadcrumb, category pill, author + date +
   reading-time meta, larger featured image, refined prose, share rail,
   author bio card, related grid, and a scroll progress bar.
───────────────────────────────────────────────────────────────────── */

/* Reading progress bar — fixed sliver at the very top, injected by script.js. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--n500), var(--n350));
  z-index: 1200;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Header tweaks for the article view. */
.pureblu-article-header .post-breadcrumb {
  margin-bottom: 18px;
}
.pureblu-article-header .post-breadcrumb a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--n500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition), gap var(--transition);
}
.pureblu-article-header .post-breadcrumb a:hover {
  color: var(--n400);
  gap: 10px;
}

/* Category pill. */
.post-category-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n500);
  background: var(--n50);
  border: 1px solid var(--n100);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.post-category-pill a { color: inherit; text-decoration: none; }

.article-title {
  color: var(--n900);
  margin-bottom: 24px;
  max-width: 18ch;
}

/* Meta row: "Feb 13, 2025 — by Ajit Panicker · 5 min read". */
.article-meta {
  gap: 4px 8px;
  align-items: baseline;
}
.article-meta .article-meta-date {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(4,13,26,0.55);
  margin: 0;
}
.article-meta .article-meta-author-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--n900);
  margin: 0;
  text-transform: capitalize;
}
.article-meta .article-meta-author-name::before {
  content: '— by ';
  font-weight: 400;
  color: rgba(4,13,26,0.55);
}
.article-meta .article-meta-author-name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.article-meta .article-meta-author-name a:hover {
  color: var(--n500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Featured image — large, rounded, soft shadow. */
.article-featured-image img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: var(--shadow-lg);
}

/* Article body sits next to a sticky share rail on wide screens. */
.article-layout {
  position: relative;
}
.share-rail {
  position: sticky;
  top: 120px;
  float: left;
  margin-left: -84px;
  align-items: center;
  gap: 12px;
}
.share-rail-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n300);
  margin: 0;
}
/* Style the native Social Icons block to MATCH the theme's other social
   icons (the light rounded-square style used on team cards): light fill,
   blue glyph, hover fills solid blue. !important beats core block CSS,
   which prints after this sheet. */
.share-rail-links.wp-block-social-links {
  gap: 10px !important;
  margin: 0;
  padding: 0;
}
.share-rail-links .wp-social-link {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: var(--n50) !important;
  color: var(--n500) !important;
  border: 1px solid var(--n100);
  margin: 0 !important;
  overflow: hidden;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform var(--transition);
}
.share-rail-links .wp-social-link .wp-block-social-link-anchor,
.share-rail-links .wp-social-link a {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}
.share-rail-links .wp-social-link svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor;
}
.share-rail-links .wp-social-link:hover {
  background: var(--n500) !important;
  color: var(--white) !important;
  border-color: var(--n500);
  transform: translateY(-2px);
}

/* Refined prose on top of the existing .legal-body base. */
.post-body { font-size: 1.0625rem; }
.post-body p {
  color: rgba(4,13,26,0.72);
  font-size: 1.0625rem;
  line-height: 1.85;
  font-weight: 400;
  margin-bottom: 22px;
}
.post-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.86;
  font-weight: 700;
  color: var(--n500);
  padding: 6px 12px 0 0;
}
.post-body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--n900);
  line-height: 1.3;
  margin: 48px 0 16px;
}
.post-body h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--n900);
  margin: 36px 0 12px;
}
.post-body a {
  color: var(--n500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-body ul,
.post-body ol { margin: 0 0 22px 1.2em; }
.post-body li {
  color: rgba(4,13,26,0.72);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 8px;
}
.post-body img { border-radius: 12px; }
.post-body figure { margin: 32px 0; }
.post-body figcaption {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(4,13,26,0.45);
  margin-top: 10px;
}
.post-body blockquote {
  border-left: 3px solid var(--n350);
  background: var(--n10);
  border-radius: 0 12px 12px 0;
  margin: 32px 0;
  padding: 20px 28px;
}
.post-body blockquote p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  font-style: normal;
  color: var(--n900);
  line-height: 1.5;
  margin: 0;
}

/* Author bio card after the article. */
.article-author-bio.wp-block-post-author {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 56px auto 0;
  max-width: 760px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--n100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.article-author-bio .wp-block-post-author__avatar img { border-radius: 50%; display: block; }
.article-author-bio .wp-block-post-author__byline {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n400);
  margin-bottom: 4px;
}
.article-author-bio .wp-block-post-author__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--n900);
  margin-bottom: 6px;
}
.article-author-bio .wp-block-post-author__bio {
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(4,13,26,0.6);
  margin: 0;
}

/* ─── Comments / "Leave a Reply" ─── */
.comments-section { border-top: 1px solid var(--n100); }
.comments-section .wp-block-comments-title,
.comments-section .comment-reply-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--n900);
  margin: 0 0 24px;
  line-height: 1.3;
}
.comments-section .comment-reply-title small { font-weight: 400; }
.comments-section .comment-reply-title small a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--n500);
  margin-left: 8px;
}

/* The form sits in a soft card so it reads as a distinct action area. */
.comments-section .comment-respond {
  background: var(--n10);
  border: 1px solid var(--n100);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 8px;
}
.comments-section .comment-form { margin: 0; }
.comments-section .comment-notes {
  font-size: 0.8125rem;
  color: rgba(4,13,26,0.5);
  font-weight: 300;
  margin-bottom: 22px;
}
.comments-section .comment-form .required { color: #dc2626; }

/* Field rows. */
.comments-section .comment-form > p { margin-bottom: 16px; }
.comments-section .comment-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--n700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.comments-section .comment-form input[type="text"],
.comments-section .comment-form input[type="email"],
.comments-section .comment-form input[type="url"],
.comments-section .comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--n100);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--n900);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.comments-section .comment-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.comments-section .comment-form input[type="text"]:focus,
.comments-section .comment-form input[type="email"]:focus,
.comments-section .comment-form input[type="url"]:focus,
.comments-section .comment-form textarea:focus {
  border-color: var(--n400);
  box-shadow: 0 0 0 3px rgba(30,85,184,0.08);
}

/* Put Name / Email / Website on one row on wider screens. */
@media (min-width: 640px) {
  .comments-section .comment-form-author,
  .comments-section .comment-form-email,
  .comments-section .comment-form-url {
    display: inline-block;
    width: calc(33.333% - 8px);
    vertical-align: top;
    margin-right: 12px;
  }
  .comments-section .comment-form-url { margin-right: 0; }
}

/* Cookies-consent checkbox row. */
.comments-section .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.comments-section .comment-form-cookies-consent input { margin-top: 3px; }
.comments-section .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(4,13,26,0.55);
}

/* Submit button — branded, not full width. */
.comments-section .form-submit { margin-top: 4px; margin-bottom: 0; }
.comments-section .form-submit input[type="submit"],
.comments-section .form-submit .wp-block-button__link {
  display: inline-block;
  width: auto;
  padding: 13px 32px;
  background: var(--n500);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.comments-section .form-submit input[type="submit"]:hover,
.comments-section .form-submit .wp-block-button__link:hover {
  background: var(--n400);
  transform: translateY(-1px);
}

/* Existing comment list entries. */
.comments-section .wp-block-comment-template {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
/* Each comment becomes a soft card; replies nest with an indent + rule. */
.comments-section .wp-block-comment-template > li {
  margin: 0 0 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--n100);
  border-radius: 14px;
}
.comments-section .wp-block-comment-template ol {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--n100);
}
.comments-section .wp-block-comment-template ol > li {
  margin: 16px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Comment row: align the avatar column with the text and tighten the gap. */
.comments-section .wp-block-comment-template .wp-block-columns {
  gap: 16px;
  margin: 0;
  align-items: flex-start;
}
.comments-section .wp-block-comment-template .wp-block-column {
  margin: 0;
}
.comments-section .wp-block-avatar img,
.comments-section .wp-block-comment-author-avatar img {
  border-radius: 50%;
  display: block;
}

.comments-section .wp-block-comment-author-name a,
.comments-section .wp-block-comment-author-name {
  font-weight: 600;
  color: var(--n900);
  text-decoration: none;
  line-height: 1.3;
}
.comments-section .wp-block-comment-date,
.comments-section .wp-block-comment-date a {
  font-size: 0.75rem;
  color: rgba(4,13,26,0.45);
  text-decoration: none;
}
.comments-section .wp-block-comment-date { margin: 2px 0 10px; }
.comments-section .wp-block-comment-content { margin: 0; }
.comments-section .wp-block-comment-content p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(4,13,26,0.7);
  margin: 0;
}
.comments-section .wp-block-comment-content p + p { margin-top: 12px; }

/* Reply / Like action row. */
.comments-section .wp-block-comment-reply-link {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.comments-section .wp-block-comment-reply-link a,
.comments-section .comment-likes a,
.comments-section .sd-like a {
  color: var(--n500);
  text-decoration: none;
}
.comments-section .wp-block-comment-reply-link a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  /* Stack the article and push the share bar to the BOTTOM so it no longer
     sits awkwardly between the featured image and the body text. */
  .article-layout {
    display: flex;
    flex-direction: column;
  }
  .post-body { order: 1; }
  .share-rail {
    order: 2;
    position: static;
    float: none;
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--n100);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .share-rail-label { writing-mode: horizontal-tb; }
  /* The social list was set to vertical orientation in the block markup —
     force it back to a horizontal row on mobile. */
  .share-rail-links.wp-block-social-links {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .post-body > p:first-of-type::first-letter { font-size: 2.8rem; }
  .article-author-bio.wp-block-post-author { flex-direction: column; gap: 14px; }
}
/* ═══════════════════════════════════════════════════════
   NATIVE-BLOCK CONVERSION HELPERS
   Classes that hold values previously written as inline styles,
   so native Gutenberg blocks can carry a className and render
   pixel-identically to the original HTML.
═══════════════════════════════════════════════════════ */

/* ── Section gradient backgrounds (exact from original inline styles) ── */
.bg-grad-home-hero { background: linear-gradient(180deg, #113069 0%, #071426 45%, #040d1a 100%); }
.bg-grad-flywheel  { background: linear-gradient(160deg, var(--n950) 0%, var(--n900) 50%, var(--n800) 100%); }
.bg-grad-cta       { background: linear-gradient(135deg, var(--n900), var(--n800)); }
.bg-grad-saas-hero { background: linear-gradient(150deg, var(--n10) 0%, var(--white) 50%, var(--n50) 100%); }
.bg-grad-tech      { background: linear-gradient(135deg, var(--n900) 0%, var(--n800) 100%); }
.bg-grad-amc-hero  { background: linear-gradient(150deg, var(--n950) 0%, var(--n900) 40%, var(--n800) 100%); }
.bg-grad-amc-cta   { background: linear-gradient(135deg, var(--n800) 0%, var(--n700) 100%); }
.bg-card-saas      { background: linear-gradient(145deg, var(--n800), var(--n700)); }
.bg-card-problem   { background: linear-gradient(135deg, var(--n700), var(--n600)); border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow-lg); }
.bg-card-real      { box-shadow: var(--shadow-sm); }

/* Sections that hold absolutely-positioned decorative children must clip + stack. */
.section-relative { position: relative; overflow: hidden; }
.section-relative > .container,
.section-z1 { position: relative; z-index: 1; }

/* Generic full-height hero wrappers reused by the heroes. */
.hero-fullscreen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-saas-wrap {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--n100);
}
.hero-amc-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 0 80px;
  position: relative;
  overflow: hidden;
}

/* ── Decorative rings / glows (replace inline-styled empty divs) ── */
.deco-ring,
.deco-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Home hero rings (right-centered) */
.ring-home-1 { right:-200px; top:50%; transform:translateY(-50%); width:700px; height:700px; border:1px solid rgba(59,130,246,0.08); }
.ring-home-2 { right:-100px; top:50%; transform:translateY(-50%); width:500px; height:500px; border:1px solid rgba(59,130,246,0.06); }
/* SaaS hero decorations */
.glow-saas-1 { right:-180px; top:50%; transform:translateY(-50%); width:600px; height:600px; background:radial-gradient(circle, rgba(30,85,184,0.05) 0%, transparent 70%); }
.ring-saas-1 { right:80px;  top:60px;  width:320px; height:320px; border:1px solid var(--n100); }
.ring-saas-2 { right:140px; top:120px; width:200px; height:200px; border:1px solid var(--n100); }
/* AMC hero decorations */
.ring-amc-1  { right:-250px; top:50%; transform:translateY(-50%); width:800px; height:800px; border:1px solid rgba(59,130,246,0.07); }
.ring-amc-2  { right:-100px; top:50%; transform:translateY(-55%); width:550px; height:550px; border:1px solid rgba(59,130,246,0.06); }
.glow-amc-1  { right:80px;   top:50%; transform:translateY(-50%); width:300px; height:300px; background:radial-gradient(circle, rgba(30,85,184,0.12) 0%, transparent 70%); }
/* AMC big-CTA centered rings */
.ring-ctac-1 { left:50%; top:50%; transform:translate(-50%,-50%); width:700px; height:700px; border:1px solid rgba(255,255,255,0.04); }
.ring-ctac-2 { left:50%; top:50%; transform:translate(-50%,-50%); width:450px; height:450px; border:1px solid rgba(255,255,255,0.06); }
/* Generic light-header rings (page header / 404) */
.ring-hdr-1  { right:-100px; top:50%; transform:translateY(-50%); width:400px; height:400px; border:1px solid var(--n100); }
.ring-hdr-2  { right:60px;   top:50%; transform:translateY(-50%); width:220px; height:220px; border:1px solid var(--n100); }
/* Enterprise product card radial glow (bottom-right) */
.glow-ent-card { bottom:-60px; right:-60px; width:200px; height:200px; background:radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%); }

/* Top accent bars on the dual product cards */
.card-accent-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.card-accent-blue { background: linear-gradient(90deg, var(--n400), var(--n300)); }
.card-accent-mid  { background: linear-gradient(90deg, var(--n300), var(--n200)); }

/* ── Gradient-clipped headline text (the <span> inside hero H1s) ── */
.grad-text {
  background: linear-gradient(90deg, var(--n300), var(--n150));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-amc {
  background: linear-gradient(90deg, var(--n300), var(--n200));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Native check-list: render the checkmark via CSS so list items
   can be native core/list-item (editable) instead of inline SVG. ── */
.check-list.is-native { list-style: none; }
.check-list.is-native li {
  position: relative;
  padding-left: 30px;
}
.check-list.is-native li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 9px;
}
.check-list.is-native.check-blue li::before {
  background-color: var(--n50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.5L3.8 7.5L10 1' stroke='%231e55b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-list.is-native.check-white li::before {
  background-color: rgba(255,255,255,0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.5L3.8 7.5L10 1' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Helper text colors used inline previously, now class-based for blocks. */
.txt-muted-dark  { color: rgba(4,13,26,0.5); }
.txt-muted-dark2 { color: rgba(4,13,26,0.55); }
.txt-muted-light { color: rgba(255,255,255,0.5); }
.fw-300 { font-weight: 300; }
/* ═══════════════════════════════════════════════════════
   GUTENBERG CORE-BLOCK COMPATIBILITY
   Bridges WordPress block markup to the original utility classes
   so native blocks render identically to the source HTML.
═══════════════════════════════════════════════════════ */

/* core/button: the .btn class sits on the outer .wp-block-button wrapper, but
   our original .btn rule (padding/background/shadow) is meant for the clickable
   element. If both the wrapper AND the link get .btn styling we get a giant
   double-box. So: NEUTRALISE the outer wrapper completely (it becomes a plain
   shrink-wrap container) and re-apply the .btn visuals only to the inner link. */
.wp-block-button.btn,
.wp-block-buttons > .wp-block-button.btn {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  transform: none !important;
}
.wp-block-button.btn > .wp-block-button__link {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  width: auto;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
}
.wp-block-button.btn.btn-lg > .wp-block-button__link { padding: 16px 36px; font-size: 1rem; }
.wp-block-button.btn.btn-sm > .wp-block-button__link { padding: 9px 20px; font-size: 0.8125rem; }
.wp-block-button.btn.btn-lg.btn-cta-amc > .wp-block-button__link { padding: 16px 40px; font-size: 1.0625rem; }

/* The wp:buttons container: flex row with the original 16px gap, wrapping,
   and NOT stretching its button children. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center; /* not in original (original has no align-items, defaults to stretch) */
}
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button.btn-blue > .wp-block-button__link { background:#1e55b8; color:#fff; box-shadow:0 4px 16px rgba(30,85,184,0.3); }
.wp-block-button.btn-blue > .wp-block-button__link:hover { background:#2d6fd4; box-shadow:0 8px 28px rgba(30,85,184,0.4); transform:translateY(-2px); }
.wp-block-button.btn-white > .wp-block-button__link { background:#fff; color:#113069; box-shadow:var(--shadow-sm); }
.wp-block-button.btn-white > .wp-block-button__link:hover { background:#f8fbff; box-shadow:var(--shadow-md); transform:translateY(-2px); }
.wp-block-button.btn-outline-white > .wp-block-button__link { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.3); }
.wp-block-button.btn-outline-white > .wp-block-button__link:hover { border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); }
.wp-block-button.btn-outline-blue > .wp-block-button__link { background:transparent; color:#1e55b8; border:1.5px solid #93c5fd; }
.wp-block-button.btn-outline-blue > .wp-block-button__link:hover { border-color:#2d6fd4; background:#eff6ff; color:#1a4494; }

/* core/columns carrying feat-grid-* must use CSS Grid (not flex) like the
   original. Force grid and neutralise WP's column flex-basis/gap. */
.wp-block-columns.feat-grid-2,
.wp-block-columns.feat-grid-3,
.wp-block-columns.feat-grid-4 {
  display: grid;
  align-items: stretch; /* not in original for feat-grid-3: saas.html used align-items:end */
}
.wp-block-columns.feat-grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; }
.wp-block-columns.feat-grid-3 { grid-template-columns: repeat(3,1fr); gap: 20px; } /* original saas.html feat-grid-3 used gap:32px */
.wp-block-columns.feat-grid-4 { grid-template-columns: repeat(4,1fr); gap: 24px; } /* original saas.html feat-grid-4 used gap:20px */
.wp-block-columns.feat-grid-2 > .wp-block-column,
.wp-block-columns.feat-grid-3 > .wp-block-column,
.wp-block-columns.feat-grid-4 > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
/* Columns acting as cards: the originals carried inline padding (smart-amc.html
   feat cards used 36px 32px) which the block markup doesn't. */
.wp-block-columns > .wp-block-column.card { padding: 36px 32px; }
.wp-block-columns.hero-2col { gap: 80px; align-items: center; }

@media (max-width: 1080px) {
  .wp-block-columns.feat-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wp-block-columns.feat-grid-3 { grid-template-columns: 1fr 1fr; }
  .wp-block-columns.hero-2col,
  .wp-block-columns.feat-grid-2 { grid-template-columns: 1fr; display: grid; }
}
@media (max-width: 768px) {
  .wp-block-columns.feat-grid-3,
  .wp-block-columns.feat-grid-4 { grid-template-columns: 1fr; }
}

/* Empty decorative groups must not introduce block spacing/min-height. */
.wp-block-group.deco-ring,
.wp-block-group.deco-glow,
.wp-block-group.mesh-overlay,
.wp-block-group.grid-overlay,
.wp-block-group.card-accent-top { margin: 0; }

/* The .section wrapper as a group: keep our padding, drop WP root padding. */
section.wp-block-group.section { padding: 100px 0; margin: 0; }
/* SaaS feature section: vertical stack of rows + the per-column icon stacks. */
.feat-stack { display: flex; flex-direction: column; gap: 80px; }
.feat-stack > * { margin-block-start: 0; margin-block-end: 0; }
.feat-col-stack { display: flex; flex-direction: column; gap: 40px; }
/* The SaaS feature rows used a 64px column gap (vs the generic hero-2col 80px). */
.wp-block-columns.hero-2col.feat-row-gap { gap: 64px; }
/* Technician screenshots: max-width 220px, centered, rounded with deep shadow. */
.tech-screenshot img,
.tech-screenshot.is-resized img {
  max-width: 220px;
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(4,13,26,0.5);
  margin: 0 auto;
  display: block;
}
/* ── Audit fixes ───────────────────────────────────────── */

/* SaaS feature screenshots: restore the shadow + hairline border that the
   original carried as inline styles (border-radius was already preserved on
   the figure). Without this the screenshots render flat. */
.feat-screenshot,
.feat-screenshot img {
  border-radius: 12px;
}
.feat-screenshot img {
  box-shadow: 0 20px 60px rgba(4,13,26,0.1);
  border: 1px solid var(--n100);
  display: block;
  width: 100%;
}
/* Keep the original mobile behaviour (screenshots hidden under 768px) intact —
   that rule lives earlier in this file and still applies. */
/* ═══════════════════════════════════════════════════════
   EDITOR-FRIENDLY DECORATIONS (pure CSS, no markup divs)
   Each section carries ONE class. Gradient + grid + mesh + glow
   are layered backgrounds; decorative rings are ::before / ::after.
   This renders identically in the Site Editor AND the front end,
   with the section content kept as native editable blocks.
═══════════════════════════════════════════════════════ */

/* Shared: heroes/CTAs clip their pseudo-element rings and stack content. */
.pb-hero-home, .pb-hero-saas, .pb-hero-amc,
.pb-flywheel, .pb-cta, .pb-cta-amc { position: relative; overflow: hidden; }
.pb-hero-home > .container, .pb-hero-saas > .container, .pb-hero-amc > .container,
.pb-flywheel > .container, .pb-cta > .container, .pb-cta-amc > .container { position: relative; z-index: 1; width: 100%; }
.pb-hero-home::before, .pb-hero-home::after,
.pb-hero-saas::before, .pb-hero-saas::after,
.pb-hero-amc::before, .pb-hero-amc::after,
.pb-cta-amc::before, .pb-cta-amc::after { content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; }

/* HOME HERO: navy gradient + grid + mesh; two faint rings on the right. */
.pb-hero-home {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 80px;
  background:
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(17,48,105,0.1) 0%, transparent 60%),
    linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(180deg, #113069 0%, #071426 45%, #040d1a 100%);
  background-size: 100% 100%,100% 100%,100% 100%,56px 56px,56px 56px,100% 100%;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
}
.pb-hero-home::before { right:-200px; top:50%; transform:translateY(-50%); width:700px; height:700px; border:1px solid rgba(59,130,246,0.08); }
.pb-hero-home::after  { right:-100px; top:50%; transform:translateY(-50%); width:500px; height:500px; border:1px solid rgba(59,130,246,0.06); }

/* HOME FLYWHEEL: dark gradient + faint grid + mesh. */
.pb-flywheel {
  background:
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    linear-gradient(rgba(59,130,246,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.025) 1px, transparent 1px),
    linear-gradient(160deg, #040d1a 0%, #071426 50%, #0d2347 100%);
  background-size: 100% 100%,100% 100%,56px 56px,56px 56px,100% 100%;
  background-repeat: no-repeat,no-repeat,repeat,repeat,no-repeat;
}

/* DARK CTA (home + saas): gradient + mesh glow. */
.pb-cta {
  background:
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    linear-gradient(135deg, #071426, #0d2347);
  background-size: 100% 100%,100% 100%,100% 100%;
  background-repeat: no-repeat;
}

/* SAAS HERO: deep navy gradient + grid + mesh + glow; two faint rings. */
.pb-hero-saas {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 80px;
  background:
    radial-gradient(circle 300px at calc(100% - 80px) 50%, rgba(30,85,184,0.12) 0%, transparent 70%),
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(150deg, #040d1a 0%, #071426 40%, #0d2347 100%);
  background-size: 100% 100%,100% 100%,100% 100%,56px 56px,56px 56px,100% 100%;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
}
.pb-hero-saas::before { right:-250px; top:50%; transform:translateY(-50%); width:800px; height:800px; border:1px solid rgba(59,130,246,0.07); }
.pb-hero-saas::after  { right:-100px; top:50%; transform:translateY(-55%); width:550px; height:550px; border:1px solid rgba(59,130,246,0.06); }

/* AMC HERO: deep navy gradient + grid + mesh + glow; two faint rings. */
.pb-hero-amc {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 80px;
  background:
    radial-gradient(circle 300px at calc(100% - 80px) 50%, rgba(30,85,184,0.12) 0%, transparent 70%),
    radial-gradient(circle at 20% 20%, rgba(30,85,184,0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.15) 0%, transparent 50%),
    linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(150deg, #040d1a 0%, #071426 40%, #0d2347 100%);
  background-size: 100% 100%,100% 100%,100% 100%,56px 56px,56px 56px,100% 100%;
  background-repeat: no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat;
}
.pb-hero-amc::before { right:-250px; top:50%; transform:translateY(-50%); width:800px; height:800px; border:1px solid rgba(59,130,246,0.07); }
.pb-hero-amc::after  { right:-100px; top:50%; transform:translateY(-55%); width:550px; height:550px; border:1px solid rgba(59,130,246,0.06); }

/* AMC BIG CTA: gradient + faint grid; two centered white rings. */
.pb-cta-amc {
  padding:100px 0;
  background:
    linear-gradient(rgba(59,130,246,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.025) 1px, transparent 1px),
    linear-gradient(135deg, #0d2347 0%, #113069 100%);
  background-size: 56px 56px,56px 56px,100% 100%;
  background-repeat: repeat,repeat,no-repeat;
}
.pb-cta-amc::before { left:50%; top:50%; transform:translate(-50%,-50%); width:700px; height:700px; border:1px solid rgba(255,255,255,0.04); }
.pb-cta-amc::after  { left:50%; top:50%; transform:translate(-50%,-50%); width:450px; height:450px; border:1px solid rgba(255,255,255,0.06); }

/* PRODUCT CARDS: top accent bar via ::before; dark card glow via ::after. */
.pb-card { position:relative; overflow:hidden; }
.pb-card-blue::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--n400), var(--n300)); }
.pb-card-dark { background:linear-gradient(145deg, var(--n800), var(--n700)); }
.pb-card-dark::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--n300), var(--n200)); }
.pb-card-dark::after { content:""; position:absolute; bottom:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%); pointer-events:none; }
/* Width utilities for native hero content (left-aligned columns). */
.hero-narrow { max-width: 760px; }
.lead-480 { max-width: 480px; }
.lead-500 { max-width: 500px; }
.lead-520 { max-width: 520px; margin-left:auto; margin-right:auto; }
.lead-540 { max-width: 540px; }
.lead-560 { max-width: 560px; }
.lead-580 { max-width: 580px; }
.mw-640 { max-width: 640px; margin-left:auto; margin-right:auto; }
.mw-500c { max-width: 500px; margin-left:auto; margin-right:auto; }
/* Full product-card styling so the native column only needs a class. */
.pb-card-blue { background:var(--white); border:1px solid var(--n100); border-radius:var(--radius-xl); padding:52px 48px; box-shadow:var(--shadow-md); }
.pb-card-dark { border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-xl); padding:52px 48px; box-shadow:var(--shadow-xl); }
/* Problem cards (SaaS) so the native column only needs a class. */
.pb-problem-card { background:var(--white); border:1px solid var(--n100); border-radius:var(--radius-md); padding:28px 24px; box-shadow:var(--shadow-sm); }
/* ═══════════════════════════════════════════════════════
   EDITABLE FLYWHEEL + TICKERS (native-block support)
═══════════════════════════════════════════════════════ */

/* Flywheel nodes: angle moved from inline --angle to positional classes,
   so each node can be a native editable Group block. */
/* Node positions — direct coordinates, visually identical to the original rotation-translate approach */
.flywheel-node.fn-1 { top: calc(50% - 240px); left: 50%;               transform: translate(-50%, -50%); }
.flywheel-node.fn-2 { top: calc(50% - 74px);  left: calc(50% + 228px); transform: translate(-50%, -50%); }
.flywheel-node.fn-3 { top: calc(50% + 194px); left: calc(50% + 141px); transform: translate(-50%, -50%); }
.flywheel-node.fn-4 { top: calc(50% + 194px); left: calc(50% - 141px); transform: translate(-50%, -50%); }
.flywheel-node.fn-5 { top: calc(50% - 74px);  left: calc(50% - 228px); transform: translate(-50%, -50%); }

/* The decorative SVG backdrop sits behind the (native) nodes/label. */
.flywheel .flywheel-svg-wrap { position: absolute; inset: 0; pointer-events: none; }
.flywheel .flywheel-svg-wrap .flywheel-svg { width: 100%; height: 100%; }


/* Ticker fade edges as pseudo-elements, so the markup is just the
   editable Image blocks (no decorative divs needed). */
.ticker-fade { position: relative; overflow: hidden; }
.ticker-fade::before,
.ticker-fade::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.ticker-fade-light::before { left: 0;  width: 100px; background: linear-gradient(to right, var(--n10), transparent); }
.ticker-fade-light::after  { right: 0; width: 100px; background: linear-gradient(to left,  var(--n10), transparent); }
.ticker-fade-dark::before  { left: 0;  width: 120px; background: linear-gradient(to right, var(--n800), transparent); }
.ticker-fade-dark::after   { right: 0; width: 120px; background: linear-gradient(to left,  var(--n800), transparent); }

/* Native core/image used as a logo card: style the figure like the original
   .partner-logo-card / .client-logo-card and reset block defaults. */
.logo-ticker-track .wp-block-image { margin: 0; }

/* ═══════════════════════════════════════════════════════
   ROADMAP: Native-block bridges for converted wp:html islands
═══════════════════════════════════════════════════════ */

/* Team avatar: wp:image.team-avatar replaces div.team-avatar */
figure.wp-block-image.team-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
figure.wp-block-image.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0;
}

/* Team LinkedIn: core/social-links replaces the wp:html anchor.
   Reproduces .team-linkedin exactly. !important required: core block CSS
   prints in <body> after this sheet, so it wins every specificity tie. */
.team-card ul.wp-block-social-links {
  justify-content: center;
  margin: 14px 0 0 !important;
  gap: 0;
}
.team-card .wp-block-social-links .wp-social-link {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important; /* match .team-linkedin's rounded square */
  background: var(--n50) !important;
  color: var(--n500) !important;
  border: 1px solid var(--n100);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin: 0 !important;
  overflow: hidden;
}
.team-card .wp-block-social-links .wp-social-link:hover {
  background: var(--n500) !important;
  color: var(--white) !important;
  border-color: var(--n500);
  transform: none !important;
}
.team-card .wp-block-social-links .wp-social-link a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: inherit !important;
}
.team-card .wp-block-social-links .wp-social-link svg {
  /* Core's LinkedIn glyph fills only 18/24 of its viewBox; 21px renders the
     visible logo at ~16px, matching the original inline SVG. */
  width: 21px !important;
  height: 21px !important;
}

/* Flywheel list num: override .flywheel-list-item p which wins by specificity */
p.flywheel-list-num {
  color: var(--white) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  font-family: var(--font-display) !important;
  line-height: 1 !important;
}

/* Horizontal timeline as wp:columns.htl-grid */
.wp-block-columns.htl-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.wp-block-columns.htl-grid > .wp-block-column {
  flex-basis: auto !important;
  margin: 0 !important;
  min-width: 0;
}
/* p.htl-num: override .htl-step p which wins by specificity */
p.htl-num {
  color: var(--n150) !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  font-family: var(--font-display) !important;
  line-height: 1 !important;
}
p.htl-num.htl-num-alt { color: var(--n200) !important; }
/* ::before replaces the htl-line <div> */
.horizontal-timeline::before {
  content: '';
  position: absolute;
  top: 68px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, var(--n700), var(--n500), var(--n400), var(--n500), var(--n700));
  border-radius: 1px;
  pointer-events: none;
}
@media (max-width: 900px) {
  .wp-block-columns.htl-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px 20px !important; }
  .horizontal-timeline::before { display: none; }
}
@media (max-width: 768px) {
  .wp-block-columns.htl-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .horizontal-timeline::before { display: none; }
  p.htl-num { grid-column: 1 !important; grid-row: 1; }
}

/* Light-theme variant of the horizontal timeline (saas-style light section) */
.htl-light .htl-num {
  background: #ffffff;
  border-color: #dbeafe;
  box-shadow: 0 0 0 6px #f8fbff, 0 2px 8px rgba(4,13,26,0.06);
}
.htl-light .htl-num-alt {
  background: #ffffff;
  border-color: #dbeafe;
}
.htl-light p.htl-num,
.htl-light p.htl-num.htl-num-alt { color: #2d6fd4 !important; }
.htl-light .htl-step h4 { color: #071426; }
.htl-light .htl-step p { color: rgba(4,13,26,0.45); }
.htl-light .horizontal-timeline::before {
  background: linear-gradient(90deg, #dbeafe, #93c5fd, #2d6fd4, #93c5fd, #dbeafe);
}

/* YouTube embed (saas page) */
.saas-yt-embed {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(4,13,26,0.25), 0 0 0 1px rgba(59,130,246,0.1);
  margin: 0;
}
.saas-yt-embed .wp-block-embed__wrapper { border-radius: 16px; overflow: hidden; }

.btn-google-play-sub { font-size: 0.7rem; display: block; opacity: 0.55; line-height: 1; margin-bottom: 2px; }

/* Google Play: core/button replaces the wp:html anchor. Icon moves to ::before
   (the SVG file has white baked in — currentColor doesn't reach a CSS bg image). */
.wp-block-button.btn-google-play { margin-top: 24px; }
.wp-block-button.btn-google-play .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1.3;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.wp-block-button.btn-google-play .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.wp-block-button.btn-google-play .wp-block-button__link::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url('assets/images/icons/google-play.svg') no-repeat center / contain;
}

/* Footer logo: wp:group.nav-logo wrapping wp:image + wp:paragraph */
.footer-brand .wp-block-group.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand .wp-block-group.nav-logo .wp-block-image { margin: 0; }
.footer-brand .wp-block-group.nav-logo .wp-block-image a { display: flex; align-items: center; }
.footer-brand .wp-block-group.nav-logo .wp-block-image img { height: 38px; width: auto; display: block; margin: 0; }
/* WP renders the logo text as a <p>, so .footer-brand p would otherwise win
   over .nav-logo-text — restore the full logo typography here. */
.footer-brand .wp-block-group.nav-logo p.nav-logo-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: none;
}

/* Footer social icons: core/social-links replaces the wp:image figures.
   Reproduces the original .social-link boxes (32px, 1px border, 16px white
   glyph at 55% opacity). !important: core block CSS prints after this sheet. */
.footer-brand ul.wp-block-social-links {
  display: flex;
  gap: 12px !important;
  margin: 0;
  padding: 0;
}
.footer-brand .wp-block-social-links .wp-social-link {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
  overflow: hidden;
  transition: all var(--transition);
}
.footer-brand .wp-block-social-links .wp-social-link a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: inherit !important;
}
.footer-brand .wp-block-social-links .wp-social-link svg {
  /* Core glyphs fill ~18/24 of their viewBox; 21px renders the visible
     logo at ~16px — same size as the original 16px SVG files. */
  width: 21px !important;
  height: 21px !important;
}
.footer-brand .wp-block-social-links .wp-social-link:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Legacy figure rules (pre-conversion) — kept harmless if reused elsewhere */
.wp-block-group.social-links { display: flex; gap: 12px; flex-wrap: wrap; }
figure.wp-block-image.social-link {
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all var(--transition);
  flex-shrink: 0;
}
figure.wp-block-image.social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
figure.wp-block-image.social-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--transition);
  margin: 0;
}
figure.wp-block-image.social-link:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
figure.wp-block-image.social-link:hover img { opacity: 1; }
.logo-ticker-track .wp-block-image img { display: block; }

/* ============================================
   NATIVE SECTION WRAPPERS (blog templates)
   Replaces inline styles previously carried by
   wp:html section wrappers in archive/home/index/
   page/search/single templates.
   ============================================ */
.section-bg-soft { background: var(--n10); }
.section-bg-white { background: var(--white); }
.legal-body-narrow { max-width: 720px; }
.legal-body-wide { max-width: 760px; }
.container-narrow { max-width: 760px; }
.comments-section {
  background: var(--n10);
  border-top: 1px solid var(--n100);
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ============================================
   404 HERO (native blocks)
   Replaces the inline-styled wp:html hero in
   templates/404.html. The decorative circle is
   a ::before pseudo-element — no markup needed.
   ============================================ */
.error-404-hero {
  min-height: 70vh;
  background: linear-gradient(150deg, var(--n10) 0%, var(--white) 50%, var(--n50) 100%);
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--n100);
}
.error-404-hero::before {
  content: "";
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid var(--n100);
  pointer-events: none;
}
.error-404-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.error-404-hero .wp-block-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================
   AMC HERO CAROUSEL (native blocks)
   Slides are wp:image blocks inside wp:group
   wrappers (patterns/amc-carousel.php). The
   prev/next buttons and dots are injected by
   script.js — these classes style everything
   that used to be inline styles in the pattern.
   ============================================ */
.amc-carousel-wrap { position: relative; }
.amc-viewport {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(4,13,26,0.5), 0 0 0 1px rgba(255,255,255,0.07);
}
.amc-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.amc-track > .wp-block-image {
  width: 100%;
  flex-shrink: 0;
  margin: 0;
}
.amc-track .wp-block-image img {
  width: 100%;
  display: block;
  border-radius: 16px;
}
.amc-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
  z-index: 2;
}
.amc-nav-btn:hover { background: rgba(255,255,255,0.18); }
.amc-nav-prev { left: -16px; }
.amc-nav-next { right: -16px; }
.amc-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}
.amc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s;
}
.amc-dot.active {
  width: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
}