/* ==========================================================================
   TITAN WORKSPACE — Microsoft 365–Style Design System
   Design philosophy: Clean, consistent, trustworthy enterprise product page
   Inspired by microsoft.com/en-in/microsoft-365 aesthetic language
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette */
  --c-blue:        #4553a4;   /* Microsoft primary blue */
  --c-blue-hover:  #D63D22;
  --c-blue-light:  #EFF6FF;
  --c-blue-mid:    #DBEAFE;
  --c-red:         #EC4A2C;   /* Titan accent */
  --c-red-hover:   #D63D22;
  --c-green:       #107C10;   /* Microsoft green */
  --c-green-light: #F0FDF4;
  --c-teal:        #10B981;

  /* Neutral scale (Microsoft-style: near-white sections, deep navy text) */
  --c-navy:        #0B1D3A;
  --c-ink:         #1A1A2E;
  --c-text:        #1E293B;
  --c-muted:       #5B6472;
  --c-subtle:      #8A96A3;
  --c-border:      #E1E6ED;
  --c-border-soft: #F0F2F5;

  /* Section backgrounds — alternating white / near-white */
  --bg-white:
        radial-gradient(circle at 10% 15%, rgba(236,74,44,.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(249,188,21,.05) 0%, transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(96,177,74,.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(87,142,202,.05) 0%, transparent 30%),
        #ffffff;
  --bg-light:      #F7F9FC;   /* Microsoft's signature near-white */
  --bg-dark:       #0B1D3A;
  --bg-footer:     #060F1E;

  /* Typography */
  --font:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — ONE consistent scale, used everywhere */
  --t-eyebrow:     11.5px;
  --t-h1:          clamp(30px, 4.5vw, 40px);
  --t-h2:          clamp(26px, 3.2vw, 38px);
  --t-h3:          clamp(17px, 1.8vw, 20px);
  --t-body-lg:     clamp(15px, 1.4vw, 17px);
  --t-body:        15px;
  --t-small:       13.5px;
  --t-xs:          12px;

  /* Weight tokens */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;
  --w-black:   800;

  /* Spacing — consistent section rhythm */
  --section-pad: clamp(64px, 8vw, 96px);
  --section-pad-sm: clamp(40px, 5vw, 64px);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.22s;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--c-text);
  background: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* ==========================================================================
   3. SHARED SECTION PRIMITIVES
   ========================================================================== */
section {
  padding: var(--section-pad) 0;
}

/* Eyebrow — identical across every section */
.section-eyebrow,
.tw365-banner-label,
.scale-eyebrow,
.ai-eyebrow,
.adv-eyebrow,
.portal-eyebrow,
.dark-cta-badge,
.sp-callout-label,
.twc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 14px;
}

/* Section H2 — one size, one weight everywhere */
.section-title,
.tw365-banner-title,
.adv-title,
.scale-sub {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

/* Section descriptor paragraph */
.section-desc,
.adv-desc,
.tw365-banner-desc,
.scale-desc {
  font-size: var(--t-body-lg);
  font-weight: var(--w-regular);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 48px;
}

/* Center helper */
.text-center { text-align: center; }

/* ==========================================================================
   4. SCROLL REVEAL
   ========================================================================== */
.reveal-card,
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-card.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card, .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn,
.tw365-btn-primary,
.tw365-btn-secondary,
.btn-pink,
.portal-btn,
.scale-btn,
.dark-cta-primary-btn,
.dark-cta-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

/* Primary — unified brand blue (#4553a4) across the site */
.btn-primary,
.scale-btn,
.dark-cta-primary-btn {
  background: #4553a4;
  color: #fff;
}
.btn-primary:hover,
.scale-btn:hover,
.dark-cta-primary-btn:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(69, 83, 164, 0.28);
}

/* Outline */
.btn-outline,
.dark-cta-outline-btn,
.portal-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
}
.btn-outline:hover,
.dark-cta-outline-btn:hover,
.portal-btn:hover {
  border-color: var(--c-navy);
  background: var(--bg-light);
  transform: translateY(-2px);
}

/* Nav CTA (pulsing) */
.btn-pink {
  background: #4553a4;
  color: #fff;
  padding: 11px 22px;
  font-size: 14px;
  border-radius: var(--r-sm);
  animation: btnPulse 2.2s ease-in-out infinite;
}
.btn-pink:hover {
  background: var(--c-red);
  transform: translateY(-1px);
  animation: none;
}
@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Explore Titan Your Way — excluded from the site-wide button color
   unification; keeps its own distinct accent colors per card. */
#explore .btn-primary {
  background: var(--c-red);
  color: #fff;
}
#explore .btn-primary:hover {
  background: var(--c-red-hover);
  box-shadow: 0 6px 20px rgba(236, 74, 44, 0.28);
}

/* Hero CTA variants */
.tw365-btn-primary {
  background: var(--c-blue);
  color: #fff;
  border-radius: 100px;
  padding: 15px 30px;
  font-size: 15px;
}
.tw365-btn-primary:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 103, 184, 0.28);
}
.tw365-btn-secondary {
  background: #fff;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  border-radius: 100px;
  padding: 15px 30px;
  font-size: 15px;
}
.tw365-btn-secondary:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Cap links */
.cap-link {
  color: var(--c-blue);
  font-size: 14px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur);
}
.cap-link:hover { gap: 10px; color: var(--c-blue-hover); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
/*body { padding-top: 128px; }*/

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  transition: box-shadow 0.3s var(--ease);
}

/* Top info bar */
.header-top-bar {
  background: #071d45;
  padding: 10px 20px;
  transition: max-height 0.35s var(--ease), opacity 0.35s var(--ease), padding 0.35s var(--ease);
  overflow: hidden;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  animation: slideDown 0.6s var(--ease) both;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.top-badge {
  background: rgba(0,255,170,0.08);
  border: 1px solid rgba(0,255,170,0.28);
  color: #26d4b3;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.top-message {
  color: #fff;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
}
.top-link {
  color: #24e0b7;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  position: relative;
  transition: color 0.2s;
}
.top-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s var(--ease);
}
.top-link:hover { color: #3df0cb; }
.top-link:hover::after { transform: scaleX(1); }

/* Main nav bar */
.header-main-bar {
  background: #fff;
  height: 88px;
  border-bottom: 1px solid var(--c-border-soft);
  transition: height 0.3s var(--ease);
}
.main-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
nav { display: contents; }

.brand-logo {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 250px;
  flex-shrink: 0;
  transition: max-width 0.3s;
}

/* Nav menu */
.main-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  height: 100%;
}
.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur);
}
.nav-trigger:hover { color: var(--c-red); }
.nav-trigger::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 0.2s var(--ease);
}
.nav-item.no-arrow .nav-trigger::after { display: none; }
.nav-item:hover .nav-trigger::after { transform: rotate(-180deg); }

/* Single dropdown */
.single-dropdown {
  position: absolute;
  top: 100%; left: 0;
  width: 230px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(11,29,58,0.1);
  list-style: none;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s var(--ease);
  pointer-events: none;
}
.nav-item:hover .single-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.single-dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  transition: background 0.2s, color 0.2s;
}
.single-dropdown a:hover {
  background: #4553a4;
  color: #fff;
}

/* Mega menu — Resources */
.nav-item.mega-parent { position: static; }

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--c-border-soft);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  pointer-events: none;
  z-index: 999;
}
.nav-item.mega-parent:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr 1.3fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(16px, 3vw, 32px) 44px;
}

.mega-col-group + .mega-col-group { margin-top: 26px; }

.mega-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-navy);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border-soft);
}
.mega-col h4 i { color: var(--c-red); font-size: 13px; }

.mega-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-col ul li a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
  transition: background 0.18s, color 0.18s, transform 0.18s var(--ease);
}
.mega-col ul li a:hover {
  background: #4553a4;
  color: #fff;
  transform: translateX(3px);
}

.mega-featured-item {
  display: block;
  padding: 10px;
  margin: 0 -10px 2px;
  border-radius: 10px;
  transition: background 0.18s;
}
.mega-featured-item:hover { background: #4553a4; color:#fff; }
.mega-featured-item strong {
  display: block;
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-bottom: 3px;
  line-height: 1.35;
}
.mega-featured-item span {
  display: block;
  font-size: 12.5px;
  color: var(--c-subtle);
  line-height: 1.5;
}

.mega-featured-item:hover strong {
    color: #fff; /* hover color */
}
.mega-featured-item:hover span {
  color: #fff;
}
.header-cta-group { display: flex; align-items: center; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--c-navy);
  padding: 8px;
  line-height: 1;
}

/* Scrolled state */
.site-header.scrolled-active .header-top-bar {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.scrolled-active .header-main-bar { height: 68px; }
.site-header.scrolled-active .brand-logo { max-width: 210px; }
.site-header.scrolled-active { box-shadow: 0 2px 16px rgba(11,29,58,0.1); }

/* ==========================================================================
   7. SECTION 1 — HERO
   ========================================================================== */
.tw365-banner-section {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) 20px;
  background: var(--bg-light);
  text-align: center;
}
.tw365-banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(0,103,184,0.07), transparent),
    radial-gradient(ellipse 50% 35% at 20% 90%, rgba(96,177,74,0.05), transparent);
  pointer-events: none;
}
.tw365-banner-container {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
}
.tw365-banner-label {
  display: inline-block;
  margin-bottom: 20px;
}
.tw365-banner-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin: 0 auto 24px;
  max-width: 820px;
}
.tw365-gradient-text {
  display: inline;
  background-image: linear-gradient(92deg, #EC4A2C 0%, #F9BC15 30%, #60B14A 60%, #578ECA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tw365-banner-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto;
}
.tw365-banner-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ==========================================================================
   7B. HERO — LIGHT, TWO-COLUMN, ANIMATED DASHBOARD VISUAL
   ========================================================================== */
.hero-light-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero-blob-1 {
  width: 520px; height: 520px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(0,103,184,0.14) 0%, rgba(0,103,184,0.05) 45%, transparent 72%);
  animation: heroBlobFloat 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 440px; height: 440px;
  bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(96,177,74,0.12) 0%, rgba(96,177,74,0.04) 45%, transparent 72%);
  animation: heroBlobFloat 12s ease-in-out infinite reverse;
}
@keyframes heroBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 22px) scale(1.06); }
}

/* Slowly drifting flowing gradient — gives the hero a living, moving backdrop.
   Kept deliberately light (small blur radius, transform-only animation,
   promoted to its own GPU layer) so it never competes with the slider
   transition or causes jank on lower-powered / mobile devices. */
.hero-flow-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.hero-flow-bg::before,
.hero-flow-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-flow-bg::before {
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  background: conic-gradient(from 0deg,
    rgba(0,103,184,0.14),
    rgba(236,74,44,0.10) 25%,
    rgba(249,188,21,0.10) 50%,
    rgba(96,177,74,0.12) 75%,
    rgba(0,103,184,0.14) 100%);
  animation: heroFlowSpin 40s linear infinite;
}
.hero-flow-bg::after {
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  background: conic-gradient(from 180deg,
    rgba(87,142,202,0.12),
    rgba(96,177,74,0.09) 33%,
    rgba(236,74,44,0.08) 66%,
    rgba(87,142,202,0.12) 100%);
  animation: heroFlowSpin 30s linear infinite reverse;
}
@keyframes heroFlowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-flex {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

/* ---- Content column ---- */
.hero-slider {
  position: relative;
  display: grid;
}
.hero-slide {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  pointer-events: none;
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.08s;
}

.hero-badge {
  display: inline-block;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: 11.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}

.hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0 0 20px;
}

.hero-gradient-text {
  display: inline;
  background-image: linear-gradient(92deg, #EC4A2C 0%, #F9BC15 30%, #60B14A 60%, #578ECA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 560px;
}

/* Capability chips row */
.hero-caps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(11,29,58,0.05);
}
.hero-caps-label {
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-right: 2px;
}
.hero-cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-light);
  border: 1px solid var(--c-border-soft);
  color: var(--c-text);
  font-size: 12.5px;
  font-weight: var(--w-medium);
  padding: 6px 12px;
  border-radius: 30px;
}
.hero-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-dot-blue   { background: var(--c-blue); }
.hero-dot-green  { background: var(--c-green); }
.hero-dot-yellow { background: #F9BC15; }
.hero-dot-red    { background: var(--c-red); }

.hero-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: 100px;
  padding: 15px 28px;
  background: var(--c-blue);
  color: #fff;
  border: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.hero-btn-primary:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,103,184,0.26);
}

.hero-slider-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-nav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
.hero-nav-dot.is-active {
  background: var(--c-blue);
  width: 22px;
  border-radius: 5px;
}
.hero-arrows { display: flex; gap: 8px; }
.hero-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-navy);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-arrow:hover {
  background: var(--bg-light);
  border-color: var(--c-blue);
  color: var(--c-blue);
  transform: translateY(-2px);
}

/* ---- Visual column (animated dashboard mockup) ---- */
.hero-visual-col {
  position: relative;
  z-index: 2;
  animation: heroVisualFadeIn 0.8s var(--ease) 0.15s both;
}
@keyframes heroVisualFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-dashboard-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(11,29,58,0.12);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  animation: heroCardFloat 6s ease-in-out infinite;
}
@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero-dashboard-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-soft);
  background: var(--bg-light);
}
.hero-dashboard-dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FEBC2E; }
.dot-green  { background: #28C840; }
.hero-dashboard-titlebar {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
}

.hero-dashboard-rows {
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-dash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  transition: background var(--dur) var(--ease);
  opacity: 0;
  animation: heroRowIn 0.6s var(--ease) forwards;
  animation-delay: var(--row-delay, 0s);
}
.hero-dash-row:hover { background: var(--bg-light); }
@keyframes heroRowIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-dash-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.icon-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.icon-yellow { background: #FFFBEB; color: #F59E0B; }
.icon-green  { background: var(--c-green-light); color: var(--c-green); }
.icon-pink   { background: #FDF2F8; color: #DB2777; }

.hero-dash-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-dash-text strong {
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-dash-text span {
  font-size: 11.5px;
  color: var(--c-subtle);
}
.hero-dash-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: var(--w-semibold);
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-green  { background: var(--c-green-light); color: #15803D; }
.status-yellow { background: #FFFBEB; color: #B45309; }
.status-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.status-teal   { background: #F0FDFA; color: #0D9488; }

/* Floating accent cards */
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(11,29,58,0.14);
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
  line-height: 1.35;
  z-index: 3;
}
.hero-float-top {
  top: -22px;
  right: -8px;
  animation: heroFloatA 5s ease-in-out infinite;
}
.hero-float-top strong {
  font-size: 20px;
  font-weight: var(--w-black);
  color: var(--c-blue);
  line-height: 1;
}
.hero-float-bottom {
  bottom: -20px;
  left: -14px;
  animation: heroFloatB 5.5s ease-in-out infinite;
}
.hero-float-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-green-light);
  color: var(--c-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
@keyframes heroFloatA {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
@keyframes heroFloatB {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}

/* ==========================================================================
   7C. BRAND LOGO MARQUEE
   ========================================================================== */
.brand-marquee-section {
  background: #578eca;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--c-border-soft);
}
.marquee-featured-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--c-subtle);
  font-size: 11.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 28px;
}
.marquee-featured-label span {
  display: inline-block;
  width: 44px;
  height: 1px;
  background: var(--c-border);
}
.marquee-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: var(--w-bold);
  color: #fff;
  opacity: 0.8;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.marquee-logo i { font-size: 17px; }
.marquee-logo:hover {
  opacity: 1;
  filter: grayscale(0);
  color: var(--c-navy);
}

/* ==========================================================================
   7C. BRAND LOGO MARQUEE — grid/table style (matches reference screenshot)
   ========================================================================== */
.tw-logom-section{
  background:#ffffff;
  padding:0;
  border-top:1px solid #E1E6ED;
  border-bottom:1px solid #E1E6ED;
  overflow:hidden;
}
.tw-logom-wrap{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.tw-logom-track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:0;
  width:max-content;
  animation:tw-logom-scroll 110s linear infinite;
}
.tw-logom-wrap:hover .tw-logom-track{
  animation-play-state:paused;
}
@keyframes tw-logom-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Each logo sits in its own bordered "cell" — flush grid look, no gaps/shadows */
.tw-logom-item{
  flex:0 0 auto !important;
  display:flex;
  align-items:center;
  justify-content:center;
  height:112px;
  min-width:190px;
  padding:20px 32px;
  background:#ffffff;
  border-right:1px solid #E1E6ED;
  transition:background .22s cubic-bezier(.4,0,.2,1);
}
.tw-logom-item img{
  height:auto !important;
  width:auto !important;
  max-width:150px;
  max-height:44px;
  object-fit:contain;
  display:block;
  filter:none;
  opacity:1;
  image-rendering:-webkit-optimize-contrast;
  transition:transform .3s ease;
}
.tw-logom-item:hover{
  background:#F7F9FC;
}
.tw-logom-item:hover img{
  transform:scale(1.05);
}

@media (max-width:1024px){
  .tw-logom-item{ height:96px; min-width:160px; padding:16px 24px; }
  .tw-logom-item img{ max-width:130px; max-height:38px; }
}
@media (max-width:768px){
  .tw-logom-track{ animation-duration:85s; }
  .tw-logom-item{ height:84px; min-width:140px; padding:14px 18px; }
  .tw-logom-item img{ max-width:112px; max-height:34px; }
}
@media (max-width:480px){
  .tw-logom-item{ height:72px; min-width:118px; padding:12px 14px; }
  .tw-logom-item img{ max-width:92px; max-height:28px; }
}
@media (prefers-reduced-motion:reduce){
  .tw-logom-track{ animation:none; }
  .tw-logom-item:hover, .tw-logom-item:hover img{ transform:none; }
}
/* ==========================================================================
   8. SECTION 2 — PROBLEM
   ========================================================================== */
.twc-problem-section {
  background: var(--bg-white);
}
.twc-problem-heading {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.twc-problem-heading h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}
.twc-problem-heading p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
}
.twc-problem-heading em {
  color: var(--c-blue);
  font-style: italic;
}
.twc-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.twc-eyebrow span {
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: var(--c-border);
}

/* Problem grid */
.twc-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}
.twc-problem-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.twc-problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11,29,58,0.07);
  background: #578eca;
}
.twc-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.twc-divider {
  width: 1px;
  height: 34px;
  background: var(--c-border);
  flex-shrink: 0;
}
.twc-problem-card p {
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  line-height: 1.55;
  margin: 0;
}
.twc-problem-card:hover p {
    color: #fff;
}
/* Card color themes */
.blue .twc-icon   { background: #EFF6FF; color: #2563EB; }
.blue .twc-divider  { background: #93C5FD; }
.green .twc-icon  { background: #ECFDF5; color: #059669; }
.green .twc-divider { background: #6EE7B7; }
.orange .twc-icon { background: #FFF7ED; color: #EA580C; }
.orange .twc-divider { background: #FCA861; }
.purple .twc-icon { background: #F5F3FF; color: #7C3AED; }
.purple .twc-divider { background: #C4B5FD; }
.pink .twc-icon   { background: #FDF2F8; color: #DB2777; }
.pink .twc-divider  { background: #F9A8D4; }

/* Footer callout */
.twc-footer-box {
  max-width: 1120px;
  margin: 40px auto 0;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.twc-footer-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: var(--c-blue-mid);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.twc-footer-box p {
  font-size: var(--t-body-lg);
  color: var(--c-text);
  line-height: 1.7;
}
.twc-footer-box strong { color: var(--c-blue); }

/* ==========================================================================
   8B. SECTION 2B — THE FIX (content left / visual right, card layout)
   ========================================================================== */
.twc-fix-section {
  background: var(--bg-light);
}
.twc-fix-card {
  max-width: 1160px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(11,29,58,0.10);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}

.twc-fix-content {
  padding: clamp(36px, 5vw, 64px);
}
.twc-fix-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.twc-fix-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.twc-fix-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.twc-fix-desc strong {
  color: var(--c-navy);
  font-weight: var(--w-bold);
}
.twc-fix-btn { white-space: nowrap; }

/* ---- Visual side ---- */
/* Outer visual slot: gives the framed image its own gutter within the white
   card, mirroring the reference screenshot's inset-photo treatment. */
.twc-fix-visual {
  position: relative;
  min-height: 420px;
  height: 100%;
  padding: 22px 22px 22px 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* The framed "image": rounded, shadowed panel that reads as a photo card */
.twc-fix-image {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,103,184,0.10) 0%, transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(96,177,74,0.10) 0%, transparent 55%),
    var(--bg-light);
  box-shadow: 0 24px 50px rgba(11,29,58,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.twc-fix-illustration {
  width: min(60%, 220px);
  height: auto;
  position: relative;
  z-index: 1;
}
.twc-fix-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.twc-fix-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,29,58,0) 40%, rgba(11,29,58,0.28) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Illustration variant (custom SVG instead of a stock photo) — no darkening overlay needed */
.twc-fix-image--illustration::after { display: none; }
.twc-fix-image--illustration { justify-content: center; }
.twc-fix-illustration { width: min(62%, 232px); position: relative; z-index: 1; filter: drop-shadow(0 18px 30px rgba(11,29,58,0.14)); }
/* Reversed layout used by the Data & Security section (visual first) */
.twc-fix-card--flip {
  grid-template-columns: 0.95fr 1.05fr;
}
.twc-fix-card--flip .twc-fix-visual {
  padding: 22px 0 22px 22px;
}
.twc-fix-blob {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,103,184,0.16) 0%, rgba(96,177,74,0.10) 55%, transparent 78%);
  filter: blur(36px);
  animation: heroBlobFloat 9s ease-in-out infinite;
}
.twc-fix-blob--security {
  background: radial-gradient(circle, rgba(87,142,202,0.18) 0%, rgba(124,58,237,0.10) 55%, transparent 78%);
}

.twc-fix-panel {
  position: absolute;
  width: 208px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px rgba(11,29,58,0.16);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.twc-fix-panel .twc-icon { width: 40px; height: 40px; font-size: 15px; }
.twc-fix-panel-1 { top: 8%;  left: 4%;   animation: fixFloat1 5.5s ease-in-out infinite; }
.twc-fix-panel-2 { top: 40%; right: 0%;  animation: fixFloat2 6s ease-in-out infinite; animation-delay: .5s; }
.twc-fix-panel-3 { bottom: 8%; left: 16%; animation: fixFloat3 5.8s ease-in-out infinite; animation-delay: 1s; }

@keyframes fixFloat1 {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-12px); }
}
@keyframes fixFloat2 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-14px); }
}
@keyframes fixFloat3 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-10px); }
}

/* ==========================================================================
   9. SECTION 3 — CAPABILITIES
   ========================================================================== */
.capabilities-section {
  background: var(--bg-light);
  text-align: center;
}
.capabilities-notice {
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: var(--r-md);
  padding: 22px 26px;
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: left;
  font-size: var(--t-body);
  color: var(--c-text);
  line-height: 1.65;
}
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: left;
}

/* Card */
.cap-box {
  position: relative;
  background:
        radial-gradient(circle at 10% 15%, rgba(236,74,44,.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(249,188,21,.05) 0%, transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(96,177,74,.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(87,142,202,.05) 0%, transparent 30%),
        #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3vw, 36px);
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cap-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
}
.cap-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11,29,58,0.08);
}

/* Top accent bar colors per card */
.cap-box.cap-red::before    { background: var(--c-red); }
.cap-box.cap-green::before  { background: var(--c-green); }
.cap-box.cap-orange::before { background: #F59E0B; }
.cap-box.cap-blue::before   { background: var(--c-blue); }

/* Circular icon badge */
.cap-box-icon-wrap {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.cap-box-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}
.cap-box-icon-wrap svg,
.cap-box-icon-wrap .cap-icon-inner {
  position: relative;
  z-index: 1;
}

.cap-icon-red {
  background: rgba(236, 74, 44, 0.13);
}
.cap-icon-red::before { background: rgba(236, 74, 44, 0.06); }

.cap-icon-green {
  background: rgba(16, 124, 16, 0.12);
}
.cap-icon-green::before { background: rgba(16, 124, 16, 0.06); }

.cap-icon-orange {
  background: rgba(245, 158, 11, 0.15);
}
.cap-icon-orange::before { background: rgba(245, 158, 11, 0.06); }

.cap-icon-blue {
  background: rgba(0, 103, 184, 0.12);
}
.cap-icon-blue::before { background: rgba(0, 103, 184, 0.06); }

.cap-box-body { flex: 1; min-width: 0; }

.cap-box-dash {
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.cap-red .cap-box-dash    { background: var(--c-red); }
.cap-green .cap-box-dash  { background: var(--c-green); }
.cap-orange .cap-box-dash { background: #F59E0B; }
.cap-blue .cap-box-dash   { background: var(--c-blue); }

.cap-box h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 10px;
}
.cap-box p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Colored link variants */
.cap-link {
  font-size: 14px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur);
}
.cap-link:hover { gap: 10px; }
.cap-red .cap-link    { color: var(--c-red); }
.cap-red .cap-link:hover    { color: var(--c-red-hover); }
.cap-green .cap-link  { color: var(--c-green); }
.cap-green .cap-link:hover  { color: #0c5e0c; }
.cap-orange .cap-link { color: #D97706; }
.cap-orange .cap-link:hover { color: #B45309; }
.cap-blue .cap-link   { color: var(--c-blue); }
.cap-blue .cap-link:hover   { color: var(--c-blue-hover); }

/* ==========================================================================
   Responsive — Capabilities
   ========================================================================== */
@media (max-width: 960px) {
  .cap-box-icon-wrap { width: 84px; height: 84px; min-width: 84px; }
}

@media (max-width: 768px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 18px; }
  .cap-box { gap: 18px; padding: 26px 22px; }
  .cap-box-icon-wrap { width: 76px; height: 76px; min-width: 76px; }
}

@media (max-width: 480px) {
  .cap-box { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cap-box-icon-wrap { width: 64px; height: 64px; min-width: 64px; }
}

/* ==========================================================================
   10. SECTION 4 — AI
   ========================================================================== */
.ai-section {
  background: radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, #0d2b3f 0%, transparent 50%),
              linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.ai-glow-1 {
  width: 480px; height: 480px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(14,165,233,0.28), transparent 70%);
}
.ai-glow-2 {
  width: 420px; height: 420px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(16,185,129,0.20), transparent 70%);
}
.ai-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.ai-network svg { width: 100%; height: 100%; }
.ai-section .container { position: relative; z-index: 1; }

.ai-eyebrow {
  display: inline-flex;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.35);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 16px;
  color: #7DD3FC;
  letter-spacing: 1px;
  box-shadow: 0 0 24px rgba(14,165,233,0.15);
}
.ai-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--c-teal);
}
.ai-section .ai-title { color: #ffffff; }
.ai-section .ai-desc { color: #9FB0C9; }

.ai-notice {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid rgba(16,185,129,0.55);
  border-radius: var(--r-md);
  padding: 22px 28px;
  max-width: 860px;
  margin: 0 auto 52px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ai-notice-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal), #0EA5E9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 0 20px rgba(16,185,129,0.35);
}
.ai-notice p {
  font-size: var(--t-body);
  color: #C3CFE0;
  line-height: 1.7;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 28px;
}

/* Card — dark glass, top-anchored icon: deliberately distinct from the light, icon-left capability cards above */
.ai-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: clamp(26px, 2.6vw, 32px) clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.ai-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.ai-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 20px 44px rgba(0,0,0,0.35);
}
.ai-card:hover .ai-card-icon { transform: scale(1.06); }
.ai-card-icon { transition: transform var(--dur) var(--ease); }

/* Circular icon badge, glowing */
.ai-card-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.ai-card-icon svg { width: 30px; height: 30px; position: relative; z-index: 1; }

.ai-icon-blue   { background: rgba(14,165,233,0.16); box-shadow: 0 0 0 1px rgba(14,165,233,0.3) inset, 0 0 26px rgba(14,165,233,0.25); }
.ai-icon-green  { background: rgba(16,185,129,0.16); box-shadow: 0 0 0 1px rgba(16,185,129,0.3) inset, 0 0 26px rgba(16,185,129,0.25); }
.ai-icon-red    { background: rgba(239,68,68,0.16);  box-shadow: 0 0 0 1px rgba(239,68,68,0.3) inset, 0 0 26px rgba(239,68,68,0.25); }
.ai-icon-khaki  { background: rgba(217,193,110,0.18); box-shadow: 0 0 0 1px rgba(217,193,110,0.35) inset, 0 0 26px rgba(217,193,110,0.22); }

.ai-card-body { flex: 1; min-width: 0; }

.ai-card h3 {
  font-size: 16.5px;
  font-weight: var(--w-bold);
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ai-card p {
  font-size: 13.5px;
  color: #96A5BD;
  line-height: 1.65;
}

.ai-footer-bar {
  position: relative;
  background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(0,103,184,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.22);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur) var(--ease);
}
.ai-footer-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--c-teal), var(--c-blue));
}
.ai-footer-bar:hover {
  border-color: rgba(16,185,129,0.4);
  box-shadow: 0 12px 32px rgba(16,185,129,0.1);
}

.ai-footer-icon-wrap {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal), #0EA5E9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(16,185,129,0.3);
  flex-shrink: 0;
}

.ai-footer-text {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}
.ai-footer-text strong {
  color: var(--c-navy);
  font-weight: var(--w-bold);
}
.ai-footer-text .ai-footer-highlight {
  color: var(--c-teal);
  font-weight: var(--w-bold);
}

/* ==========================================================================
   Responsive — AI Section
   ========================================================================== */
@media (max-width: 1100px) {
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ai-notice { flex-direction: column; }
  .ai-card { padding: 24px 22px; }
}

@media (max-width: 560px) {
  .ai-grid { grid-template-columns: 1fr; gap: 16px; }
  .ai-glow-1, .ai-glow-2 { width: 300px; height: 300px; }
   .ai-footer-bar {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
    gap: 14px;
  }
  .ai-footer-bar::before {
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-blue));
  }
}

/* ==========================================================================
   11. SECTION 5 — MICROSOFT ADVANTAGE
   ========================================================================== */
.advantage-section {
  background: var(--bg-light);
  text-align: center;
}
.adv-eyebrow { color: var(--c-blue); }
.adv-title   { color: var(--c-navy); }
.adv-desc    { color: var(--c-muted); }

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 20px;
  align-items: start;   /* FIX: stop equal-height stretch, kills the blank space */
  text-align: left;
  justify-content: center;   /* centers the pair instead of stretching full-width */
  max-width: 660px;          /* was effectively ~1200px via .container */
  margin: 0 auto 32px;
  gap: 16px;  
}
.comp-box {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px 24px; 
}
.comp-box.native-box {
  background: #F0F7FF;
  border-color: #BFDBFE;
}
.comp-box h3 {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.3;
}
.comp-x     { color: #EF4444; font-size: 0; flex-shrink: 0; }
.comp-check { color: var(--c-teal); font-size: 17px; flex-shrink: 0; }
.comp-box ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.comp-box li {
  font-size: 13px;
  color: var(--c-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.comp-x::before{
    content: "\f05e";
    font-family: "Font Awesome 6 Free"; /* or Font Awesome 7 Free */
    font-weight: 900;
    font-size: 18px;
}
.comp-box li::before {
    content: "\f05e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #EF4444;
    font-size: 14px;
}
.native-box li { color: var(--c-text); }
.native-box li::before { content: '✓'; color: var(--c-teal); }

/* Tablet — still 2 columns, just a bit narrower */
@media (max-width: 720px) {
  .comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 12px;
    max-width: 480px;
  }
  .comp-box { padding: 18px 18px; }
}

/* Mobile — stack, centered, capped width so it doesn't stretch edge-to-edge */
@media (max-width: 480px) {
  .comparison-grid {
    grid-template-columns: minmax(0, 320px);
    max-width: 320px;
    gap: 12px;
  }
}

/* ==========================================================================
   SharePoint vs Titan comparison — repositioned section (after logo marquee)
   ========================================================================== */
.sp-compare-section {
  background: var(--bg-light);
  padding-top: clamp(48px, 6vw, 72px);
}

.sp-compare-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  box-shadow: 0 24px 60px rgba(11, 29, 58, 0.06);
}

.sp-compare-content { text-align: left; }

.sp-callout-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #2e6b1d;
  margin-bottom: 18px;
}

.sp-compare-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.sp-compare-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 480px;
}

/* Table-in-a-box (replaces the old flat photo treatment) */
.sp-compare-table-wrap {
  background: var(--bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(14px, 2vw, 22px);
}

.sp-vs-table { display: flex; flex-direction: column; gap: 4px; }

.sp-vs-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 12px 14px;
}
.sp-vs-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 7px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.sp-vs-head-before { background: rgba(239, 68, 68, 0.1); color: #000; }
.sp-vs-head-after   { background: rgba(16, 185, 129, 0.12); color: #000; justify-self: end; }
.sp-vs-head-spacer  { width: 16px; }

.sp-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px 14px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--c-border-soft);
  margin-bottom: 8px;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.sp-vs-row:last-child { margin-bottom: 0; }
.sp-vs-row:hover {
  border-color: var(--c-border);
  box-shadow: 0 6px 18px rgba(11,29,58,0.06);
  transform: translateY(-1px);
}

.sp-vs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  font-size: 10.5px;
  margin-right: 10px;
}
.sp-vs-icon-bad  { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.sp-vs-icon-good { background: rgba(16, 185, 129, 0.15); color: var(--c-teal); }

.sp-vs-before {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-muted);
}
.sp-vs-arrow {
  color: var(--c-border);
  font-size: 13px;
}
.sp-vs-after {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-navy);
  font-weight: var(--w-semibold);
}

/* ==========================================================================
   12. SECTION 6 — SCALE
   ========================================================================== */
.scale-section {
  background: var(--bg-white);
  text-align: center;
}
.scale-eyebrow {
  display: block;
  color: var(--c-muted) !important;
  text-transform: none !important;
  letter-spacing: 1px !important;
  margin-bottom: 14px;
}
.scale-headline {
  font-size: clamp(56px, 10vw, 72px);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -3px;
  margin-bottom: 14px;
}
.scale-num-blue  { color: var(--c-blue); }
.scale-num-green { color: var(--c-green); }
.scale-sub {
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: var(--w-bold) !important;
  margin-bottom: 18px;
}
.scale-desc {
  max-width: 600px;
  margin: 0 auto 28px;
}

/* ==========================================================================
   13. SECTION 7 — INDUSTRIES
   ========================================================================== */
.industries-section {
  background: var(--bg-light);
  text-align: center;
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: left;
}
.industry-card {
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.ind-manufacturing { background: linear-gradient(140deg, #0B1D3A, #1E3A5F); }
.ind-pharma        { background: linear-gradient(140deg, #0A3B2E, #166534); }
.ind-aerospace     { background: linear-gradient(140deg, #1A2850, #2D4070); }
.ind-govt          { background: linear-gradient(140deg, #1A1A3A, #2D2D5A); }
.ind-finance       { background: linear-gradient(140deg, #3B1A1A, #6B2D2D); }
.ind-icon { font-size: 26px; margin-bottom: 14px; }
.industry-card h3 {
  font-size: 15px;
  font-weight: var(--w-bold);
  color: #fff;
  margin-bottom: 8px;
}
.industry-card p {
  font-size: 13px;
  color: #94A3B8;
  line-height: 1.55;
  flex: 1;
}
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}
.tag-lbl {
  font-size: 10.5px;
  font-weight: var(--w-semibold);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 9px;
  border-radius: 4px;
  color: #94A3B8;
}

/* ==========================================================================
   14. SECTION 8 — CLIENT PORTAL
   ========================================================================== */
.portal-section {
  background: var(--bg-white);
}
.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.portal-eyebrow { color: var(--c-teal) !important; }
.portal-content h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.portal-content > p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 24px;
}
.portal-bullets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.p-bullet {
  font-size: var(--t-small);
  font-weight: var(--w-semibold);
  padding: 11px 14px;
  background: var(--bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: border-color var(--dur);
}
.p-bullet:hover { border-color: var(--c-teal); }
.portal-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.portal-btn:hover {
  border-color: var(--c-navy);
  background: var(--bg-light);
  transform: translateY(-2px);
}

/* Portal mockup */
.portal-mockup {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 16px 48px rgba(11,29,58,0.08);
}
.portal-mockup-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border-soft);
  margin-bottom: 14px;
}
.portal-mockup-title {
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
}
.portal-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 8px;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  transition: background var(--dur);
}
.portal-doc-row:last-child { border-bottom: none; }
.portal-doc-row:hover { background: var(--bg-light); }
.portal-doc-name {
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-doc-info span {
  font-size: var(--t-xs);
  color: var(--c-muted);
  display: block;
  margin-top: 2px;
}
.portal-status {
  font-size: 11px;
  font-weight: var(--w-bold);
  padding: 4px 12px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ps-delivered { background: #DCFCE7; color: #15803D; }
.ps-pending   { background: #FEF3C7; color: #B45309; }
.ps-approved  { background: #DBEAFE; color: #1D4ED8; }
.ps-signed    { background: #F3E8FF; color: #7E22CE; }

/* ==========================================================================
   15. SECTION 9 — ALL CAPABILITIES
   ========================================================================== */
.all-caps-section {
  background: var(--bg-light);
  text-align: center;
}
.all-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.cap-item-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cap-item-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11,29,58,0.06);
}
.cap-item-card h3 {
  font-size: 15.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 8px;
}
.cap-item-card p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}

/* ==========================================================================
   16. SECTION 10 — TESTIMONIALS
   ========================================================================== */
.testimonials-section {
  background: var(--bg-white);
  text-align: center;
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 48px;
}
.test-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.test-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11,29,58,0.06);
}
.stars { color: #2e6b1d; font-size: 15px; margin-bottom: 14px; letter-spacing: 2px; }
.test-card q {
  font-size: var(--t-body-lg);
  color: var(--c-text);
  font-weight: var(--w-medium);
  display: block;
  margin-bottom: 20px;
  line-height: 1.7;
  font-style: italic;
}
.profile { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 30px;
  height: 30px;
  background: var(--c-blue);
  color: #fff;
  font-weight: var(--w-bold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.profile-meta h4 { font-size: 14px; font-weight: var(--w-bold); color: var(--c-navy); }
.profile-meta p  { font-size: var(--t-xs); color: var(--c-muted); }
.logo-marquee-title {
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-muted);
  margin-bottom: 18px;
}
.logo-container-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 28px);
  opacity: 0.45;
}
.logo-item {
  font-size: 13px;
  font-weight: var(--w-black);
  color: var(--c-navy);
  letter-spacing: 1.5px;
  border: 1px solid var(--c-border);
  padding: 9px 14px;
  border-radius: var(--r-md);
}

/* ==========================================================================
   17. SECTION 11 — FAQ
   ========================================================================== */
.faq-section { background: var(--bg-light); }
.faq-list {
  max-width: 1160px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  align-items: start;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
  border-width: 0px 0px 0px 4px;
  border-left-color: #818285;
  box-shadow: 0 10px 24px rgba(20, 30, 70, 0.06);
}
.faq-item:hover { box-shadow: 0 10px 28px rgba(10,102,194,0.12); }
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: color var(--dur);
  line-height: 1.45;
}
.faq-trigger:hover { color: var(--c-blue); }
.faq-trigger[aria-expanded="true"] { color: var(--c-blue); }
.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: transform 0.25s var(--ease), color var(--dur);
}
.faq-icon svg { width: 100%; height: 100%; }
.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  color: var(--c-blue);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height 0.35s var(--ease), padding 0.25s var(--ease);
}
.faq-answer.open { max-height: 300px; padding: 0 22px 20px; }
.faq-answer p { font-size: 14.5px; color: var(--c-muted); line-height: 1.75; }

@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; max-width: 720px; }
}
@media (max-width: 480px) {
  .faq-trigger { padding: 16px 18px; font-size: 14.5px; gap: 12px; }
  .faq-answer { padding: 0 18px; }
  .faq-answer.open { padding: 0 18px 16px; }
}

/* ==========================================================================
   18. SECTION 12 — EXPLORE / ROI
   ========================================================================== */
.explore-section { background: var(--bg-white); text-align: center; }
.explore-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.explore-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.explore-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(11,29,58,0.07);
}
.explore-card-highlight { border-color: var(--c-blue); }
.explore-card-icon {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.explore-card h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--c-navy);
}
.explore-card p {
  font-size: var(--t-body);
  color: var(--c-muted);
  line-height: 1.65;
}
.explore-btn { margin-top: 8px; font-size: 14px; padding: 11px 22px; }

/* ==========================================================================
   19. SECTION 13 — CTA
   ========================================================================== */
.dark-cta-section {
  background: var(--bg-light);
  padding: var(--section-pad) 0;
}
.dark-cta-inner {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.dark-cta-badge {
  display: inline-block;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-blue);
  margin-bottom: 22px;
  letter-spacing: 0;
  text-transform: none;
}
.dark-cta-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.dark-cta-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 32px;
}
.dark-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.dark-cta-primary-btn {
  background: #4553a4;
  color: #fff;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  transition: background var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur);
}
.dark-cta-primary-btn:hover {
  background: var(--c-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(236,74,44,0.25);
}
.dark-cta-outline-btn {
  background: transparent;
  color: var(--c-navy);
  border: 1.5px solid var(--c-border);
  padding: 14px 30px;
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.dark-cta-outline-btn:hover {
  border-color: var(--c-navy);
  background: #fff;
  transform: translateY(-2px);
}
.dark-cta-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
}
.dark-cta-checks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  background: #fff;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: border-color var(--dur);
}
.dark-cta-checks span:hover { border-color: var(--c-blue); }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer-new {
  background: var(--bg-footer);
  color: #94A3B8;
  padding: clamp(48px, 6vw, 72px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-logo {
  font-size: 19px;
  font-weight: var(--w-black);
  color: #fff;
  margin-bottom: 14px;
}
.footer-brand-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.7;
  margin-bottom: 20px;
}
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badge {
  font-size: 11px;
  font-weight: var(--w-semibold);
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  color: #CBD5E1;
  white-space: nowrap;
  transition: border-color var(--dur);
}
.footer-badge:hover { border-color: rgba(255,255,255,0.3); }
.footer-links-group h4 {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #CBD5E1;
  margin-bottom: 16px;
}
.footer-links-group ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links-group a {
  font-size: 13px;
  color: #64748B;
  transition: color var(--dur);
}
.footer-links-group a:hover { color: #fff; }
.footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #3F5069;
}
.footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom-links a { color: #3F5069; transition: color var(--dur); }
.footer-bottom-links a:hover { color: #94A3B8; }

/* ==========================================================================
   21. RESPONSIVE — MOBILE NAVIGATION
   ========================================================================== */
@media (max-width: 1024px) {
  body { padding-top: 72px; }
  .header-top-bar { display: none !important; }
  .header-main-bar { height: 72px; }
  .nav-toggle { display: block; }
  .header-cta-group { display: none !important; }
  .brand-logo,
  .site-header.scrolled-active .brand-logo { max-width: 180px; }

  .main-nav-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    padding: 12px clamp(16px, 4vw, 28px) 28px;
    gap: 0;
    height: auto;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav-menu.active { display: flex; }

  .nav-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .nav-trigger {
    padding: 15px 0;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--c-border-soft);
    height: auto;
  }
  .single-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 14px;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-left: 2px solid var(--c-blue-mid);
    margin-bottom: 8px;
  }
  .nav-item.open .single-dropdown { display: block !important; }
  .nav-item.open .nav-trigger::after { transform: rotate(-180deg); }
  .single-dropdown a { padding: 10px 14px; border-bottom: 1px solid var(--c-border-soft); }
  .single-dropdown a:last-child { border-bottom: none; }

  /* Mega menu → mobile accordion */
  .mega-dropdown {
    position: static;
    width: 100%;
    background: transparent;
    border-top: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    margin-bottom: 8px;
  }
  .nav-item.open .mega-dropdown { display: block !important; }
  .mega-panel {
    display: block;
    max-width: none;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--c-blue-mid);
  }
  .mega-col { margin-bottom: 8px; }
  .mega-col-group + .mega-col-group { margin-top: 14px; }
  .mega-col h4 { border-bottom: none; padding-bottom: 6px; margin-bottom: 8px; }
  .mega-col ul li a { padding: 9px 10px; }
  .mega-featured-item { padding: 8px 10px; }
}

/* ==========================================================================
   21B. RESPONSIVE — HERO & MARQUEE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-light-section { padding: 108px 0 60px; }
  .hero-flex {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-caps-row { justify-content: center; }
  .hero-btns { justify-content: center; }
  .hero-visual-col { max-width: 480px; margin: 48px auto 0; padding: 0 20px; }
  .hero-float-top { top: -16px; right: 6px; }
  .hero-float-bottom { bottom: -16px; left: 6px; }
  .twc-fix-card,
  .twc-fix-card--flip { grid-template-columns: 1fr; }
  .twc-fix-visual { min-height: 320px; order: -1; padding: 0 0 0 0; }
  .twc-fix-card--flip .twc-fix-visual { padding: 0; }
  .twc-fix-image { min-height: 320px; border-radius: 0; box-shadow: none; }
  .twc-fix-content { text-align: center; }
  .twc-fix-title { margin-left: auto; margin-right: auto; }
  .twc-fix-desc { margin-left: auto; margin-right: auto; }
  .twc-fix-btn { margin: 0 auto; }
}
@media (max-width: 768px) {
  .hero-light-section { padding: 96px 0 52px; }
  .hero-title { letter-spacing: -0.4px; }
  .hero-badge { font-size: 10.5px; letter-spacing: 1.2px; padding: 7px 14px; }
  .hero-caps-row { padding: 12px; gap: 8px; }
  .hero-caps-label { width: 100%; text-align: center; margin-bottom: 4px; }
  .hero-dashboard-card { max-width: 92vw; }
  .hero-visual-col { padding: 0 12px; }
  .hero-float-card { font-size: 11px; padding: 10px 13px; }
  .hero-float-top strong { font-size: 17px; }
}
@media (max-width: 560px) {
  .hero-title { font-size: clamp(26px, 7.5vw, 32px); }
  .hero-desc { font-size: 14.5px; }
  .hero-btns { flex-direction: column; align-items: center; gap: 18px; }
  .hero-btn-primary { width: 100%; max-width: 300px; justify-content: center; }
  .hero-cap-pill { font-size: 11.5px; padding: 5px 10px; }
  .hero-dash-text strong { font-size: 12.5px; }
  .hero-dash-status { font-size: 10px; padding: 4px 9px; }
  .hero-float-top { top: -14px; right: 0; }
  .hero-float-bottom { bottom: -14px; left: 0; }
  .marquee-track { gap: 40px; }
  .marquee-logo { font-size: 16px; }
}
@media (max-width: 400px) {
  .hero-light-section { padding: 88px 0 44px; }
  .hero-badge { font-size: 10px; letter-spacing: 1px; padding: 6px 12px; }
  .hero-visual-col { padding: 0 6px; }
  .hero-float-card { position: static; margin: 10px auto 0; max-width: 220px; justify-content: center; }
  .hero-float-top, .hero-float-bottom { animation: none; }
}

/* ==========================================================================
   22. RESPONSIVE — TABLET & MOBILE
   ========================================================================== */
@media (max-width: 1150px) {
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .portal-grid { grid-template-columns: 1fr; gap: 40px; }
  .portal-visual { max-width: 520px; margin: 0 auto; }
  .sp-compare-card { grid-template-columns: 1fr; }
  .sp-compare-content { text-align: center; }
  .sp-compare-desc { margin-left: auto; margin-right: auto; }
  .all-caps-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-grid { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
  :root {
    --t-h2: clamp(22px, 6vw, 30px);
    --t-body-lg: 15px;
    --section-pad: clamp(48px, 7vw, 64px);
  }

  .twc-problem-grid { grid-template-columns: 1fr; }
  .twc-fix-panel { width: 168px; padding: 11px 13px; gap: 9px; }
  .twc-fix-panel .twc-icon { width: 34px; height: 34px; font-size: 13px; }
  .twc-fix-visual,
  .twc-fix-image { min-height: 280px; }
  .twc-fix-illustration { width: min(50%, 170px); }
  .twc-fix-panel-1 { left: 6%; }
  .twc-fix-panel-2 { right: 6%; }
  .twc-fix-panel-3 { left: 14%; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-cards-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-col { grid-column: 1 / -1; }
  .twc-footer-box { flex-direction: column; text-align: center; }

  .tw365-banner-title { font-size: clamp(26px, 7vw, 38px); }
  .scale-headline { font-size: clamp(48px, 14vw, 72px); letter-spacing: -2px; }
  .section-desc,
  .adv-desc,
  .tw365-banner-desc { margin-bottom: 36px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .industry-grid, .all-caps-grid { grid-template-columns: 1fr; }
  .portal-bullets { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .sp-vs-row { grid-template-columns: 1fr; gap: 6px; }
  .sp-vs-arrow { display: none; }
  .sp-vs-head-row { grid-template-columns: 1fr; gap: 8px; }
  .sp-vs-head-after { justify-self: start; }
  .sp-vs-head-spacer { display: none; }
  .twc-fix-panel { width: 148px; font-size: 12px; }
  .twc-fix-panel-1 { left: 3%; top: 4%; }
  .twc-fix-panel-2 { right: 3%; top: 42%; }
  .twc-fix-panel-3 { left: 12%; bottom: 4%; }
  .twc-fix-visual,
  .twc-fix-image { min-height: 260px; }
  .twc-fix-illustration { width: min(46%, 150px); }
  .tw365-banner-buttons { flex-direction: column; align-items: center; }
  .tw365-btn-primary,
  .tw365-btn-secondary { width: 100%; max-width: 300px; justify-content: center; }
  .dark-cta-btns { flex-direction: column; align-items: center; }
  .dark-cta-primary-btn,
  .dark-cta-outline-btn { width: 100%; max-width: 320px; justify-content: center; }
}

@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .footer-bottom-links { gap: 12px; }
}

/*ROI Page CSS*/
/* ===== PAGE WRAPPER =====
   Width matches the site's .container (1200px) and top padding matches
   .hero-light-section so the fixed header never overlaps the content on
   any breakpoint. */
.tw-roi-page {
  /* Scoped, contrast-safe text tokens (all pass WCAG AA on white/near-white) */
  --roi-ink:    #1a1a18;
  --roi-body:   #3f3e3a;
  --roi-muted:  #6b6a62;
  --roi-faint:  #86847a;
  --roi-line:   #d8d6cc;
  --roi-panel:  #f7f6f2;

  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(120px, 16vw, 156px) clamp(16px, 3vw, 32px) clamp(56px, 7vw, 84px);
}

@media (max-width: 1024px) { .tw-roi-page { padding-top: 108px; } }
@media (max-width: 768px)  { .tw-roi-page { padding-top: 96px; } }
@media (max-width: 400px)  { .tw-roi-page { padding-top: 88px; } }

/* ===== HEADER ===== */
.tw-roi-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.tw-roi-header .eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #ec4a2c;
  background: #E1F5EE;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
.tw-roi-header h1 {
  font-family: var(--font);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #1a1a18;
  line-height: 1.2;
  margin-bottom: .75rem;
}
.tw-roi-header .sub {
  font-size: 16px;
  color: var(--roi-body);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ===== COMBINED TOTAL BANNER ===== */
.combined-banner {
  background: #4553a4;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.combined-banner .cb-label {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.combined-banner .cb-total {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 700;
  color: #f9bc15;
  line-height: 1;
}
.combined-banner .cb-sub {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
}
.combined-banner .cb-tiles {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-tile {
  text-align: center;
  min-width: 100px;
}
.cb-tile .ct-val {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.cb-tile .ct-lbl {
  font-size: 14px;
  color: rgba(255,255,255);
  margin-top: 2px;
  white-space: nowrap;
}
.cb-divider { width: 1px; background: rgba(255,255,255,.15); align-self: stretch; }

/* ===== TABS ===== */
.tw-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.tw-tab-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--roi-line);
  background: #fff;
  color: var(--roi-body);
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tw-tab-btn i { font-size: 15px; }
.tw-tab-btn:hover { background: var(--roi-panel); border-color: var(--roi-faint); color: #1a1a18; }
.tw-tab-btn.active {
  background: #4553a4;
  border-color: #4553a4;
  color: #fff;
  font-weight: 500;
}

/* ===== MODULE PANELS ===== */
.tw-panel { display: none; }
.tw-panel.active { display: block; }

/* ===== CALCULATOR LAYOUT — inputs left, results right ===== */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .calc-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.calc-inputs-col .inputs-grid { margin-bottom: 1rem; }
.calc-results-col .results-band { margin-bottom: 0; height: 100%; }

.mod-desc {
  font-size: 13.5px;
  color: var(--roi-body);
  line-height: 1.65;
  padding: 12px 16px;
  background: #E1F5EE;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  border-left: 3px solid #1D9E75;
}
.mod-desc strong { color: #4553a4; font-weight: 500; }

.dmc {
    background: #f5faff !important;
    border-left: 3px solid #1d9e75!important;
}

.podb {
    background: #fff8e3 !important;
    border-left: 3px solid #4553a4!important;
}

.cpbg{
  background: #fee0db !important;
  border-left: 3px solid #f9bc15!important;
}

.workbg{
  background: #cbfcbe !important;
  border-left: 3px solid #ec4a2c!important;
}
div#panel-dms {
    margin-bottom: 15px !important;
}


/* ===== INPUTS GRID ===== */
.inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}
.tw-field {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.tw-field label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roi-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.field-row { display: flex; align-items: center; gap: 10px; }
.field-row input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--roi-line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.field-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4553a4;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #4553a4;
}
.field-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4553a4;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #4553a4;
}
.field-val {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: #1a1a18;
  min-width: 58px;
  text-align: right;
  white-space: nowrap;
}

/* ===== RESULTS BAND ===== */
.results-band {
  background: var(--roi-panel);
  border: 1px solid var(--roi-line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.results-title {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--roi-muted);
  font-weight: 500;
  margin-bottom: 14px;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 540px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat-card {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.stat-card .s-label {
  font-size: 11px;
  color: var(--roi-muted);
  margin-bottom: 5px;
  line-height: 1.3;
}
.stat-card .s-val {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: #4553a4;
  line-height: 1.1;
}
.stat-card .s-sub { font-size: 11px; color: var(--roi-faint); margin-top: 3px; }

/* ===== BREAKDOWN ===== */
.breakdown-list {
  border-top: 1px solid var(--roi-line);
  padding-top: 12px;
}
.b-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--roi-body);
}
.b-label { display: flex; align-items: center; gap: 7px; }
.b-label i { font-size: 15px; color: #1D9E75; flex-shrink: 0; }
.b-num {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  color: #1a1a18;
  white-space: nowrap;
}
.b-row.total {
  border-top: 1px solid var(--roi-faint);
  margin-top: 6px;
  padding-top: 10px;
}
.b-row.total .b-label { font-weight: 500; color: #1a1a18; font-size: 14px; }
.b-row.total .b-num { color: #4553a4; font-size: 16px; font-weight: 700; }

/* ===== ASSUMPTIONS ===== */
.assumptions {
  font-size: 12.5px;
  color: var(--roi-muted);
  line-height: 1.6;
  padding: 10px 14px;
  border: 1px solid var(--roi-line);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  background: #fff;
}
.assumptions span { color: var(--roi-body); font-weight: 500; }

/* ===== LEAD CAPTURE ===== */
.lead-capture {
  background: #fff;
  border: 1px solid var(--roi-line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.lead-capture h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #1a1a18;
  margin-bottom: .35rem;
}
.lead-capture p { font-size: 13px; color: var(--roi-body); margin-bottom: 1rem; line-height: 1.5; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-form input[type="text"],
.lead-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  height: 42px;
  border: 1px solid var(--roi-line);
  border-radius: 8px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1a1a18;
  background: #f5f4f0;
  outline: none;
  transition: border-color .15s;
}
.lead-form input:focus { border-color: #ec4a2c; background: #fff; }
.lead-form input::placeholder { color: var(--roi-faint); }
.lead-form .btn-primary {
  height: 42px;
  padding: 0 22px;
  background: #ec4a2c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.lead-form .btn-primary:hover { background: #4553a4; }
.lead-success {
  display: none;
  font-size: 14px;
  color: #ec4a2c;
  font-weight: 500;
  padding: 8px 0;
}
.lead-success i { margin-right: 6px; }

/* ===== CTA BAND ===== */
.cta-band {
  background: linear-gradient(135deg, #4553a4 0%, #ec4a2c 100%);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cta-band .cta-copy { flex: 1; min-width: 220px; }
.cta-band .cta-copy strong {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}
.cta-band .cta-copy p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; }
.cta-band .cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-white {
  height: 42px;
  padding: 0 20px;
  background: #fff;
  color: #4553a4;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.btn-white:hover { opacity: .9; }
.btn-outline-white {
  height: 42px;
  padding: 0 20px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.btn-outline-white:hover { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); }

/* ===== FOOTER NOTE =====
   Previously 11.5px / #888780 on transparent background — failed contrast
   review (client screenshot). Now a proper bordered panel, AA-compliant
   text color, and larger size so it reads as intentional fine print
   rather than disappearing. */
.tw-footnote {
  font-size: 13px;
  color: var(--roi-body);
  line-height: 1.65;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 22px;
  background: var(--roi-panel);
  border: 1px solid var(--roi-line);
  border-radius: 10px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .calc-grid { gap: 20px; }
}
@media (max-width: 600px) {
  .tw-roi-page { padding-left: 1rem; padding-right: 1rem; padding-bottom: 3rem; }
  .combined-banner { flex-direction: column; text-align: center; }
  .combined-banner .cb-tiles { justify-content: center; }
  .cb-divider { display: none; }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band .cta-btns { justify-content: center; }
  .tw-footnote { padding: 14px 16px; font-size: 12.5px; }
}

/* ==========================================================================
   CLIENT PORTAL PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, buttons, section
   eyebrow/title/desc, .all-caps-grid / .cap-item-card, .sp-compare-*,
   .test-grid / .test-card, .faq-*, .dark-cta-*, .portal-mockup) already
   exists in style.css and is reused as-is — do NOT duplicate those rules
   here. Paste this whole block into style.css (e.g. at the end) whenever
   convenient; it only adds new class names.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-muted), var(--c-red), var(--c-blue), var(--c-border),
   var(--bg-light), var(--font), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required for this page — the header scroll state, mobile
   nav accordion, FAQ accordion and scroll-reveal in main.js all work off
   the existing class names (.site-header, .nav-item, .faq-item,
   .reveal-card) used above.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------------- */
.portal-hero-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
}

.portal-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.portal-hero-title {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 16px 0 20px;
}

.portal-hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 30px;
}

.portal-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.portal-hero-trust {
  font-size: 13.5px;
  color: var(--c-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.portal-hero-trust strong { color: var(--c-navy); font-weight: var(--w-semibold); }
.hero-trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4553a4;
  display: inline-block;
}

.portal-visual { width: 100%; }

/* ----------------------------------------------------------------------
   2. MANUAL-WORK / STEPS BAND (dark panel)
   ---------------------------------------------------------------------- */
.portal-steps-section {
  background: var(--bg-dark);
  padding: var(--section-pad) 0;
}

.portal-steps-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.portal-steps-eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 16px;
}

.portal-steps-title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.22;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.portal-steps-desc {
  font-size: var(--t-body-lg);
  color: #C6C9CF;
  line-height: 1.75;
  padding-bottom: 10px;
}

.portal-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.portal-step:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.09);
}

.portal-step-num {
  font-family: var(--font);
  font-weight: var(--w-bold);
  color: #2e6b1d;
  font-size: 14px;
  min-width: 18px;
}

.portal-step-text {
  font-size: 14px;
  color: #E8EAED;
  line-height: 1.6;
}
.portal-step-text b { color: #fff; font-weight: var(--w-semibold); }

/* ----------------------------------------------------------------------
   3. SMALL ICON CHIP for capability cards
   (drops into the existing .cap-item-card without changing it)
   ---------------------------------------------------------------------- */
.cap-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: rgb(240 252 237);
  color: #2e6b1d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 16px;
  margin-bottom: 14px;
}

/* Colored "who" label used inside use-case card titles */
.uc-who { color: #2e6b1d; }

/* ----------------------------------------------------------------------
   4. INDUSTRY / BEST-FIT PILL STRIP
   ---------------------------------------------------------------------- */
.portal-industry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-industry-pill {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portal-industry-pill:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------
   5. METRICS BAND (sits above the reused testimonial cards)
   ---------------------------------------------------------------------- */
.portal-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  margin-bottom: 52px;
}

.portal-metric-num {
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 42px;
  color: #2e6b1d;
  line-height: 1;
  letter-spacing: -1px;
}
.portal-metric-num small { font-size: 24px; font-weight: var(--w-bold); }

.portal-metric-label {
  font-size: 14.5px;
  color: var(--c-muted);
  margin-top: 10px;
}

/* ----------------------------------------------------------------------
   6. BACKGROUND ALTERNATION
   Sitewide utility: some sections share a class (.all-caps-section,
   .sp-compare-section, .capabilities-section, etc.) whose default
   background is var(--bg-light). Whenever two of those land back-to-back
   it flattens that part of the page, so this utility forces
   var(--bg-white) on the specific instance that needs it, to restore the
   light/white alternating rhythm. .section-bg-white is the general-purpose
   name; .portal-section-white is a legacy alias kept for the client
   portal page markup. Defined at equal specificity to the section rules
   above but loaded after them, so it wins — no !important needed.
   ---------------------------------------------------------------------- */
.section-bg-white,
.portal-section-white {
  background: var(--bg-white);
}

/* ----------------------------------------------------------------------
   7. TESTIMONIALS CAROUSEL
   Wraps the existing, untouched .test-card design. Shows 2 cards per
   view on tablet/desktop, 1 per view on mobile — fully responsive,
   with arrow nav, dot pagination, and touch-swipe (see client-portal.js).
   ---------------------------------------------------------------------- */
.test-carousel {
  position: relative;
  padding: 0 56px;
  margin-bottom: 40px;
}

.test-carousel-viewport {
  overflow: hidden;
}

.test-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s var(--ease);
}

.test-carousel-track .test-card {
  flex: 0 0 calc(50% - 12px);
  min-width: 0;
}

.test-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 24px rgba(11, 29, 58, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.test-carousel-arrow svg { width: 20px; height: 20px; }
.test-carousel-arrow:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
  transform: translateY(-50%) scale(1.06);
}
.test-carousel-prev { left: 0; }
.test-carousel-next { right: 0; }

.test-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
}
.test-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--c-border);
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.test-carousel-dot.is-active {
  width: 22px;
  background: var(--c-red);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .portal-hero-grid,
  .portal-steps-inner,
  .portal-metrics {
    grid-template-columns: 1fr;
  }
  .portal-visual { max-width: 560px; margin: 0 auto; }
  .portal-steps-list { margin-top: 8px; }
}

@media (max-width: 768px) {
  .portal-hero-section { padding: 108px 0 52px; }
  .portal-hero-desc { max-width: none; }
  .portal-steps-section { padding: var(--section-pad-sm) 0; }

  /* Carousel: 1 card per view, arrows off, dots + swipe take over */
  .test-carousel { padding: 0; }
  .test-carousel-track .test-card { flex: 0 0 100%; }
  .test-carousel-track { gap: 16px; }
  .test-carousel-arrow { display: none; }
}

@media (max-width: 480px) {
  .portal-hero-section { padding: 96px 0 44px; }
  .portal-hero-cta { flex-direction: column; align-items: stretch; }
  .portal-hero-cta .btn { text-align: center; }
  .portal-metrics { gap: 18px; }
}

/* ==========================================================================
   VIDEO SECTION — "Give Your Clients a Portal, Not Another Email Thread"
   ========================================================================== */
.portal-video-section { background: var(--bg-white); }

.portal-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.portal-video-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 16px;
}
.portal-video-eyebrow i { font-size: 11px; }

.portal-video-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.portal-video-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 24px;
}

.portal-video-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.portal-video-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
}
.portal-video-points i {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  background: var(--c-green-light);
  color: var(--c-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ---- Thumbnail / trigger ---- */
.portal-video-visual { width: 100%; }

.portal-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-navy);
  box-shadow: 0 24px 60px rgba(11, 29, 58, 0.16);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.portal-video-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(11, 29, 58, 0.22);
}
.portal-video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.portal-video-thumb:hover img {
  transform: scale(1.04);
  filter: brightness(0.85);
}
.portal-video-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,29,58,0.05) 0%, rgba(11,29,58,0.35) 100%);
}

.portal-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-red);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.portal-video-play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.portal-video-thumb:hover .portal-video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--c-red);
  color: #fff;
}
.portal-video-play-btn::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  animation: portalPlayPulse 2.4s ease-out infinite;
}
@keyframes portalPlayPulse {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ==========================================================================
   VIDEO MODAL
   ========================================================================== */
.portal-video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.portal-video-modal.is-open { display: flex; }

.portal-video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 15, 30, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.portal-video-modal.is-open .portal-video-modal-backdrop { opacity: 1; }

.portal-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  z-index: 1;
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.portal-video-modal.is-open .portal-video-modal-inner {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.portal-video-modal-close {
  position: absolute;
  top: -48px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portal-video-modal-close:hover {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: rotate(90deg);
}
.portal-video-modal-close svg { width: 18px; height: 18px; }

.portal-video-modal-frame {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #000;
}
.portal-video-modal-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.portal-video-modal-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE — Video section
   ========================================================================== */
@media (max-width: 1024px) {
  .portal-video-grid { grid-template-columns: 1fr; gap: 40px; }
  .portal-video-visual { max-width: 560px; margin: 0 auto; }
  .portal-video-desc { max-width: none; }
}
@media (max-width: 768px) {
  .portal-video-play-btn { width: 68px; height: 68px; }
  .portal-video-play-btn svg { width: 24px; height: 24px; }
  .portal-video-modal-close { top: -44px; width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  .portal-video-points li { font-size: 13.5px; }
  .portal-video-modal { padding: 12px; }
  .portal-video-modal-close { top: auto; bottom: calc(100% + 8px); right: 0; }
}

/* ==========================================================================
   POLICY, SOP & AUDIT MANAGEMENT PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, buttons, .section-eyebrow /
   .section-title / .section-desc, .comparison-grid / .comp-box,
   .faq-list / .faq-item, .dark-cta-*, .reveal-card) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   Paste this whole block into style.css (e.g. at the end); it only adds
   new class names, all prefixed "pa-" (Policy & Audit) to avoid collisions.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-teal),
   var(--c-muted), var(--c-border), var(--bg-light), var(--bg-dark),
   var(--font), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required — header scroll state, mobile nav accordion,
   FAQ accordion and scroll-reveal in main.js all work off the existing
   class names (.site-header, .nav-item, .faq-item, .reveal-card) reused
   on this page.
   ========================================================================== */

/* ----------------------------------------------------------------------
   0. SHARED
   ---------------------------------------------------------------------- */
.pa-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 14px;
}
.pa-section-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.pa-section-head.pa-mid { margin-inline: auto; text-align: center; } /* kept for clarity — centering is already the default */
.pa-section-head h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.pa-section-head p {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
}
.pa-tint { background: var(--bg-white); }

/* ----------------------------------------------------------------------
   1. HERO — dark, split (copy + live readiness board)
   ---------------------------------------------------------------------- */
.pa-hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #0d2b3f 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 15vw, 150px) 0 clamp(64px, 7vw, 88px);
}
.pa-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.pa-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.pa-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #60b14a;
  margin-bottom: 18px;
}
.pa-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}
.pa-hero-tagline {
  font-size: 18px;
  font-weight: var(--w-bold);
  color: #60b14a;
  margin-bottom: 18px;
  letter-spacing: -0.2px;
}
.pa-hero-desc {
  font-size: var(--t-body-lg);
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.pa-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.pa-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--w-semibold);
  border-radius: var(--r-sm);
  padding: 13px 26px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pa-btn-ghost:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.pa-fw-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.pa-fw-row span {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  color: #AEB6C2;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  padding: 6px 13px;
  letter-spacing: .02em;
}

/* Readiness board (dark glass card) */
.pa-board {
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pa-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pa-board-status { display: flex; align-items: center; gap: 10px; }
.pa-rdot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(16,185,129,.22);
  flex-shrink: 0;
  animation: paPulse 2.4s ease-in-out infinite;
}
@keyframes paPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.22); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,.08); }
}
.pa-board-status .st { font-weight: var(--w-semibold); font-size: 14.5px; color: #fff; }
.pa-board-top .ts { font-size: 10.5px; color: #8A93A0; letter-spacing: .04em; }

.pa-brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pa-brow:last-of-type { border-bottom: none; }
.pa-brow .bl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-brow .bt {
  font-size: 13px; color: #E7EAEF; font-weight: var(--w-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-brow .bm { font-size: 10.5px; color: #7E8794; }
.pa-chip {
  font-size: 10px;
  font-weight: var(--w-bold);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.pa-c-ok   { background: rgba(16,185,129,.16); color: #6BE0AE; border: 1px solid rgba(16,185,129,.32); }
.pa-c-arch { background: rgba(69,83,164,.20); color: #A9B4EA; border: 1px solid rgba(69,83,164,.4); }
.pa-c-act  { background: rgba(236,74,44,.16); color: #FF9576; border: 1px solid rgba(236,74,44,.32); }

.pa-meter { margin-top: 14px; padding: 13px 15px; background: rgba(0,0,0,.22); border-radius: 11px; }
.pa-meter .ml {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: #A7AFBB; margin-bottom: 8px; letter-spacing: .03em;
}
.pa-meter .ml b { color: #fff; font-weight: var(--w-bold); }
.pa-bar { height: 7px; background: rgba(255,255,255,.1); border-radius: 100px; overflow: hidden; }
.pa-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-teal), #57E0A8);
  border-radius: 100px;
  animation: paFill 1.8s cubic-bezier(.2,.7,.3,1) forwards .4s;
}
@keyframes paFill { to { width: 87%; } }

@media (max-width: 1024px) {
  .pa-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .pa-hero-desc { margin-left: auto; margin-right: auto; }
  .pa-hero-cta { justify-content: center; }
  .pa-fw-row { justify-content: center; }
  .pa-board { max-width: 560px; margin: 40px auto 0; text-align: left; }
}
@media (max-width: 560px) {
  .pa-hero-section { padding: 100px 0 52px; }
}

/* ----------------------------------------------------------------------
   2. PAIN MIRROR — "You don't have a document problem…"
   ---------------------------------------------------------------------- */
.pa-pain-section { background: var(--bg-white); text-align: center; }
.pa-pain-lead {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 30px;
}
.pa-scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: left;
}
.pa-scene {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pa-scene:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,29,58,.06); }
.pa-scene .num {
  font-weight: var(--w-bold);
  color: #2e6b1d;
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pa-scene p { font-size: 14.5px; color: var(--c-muted); line-height: 1.6; margin: 0; }
.pa-pain-turn {
  font-size: 17px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  max-width: 760px;
  line-height: 1.6;
  margin: 0 auto;
}
@media (max-width: 768px) { .pa-scenes { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   3. MOAT — dark, Purview integration grid
   ---------------------------------------------------------------------- */
.pa-moat-section {
  background: linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.pa-moat-head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 40px;
}
.pa-moat-kicker {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #fff;
  margin-bottom: 16px;
  display: inline-block;
}
.pa-moat-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.22;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.pa-moat-text p {
  color: #B9C0CB;
  font-size: var(--t-body-lg);
  line-height: 1.75;
  margin-bottom: 14px;
}
.pa-moat-text p:last-child { margin-bottom: 0; }
.pa-mcell-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: left;
}
.pa-mcell {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease);
}
.pa-mcell:hover {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  transform: translateY(-4px);
}
.pa-mcell .mi { font-size: 10.5px; color: var(--c-red); letter-spacing: .1em; margin-bottom: 8px; font-weight: var(--w-bold); }
.pa-mcell h4 { font-size: 14.5px; color: #fff; font-weight: var(--w-bold); margin-bottom: 6px; }
.pa-mcell p { font-size: 12.5px; color: #96A5BD; margin: 0; line-height: 1.6; }
@media (max-width: 1100px) { .pa-mcell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-mcell-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   4. LIFECYCLE — vertical spine, 9 stages
   ---------------------------------------------------------------------- */
.pa-lifecycle-section { background: var(--bg-white); }
.pa-spine {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.pa-spine::before {
  content: '';
  position: absolute;
  left: 27px; top: 6px; bottom: 6px;
  width: 2px;
  background: #2e6b1d;
  opacity: .3;
}
.pa-node {
  position: relative;
  padding: 0 0 30px 76px;
}
.pa-node:last-child { padding-bottom: 0; }
.pa-node .dot {
  position: absolute;
  left: 16px; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2e6b1d;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--w-bold);
  color: #2e6b1d;
  z-index: 2;
}
.pa-node h3 {
  font-size: 17.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-node h3 .pa-badge {
  font-size: 9.5px;
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--c-green-light);
  color: #15803D;
  border: 1px solid #BFE6C8;
}
.pa-node p { font-size: 14.5px; color: var(--c-muted); line-height: 1.65; margin: 0; }

/* ----------------------------------------------------------------------
   5. CAPABILITIES — "Beyond a tick-box" grid3
   ---------------------------------------------------------------------- */
.pa-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pa-cap-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.pa-cap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(11,29,58,.07);
  border-color: var(--c-blue);
}
.pa-cap-card .ci {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: #e5f3e1;
  color: #2e6b1d;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold);
  font-size: 18px;
  margin-bottom: 16px;
}
.pa-cap-card h3 { font-size: 16px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 8px; }
.pa-cap-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; margin: 0; }
.pa-cap-card .pa-only {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 9px;
  font-weight: var(--w-bold);
  letter-spacing: .05em;
  color: #2e6b1d;
  background: #FDEEEA;
  border: 1px solid #F6D3C9;
  border-radius: 20px;
  padding: 4px 9px;
  text-transform: uppercase;
}
@media (max-width: 900px) { .pa-cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pa-cap-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   6. BEFORE / AFTER TABLE — reuses the sp-vs-* visual language
   ---------------------------------------------------------------------- */
.pa-vs-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 20px 50px rgba(11,29,58,.06);
}
.pa-vs-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0px 16px;
}
.pa-vs-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 7px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.pa-vs-head-before { background: rgba(239,68,68,.1); color: #2e6b1d; justify-self: start;}
.pa-vs-head-after   { background: rgba(16,185,129,.12); color: #0F766E; justify-self: start; }
.pa-vs-head-spacer { width: 16px; }
.pa-vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-light);
  border: 1px solid var(--c-border-soft);
  margin-bottom: 8px;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.pa-vs-row:last-child { margin-bottom: 0; }
.pa-vs-row:hover { border-color: var(--c-border); box-shadow: 0 6px 18px rgba(11,29,58,.06); transform: translateY(-1px); }
.pa-vs-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px;
  border-radius: 50%;
  font-size: 10.5px;
  margin-right: 10px;
}
.pa-vs-icon-bad  { background: rgba(239,68,68,.12); color: #2e6b1d; }
.pa-vs-icon-good { background: rgba(16,185,129,.15); color: var(--c-teal); }
.pa-vs-before { display: flex; align-items: center; font-size: 14.5px; line-height: 1.45; color: var(--c-muted); max-width: 85%;}
.pa-vs-arrow  { color: var(--c-border); font-size: 13px; }
.pa-vs-after  { display: flex; align-items: center; font-size: 14.5px; line-height: 1.45; color: var(--c-navy); font-weight: var(--w-semibold); max-width: 92%; margin-right: auto;}
@media (max-width: 560px) {
  .pa-vs-row { grid-template-columns: 1fr; gap: 6px; }
  .pa-vs-before,
  .pa-vs-after { max-width: 100%; margin: 0; }
  .pa-vs-arrow { display: none; }
  .pa-vs-head-row { grid-template-columns: 1fr; gap: 8px; }
  .pa-vs-head-before,
  .pa-vs-head-after { justify-self: start; }
  .pa-vs-head-spacer { display: none; }
}

/* ----------------------------------------------------------------------
   7. TABLES — licensing / departments / frameworks (shared table style)
   ---------------------------------------------------------------------- */
.pa-table-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 32px;
}
.pa-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pa-table th, .pa-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; }
.pa-table tr:last-child td { border-bottom: none; }
.pa-table th {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-navy); font-weight: var(--w-bold); background: #4553a412!important;
}
.pa-table td.pa-k   { font-weight: var(--w-bold); color: var(--c-navy); width: 30%; }
.pa-table td.pa-dep  { font-weight: var(--w-bold); color: var(--c-navy); width: 26%; }
.pa-table td { color: var(--c-muted); }
@media (max-width: 560px) {
  .pa-table { font-size: 13px; }
  .pa-table th, .pa-table td { padding: 11px 14px; }
}

/* ----------------------------------------------------------------------
   8. PROOF — metrics band + quote
   ---------------------------------------------------------------------- */
.pa-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.pa-metric {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
}
.pa-metric .big {
  font-weight: var(--w-black);
  font-size: 40px;
  color: #2e6b1d;
  line-height: 1;
  letter-spacing: -1px;
}
.pa-metric .big small { font-size: 22px; font-weight: var(--w-bold); }
.pa-metric .lbl { font-size: 13.5px; color: var(--c-muted); margin-top: 12px; line-height: 1.5; }

.pa-quote {
  background: linear-gradient(160deg, #0B1D3A 0%, #101f3f 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 44px);
  max-width: 780px;
  margin: 0 auto;
}
.pa-quote .stars { color: #2e6b1d; font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; }
.pa-quote blockquote {
  font-weight: var(--w-semibold);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  margin: 0 0 22px;
  letter-spacing: -0.2px;
  color: #fff;
}
.pa-quote .who { display: flex; align-items: center; gap: 13px; }
.pa-quote .av {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #2e6b1d;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold); font-size: 13px;
}
.pa-quote .nm { font-weight: var(--w-bold); font-size: 14.5px; color: #fff; }
.pa-quote .rl { font-size: 12.5px; color: #9AA2AE; }
.pa-quote-note {
  text-align: center;
  font-size: 12px;
  color: var(--c-subtle);
  margin-top: 18px;
  font-style: italic;
}
@media (max-width: 768px) { .pa-metrics { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   9. FINAL STRIP (used inside the shared .dark-cta-section on this page)
   ---------------------------------------------------------------------- */
.pa-cta-strip {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
  letter-spacing: .02em;
}

/* ----------------------------------------------------------------------
   10. BACKGROUND RHYTHM — page-scoped only
   Keeps the homepage's strict white/light/dark alternation on THIS page
   without touching the shared .faq-section / .dark-cta-section rules
   (those stay untouched so other pages that reuse them are unaffected).
   Add class="policy-audit-page" on <body> for this page only.
   ---------------------------------------------------------------------- */
.policy-audit-page .faq-section { background: var(--bg-white); }

/* ----------------------------------------------------------------------
   11. RESPONSIVE POLISH — small phones
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pa-hero-title { letter-spacing: -0.4px; }
  .pa-board { padding: 18px; }
  .pa-brow .bt { max-width: 160px; }
  .pa-metric .big { font-size: 32px; }
  .pa-quote { padding: 26px 22px; }
  .pa-quote blockquote { font-size: 18px; }
  .pa-vs-wrap { padding: 14px; }
}
/* ==========================================================================
   20. FOOTER — REDESIGNED
   Replaces the previous "20. FOOTER" block in style.css with this one
   (same section number/position — just swap the old block for this).
   Everything below uses the site's EXISTING tokens only — var(--c-navy),
   var(--c-red), var(--c-blue), var(--bg-footer), var(--font), var(--r-lg),
   var(--dur), var(--ease) — plus the exact 4-stop brand gradient already
   used elsewhere on the site (.hero-gradient-text / .tw365-gradient-text:
   #EC4A2C → #F9BC15 → #60B14A → #578ECA), so the footer's accent thread
   and logo mark visually match the rest of the page with zero new colors.
   No JS changes required — the newsletter form is a static, no-op submit
   (onsubmit="return false") exactly like the reference.
   ========================================================================== */

.site-footer-new {
  --footer-card:  rgba(255,255,255,0.045);
  --footer-card-hover: rgba(255,255,255,0.075);
  --footer-line:  rgba(255,255,255,0.10);
  --footer-hi:    #FFFFFF;
  --footer-mid:   #94A3B8;
  --footer-low:   #64748B;

  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(87,142,202,0.14), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 0%, rgba(236,74,44,0.09), transparent 55%),
    var(--bg-footer);
  color: var(--footer-mid);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* faint dot-grid — echoes the dashboard/grid motif used in the hero + AI section */
.site-footer-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 65%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 65%);
  pointer-events: none;
}

/* ---- Signature 4-color thread — the same gradient stops used in the
   site's hero/banner gradient text, just as four solid flex segments ---- */
.footer-thread {
  height: 4px;
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
}
.footer-thread span { flex: 1; }
.footer-thread span:nth-child(1) { background: #EC4A2C; }
.footer-thread span:nth-child(2) { background: #F9BC15; }
.footer-thread span:nth-child(3) { background: #60B14A; }
.footer-thread span:nth-child(4) { background: #578ECA; }

.site-footer-new .container { position: relative; z-index: 1; }

/* ---- CTA band ---- */
.footer-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--footer-line);
  flex-wrap: wrap;
}
.footer-cta-band h2 {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--footer-hi);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.footer-cta-band p {
  margin: 0;
  font-size: 15.5px;
  color: var(--footer-mid);
}
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(69,83,164,0.55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.footer-cta-btn:hover {
  background: var(--c-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(214,61,34,0.55);
}
.footer-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Main grid ---- */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(40px, 5vw, 56px) 0 40px;
}

/* Brand column — logo mark reused exactly from the header SVG */
.footer-brand-col .footer-logo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.footer-logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.footer-logo-word {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 19px;
  color: var(--footer-hi);
  letter-spacing: -0.2px;
}
.footer-logo-word span { color: var(--footer-low); font-weight: var(--w-medium); }

.footer-brand-col p {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 340px;
  color: var(--footer-mid);
  margin: 0 0 22px;
}

.footer-contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--footer-mid); }
.footer-contact-list li svg { width: 15px; height: 15px; color: #578ECA; flex-shrink: 0; }
.footer-contact-list a { color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-contact-list a:hover { color: var(--footer-hi); }

.footer-social-row { display: flex; gap: 10px; }
.footer-social-row a {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--footer-card);
  border: 1px solid var(--footer-line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social-row a svg { width: 15px; height: 15px; color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-social-row a:hover {
  border-color: #578ECA;
  background: rgba(87,142,202,0.16);
  transform: translateY(-3px);
}
.footer-social-row a:hover svg { color: var(--footer-hi); }

/* Link columns */
.footer-col-title {
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--footer-hi);
  margin: 0 0 18px;
}
.footer-link-list li { margin-bottom: 12px; }
.footer-link-list a {
  font-size: 13.5px;
  color: var(--footer-mid);
  position: relative;
  display: inline-block;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-link-list a:hover { color: var(--footer-hi); transform: translateX(3px); }
ul.footer-link-list {
    padding-left: 12px!important;
}
/* Newsletter */
.footer-newsletter p {
  font-size: 13px;
  color: var(--footer-mid);
  margin: 0 0 16px;
  line-height: 1.6;
}
.footer-newsletter form {
  display: flex;
  background: var(--footer-card);
  border: 1px solid var(--footer-line);
  border-radius: var(--r-md);
  padding: 5px;
  gap: 6px;
  transition: border-color var(--dur) var(--ease);
}
.footer-newsletter form:focus-within { border-color: #578ECA; }
.footer-newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--footer-hi);
  font-family: var(--font);
  font-size: 13.5px;
  padding: 9px 10px;
}
.footer-newsletter input::placeholder { color: var(--footer-low); }
.footer-newsletter button {
  background: #578ECA;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-family: var(--font);
  font-weight: var(--w-semibold);
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-newsletter button:hover { background: #4679b3; transform: translateY(-1px); }
.footer-newsletter-note { font-size: 11.5px; color: var(--footer-low); margin-top: 10px; }

.footer-partner-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.footer-partner-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 16px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.footer-partner-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.footer-partner-badge img {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* ---- Bottom bar ---- */
.footer-bottom-new {
  border-top: 1px solid var(--footer-line);
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--footer-low);
}
.footer-bottom-new .footer-bottom-links-new { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom-new .footer-bottom-links-new a { color: var(--footer-mid); transition: color var(--dur) var(--ease); }
.footer-bottom-new .footer-bottom-links-new a:hover { color: var(--footer-hi); }

/* Focus states — accessible, uses the yellow brand stop for visibility on dark bg */
.site-footer-new a:focus-visible,
.site-footer-new button:focus-visible,
.site-footer-new input:focus-visible {
  outline: 2px solid #F9BC15;
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive — Footer
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-main-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-brand-col p { max-width: 480px; }
}
@media (max-width: 768px) {
  .footer-cta-band { padding: 40px 0 32px; }
  .footer-cta-band h2 { max-width: 420px; }
}
@media (max-width: 560px) {
  .footer-cta-band { flex-direction: column; align-items: flex-start; padding: 36px 0 30px; }
  .footer-cta-btn { width: 100%; justify-content: center; }
  .footer-main-grid { grid-template-columns: 1fr; row-gap: 34px; padding: 36px 0 30px; }
  .footer-bottom-new { flex-direction: column; align-items: flex-start; padding: 20px 0 26px; }
  .footer-bottom-new .footer-bottom-links-new { gap: 16px; }
  .footer-partner-badge { padding: 8px 12px; }
  .footer-partner-badge img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-cta-btn, .footer-social-row a, .footer-newsletter button, .footer-link-list a, .footer-partner-badge {
    transition: none;
  }
}

/* ==========================================================================
   PARTNER PROGRAM PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .section-eyebrow /
   .section-title / .section-desc, .btn / .btn-primary / .btn-outline /
   .scale-btn, .faq-list / .faq-item, .dark-cta-*, .reveal-card,
   .logo-marquee-title / .logo-container-row / .logo-item) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   All new class names are prefixed "pp-" (Partner Program) to avoid collisions.
 
   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted), var(--c-border),
   var(--bg-light), var(--bg-dark), var(--bg-white), var(--font), var(--r-lg),
   var(--dur), var(--ease), etc.
   No new JS is required — header scroll state, mobile nav accordion, FAQ
   accordion and scroll-reveal in main.js all work off the existing class
   names (.site-header, .nav-item, .faq-item, .reveal-card) reused here.
   ========================================================================== */
 
/* ----------------------------------------------------------------------
   0. SHARED
   ---------------------------------------------------------------------- */
.pp-tint { background: var(--bg-white); }
 
/* ----------------------------------------------------------------------
   1. HERO — dark, split (copy + "what changes for you" metrics card)
   ---------------------------------------------------------------------- */
.pp-hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #1a2f52 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 15vw, 150px) 0 clamp(64px, 7vw, 88px);
}
.pp-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.pp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.pp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #2e6b1d;
  margin-bottom: 18px;
}
.pp-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.6px;
  margin-bottom: 16px;
}
.pp-hero-tag {
  font-size: 17px;
  font-weight: var(--w-semibold);
  color: #2e6b1d;
  margin-bottom: 16px;
}
.pp-hero-desc {
  font-size: var(--t-body-lg);
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 30px;
}
.pp-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pp-hero-note {
  font-family: var(--font);
  font-size: 12.5px;
  color: #8A93A0;
  letter-spacing: .02em;
}
.pp-hero-note span { color: #6BD989; margin: 0 6px; }
.pp-hero-note span:first-child { margin-left: 0; }
 
.pp-metric-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 26px;
}
.pp-metric-card .pp-mt {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A93A0;
  margin-bottom: 16px;
}
.pp-mline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pp-mline:last-child { border-bottom: none; }
.pp-mline .pp-ml-l { font-size: 13.5px; color: #D3D8DF; }
.pp-mline .pp-ml-v { font-family: var(--font); font-weight: var(--w-bold); font-size: 14px; color: #6BD989; }
.pp-mline .pp-ml-v.zero { color: #FF9576; }
.pp-metric-card .pp-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #8A93A0;
  font-family: var(--font);
  text-align: center;
}
 
/* ----------------------------------------------------------------------
   2. SHIFT — licensing-only reseller vs value-added Titan partner
   ---------------------------------------------------------------------- */
.pp-shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.pp-shift-col {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.pp-shift-col.no { border-color: var(--c-border); }
.pp-shift-col.yes { border-color: #BFE6C8; background: #FBFFFC; }
.pp-shift-col h3 {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-shift-col.no h3 span { color: var(--c-muted); }
.pp-shift-col.yes h3 span { color: var(--c-green); }
.pp-shift-col ul { list-style: none; }
.pp-shift-col li {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  padding: 10px 0;
  border-top: 1px solid var(--c-border-soft);
}
.pp-shift-col li:first-child { border-top: none; }
 
/* ----------------------------------------------------------------------
   3. WHY NOW — 3 timing stat cards
   ---------------------------------------------------------------------- */
.pp-timing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-timing-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-timing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-timing-num {
  font-family: var(--font);
  font-size: 26px;
  font-weight: var(--w-bold);
  color: #2e6b1d;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.pp-timing-card h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 6px; }
.pp-timing-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; }
 
/* ----------------------------------------------------------------------
   4. WHY PARTNER — benefit cards (colored left dash, like cap-box family)
   ---------------------------------------------------------------------- */
.pp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-benefit-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px 28px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-benefit-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-blue);
}
.pp-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-benefit-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-blue-light);
  color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold); font-size: 17px;
  margin-bottom: 14px;
}
.pp-benefit-card h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 7px; }
.pp-benefit-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; }
 
/* ----------------------------------------------------------------------
   5. ECONOMICS — recurring margin stack
   ---------------------------------------------------------------------- */
.pp-econ {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #FBF4E2, #FFFDF8);
  border: 1px solid #EAD9A6;
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.pp-econ-copy h3 { font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 12px; }
.pp-econ-copy p { font-size: 14.5px; color: var(--c-muted); line-height: 1.7; margin-bottom: 10px; }
.pp-econ-copy .pp-disc { font-family: var(--font); font-size: 12px; color: #B0831F; }
.pp-econ-stack { display: flex; flex-direction: column; gap: 10px; }
.pp-yr {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #EAD9A6; border-radius: var(--r-md);
  padding: 14px 18px;
}
.pp-yr .pp-yl { font-weight: var(--w-bold); font-size: 14px; color: var(--c-navy); }
.pp-yr .pp-ym { font-size: 11.5px; color: var(--c-muted); }
.pp-yr .pp-yv { font-family: var(--font); font-weight: var(--w-bold); font-size: 15px; color: #B0831F; }
.pp-yr.total { background: var(--c-navy); border-color: var(--c-navy); }
.pp-yr.total .pp-yl, .pp-yr.total .pp-yv { color: #fff; }
.pp-yr.total .pp-ym { color: #9AA2AE; }
.pp-yr.total .pp-yv { color: #6BD989; }
 
/* ----------------------------------------------------------------------
   6. CO-SELL WITH MICROSOFT — dark feature panel
   ---------------------------------------------------------------------- */
.pp-dark-panel {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
}
.pp-dark-panel .pp-kicker-alt {
  font-size: var(--t-eyebrow); font-weight: var(--w-bold); text-transform: uppercase;
  letter-spacing: 1.6px; color: #2e6b1d; margin-bottom: 14px; display: inline-block;
}
.pp-dark-panel h3 { color: #fff; font-size: 24px; line-height: 1.25; margin-bottom: 14px; letter-spacing: -.02em; }
.pp-dark-panel p { color: #B9C0CB; font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.pp-screen {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  padding: 18px;
  font-family: var(--font);
}
.pp-screen .pp-sh {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #7E8794;
  padding-bottom: 13px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.pp-srow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.pp-srow:last-child { border-bottom: none; }
.pp-srow .pp-sl { font-size: 12px; color: #D3D8DF; }
.pp-srow .pp-sv { font-size: 11px; }
.pp-sv.g { color: #6BD989; } .pp-sv.a { color: #FF9576; } .pp-sv.b { color: #8FB6E6; }
.pp-fineprint { font-size: 12px; color: var(--c-muted); margin-top: 16px; font-family: var(--font); }
 
/* ----------------------------------------------------------------------
   7. TIERS — 3-column partner tiers, middle highlighted
   ---------------------------------------------------------------------- */
.pp-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.pp-tier {
  position: relative;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 26px;
}
.pp-tier.mid { border: 2px solid #2e6b1d; box-shadow: 0 14px 44px -20px rgb(11 21 12 / 35%); }
.pp-tier .pp-badge {
  position: absolute; top: -12px; left: 26px;
  background: #2e6b1d; color: #fff;
  font-family: var(--font); font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: .05em; padding: 4px 12px; border-radius: 100px; text-transform: uppercase;
}
.pp-tier .pp-tn { font-family: var(--font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }
.pp-tier h3 { font-size: 20px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 4px; }
.pp-tier .pp-tsub { font-size: 13px; color: var(--c-muted); margin-bottom: 18px; }
.pp-tier ul { list-style: none; }
.pp-tier li { font-size: 13.5px; color: var(--c-muted); padding: 9px 0; border-top: 1px solid var(--c-border-soft); display: flex; gap: 9px; }
.pp-tier li:first-child { border-top: none; }
.pp-tier li::before { content: "→"; color: var(--c-red); font-weight: var(--w-bold); flex-shrink: 0; }
 
/* ----------------------------------------------------------------------
   8. IS IT A FIT — yes / no qualifier columns
   ---------------------------------------------------------------------- */
.pp-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pp-fit-col {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.pp-fit-col.yes { border-color: #BFE6C8; }
.pp-fit-col h3 { font-size: 16px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.pp-fit-col.yes h3 span { color: var(--c-green); }
.pp-fit-col.no h3 span { color: var(--c-muted); }
.pp-fit-col ul { list-style: none; }
.pp-fit-col li { font-size: 14px; color: var(--c-muted); line-height: 1.6; padding: 10px 0; border-top: 1px solid var(--c-border-soft); }
.pp-fit-col li:first-child { border-top: none; }
 
/* ----------------------------------------------------------------------
   9. ENABLEMENT — what you get checklist
   ---------------------------------------------------------------------- */
.pp-enable-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 32px;
  text-align: left;
}
.pp-enable-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid var(--c-border);
}
.pp-enable-item .pp-ei { color: var(--c-green); font-weight: var(--w-bold); font-size: 15px; margin-top: 1px; }
.pp-enable-item h4 { font-size: 14.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 3px; }
.pp-enable-item p { font-size: 13px; color: var(--c-muted); margin: 0; }
 
/* ----------------------------------------------------------------------
   10. JOURNEY — 4-step onboarding
   ---------------------------------------------------------------------- */
.pp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}
.pp-step {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-step:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,29,58,0.06); }
.pp-step-num {
  font-family: var(--font); font-weight: var(--w-bold); font-size: 12px; color: #2e6b1d;
  background: #cbe3c5; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pp-step h3 { font-size: 15.5px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 6px; }
.pp-step p { font-size: 13.5px; color: var(--c-muted); line-height: 1.6; }
 
/* ----------------------------------------------------------------------
   11. PROOF — dark logo/testimonial band
   ---------------------------------------------------------------------- */
.pp-proof {
  background: #1C2432;
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}
.pp-proof .pp-kicker-alt { color: #2e6b1d; }
.pp-proof h3 { color: #fff; font-size: 24px; margin: 10px 0 12px; letter-spacing: -.02em; }
.pp-proof p { color: #B9C0CB; font-size: 15px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.pp-proof .pp-proof-logos { display: flex; gap: 14px 30px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.pp-proof .pp-proof-logos span { font-weight: var(--w-bold); font-size: 15px; color: #8A93A0; }
 
/* ----------------------------------------------------------------------
   12. APPLY — final CTA panel + partner interest form
   ---------------------------------------------------------------------- */
.pp-apply-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 22px;
  align-items: stretch;
}
.pp-apply-panel {
  background: #2e6b1d;
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 48px) clamp(28px, 4vw, 40px);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pp-apply-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0);
  background-size: 24px 24px;
}
.pp-apply-panel > * { position: relative; }
.pp-apply-panel .pp-kicker-alt { color: #FFD8CC; }
.pp-apply-panel h2 { color: #fff; font-size: 28px; margin-bottom: 14px; letter-spacing: -.02em; }
.pp-apply-panel p { color: #FCE0D8; font-size: 15.5px; max-width: 440px; margin: 0 0 18px; line-height: 1.65; }
.pp-apply-panel .btn { background: #fff; color: var(--c-red); }
.pp-apply-panel .btn:hover { background: #F2EEEC; }
.pp-apply-strip { margin-top: 10px; font-family: var(--font); font-size: 12px; color: #FBD5CB; letter-spacing: .02em; }
 
.pp-form-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 38px) clamp(24px, 4vw, 38px) 30px;
}
.pp-form-card h3 { font-size: 19px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 5px; }
.pp-form-card .pp-form-sub { font-size: 13.5px; color: var(--c-muted); margin-bottom: 22px; }
.pp-fld { margin-bottom: 15px; }
.pp-fld label { display: block; font-weight: var(--w-semibold); font-size: 12.5px; margin-bottom: 6px; color: var(--c-navy); }
.pp-fld input, .pp-fld textarea {
  width: 100%; border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: var(--font); font-size: 14px; color: var(--c-text);
  background: #fff; transition: border-color var(--dur);
}
.pp-fld input:focus, .pp-fld textarea:focus { outline: none; border-color: var(--c-red); }
.pp-fld textarea { resize: vertical; min-height: 78px; }
.pp-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--c-muted); margin: 4px 0 20px; line-height: 1.5; }
.pp-consent input { margin-top: 3px; flex-shrink: 0; }
.pp-consent a { color: var(--c-red); text-decoration: underline; }
.pp-form-card button.btn-primary { width: 100%; justify-content: center; border: none; font-size: 15px; }
.pp-form-fine { font-size: 11px; color: var(--c-subtle); margin-top: 14px; text-align: center; font-family: var(--font); }
 
/* ----------------------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pp-hero-grid,
  .pp-dark-panel,
  .pp-econ,
  .pp-apply-grid { grid-template-columns: 1fr; }
  .pp-shift-grid,
  .pp-timing-grid,
  .pp-benefit-grid,
  .pp-tiers-grid,
  .pp-fit-grid { grid-template-columns: 1fr 1fr; }
  .pp-steps-grid { grid-template-columns: 1fr 1fr; }
  .pp-enable-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pp-shift-grid,
  .pp-timing-grid,
  .pp-benefit-grid,
  .pp-tiers-grid,
  .pp-fit-grid,
  .pp-steps-grid,
  .pp-fld-row { grid-template-columns: 1fr; }
  .pp-apply-panel { text-align: left; }
  .pp-hero-note { line-height: 1.9; display: block; }
}
@media (max-width: 480px) {
  .pp-hero-title { font-size: 30px; }
  .pp-dark-panel, .pp-proof, .pp-apply-panel, .pp-form-card, .pp-econ { padding: 26px 20px; }
}
 
/* ----------------------------------------------------------------------
   14. LEAD DIFFERENTIATOR — full-bleed dark section, copy + them/you rows
   (added to match client reference sequence exactly)
   ---------------------------------------------------------------------- */
.pp-leaddiff-section {
  background: var(--c-navy);
  color: #fff;
}
.pp-leaddiff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.pp-leaddiff-grid .pp-kicker-alt { color: #2e6b1d; }
.pp-leaddiff-grid h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.5px;
  margin: 12px 0 16px;
}
.pp-leaddiff-grid > div:first-child p {
  color: #B9C0CB;
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 13px;
}
.pp-vs { display: flex; flex-direction: column; gap: 12px; }
.pp-vs-row {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.pp-vs-row.them { opacity: .72; }
.pp-vs-row .pp-vh {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.pp-vs-row.them .pp-vh { color: #8A93A0; }
.pp-vs-row.you .pp-vh { color: #FF9576; }
.pp-vs-row .pp-vt { font-size: 14.5px; color: #E7EAEF; line-height: 1.6; }
 
@media (max-width: 1024px) {
  .pp-leaddiff-grid { grid-template-columns: 1fr; }
}


/*==========================================================================
  TITAN WORKSPACE PREMIUM FOOTER
==========================================================================*/

.tw-footer{

    --tw-bg:#08111f;
    --tw-bg2:#0d1728;
    --tw-white:#ffffff;
    --tw-text:#dbe3ef;
    --tw-muted:#aeb9ca;
    --tw-border:rgba(255,255,255,.10);
    --tw-green:#60B14A;
    --tw-blue:#578ECA;
    --tw-red:#EC4A2C;
    --tw-yellow:#F9BC15;

    position:relative;
    overflow:hidden;
    color:var(--tw-text);
    background:
    linear-gradient(rgba(8,17,31,.4),rgba(8,17,31,.5)),
    url("https://titanworkspace.com/wp-content/themes/titan-workspace/assets/images/footer-bg.webp")
    center/cover no-repeat;
}

/*-------------------------------------------------
TOP MULTI COLOR BORDER
-------------------------------------------------*/

.tw-footer::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    z-index:3;

    background:
    linear-gradient(
    90deg,

    #EC4A2C 0%,
    #EC4A2C 25%,

    #60B14A 25%,
    #60B14A 50%,

    #578ECA 50%,
    #578ECA 75%,

    #F9BC15 75%,
    #F9BC15 100%);
}

/*soft glow*/

.tw-footer::after{

    content:"";

    position:absolute;

    left:0;

    top:5px;

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);
}

.tw-footer .container{

    position:relative;

    z-index:2;
}

/*-------------------------------------------------
TOP SECTION
-------------------------------------------------*/

.tw-footer-top{

    padding:80px 0 55px;
}

/*-------------------------------------------------
GRID
-------------------------------------------------*/

.tw-footer-grid{

    display:grid;

    grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;

    gap:40px;
}

/*-------------------------------------------------
LOGO
-------------------------------------------------*/

.tw-footer-logo{

    display:inline-flex;

    align-items:center;

    margin-bottom:22px;

    max-width:320px;

    transition:transform .35s ease, filter .35s ease;
}

.tw-footer-logo:hover{

    transform:translateY(-2px);

    filter:drop-shadow(0 6px 18px rgba(87,142,202,.35));
}

.tw-footer-logo svg{

    width:100%;

    height:auto;

    display:block;
}

/*Titan Workspace text white*/

.tw-footer-logo .st5{

    fill:#4f5358 !important;
}

/*-------------------------------------------------
DESCRIPTION
-------------------------------------------------*/

.tw-footer-desc{

    font-size:15px;

    line-height:1.9;

    color:#d6dfeb;

    max-width:420px;

    margin-bottom:28px;
}

/*-------------------------------------------------
BADGES
-------------------------------------------------*/

.tw-footer-badges{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    align-items:center;
}

.tw-footer-badges img{

    height:60px;
    width:auto;
    object-fit:contain;
    transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
    filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
}

.tw-footer-badges img:hover{

    transform:translateY(-6px) scale(1.05);

    filter:brightness(1.08) drop-shadow(0 12px 20px rgba(0,0,0,.35));
}

.tw-footer-badges img[src*="software-reviews"]{
    height:85px;
}

/*-------------------------------------------------
COLUMN TITLE
-------------------------------------------------*/

.tw-footer-col-title{

    position:relative;

    font-size:18px;

    font-weight:700;

    color:#fff;

    margin-bottom:22px;

    padding-bottom:12px;

    letter-spacing:.3px;
}

.tw-footer-col-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:48px;

    height:3px;

    background:#f6f8fb;

    border-radius:30px;

    transition:width .35s ease;
}

.tw-footer-col:hover .tw-footer-col-title::after{

    width:70px;
}

/*-------------------------------------------------
MENU
-------------------------------------------------*/

/* Footer Menu */

.tw-footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.tw-footer-links li{
    position:relative;
    padding-left:20px;
    margin-bottom:14px;
}

.tw-footer-links li::before{
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #f6f8fb;
    font-size: 12px;
    transition: transform .3s ease, color .3s ease, left .3s ease;
}

.tw-footer-links li:hover::before{
    color:#60B14A;
    left:5px;
    transform:translateY(-50%) scale(1.15);
}

.tw-footer-links a{
    display:inline-block;
    color:#d6dfeb;
    text-decoration:none;
    background-image:linear-gradient(#fff,#fff);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 1px;
    transition:color .3s ease, transform .3s ease, background-size .35s ease, padding-left .3s ease;
}

.tw-footer-links a:hover{
    color:#fff;
    padding-left:5px;
    transform:translateX(6px);
    background-size:100% 1px;
}

/*-------------------------------------------------
HIGHLIGHT COLUMN
-------------------------------------------------*/

.tw-footer-col--highlight{

    padding:24px;

    border-radius:18px;

    background:

    linear-gradient(
    145deg,
    rgba(96,177,74,.18),
    rgba(96,177,74,.05));

    border:1px solid rgba(96,177,74,.25);

    backdrop-filter:blur(12px);
}
/*=====================================================
OUR OFFICES
=====================================================*/

.tw-footer-offices{

    padding:55px 0;

    margin-top:20px;

    border-top:1px solid rgba(255,255,255,.08);
}

.tw-offices-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;
}

.tw-offices-head h3{

    color:#fff;

    font-size:26px;

    font-weight:700;
}

.tw-offices-track{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;
}

/*Office Card*/

.tw-office-card{

    position:relative;

    background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    padding:26px 24px 24px;

    display:flex;

    gap:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.22);

    transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

/* top accent strip, colour set per card below */
.tw-office-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:var(--tw-office-accent,#578ECA);
}

.tw-office-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(160px 160px at 0% 0%, var(--tw-office-accent-soft,rgba(87,142,202,.22)), transparent 70%);

    opacity:.65;

    transition:opacity .35s ease;

    pointer-events:none;
}

.tw-office-card:hover{

    transform:translateY(-8px);

    border-color:var(--tw-office-accent,#578ECA);

    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));

    box-shadow:0 22px 48px rgba(0,0,0,.4);
}

.tw-office-card:hover::before{

    opacity:1;
}

/* Per-office accent colours: USA red, India green, Malaysia blue */
.tw-office-card:nth-child(1){ --tw-office-accent:#EC4A2C; --tw-office-accent-soft:rgba(236,74,44,.28); }
.tw-office-card:nth-child(2){ --tw-office-accent:#60B14A; --tw-office-accent-soft:rgba(96,177,74,.28); }
.tw-office-card:nth-child(3){ --tw-office-accent:#578ECA; --tw-office-accent-soft:rgba(87,142,202,.28); }

.tw-office-pin{

    position:relative;

    width:54px;

    height:54px;

    border-radius:16px;

    background:linear-gradient(150deg,var(--tw-office-accent,#578ECA),rgba(255,255,255,.08));

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    box-shadow:0 10px 22px var(--tw-office-accent-soft,rgba(87,142,202,.4));

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}

.tw-office-card:hover .tw-office-pin{

    transform:scale(1.08) rotate(-6deg);

    box-shadow:0 14px 28px var(--tw-office-accent-soft,rgba(87,142,202,.55));
}

/*.fa-brands:before, .fa-regular:before, .fa-solid:before, .fa:before, .fab:before, .far:before, .fas:before{
  color: #fff!important;
}*/
.tw-office-pin svg{

    width:24px;

    height:24px;

    color:#fff;

    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.tw-office-body{

    position:relative;
}

.tw-office-body h4{

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;
}

.tw-office-body h4 span{

    display:inline-block;

    color:var(--tw-office-accent,#7fd47f);

    background:var(--tw-office-accent-soft,rgba(127,212,127,.15));

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-top:0;

    padding:4px 10px;

    border-radius:20px;
}

.tw-office-body p{

    color:#d6dfeb;

    font-size:14px;

    line-height:1.7;

    margin-top:12px;
}

.tw-office-phone{

    margin-top:8px !important;

    padding-top:10px;

    border-top:1px dashed rgba(255,255,255,.14);
}

.tw-office-phone strong{

    color:#fff;
}

/*=====================================================
CONTACT SECTION
=====================================================*/

.tw-footer-contact{

    margin-top:40px;

    padding:26px 0;

    background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.015));

    border-top:1px solid rgba(255,255,255,.10);

    border-bottom:1px solid rgba(255,255,255,.10);
}

.tw-contact-grid{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.tw-contact-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    color:#dbe4ef;

    font-size:15px;

    padding:10px 20px 10px 0;
}

/* vertical divider between chips, skip on the last item */
.tw-contact-item + .tw-contact-item::before{

    content:"";

    position:absolute;

    left:-9px;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:32px;

    background:rgba(255,255,255,.14);
}

.tw-contact-label{

    color:#8fa0b8;

    font-weight:700;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.6px;
}

/*Email*/

.tw-contact-email{

    display:flex;

    align-items:center;

    gap:12px;

    color:#dbe4ef;

    text-decoration:none;

    transition:color .35s ease;
}

.tw-contact-email svg{

    width:44px;

    height:44px;

    padding:11px;

    border-radius:50%;

    background:linear-gradient(150deg,#578ECA,#3f6ba6);

    color:#fff;

    box-shadow:0 8px 20px rgba(87,142,202,.45);

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}

.tw-contact-email:hover{

    color:#fff;
}

.tw-contact-email:hover svg{

    transform:scale(1.1) rotate(-6deg);

    background:linear-gradient(150deg,#60B14A,#48893a);

    box-shadow:0 12px 26px rgba(96,177,74,.5);
}

/*Phone icon badge*/

.tw-contact-item > i{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(150deg,#EC4A2C,#b83a22);

    box-shadow:0 8px 20px rgba(236,74,44,.4);

    font-size:15px;

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}

.tw-contact-item:nth-of-type(3) > i{ background:linear-gradient(150deg,#60B14A,#48893a); box-shadow:0 8px 20px rgba(96,177,74,.4); }
.tw-contact-item:nth-of-type(4) > i{ background:linear-gradient(150deg,#F9BC15,#c9930c); box-shadow:0 8px 20px rgba(249,188,21,.4); }

.tw-contact-item:hover > i{

    transform:scale(1.1) rotate(-8deg);
}

/* Contact Links */

.tw-contact-item a,
.tw-contact-item a:visited{
    color:#ffffff !important;
    text-decoration:none;
    font-weight:700;
    font-size:15.5px;
    letter-spacing:.2px;
    transition:color .3s ease, transform .3s ease;
    display:inline-block;
}

.tw-contact-item a:hover{
    color:#60B14A !important;
    transform:translateX(3px);
}

.tw-contact-item a:active,
.tw-contact-item a:focus{
    color:#60B14A !important;
    outline:none;
}

/*=====================================================
BOTTOM BAR
=====================================================*/

.tw-footer-bottom{

    padding:25px 0;
}

.tw-bottom-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

.tw-copyright{

    color:#bfc9d8;

    font-size:14px;
}

.tw-copyright strong{

    color:#fff;
}

.tw-legal-links{

    display:flex;

    gap:22px;

    flex-wrap:wrap;
}

.tw-legal-links a{

    position:relative;

    color:#c9d3df;

    text-decoration:none;

    transition:color .35s ease;
}

.tw-legal-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:1px;

    background:#fff;

    transition:width .3s ease;
}

.tw-legal-links a:hover{

    color:#fff;
}

.tw-legal-links a:hover::after{

    width:100%;
}

/*=====================================================
SOCIAL ICONS
=====================================================*/

.tw-socials{

    display:flex;

    gap:12px;
}

.tw-socials a{

    width:44px;

    height:44px;

    border-radius:50%;

    background:linear-gradient(150deg,var(--tw-social-a,#578ECA),var(--tw-social-b,#3f6ba6));

    border:1px solid rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 20px var(--tw-social-shadow,rgba(87,142,202,.35));

    transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .35s ease;
}

.tw-socials svg,
.tw-socials i{

    width:17px;

    height:17px;

    color:#fff;

    transition:transform .35s ease;
}

.tw-socials a:hover{

    transform:translateY(-6px) rotate(-6deg) scale(1.06);

    filter:brightness(1.12);

    box-shadow:0 16px 32px var(--tw-social-shadow,rgba(87,142,202,.5));
}

/* Branded gradients per platform, always visible */
.tw-socials a:nth-child(1){ --tw-social-a:#4267B2; --tw-social-b:#2d4a85; --tw-social-shadow:rgba(66,103,178,.45); }
.tw-socials a:nth-child(2){ --tw-social-a:#578ECA; --tw-social-b:#355a86; --tw-social-shadow:rgba(87,142,202,.45); }
.tw-socials a:nth-child(3){ --tw-social-a:#E1306C; --tw-social-b:#c1366b; --tw-social-shadow:rgba(225,48,108,.45); }
.tw-socials a:nth-child(4){ --tw-social-a:#5F6369; --tw-social-b:#33363b; --tw-social-shadow:rgba(95,99,105,.45); }
.tw-socials a:nth-child(5){ --tw-social-a:#EC4A2C; --tw-social-b:#b83a22; --tw-social-shadow:rgba(236,74,44,.45); }

/*=====================================================
RESPONSIVE
=====================================================*/

@media(max-width:1100px){

.tw-footer-grid{

grid-template-columns:1fr 1fr 1fr;

}

.tw-footer-brand{

grid-column:1/-1;

}

.tw-offices-track{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.tw-footer-top{

padding:55px 0 30px;

}

/* Two-column link grid, everything left aligned */

.tw-footer-grid{

grid-template-columns:1fr 1fr;

column-gap:24px;

row-gap:36px;

text-align:left;

}

.tw-footer-brand{

grid-column:1/-1;

text-align:left;

}

.tw-footer-col{

text-align:left;

}

.tw-footer-logo{

justify-content:flex-start;

margin:0 0 20px;

}

.tw-footer-desc{

margin:0 0 26px;

max-width:100%;

}

.tw-footer-badges{

justify-content:flex-start;

}

.tw-footer-col-title{

text-align:left;

font-size:16px;

margin-bottom:16px;

}

.tw-footer-col-title::after{

left:0;

transform:none;

}

.tw-footer-links li{

padding-left:0;

margin-bottom:12px;

font-size:14px;

}

.tw-footer-links li::before{

display:none;

}

.tw-offices-head{

flex-direction:column;

align-items:flex-start;

gap:12px;

text-align:left;

}

.tw-office-card{

text-align:left;

}

.tw-contact-grid{

justify-content:flex-start;

text-align:left;

}

.tw-contact-item{

justify-content:flex-start;

flex-direction:row;

width:100%;

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.tw-contact-item:last-child{

border-bottom:none;

}

.tw-contact-item + .tw-contact-item::before{

display:none;

}

.tw-bottom-row{

flex-direction:column;

align-items:flex-start;

text-align:left;

}

.tw-socials{

justify-content:flex-start;

}

.tw-legal-links{

justify-content:flex-start;

}

}

@media(max-width:480px){

.tw-footer{

font-size:14px;

}

.tw-footer-grid{

column-gap:18px;

row-gap:30px;

}

.tw-footer-col-title{

font-size:15px;

}

.tw-office-card{

padding:18px;

}

.tw-office-pin{

width:46px;

height:46px;

}

.tw-socials a{

width:42px;

height:42px;

}

.tw-contact-email svg{

width:38px;

height:38px;

padding:8px;

}

.tw-offices-head h3{

font-size:22px;

}

}


/* ==========================================================================
   GCC GOVERNMENT PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .section-eyebrow /
   .section-title / .section-desc, .btn / .scale-btn / .btn-outline,
   .reveal-card, .pa-hero-* / .pa-board / .pa-brow / .pa-chip / .pa-btn-ghost,
   .pp-dark-panel / .pp-screen / .pp-srow / .pp-fineprint, .twc-footer-box,
   .all-caps-grid / .cap-item-card / .cap-icon-chip, .pa-cap-grid / .pa-cap-card,
   .combined-banner / .cb-*, .faq-section / .faq-item / .faq-*,
   .dark-cta-section / .dark-cta-*, .tags-row / .tag-lbl) already exists in
   style.css and is reused as-is — do NOT duplicate those rules here.
   Paste this whole file into style.css (e.g. at the end), or link it after
   style.css. It only adds new class names, all prefixed "gcc-" to avoid
   collisions with any other page's styles.

   Uses the same design tokens already defined in :root in style.css —
   var(--c-navy), var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--c-border-soft), var(--bg-light), var(--bg-white),
   var(--font), var(--r-md), var(--r-lg), var(--dur), var(--ease), etc.
   No new JS is required for this page — header scroll state, mobile nav
   accordion, FAQ accordion and scroll-reveal in main.js all work off the
   existing class names (.site-header, .nav-item, .faq-item, .reveal-card)
   reused in the page markup.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO — small stat row that sits inside the reused .pa-hero-section
   ---------------------------------------------------------------------- */
.gcc-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 34px);
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gcc-stat { min-width: 64px; }
.gcc-stat .n {
  display: block;
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 22px;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.gcc-stat .l {
  display: block;
  font-size: 11px;
  font-weight: var(--w-semibold);
  color: #8A93A0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ----------------------------------------------------------------------
   2. USE-CASE CARDS — arrow list reused inside .pa-cap-card
   ---------------------------------------------------------------------- */
.gcc-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-blue);
  margin-bottom: 10px;
}
.gcc-arrow-list {
  list-style: none;
  margin-top: 4px;
}
.gcc-arrow-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.55;
  padding: 7px 0;
  border-top: 1px solid var(--c-border-soft);
}
.gcc-arrow-list li:first-child { border-top: none; padding-top: 0; }
.gcc-arrow-list li::before {
  content: "→";
  color: var(--c-red);
  font-weight: var(--w-bold);
  flex-shrink: 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------
   3. WHO USES IT — two-column variant of the reused .all-caps-grid /
   .cap-item-card pattern
   ---------------------------------------------------------------------- */
.gcc-aud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* ----------------------------------------------------------------------
   4. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .gcc-stat-row { gap: 22px; }
  .gcc-stat .n { font-size: 19px; }
}

@media (max-width: 560px) {
  .gcc-aud-grid { grid-template-columns: 1fr; }
  .gcc-stat-row { justify-content: space-between; row-gap: 16px; }
  .gcc-stat { min-width: 40%; }
}

/* ==========================================================================
   POLICY & AUDIT MANAGEMENT PAGE — SUPPLEMENTARY STYLES
   Paste this block into style.css (e.g. at the end). Everything else the
   page uses (.pa-hero-*, .pa-board, .pa-brow, .pa-chip, .pa-kicker,
   .pa-section-head, .pa-pain-section, .pa-scenes/.pa-scene, .pa-cap-grid/
   .pa-cap-card, .pa-moat-section, .pa-table-wrap/.pa-table, .pa-metrics/
   .pa-metric, .sp-compare-*, .ai-section/.ai-grid/.ai-card,
   .all-caps-section/.all-caps-grid/.cap-item-card/.cap-icon-chip,
   .dark-cta-section, .section-bg-white) already exists in style.css and is
   reused as-is. This block only adds: the missing light-bg utility (mirrors
   the existing .section-bg-white utility so backgrounds can alternate
   white/light exactly like the index page), a 4-column feature grid with a
   colored top accent, the framed process-diagram image, the two-pillar
   "Governance/Assurance" cards, and the redesigned CAPA closed-loop track.
   Uses only the design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--bg-light), var(--font), var(--r-md), var(--r-lg),
   var(--dur), var(--ease) — so it matches the rest of the site exactly.
   ========================================================================== */

/* ---- Light-bg utility (companion to the existing .section-bg-white) ----
   Lets a plain <section> opt into var(--bg-light) explicitly, the same way
   .section-bg-white already lets a section opt into white — needed to keep
   strict white/light alternation on this page, matching the index page. */
.section-bg-light {
  background: var(--bg-light);
}

/* ---- 4-column feature grid with a colored top accent per card
   (policy/audit lifecycle cards, CAPA feature cards, dashboard stats) ---- */
.pa-cap-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pa-cap-grid-4 .cap-item-card,
.pa-cap-grid-4 .pa-metric {
  position: relative;
  overflow: hidden;
}
.pa-cap-grid-4 .cap-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
}
.pa-cap-grid-4 .cap-item-card:nth-child(4n+1)::before { background: var(--c-red); }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+2)::before { background: var(--c-blue); }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+3)::before { background: #F59E0B; }
.pa-cap-grid-4 .cap-item-card:nth-child(4n+4)::before { background: var(--c-green); }
@media (max-width: 900px) { .pa-cap-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-cap-grid-4 { grid-template-columns: 1fr; } }

/* ---- Framed process-diagram image (policy / audit lifecycle) ---- */
.pa-process-frame {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 8px;
  background: var(--bg-light);
  box-shadow: 0 24px 50px -32px rgba(11, 29, 58, 0.28);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pa-process-frame img {
  border-radius: 12px;
  background: #fff;
  width: 100%;
  display: block;
}
@media (max-width: 760px) {
  .pa-process-frame img { min-width: 760px; width: 760px; }
}
.pa-process-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 0 4px;
}
.pa-process-foot p {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
/*  max-width: 640px;*/
}
.pa-process-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: var(--w-bold);
  color: var(--c-red);
  text-decoration: none;
  flex: none;
  transition: gap var(--dur) var(--ease);
}
.pa-process-foot a:hover { gap: 10px; }

/* ---- Scope section: Governance / Assurance pillar cards ---- */
.pa-pillars {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: 0 20px 45px -28px rgba(11, 29, 58, 0.28);
}
.pa-pillar-row { display: flex; align-items: stretch; gap: 14px; }
.pa-pillar {
  flex: 1;
  background: #2e6b1d;
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
}
.pa-pillar.alt { background: var(--c-blue); }
.pa-pillar .tag {
  font-size: 10.5px;
  font-weight: var(--w-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.pa-pillar h4 { font-family: var(--font); font-size: 16.5px; font-weight: var(--w-bold); margin: 8px 0 6px; }
.pa-pillar p { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0; }
.pa-merge-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--c-blue-light);
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--w-bold);
  color: #2e6b1d;
  text-align: center;
}
@media (max-width: 620px) { .pa-pillar-row { flex-direction: column; } }

/* ---- Number badge reused inside .pa-cap-card ".ci" for the progression
   stage cards (same 42x42 blue icon-box already defined for .pa-cap-card
   .ci — this just centers a number instead of an icon glyph) ---- */
.pa-cap-card .ci { display: flex; align-items: center; justify-content: center; font-family: var(--font); }

/* ==========================================================================
   CLOSED-LOOP CAPA TRACK — redesigned
   A bordered panel containing a connected, numbered step track: a gradient
   line running behind 5 circular nodes, horizontal on desktop, collapsing
   to a left-aligned vertical rail on mobile. The final node is filled
   solid to read as "closed".
   ========================================================================== */
.pa-loop-panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 20px 50px -30px rgba(11, 29, 58, 0.18);
  margin-bottom: 32px;
}
.pa-loop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.pa-loop-eyebrow {
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2e6b1d;
}
.pa-loop-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--w-medium);
  color: var(--c-muted);
}
.pa-loop-note i { color: var(--c-green); }

.pa-loop-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pa-loop-track::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-blue) 50%, var(--c-green));
  z-index: 0;
}
.pa-loop-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  text-align: center;
}
.pa-loop-num {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 16px;
  color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pa-loop-step:hover .pa-loop-num {
  border-color: var(--c-blue);
  transform: translateY(-3px);
}
.pa-loop-step.is-final .pa-loop-num {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}
.pa-loop-step span {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  max-width: 120px;
  line-height: 1.4;
  display: block;
}
.pa-loop-step small {
  display: block;
  font-size: 11px;
  font-weight: var(--w-regular);
  color: var(--c-muted);
  margin-top: 3px;
}

@media (max-width: 760px) {
  .pa-loop-track {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }
  .pa-loop-track::before {
    top: 0;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--c-red), var(--c-blue) 50%, var(--c-green));
  }
  .pa-loop-step {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    width: 100%;
  }
  .pa-loop-step span { max-width: none; }
}
@media (max-width: 400px) {
  .pa-loop-panel { padding: 22px 18px; }
  .pa-loop-num { width: 40px; height: 40px; min-width: 40px; font-size: 14px; }
}

/* ==========================================================================
   WORKFLOW AUTOMATION PAGE — SUPPLEMENTARY STYLES
   Paste this block into style.css (e.g. at the end). Everything else the
   page uses (.pa-hero-*, .pa-board/.pa-brow/.pa-chip/.pa-meter, .pa-kicker,
   .pa-section-head, .pa-pain-section/.pa-scenes/.pa-scene, .sp-compare-*,
   .pa-table-wrap/.pa-table, .all-caps-section/.all-caps-grid/.cap-item-card/
   .cap-icon-chip, .industries-section/.industry-grid/.industry-card,
   .cta-band/.cta-copy/.cta-btns/.btn-white, .pp-leaddiff-grid, .pa-metrics/
   .pa-metric, .pa-quote/.pa-quote-note, .faq-section/.faq-list/.faq-item/
   .faq-trigger/.faq-answer, .dark-cta-section) already exists in style.css
   and is reused as-is. This block only adds: the light/white background
   utilities (so this page can alternate white/light exactly like the index
   and Policy & Audit pages), the 2x2 "fact" cards used in the Power Apps
   licensing section, the left/right pricing comparison rows, and a couple
   of small responsive tweaks specific to this page's content shapes.
   Uses only the design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--bg-light), var(--font), var(--r-md), var(--r-lg),
   var(--dur), var(--ease) — so it matches the rest of the site exactly.
   ========================================================================== */

/* ---- Light/white background utilities (skip if already pasted from the
   Policy & Audit page addendum — safe to include twice, same rule) ---- */
/*.section-bg-light { background: var(--bg-light); }
.section-bg-white { background: var(--bg-white); }*/

/* ---- Hero quick-links row: lets .pa-fw-row also hold <a> anchors,
   styled identically to the trust-badge <span> pills already in it ---- */
.pa-fw-row a {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 6px 13px;
  letter-spacing: 0.02em;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pa-fw-row a:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Pain scenes: allow a 3-column variant on this page while keeping
   the existing .pa-scenes/.pa-scene card look untouched ---- */
@media (max-width: 768px) {
  .pa-scenes[style*="repeat(3"] { grid-template-columns: 1fr !important; }
}

/* ---- 2x2 "fact" cards (Power Apps 2026 licensing changes) ---- */
.pa-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pa-fact {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 17px;
}
.pa-fact h4 {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 6px;
}
.pa-fact p {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
}
.pa-fact strong { color: var(--c-navy); font-weight: var(--w-bold); }
@media (max-width: 560px) {
  .pa-fact-grid { grid-template-columns: 1fr; }
}

/* ---- Pricing comparison rows (per-user "them" vs per-workflow "you") ---- */
.pa-price-rows { display: flex; flex-direction: column; gap: 10px; }
.pa-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--c-navy);
}
.pa-price-row.them { opacity: 0.68; }
.pa-price-row.you { background: var(--c-blue); opacity: 1; }
.pa-price-label { font-size: 13.5px; color: #E7EAEF; line-height: 1.4; }
.pa-price-val {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: 13.5px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.pa-price-row.you .pa-price-val { color: #6BD989; }
@media (max-width: 560px) {
  .pa-price-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- Departments / pricing section 2-col shells collapse on tablet+
   (reuses the existing .pp-leaddiff-grid breakpoint, repeated here in
   case that page's addendum isn't present) ---- */
@media (max-width: 1024px) {
  .pp-leaddiff-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOG PAGE — NEW STYLES ONLY
   Everything else on this page (header, footer, .container, .btn / .scale-btn /
   .btn-outline, .section-bg-white / .section-bg-light, .dark-cta-section /
   .dark-cta-*, .reveal-card, main.js's scroll-reveal wiring) already exists
   in style.css and main.js and is reused as-is — do NOT duplicate those
   rules here. Paste this whole block into style.css (e.g. at the end). All
   new class names are prefixed "bl-" (Blog) to avoid collisions.

   Uses the same design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-teal), var(--c-muted),
   var(--c-border), var(--c-border-soft), var(--bg-light), var(--bg-white),
   var(--font), var(--r-sm/md/lg/xl), var(--dur), var(--ease),
   var(--t-h1/h2/h3/body-lg/body/small/xs), var(--w-*) — so it matches the
   rest of the site (and its font family) exactly.

   Filter bar: 4 native <select> dropdowns (Industry / Department / Module /
   Technology) styled to match the site's chrome, combined with AND logic
   in blog.js. Card thumbnails use a CSS "poster" component (gradient +
   logo badge + bold headline) instead of photographs, matching the client's
   existing branded graphic-thumbnail style shown in their reference blog.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------------- */
.bl-hero-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
  padding: clamp(120px, 16vw, 156px) 0 clamp(56px, 7vw, 84px);
  text-align: center;
}
.bl-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.bl-hero-glow-1 {
  width: 480px; height: 480px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(0,103,184,0.12) 0%, transparent 70%);
}
.bl-hero-glow-2 {
  width: 420px; height: 420px;
  bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(96,177,74,0.10) 0%, transparent 70%);
}
.bl-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.bl-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  color: var(--c-blue);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.bl-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
  flex-shrink: 0;
}

.bl-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0 0 18px;
}
.bl-hero-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto 32px;
}

.bl-search-form {
  position: relative;
  max-width: 520px;
  margin: 0 auto 32px;
}
.bl-search-form i {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-subtle);
  font-size: 15px;
  pointer-events: none;
}
.bl-search-form input {
  width: 100%;
  height: 54px;
  border-radius: 100px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  padding: 0 22px 0 50px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--c-text);
  box-shadow: 0 8px 24px rgba(11,29,58,0.05);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-search-form input::placeholder { color: var(--c-subtle); }
.bl-search-form input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 8px 26px rgba(0,103,184,0.14);
}

.bl-hero-stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 48px);
  flex-wrap: wrap;
}
.bl-hero-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bl-hero-stat strong {
  font-family: var(--font);
  font-weight: var(--w-black);
  font-size: 22px;
  color: var(--c-navy);
  letter-spacing: -0.3px;
}
.bl-hero-stat span {
  font-size: 12.5px;
  color: var(--c-muted);
  font-weight: var(--w-medium);
}

@media (max-width: 1024px) { .bl-hero-section { padding: 108px 0 52px; } }
@media (max-width: 768px)  { .bl-hero-section { padding: 96px 0 44px; } }
@media (max-width: 480px) {
  .bl-hero-section { padding: 88px 0 40px; }
  .bl-hero-title { font-size: clamp(26px, 7.5vw, 32px); }
  .bl-hero-stats { gap: 20px; }
}

/* ----------------------------------------------------------------------
   2. DROPDOWN FILTER BAR — Industry / Department / Module / Technology
   ---------------------------------------------------------------------- */
.bl-filter-section { padding: 0 0 var(--section-pad-sm); }

.bl-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.bl-filter-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-filter-field label {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
}

.bl-select-wrap { position: relative; }
.bl-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-muted);
  border-bottom: 2px solid var(--c-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}
.bl-select-wrap:focus-within::after { border-color: var(--c-blue); }

.bl-select-wrap select {
  width: 100%;
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 0 38px 0 16px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-select-wrap select:hover { border-color: var(--c-subtle); }
.bl-select-wrap select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0,103,184,0.12);
}
/* Highlight a field once the user has narrowed it away from "All" */
.bl-select-wrap.is-set select {
  border-color: var(--c-blue);
  background: var(--c-blue-light);
  color: var(--c-blue);
  font-weight: var(--w-semibold);
}
.bl-select-wrap.is-set::after { border-color: var(--c-blue); }

.bl-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  background: #fff;
  color: var(--c-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bl-filter-clear:hover { border-color: var(--c-red); color: var(--c-red); background: #FDEEEA; }

@media (max-width: 1024px) {
  .bl-filter-bar { grid-template-columns: repeat(2, 1fr); }
  .bl-filter-clear { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .bl-filter-bar { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   3. RESULT COUNT
   ---------------------------------------------------------------------- */
.bl-grid-head { margin-bottom: 24px; }
.bl-result-count {
  font-size: 13.5px;
  color: var(--c-muted);
  font-weight: var(--w-medium);
}
.bl-result-count strong { color: var(--c-navy); font-weight: var(--w-bold); }

/* ----------------------------------------------------------------------
   4. CATEGORY TAGS (below the poster, on the card body)
   ---------------------------------------------------------------------- */
.bl-cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.bl-cat-blue   { background: var(--c-blue-light); color: var(--c-blue); }
.bl-cat-green  { background: var(--c-green-light); color: #15803D; }
.bl-cat-orange { background: #FFFBEB; color: #B45309; }
.bl-cat-red    { background: #FDEEEA; color: var(--c-red); }
.bl-cat-teal   { background: #F0FDFA; color: #0D9488; }
.bl-cat-navy   { background: var(--c-blue-mid); color: var(--c-navy); }

/* ----------------------------------------------------------------------
   5. POSTER THUMBNAILS
   Dark gradient "poster" tiles carrying a Titan Workspace logo badge and a
   bold headline overlay — matches the client's existing branded-graphic
   thumbnail style, built with CSS/SVG-icons only (no external images).
   ---------------------------------------------------------------------- */
.bl-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.bl-poster::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}

/* Gradient variants */
.bl-poster-violet { background: linear-gradient(135deg, #4338CA 0%, #3730A3 55%, #1E1B4B 100%); }
.bl-poster-blue   { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #0B1D3A 100%); }
.bl-poster-navy   { background: linear-gradient(150deg, #14264a 0%, #0B1D3A 60%, #060f21 100%); }
.bl-poster-teal   { background: linear-gradient(135deg, #0EA5E9 0%, #0D8E68 60%, #08152b 100%); }
.bl-poster-green  { background: linear-gradient(135deg, #15803D 0%, #107C10 55%, #0B1D3A 100%); }
.bl-poster-red    { background: linear-gradient(135deg, #EC4A2C 0%, #B83A22 55%, #1E1B4B 100%); }
.bl-poster-orange { background: linear-gradient(135deg, #F59E0B 0%, #C2740A 55%, #1E1B4B 100%); }

/* Logo badge, top-left — mirrors the reference thumbnail's "T Titan Workspace" chip */
.bl-poster-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: rgba(255,255,255,0.94);
  color: var(--c-navy);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  padding: 5px 11px 5px 5px;
  border-radius: 20px;
  margin-bottom: auto;
}
.bl-poster-badge b { color: var(--c-red); font-weight: var(--w-bold); }
.bl-poster-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--c-navy);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: var(--w-black);
}

/* Headline content block */
.bl-poster-content { position: relative; z-index: 1; margin-top: 14px; }
.bl-poster-content h4 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 0 0 4px;
}
.bl-poster-content p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.bl-poster-content-top h4 { font-size: 14.5px; }
.bl-poster-content-big { margin-top: auto; margin-bottom: 6px; max-width: 72%; }
.bl-poster-content-big h4 { font-size: 18px; }
.bl-poster-accent { color: #F9BC15; }

/* Large decorative icon "orb" — bottom-right, mirrors the illustration on
   the right side of the reference thumbnails */
.bl-poster-orb {
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
}
.bl-poster-orb i { font-size: 30px; color: rgba(255,255,255,0.85); }

/* "VS" comparison layout (card 1) */
.bl-poster-vs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
}
.bl-poster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: var(--w-semibold);
}
.bl-poster-vs-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-navy);
  font-size: 10.5px;
  font-weight: var(--w-black);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Numbered step strip (card 2) */
.bl-poster-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: auto;
}
.bl-poster-steps span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: var(--w-bold);
}
.bl-poster-steps span i { font-size: 12px; }

/* ----------------------------------------------------------------------
   6. META ROW (author + date)
   ---------------------------------------------------------------------- */
.bl-meta-row { display: flex; align-items: center; gap: 10px; }
.bl-avatar {
  width: 34px; height: 34px; min-width: 34px;
  background: var(--c-blue);
  color: #fff;
  font-weight: var(--w-bold);
  font-size: 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bl-meta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bl-meta-text strong { font-size: 13px; font-weight: var(--w-semibold); color: var(--c-navy); }
.bl-meta-text span { font-size: 11.5px; color: var(--c-subtle); }

/* ----------------------------------------------------------------------
   7. POST GRID
   ---------------------------------------------------------------------- */
.bl-grid-section { text-align: left; }
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.bl-card {
  display: block;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(11,29,58,0.09); }
.bl-card-body { padding: 22px; }
.bl-card-body h3 {
  font-size: 16.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  line-height: 1.4;
  margin-bottom: 10px;
}
.bl-card-body p {
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* JS-driven visibility (used by blog.js for filtering / search / pagination) */
.bl-card.bl-hidden { display: none; }

/* ----------------------------------------------------------------------
   8. EMPTY STATE
   ---------------------------------------------------------------------- */
.bl-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: 40px;
}
.bl-empty i { font-size: 30px; color: var(--c-subtle); margin-bottom: 14px; }
.bl-empty h3 { font-size: 17px; font-weight: var(--w-bold); color: var(--c-navy); margin-bottom: 8px; }
.bl-empty p { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; }

/* ----------------------------------------------------------------------
   9. PAGINATION
   ---------------------------------------------------------------------- */
.bl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.bl-page-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bl-page-arrow:hover { background: var(--bg-light); border-color: var(--c-blue); color: var(--c-blue); }
.bl-page-arrow:disabled { opacity: 0.35; pointer-events: none; }
.bl-page-nums { display: flex; align-items: center; gap: 6px; }
.bl-page-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bl-page-num:hover { border-color: var(--c-blue); color: var(--c-blue); }
.bl-page-num.is-active { background: #4553a4; border-color: #4553a4; color: #fff; }



/* ----------------------------------------------------------------------
   10. INLINE NEWSLETTER FORM (drops inside the reused .dark-cta-section)
   ---------------------------------------------------------------------- */
.bl-inline-newsletter {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.bl-inline-newsletter input {
  flex: 1;
  min-width: 220px;
  height: 50px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  background: #fff;
  padding: 0 18px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.bl-inline-newsletter input:focus { border-color: var(--c-blue); }
.bl-inline-newsletter .btn { height: 50px; }

@media (max-width: 480px) {
  .bl-inline-newsletter { flex-direction: column; }
  .bl-inline-newsletter input, .bl-inline-newsletter .btn { width: 100%; }
}

/* ----------------------------------------------------------------------
   11. RESPONSIVE — grid collapse
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .bl-page-arrow, .bl-page-num { width: 36px; height: 36px; }
  .bl-poster-content-big { max-width: 84%; }
}

section#demo {
    background: var(--bg-white)!important;
}

/* ==========================================================================
   DMS PAGE — CLIENT PORTAL CTA (split layout: heading left / desc+CTA right)
   Scoped classes only, uses existing tokens — safe to paste anywhere in
   style.css without touching .twc-footer-box or any other page.
   ========================================================================== */
.dms-portal-cta {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--c-blue-light);
  border: 1px solid var(--c-blue-mid);
  border-radius: var(--r-xl);
  padding: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.dms-portal-cta-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--c-blue-mid);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}

.dms-portal-cta-left h3 {
  font-family: var(--font);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.32;
  letter-spacing: -0.3px;
  margin: 0;
}

.dms-portal-cta-right {
  border-left: 1px solid var(--c-blue-mid);
  padding-left: clamp(24px, 3vw, 40px);
}

.dms-portal-cta-right p {
  font-size: var(--t-body-lg);
  color: var(--c-text);
  line-height: 1.75;
  margin: 0 0 22px;
}

.dms-portal-cta-right p strong {
  color: var(--c-blue);
}

.dms-portal-cta-right .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dms-portal-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .dms-portal-cta-left { display: flex; flex-direction: column; align-items: center; }
  .dms-portal-cta-right {
    border-left: none;
    border-top: 1px solid var(--c-blue-mid);
    padding-left: 0;
    padding-top: 24px;
  }
}

@media (max-width: 480px) {
  .dms-portal-cta { padding: 28px 22px; }
  .dms-portal-cta-right .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   AI GRID — 3-card centered variant (page-scoped modifier, doesn't affect
   the shared 4-card .ai-grid used elsewhere)
   ========================================================================== */
.ai-grid.ai-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  max-width: 980px;
  margin: 0 auto 28px;
}

@media (max-width: 900px) {
  .ai-grid.ai-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 300px));
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .ai-grid.ai-grid-3 {
    grid-template-columns: minmax(0, 320px);
    max-width: 340px;
  }
}


/*.pa-scene.redclr {
    background: #f6ded9!important;
}
.pa-scene.blueclr {
    background: #d7e2ee!important;
}
.pa-scene.greenclr {
    background: #c6e0c0!important;
}
.pa-scene.yellowclr {
    background: #fae9bb!important;
}*/


.pa-scene.greenclr {
    border: 2px solid #2e6b1d;
}

.pa-scene.redclr {
    border: 2px solid #4577ae!important;
}

.big.clrwhite {
    color: #fff !important;
}

/* Client portal page ONLY — reduce space between testimonials & logo marquee */
.cp-testimonials-section {
  padding-bottom: 0px;
}


.cp-logom-section .container {
  text-align: center;
  padding-bottom: 24px;
}

.cp-logom-section .logo-marquee-title {
  margin-bottom: 0;
}


/* ==========================================================================
   BLOG PAGE REDESIGN — tabs + pills filter, featured post hero
   Loaded ONLY on the Blog template (see titan_enqueue_blog_assets() in
   functions.php) so it cannot affect any other page. Reuses the design
   tokens already defined in style.css (:root) — no new colors introduced.
   The base .bl-hero-*, .bl-poster*, .bl-card*, .bl-grid*, .bl-pagination,
   .bl-empty, .bl-inline-newsletter classes already exist in style.css and
   are left untouched; this file only ADDS the new tab/pill/featured UI.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. FEATURED POST HERO
   ---------------------------------------------------------------------- */
.bl-featured-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: 0 24px 60px rgba(11, 29, 58, 0.08);
}

.bl-featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-light);
}
.bl-featured-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl-featured-poster {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.bl-featured-body { text-align: left; padding: 8px clamp(4px, 1vw, 12px); }
.bl-featured-body .bl-hero-kicker { margin-bottom: 16px; }

.bl-featured-title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.bl-featured-desc {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 520px;
}
.bl-featured-btn { display: inline-flex; }

@media (max-width: 900px) {
  .bl-featured-card { grid-template-columns: 1fr; }
  .bl-featured-body { text-align: center; }
  .bl-featured-desc { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .bl-featured-card { padding: 14px; border-radius: var(--r-lg); }
  .bl-featured-title { font-size: 22px; }
}

/* Poster photo fill for grid cards (real featured images) */
.bl-poster-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bl-poster:has(.bl-poster-photo)::before { display: none; }
.bl-poster .bl-poster-photo ~ .bl-poster-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
}

/* ----------------------------------------------------------------------
   1B. FILTER CARD
   Everything (tabs, pills, reset) lives inside this bordered, padded,
   shadowed panel — this is what fixes the "tabs stuck flush to the top"
   issue: the card guarantees its own breathing room on every side no
   matter what renders above it (featured post present or not, header
   height changes on scroll, etc.), instead of relying on the section
   above to push it down.
   ---------------------------------------------------------------------- */
.bl-filter-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 32px);
  box-shadow: 0 20px 50px rgba(11, 29, 58, 0.06);
}

/* ----------------------------------------------------------------------
   2. TABS ROW (tabs left, search right — matches the reference layout)
   ---------------------------------------------------------------------- */
.bl-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  min-width: 0; /* required so flex children can actually shrink/scroll */
}

.bl-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  min-width: 0;
  padding-bottom: 2px;
}
.bl-tabs::-webkit-scrollbar { display: none; }

.bl-tab-btn {
  flex: 0 0 auto;         /* <-- THE FIX: never shrink, keep natural width */
  white-space: nowrap;    /* <-- THE FIX: never wrap/cut the label text */
  padding: 10px 18px;
  border-radius: 30px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  color: var(--c-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-semibold);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.bl-tab-btn:hover { border-color: var(--c-blue); color: var(--c-blue); }
.bl-tab-btn.is-active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

.bl-search-form-inline {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
  min-width: 0;
}
.bl-search-form-inline i {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-subtle);
  font-size: 13px;
  pointer-events: none;
}
.bl-search-form-inline input {
  width: 100%;
  height: 46px;
  border-radius: 100px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  padding: 0 18px 0 42px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bl-search-form-inline input::placeholder { color: var(--c-subtle); }
.bl-search-form-inline input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0,103,184,0.12);
}

/* ============================================================
   TABS — responsive (mobile stacks search below tabs;
   tabs row itself is ALWAYS horizontally scrollable, at every size)
   ============================================================ */
@media (max-width: 768px) {
  .bl-tabs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bl-search-form-inline { width: 100%; }

  /* edge-to-edge scroll feel on small screens */
  .bl-tabs {
    display: inline-grid;!important;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }
  .bl-tab-btn {
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ----------------------------------------------------------------------
   3. PILLS
   ---------------------------------------------------------------------- */
.bl-pill-groups { margin-bottom: 6px; }
.bl-pill-group {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
}
.bl-pill-group.is-active { display: flex; }

/* Shown instead of pills when a category has no tags created yet */
.bl-pill-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--c-muted);
  background: var(--bg-light);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin: 0;
  width: 100%;
}
.bl-pill-empty i { color: var(--c-subtle); }

.bl-pill {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-medium);
  color: var(--c-text);
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 100px;
  padding: 9px 18px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bl-pill:hover { border-color: var(--c-subtle); transform: translateY(-1px); }
.bl-pill.is-active {
  background: var(--c-blue-light);
  border-color: var(--c-blue);
  color: var(--c-blue);
  font-weight: var(--w-semibold);
}

/* Section-level safety net: even if the featured-post hero above ends up
   empty/short (e.g. no posts yet), .bl-filter-section still keeps clear
   vertical room above and below its card instead of the card touching
   the section edge. */
.bl-filter-section {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

@media (max-width: 768px) {
  .bl-filter-card { border-radius: var(--r-lg); }
}

/* ----------------------------------------------------------------------
   4. FILTER ACTIONS (reset)
   ---------------------------------------------------------------------- */
.bl-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.bl-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--c-muted);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  padding: 6px 4px;
  transition: color var(--dur) var(--ease);
}
.bl-filter-clear:hover { color: var(--c-red); }

@media (max-width: 480px) {
  .bl-filter-actions { justify-content: center; }
}

/* ----------------------------------------------------------------------
   5. Loading state (grid dims slightly while an AJAX call is in flight)
   ---------------------------------------------------------------------- */
#blGrid.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s ease; }


/**
 * single-post.css — Single Blog Post Page
 * Only loaded on is_single() (see titan_enqueue_single_post_assets()).
 *
 * Color/spacing variables below fall back to sensible defaults but will
 * pick up your theme's real tokens automatically if style.css already
 * defines --tw-navy / --tw-primary / --tw-ink / --tw-muted etc. on :root.
 * If your brand colors use different variable names, just edit the
 * fallback values (the part after the comma) in the block below.
 */

.sp-progress,
.sp-hero,
.sp-featured-media,
.sp-body-section,
.sp-related {
  --sp-navy: var( --tw-navy, #0b1730 );
  --sp-primary: var( --tw-primary, #2557d6 );
  --sp-primary-dark: var( --tw-primary-dark, #1a41ab );
  --sp-ink: var( --tw-ink, #0f172a );
  --sp-muted: var( --tw-muted, #64748b );
  --sp-border: var( --tw-border, #e6e9f0 );
  --sp-surface: var( --tw-surface, #f7f8fb );
  --sp-radius: 14px;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.sp-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}
.sp-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient( 90deg, var( --sp-primary ), var( --sp-primary-dark ) );
  transition: width 0.1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.sp-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 32px;
  background: var( --sp-navy );
  color: #fff;
}
.sp-hero-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur( 120px );
  opacity: 0.35;
  pointer-events: none;
}
.sp-hero-glow-1 {
  top: -220px;
  right: -160px;
  background: var( --sp-primary );
}

.sp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba( 255, 255, 255, 0.6 );
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sp-breadcrumb a {
  color: rgba( 255, 255, 255, 0.75 );
  text-decoration: none;
}
.sp-breadcrumb a:hover { color: #fff; }
.sp-breadcrumb i { font-size: 9px; opacity: 0.5; }
.sp-breadcrumb span { color: #fff; }

.sp-category-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba( 255, 255, 255, 0.1 );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.sp-title {
  font-size: clamp( 28px, 4vw, 44px );
  line-height: 1.2;
  font-weight: 700;
  max-width: 820px;
  margin: 0 0 20px;
}

.sp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: rgba( 255, 255, 255, 0.75 );
}
.sp-meta-author {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 500;
}
.sp-author-avatar { border-radius: 50%; }
.sp-meta-dot { opacity: 0.5; }

/* ============================================================
   FEATURED IMAGE
   Sits fully below the hero — no overlap, so nothing inside the
   hero (breadcrumb/title/meta) or inside the image itself gets
   clipped. object-position: top keeps the top of the image (where
   headline text/graphics usually sit) fully visible if the image
   ever needs to crop for aspect ratio, instead of cropping evenly
   from the center.
   ============================================================ */
.sp-featured-media {
  margin-top: 28px;
  position: relative;
  z-index: 2;
  /*background: var( --sp-surface );
  border-radius: var( --sp-radius );*/
  overflow: hidden;
/*  box-shadow: 0 12px 32px rgba( 15, 23, 42, 0.14 );*/
}
.sp-featured-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

@media ( max-width: 640px ) {
  .sp-featured-media { margin-top: 20px; }
}

/* ============================================================
   BODY LAYOUT — content + sidebar
   ============================================================ */
.sp-body-section {
  padding: 48px 0 24px;
  background: #fff;
}

.sp-layout {
  display: grid;
  grid-template-columns: minmax( 0, 1fr ) 320px;
  gap: 48px;
  align-items: start;
}

/* ---------- content column ---------- */
.sp-content-col {
  position: relative;
  min-width: 0;
}

.sp-share-rail {
  position: sticky;
  top: 110px;
  float: left;
  margin-left: -68px;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sp-share-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var( --sp-muted );
  writing-mode: vertical-rl;
  margin-bottom: 4px;
}
.sp-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var( --sp-border );
  background: #fff;
  color: var( --sp-ink );
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sp-share-btn:hover {
  background: var( --sp-primary );
  border-color: var( --sp-primary );
  color: #fff;
}
.sp-share-btn.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

.sp-content {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.8;
  color: var( --sp-ink );
}
.sp-content h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 40px 0 16px;
  scroll-margin-top: 100px; /* keeps heading visible below sticky header when TOC-jumped */
}
.sp-content h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 32px 0 12px;
  scroll-margin-top: 100px;
}
.sp-content p { margin: 0 0 20px; }
.sp-content ul,
.sp-content ol { margin: 0 0 20px; padding-left: 22px; }
.sp-content li { margin-bottom: 8px; }
.sp-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}
.sp-content blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  border-left: 3px solid var( --sp-primary );
  background: var( --sp-surface );
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var( --sp-ink );
}
.sp-content a { color: var( --sp-primary ); text-decoration: underline; text-underline-offset: 2px; }
.sp-content pre {
  background: var( --sp-navy );
  color: #e6e9f0;
  padding: 18px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 14px;
  margin: 20px 0;
}
.sp-content code {
  background: var( --sp-surface );
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.sp-content table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.sp-content th, .sp-content td { border: 1px solid var( --sp-border ); padding: 10px 12px; text-align: left; }
.sp-content th { background: var( --sp-surface ); }

/* tags */
.sp-tags {
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}
.sp-tag-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var( --sp-surface );
  border: 1px solid var( --sp-border );
  font-size: 13px;
  color: var( --sp-ink );
}
.sp-tag-pill-sm { padding: 5px 12px; font-size: 12px; }

/* author box */
.sp-author-box {
  max-width: 760px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 36px;
  padding: 24px;
  border-radius: var( --sp-radius );
  background: var( --sp-surface );
  border: 1px solid var( --sp-border );
}
.sp-author-box-avatar { border-radius: 50%; flex-shrink: 0; }
.sp-author-box-kicker { font-size: 12px; color: var( --sp-muted ); }
.sp-author-box-name { margin: 2px 0 8px; font-size: 18px; }
.sp-author-box-bio { margin: 0; color: var( --sp-muted ); font-size: 14.5px; line-height: 1.6; }

/* prev/next */
.sp-post-nav {
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.sp-post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var( --sp-border );
  text-decoration: none;
  color: var( --sp-ink );
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sp-post-nav-link:hover { border-color: var( --sp-primary ); transform: translateY( -2px ); }
.sp-post-nav-next { text-align: right; align-items: flex-end; }
.sp-post-nav-label { font-size: 12px; color: var( --sp-muted ); font-weight: 600; }
.sp-post-nav-title { font-size: 14.5px; font-weight: 600; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  position: relative;
}

.sp-widget {
  background: #fff;
  border: 1px solid var( --sp-border );
  border-radius: var( --sp-radius );
  padding: 20px;
}
.sp-widget-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var( --sp-ink );
}

/* TOC card — sticky INDEPENDENTLY of the rest of the sidebar, so it
   stays pinned while search/recent-posts/newsletter scroll normally
   below it. (Making the whole .sp-sidebar sticky doesn't work well
   once its total height exceeds the viewport — the browser only keeps
   a sticky element pinned while its own box still fits on screen.) */
.sp-toc-card {
  border: 1px solid var( --sp-border );
  border-radius: var( --sp-radius );
  background: #fff;
  overflow: hidden;
}
/* NOTE: position:sticky here is left in as a harmless progressive
   enhancement — single-post.js drives the actual sticky/unstick
   behavior manually (see updateTocSticky()), overriding these with
   inline styles when it needs to. This CSS rule doing nothing on a
   given site (e.g. because a parent has overflow/transform set) will
   not stop the JS version from working. */
.sp-toc-card-desktop {
/*  position: -webkit-sticky;*/
  position: sticky;
  top: 96px;
  align-self: flex-start;
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.sp-toc-card-desktop .sp-toc {
  max-height: calc( 100vh - 220px );
  overflow-y: auto;
}
.sp-toc-card-mobile { display: none; margin-bottom: 8px; }
.sp-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 14px;
  color: var( --sp-ink );
  border-bottom: 1px solid var( --sp-border );
}
.sp-toc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  background: var( --sp-surface );
  border: none;
  font-weight: 700;
  font-size: 14px;
  color: var( --sp-ink );
  cursor: pointer;
}
.sp-toc-caret { transition: transform 0.2s ease; font-size: 12px; }
.sp-toc-toggle[aria-expanded="true"] .sp-toc-caret { transform: rotate( 180deg ); }

/* Base .sp-toc scrolls internally once it's long enough — applies on
   both desktop and mobile so a long list never pushes the page/card
   taller than intended. JS also sets these inline when the mobile
   accordion opens, as a second layer of certainty. */
.sp-toc { padding: 8px 0; max-height: 360px; overflow-y: auto; }
.sp-toc-card-mobile .sp-toc { display: none; padding: 8px 18px 16px; max-height: 300px; overflow-y: auto; }
.sp-toc-card-mobile.is-open .sp-toc { display: block; }

.sp-toc-link {
  display: block;
  padding: 8px 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var( --sp-muted );
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sp-toc-link:hover { color: var( --sp-ink ); background: var( --sp-surface ); }
.sp-toc-link.is-active {
  color: var( --sp-primary );
  border-left-color: var( --sp-primary );
  background: var( --sp-surface );
  font-weight: 600;
}
.sp-toc-link-h3 { padding-left: 34px; font-size: 13px; }
.sp-toc-empty { padding: 14px 20px; font-size: 13px; color: var( --sp-muted ); }

/* Visually hidden but still readable by screen readers — used instead of
   relying on the parent theme defining .screen-reader-text, which caused
   the search label to render as visible stacked text before. */
.sp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect( 0, 0, 0, 0 );
  white-space: nowrap;
  border: 0;
}

/* search widget */
.sp-search-widget {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.sp-search-widget i { color: var( --sp-muted ); flex-shrink: 0; }
.sp-search-widget input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  background: transparent;
}

/* recent posts widget */
.sp-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sp-recent-item { display: flex; gap: 12px; align-items: flex-start; }
.sp-recent-thumb-link { flex-shrink: 0; }
.sp-recent-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.sp-recent-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var( --sp-surface );
  color: var( --sp-muted );
}
.sp-recent-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-recent-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var( --sp-ink );
  text-decoration: none;
  line-height: 1.4;
}
.sp-recent-title:hover { color: var( --sp-primary ); }
.sp-recent-date { font-size: 12px; color: var( --sp-muted ); }

/* topics widget */
.sp-topics-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* mini cta widget */
.sp-cta-widget {
  background: var( --sp-navy );
  border-color: var( --sp-navy );
  color: #fff;
}
.sp-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba( 255, 255, 255, 0.7 );
  margin-bottom: 10px;
}
.sp-cta-title { margin: 0 0 8px; font-size: 16px; color: #fff; }
.sp-cta-desc { margin: 0 0 14px; font-size: 13px; color: rgba( 255, 255, 255, 0.7 ); line-height: 1.5; }
.sp-cta-form { display: flex; flex-direction: column; gap: 10px; }
.sp-cta-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba( 255, 255, 255, 0.2 );
  background: rgba( 255, 255, 255, 0.08 );
  color: #fff;
  font-size: 13.5px;
  outline: none;
}
.sp-cta-form input::placeholder { color: rgba( 255, 255, 255, 0.5 ); }
.sp-cta-btn { width: 100%; justify-content: center; margin-top: 10px!important;}

/* ============================================================
   RELATED ARTICLES
   ============================================================ */
.sp-related { padding: 56px 0 72px; }
.sp-related-title { font-size: 26px; margin: 0 0 28px; }
.sp-related-grid { margin-top: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: sidebar drops below content, mobile TOC accordion turns on */
@media ( max-width: 1024px ) {
  .sp-layout {
    grid-template-columns: 1fr;
  }
  .sp-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sp-toc-card-desktop { display: none; }
  .sp-toc-card-mobile { display: block; }
  /*.sp-widget,
  .sp-toc-card { flex: 1 1 260px; }*/

  .sp-share-rail {
    position: static;
    float: none;
    flex-direction: row;
    margin-left: 0;
    width: auto;
    margin-bottom: 24px;
  }
  .sp-share-label { writing-mode: horizontal-tb; margin-bottom: 0; margin-right: 4px; }
}

/* Mobile */
@media ( max-width: 640px ) {
  .sp-hero { padding: 70px 0 24px; }
  .sp-title { font-size: 22px; }
  .sp-meta { font-size: 13px; gap: 8px; }
  .sp-featured-img { max-height: 240px; }
  .sp-body-section { padding: 32px 0 12px; }
  .sp-content { font-size: 16px; line-height: 1.75; }
  .sp-content h2 { font-size: 22px; margin: 32px 0 12px; }
  .sp-content h3 { font-size: 18.5px; margin: 26px 0 10px; }
  .sp-author-box { flex-direction: column; align-items: flex-start; padding: 18px; }
  .sp-post-nav { grid-template-columns: 1fr; }
  .sp-post-nav-next { text-align: left; align-items: flex-start; }
  .sp-sidebar { flex-direction: column; }
  .sp-related { padding: 40px 0 48px; }
  .sp-related-title { font-size: 22px; margin-bottom: 20px; }
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
  .sp-progress span,
  .sp-share-btn,
  .sp-post-nav-link,
  .sp-toc-caret {
    transition: none;
  }
}


/* ==========================================================================
   NEWSLETTER POPUP MODAL — site-wide, glass-blur backdrop
   ========================================================================== */
.tw-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.tw-popup-overlay.is-open { display: flex; opacity: 1; }

.tw-popup-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 36px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: scale(0.94) translateY(16px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  max-height: 90vh;
  overflow-y: auto;
}
.tw-popup-overlay.is-open .tw-popup-modal { transform: scale(1) translateY(0); opacity: 1; }

.tw-popup-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-light);
  color: var(--c-muted);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tw-popup-close:hover { background: var(--c-border); color: var(--c-navy); }

.tw-popup-title {
  font-size: 22px;
  font-weight: var(--w-black);
  color: var(--c-blue);
  margin-bottom: 12px;
}
.tw-popup-desc {
  font-size: 14.5px;
  color: var(--c-text);
  line-height: 1.6;
  margin-bottom: 22px;
}
.tw-popup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.tw-popup-field {
  border: none;
  border-bottom: 1.5px solid var(--c-border);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  width: 100%;
}
.tw-popup-field:focus { border-color: var(--c-blue); }
.tw-popup-field-full { margin-bottom: 20px; }

.tw-popup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}
.tw-popup-consent input { margin-top: 3px; flex-shrink: 0; }

.tw-popup-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--bg-light);
  margin-bottom: 22px;
}
.tw-popup-captcha input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }
.tw-popup-captcha-label { font-size: 14px; color: var(--c-text); flex: 1; }
.tw-popup-captcha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--c-subtle);
  flex-shrink: 0;
}
.tw-popup-captcha-badge i { font-size: 22px; color: var(--c-blue); margin-bottom: 2px; }

.tw-popup-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.tw-popup-btns .btn { flex: 1; justify-content: center; white-space: nowrap; }

@media (max-width: 480px) {
  .tw-popup-row { grid-template-columns: 1fr; gap: 12px; }
  .tw-popup-btns { flex-direction: column; }
  .tw-popup-modal { padding: 24px 20px; }
}

/* FIX: make CF7's wrapper span invisible to layout so grid works on inputs directly */
.tw-popup-row .wpcf7-form-control-wrap {
  display: contents;
}

.tw-popup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.tw-popup-field {
  border: none;
  border-bottom: 1.5px solid var(--c-border);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  width: 100%;
  box-sizing: border-box;
}

.tw-popup-field:focus { border-color: var(--c-blue); }

.tw-popup-field-full {
  margin-bottom: 20px;
  display: block;
  width: 100%;
}

.tw-popup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

.tw-popup-consent input { margin-top: 3px; flex-shrink: 0; }

.tw-popup-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--bg-light);
  margin-bottom: 22px;
}

.tw-popup-captcha input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

.tw-popup-captcha-label { font-size: 14px; color: var(--c-text); flex: 1; }

.tw-popup-captcha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--c-subtle);
  flex-shrink: 0;
}

.tw-popup-captcha-badge i { font-size: 22px; color: var(--c-blue); margin-bottom: 2px; }

.tw-popup-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.tw-popup-btns .btn { flex: 1; justify-content: center; white-space: nowrap; }

/* Response/error messages */
.wpcf7-not-valid-tip {
  font-size: 11px;
  color: #e53935;
  margin-top: 4px;
  display: block;
}

.wpcf7-response-output {
  font-size: 13px;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-top: 14px;
}

/* Tablet */
@media (max-width: 640px) {
  .tw-popup-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .tw-popup-row { grid-template-columns: 1fr; gap: 12px; }
  .tw-popup-btns { flex-direction: column; }
  .tw-popup-modal { padding: 24px 20px; }
  .tw-popup-field { font-size: 14px; }
  .tw-popup-captcha { padding: 12px 14px; }
}


/* ============================================================
   CONTACT PAGE STYLES  (v2 — conflict fix + responsive polish)

   ROOT CAUSE OF THE BUG YOU HIT:
   The footer already ships its own ".tw-contact-grid" rule (used for
   the phone/email chip row inside .tw-footer-contact — see the
   "CONTACT SECTION" block in the footer CSS):
   ============================================================ */

:root {
  --tw-contact-gap: 48px;
}

/* ---------- HERO / TOPBAR BANNER ---------- */

.tw-contact-hero {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #0d2c54; /* fallback if image fails to load */
}

.tw-contact-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.tw-contact-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 30, 66, 0.92) 0%,
    rgba(13, 44, 84, 0.85) 45%,
    rgba(20, 58, 110, 0.75) 100%
  );
  z-index: 2;
}

.tw-contact-hero-inner {
  position: relative;
  z-index: 3;
  padding: 56px 0;
}

.tw-contact-hero-title {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 14px;
  max-width: 900px;
}

.tw-contact-hero-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 640px;
}

.tw-contact-section {
  padding: 80px 0;
  background: #fff;
}

/* ---------- THE FIX: renamed two-column layout ----------
   Was ".tw-contact-grid" (collided with the footer's own class of
   the same name). Now ".tw-contact-page-grid" — unique, safe, and
   re-enabled (no longer commented out). */
.tw-contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--tw-contact-gap);
  align-items: start;
}

/* ---------- LEFT COLUMN ---------- */

.tw-contact-info {
  padding-right: 12px;
}

.tw-contact-eyebrow {
  margin-bottom: 14px;
}

.tw-contact-heading {
  font-size: 34px;
  font-weight: 700;
  color: var(--c-text, #1a1a2e);
  line-height: 1.25;
  margin: 0 0 24px;
}

.tw-contact-schedule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.tw-contact-alt {
  font-size: 15px;
  color: var(--c-muted, #6b7280);
  margin-bottom: 10px;
}

.tw-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-blue, #0a66c2);
  text-decoration: none;
/*  margin-bottom: 20px;*/
  transition: opacity var(--dur, 0.25s) var(--ease, ease);
}

.tw-contact-email:hover { opacity: 0.75; }

.tw-contact-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.tw-contact-social-label {
  font-size: 14px;
  color: var(--c-text, #1a1a2e);
  font-weight: 500;
}

.tw-social-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-border, #e2e5ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text, #1a1a2e);
  font-size: 14px;
  text-decoration: none;
  transition: all var(--dur, 0.25s) var(--ease, ease);
}

.tw-social-circle:hover {
  background: var(--c-blue, #0a66c2);
  border-color: var(--c-blue, #0a66c2);
  color: #fff;
  transform: translateY(-2px);
}

.tw-contact-offices-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-text, #1a1a2e);
  margin-bottom: 24px;
}

.tw-office-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tw-office-item {
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border, #e2e5ea);
}

.tw-office-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tw-office-new-pin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-light, #f5f7fa);
  color: var(--c-blue, #0a66c2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 2px;
}

.tw-office-body { flex: 1; min-width: 0; }

.tw-office-country {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--c-blue, #0a66c2);
  margin-bottom: 6px;
}

.tw-office-details {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.tw-office-col {
  flex: 1;
  min-width: 200px;
}

.tw-office-col strong {
  display: block;
  font-size: 14px;
  color: var(--c-text, #1a1a2e);
  margin-bottom: 4px;
}

.tw-office-col p {
  font-size: 13.5px;
  color: var(--c-muted, #6b7280);
  line-height: 1.55;
  margin: 0 0 4px;
}

.tw-office-divider {
  border-left: 1px solid var(--c-border, #e2e5ea);
  padding-left: 24px;
}

/* ---------- RIGHT COLUMN: FORM CARD ---------- */

.tw-contact-form-card {
  background: #fff;
  border: 2px solid var(--c-blue, #0a66c2);
  border-radius: var(--r-sm, 12px);
  padding: 32px;
  box-shadow: 0 12px 32px rgba(10, 40, 90, 0.08);
}

/* Keep the form comfortably in view on tall desktop screens without
   ever letting it collide with the header or overflow off-screen. */
@media (min-width: 1200px) {
  .tw-contact-form-card {
    position: sticky;
    top: 96px;
  }
}

/* CF7 root form spacing */
.tw-contact-form-card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tw-contact-form-card p {
  margin: 0 0 16px;
}

/* Two-column field rows */
.tw-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 4px;
}

.tw-form-row .wpcf7-form-control-wrap {
  display: contents;
}

.tw-form-group { margin-bottom: 16px; }

.tw-form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text, #1a1a2e);
  margin-bottom: 6px;
}

.tw-form-label .req { color: #e53935; }

.tw-form-field,
.tw-contact-form-card input[type="text"],
.tw-contact-form-card input[type="email"],
.tw-contact-form-card input[type="tel"],
.tw-contact-form-card textarea {
  width: 100%;
  border: 1px solid var(--c-border, #e2e5ea);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--font, inherit);
  font-size: 14px;
  color: var(--c-text, #1a1a2e);
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--dur, 0.25s) var(--ease, ease);
}

.tw-contact-form-card input:focus,
.tw-contact-form-card textarea:focus {
  border-color: var(--c-blue, #0a66c2);
}

.tw-contact-form-card textarea {
  min-height: 70px;
  resize: vertical;
}

.tw-form-hint {
  font-size: 11.5px;
  color: var(--c-subtle, #9aa1ac);
  margin-top: 4px;
  display: block;
}

.tw-form-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text, #1a1a2e);
  margin-bottom: 12px;
}

/* Business outcome checkbox grid */
.tw-outcome-box {
  border: 1px solid var(--c-border, #e2e5ea);
  border-radius: var(--r-sm, 12px);
  padding: 18px 20px;
  background: var(--bg-light, #f8fafc);
  margin-bottom: 20px;
}

.tw-outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.tw-outcome-grid .wpcf7-list-item {
  margin: 0 !important;
  display: block;
}

.tw-outcome-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--c-text, #1a1a2e);
  cursor: pointer;
}

.tw-outcome-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--c-blue, #0a66c2);
}

/* reCAPTCHA row (cosmetic, matches screenshot) */
.tw-captcha-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--c-border, #e2e5ea);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: #fff;
}

.tw-captcha-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tw-captcha-row span.tw-captcha-text {
  font-size: 14px;
  color: var(--c-text, #1a1a2e);
  flex: 1;
}

.tw-captcha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9.5px;
  color: var(--c-subtle, #9aa1ac);
}

.tw-captcha-badge i {
  font-size: 20px;
  color: var(--c-blue, #0a66c2);
  margin-bottom: 2px;
}

.tw-contact-form-card input[type="submit"],
.tw-contact-form-card .wpcf7-submit {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--c-blue, #0a66c2);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 20px;
  cursor: pointer;
  transition: background var(--dur, 0.25s) var(--ease, ease), transform var(--dur, 0.25s) var(--ease, ease);
}

.tw-contact-form-card input[type="submit"]:hover,
.tw-contact-form-card .wpcf7-submit:hover {
  background: var(--primary, #084a94);
  transform: translateY(-1px);
}

.tw-form-footnote {
  font-size: 12px;
  color: var(--c-subtle, #9aa1ac);
  text-align: center;
  margin-top: 12px;
}

.wpcf7-not-valid-tip {
  font-size: 11px;
  color: #e53935;
  margin-top: 4px;
  display: block;
}

.wpcf7-response-output {
  font-size: 13px;
  border-radius: var(--r-sm, 12px);
  padding: 10px 14px;
  margin-top: 16px !important;
}

/* ---------- MAP SECTION (tabbed) ---------- */

.tw-contact-map-section {
  width: 100%;
  padding: 64px 0;
  background: var(--bg-light, #f8fafc);
}

.tw-map-tabs-wrap {
  background: #fff;
  border: 1px solid var(--c-border, #e2e5ea);
  border-radius: var(--r-sm, 12px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 40, 90, 0.06);
}

.tw-map-tabs {
  display: flex;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid var(--c-border, #e2e5ea);
  flex-wrap: wrap;
}

.tw-map-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted, #6b7280);
  cursor: pointer;
  transition: all var(--dur, 0.25s) var(--ease, ease);
}

.tw-map-tab i { color: inherit; }

.tw-map-tab:hover {
  background: var(--bg-light, #f8fafc);
  color: var(--c-text, #1a1a2e);
}

.tw-map-tab.is-active {
  background: var(--c-blue, #0a66c2);
  color: #fff;
}

.tw-map-frame-wrap {
  width: 100%;
  line-height: 0;
}

.tw-map-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* ---------- TRUSTED BRANDS (logo marquee heading) ---------- */

.tw-contact-logom {
  padding-top: 56px;
  padding-bottom: 56px;
  background: #fff;
}

.tw-contact-logom-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text, #1a1a2e);
  margin-bottom: 32px;
}

/* ---------- SUCCESS MODAL ---------- */

.tw-success-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  padding: 20px;
  transition: opacity var(--dur, 0.25s) var(--ease, ease), visibility var(--dur, 0.25s) var(--ease, ease);
}

.tw-success-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.tw-success-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
}

.tw-success-modal-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--r-sm, 12px);
  padding: 40px 36px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(12px);
  transition: transform var(--dur, 0.25s) var(--ease, ease);
}

.tw-success-modal.is-open .tw-success-modal-card {
  transform: translateY(0);
}

.tw-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.tw-success-modal-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text, #1a1a2e);
  margin: 0 0 12px;
}

.tw-success-modal-card p {
  font-size: 14px;
  color: var(--c-muted, #6b7280);
  line-height: 1.6;
  margin: 0 0 24px;
}

.tw-success-ok {
  min-width: 120px;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE
   Breakpoints: 1200 (sticky form off) / 1024 (grid stacks) /
   900 (tablet spacing) / 768 (form rows stack) / 480 (phone)
   ============================================================ */

@media (max-width: 1199px) {
  .tw-contact-form-card { position: static; top: auto; }
}

@media (max-width: 1024px) {
  .tw-contact-page-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tw-contact-info { padding-right: 0; }
  .tw-contact-heading { font-size: 30px; }
  .tw-contact-hero-title { font-size: 30px; }
}

@media (max-width: 900px) {
  .tw-contact-section { padding: 64px 0; }
  .tw-contact-page-grid { gap: 32px; }
  .tw-office-details { gap: 16px; }
}

@media (max-width: 768px) {
  .tw-contact-section { padding: 56px 0; }
  .tw-form-row { grid-template-columns: 1fr; gap: 12px; }
  .tw-outcome-grid { grid-template-columns: 1fr; }
  .tw-office-details { gap: 16px; }
  .tw-office-divider {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--c-border, #e2e5ea);
    padding-top: 12px;
  }
  .tw-map-frame-wrap iframe { height: 320px; }
  .tw-map-tab { padding: 9px 14px; font-size: 13px; }

  .tw-contact-hero { min-height: 220px; }
  .tw-contact-hero-inner { padding: 44px 0; }
  .tw-contact-hero-title { font-size: 26px; }
  .tw-contact-hero-desc { font-size: 14.5px; }

  .tw-contact-form-card { padding: 26px; }
}

@media (max-width: 640px) {
  .tw-office-item { flex-direction: row; }
  .tw-contact-social { gap: 10px; }
}

@media (max-width: 480px) {
  .tw-contact-heading { font-size: 26px; }
  .tw-contact-form-card { padding: 22px 18px; }
  .tw-outcome-box { padding: 14px; }
  .tw-captcha-row { padding: 10px 12px; flex-wrap: wrap; }
  .tw-office-item { flex-direction: row; }
  .tw-contact-schedule-btn { width: 100%; }

  .tw-contact-hero { min-height: 190px; padding: 0 11px;}
  .tw-contact-hero-inner { padding: 36px 0; }
  .tw-contact-hero-title { font-size: 21px; line-height: 1.35; }
  .tw-contact-hero-desc { font-size: 13.5px; }

  .tw-map-tabs { justify-content: center; }
  .tw-map-tab { flex: 1 1 auto; justify-content: center; }
  .tw-map-frame-wrap iframe { height: 260px; }
  .tw-contact-map-section { padding: 40px 0; }
  .tw-contact-logom { padding-top: 40px; padding-bottom: 40px; }
  .tw-contact-logom-title { font-size: 17px; }

  .tw-success-modal-card { padding: 28px 22px; }
}

@media (max-width: 360px) {
  .tw-office-details { flex-direction: column; }
  .tw-office-col { min-width: 0; }
}


/* ============================================================
   SEARCH RESULTS PAGE
   Reuses .sp-hero, .sp-layout, .sp-content-col, .sp-sidebar,
   .sp-widget, .bl-grid and template-parts/blog-card as-is —
   only the bits unique to this page are defined here.
   ============================================================ */

.sr-hero-meta {
  font-size: 14px;
  color: rgba( 255, 255, 255, 0.7 );
  margin: 4px 0 22px;
}

/* Big search bar inside the dark hero — a lighter-weight version of
   .sp-search-widget, styled to sit on the navy hero background. */
.sr-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  padding: 6px 8px 6px 20px;
  background: rgba( 255, 255, 255, 0.08 );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 999px;
}
.sr-hero-search i.fa-magnifying-glass {
  color: rgba( 255, 255, 255, 0.6 );
  flex-shrink: 0;
}
.sr-hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 15px;
  padding: 10px 0;
}
.sr-hero-search input::placeholder { color: rgba( 255, 255, 255, 0.5 ); }
.sr-hero-search button {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var( --sp-primary );
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.sr-hero-search button:hover { opacity: 0.9; transform: scale( 1.05 ); }

/* Results grid — inherits .bl-grid's column/gap rules from the
   theme's main stylesheet, this just adds breathing room above it. */
.sr-results-grid { margin-top: 4px; }

/* Pagination */
.sr-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.sr-page-item { display: inline-flex; }
.sr-page-item span,
.sr-page-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var( --sp-border );
  border-radius: var( --sp-radius );
  font-size: 14px;
  font-weight: 600;
  color: var( --sp-ink );
  text-decoration: none;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sr-page-item a:hover {
  border-color: var( --sp-primary );
  color: var( --sp-primary );
}
.sr-page-item span.current,
.sr-page-item .current {
  background: var( --sp-primary );
  border-color: var( --sp-primary );
  color: #fff;
}
.sr-page-item .dots {
  border: none;
  background: transparent;
  min-width: 24px;
}

/* Empty state */
.sr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 48px 32px;
  background: #fff;
  border: 1px solid var( --sp-border );
  border-radius: var( --sp-radius );
  text-align: left;
}
.sr-empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var( --sp-surface );
  color: var( --sp-muted );
  font-size: 20px;
}
.sr-empty-title { margin: 0; font-size: 20px; font-weight: 700; color: var( --sp-ink ); }
.sr-empty-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var( --sp-muted ); max-width: 46ch; }


/* ============================================================
   404 PAGE
   Reuses .sp-hero for the banner, .bl-grid + blog-card for the
   "you might be looking for" section (same as related articles
   on single.php), and .btn / .scale-btn for the CTAs.
   ============================================================ */

.err-hero { padding-bottom: 64px; }
.err-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.err-code {
  display: block;
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient( 135deg, #fff 0%, rgba( 255, 255, 255, 0.35 ) 100% );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -2px;
  margin-bottom: 8px;
}

.err-title { margin: 0 0 12px; }

.err-desc {
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba( 255, 255, 255, 0.7 );
  margin: 0 0 28px;
}

.err-search { margin-bottom: 28px; }

.err-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Outline variant of the theme's .btn, for use on the dark hero next
   to the solid .btn — namespaced to .err-actions so it can't leak
   into or clash with any existing .btn-outline style elsewhere. */
.err-actions .err-btn-outline {
  background: transparent;
  border: 1px solid rgba( 255, 255, 255, 0.35 );
  color: #fff;
}
.err-actions .err-btn-outline:hover {
  background: rgba( 255, 255, 255, 0.08 );
  border-color: rgba( 255, 255, 255, 0.6 );
}

.err-recent-section .sp-related-title { margin-bottom: 24px; }


/* ============================================================
   RESPONSIVE
   Breakpoints match single-post.css / single-post.js
   (DESKTOP_BREAKPOINT = 1024px is where .sp-layout collapses
   from two columns to one).
   ============================================================ */

@media ( max-width: 1024px ) {
  .sr-hero-search { max-width: 100%; }
}

@media ( max-width: 768px ) {
  .err-code { font-size: 90px; }

  .sr-empty-state {
    align-items: center;
    text-align: center;
    padding: 36px 24px;
  }
  .sr-empty-desc { max-width: 100%; }

  .err-hero-inner { align-items: center; text-align: center; }
  .err-desc { max-width: 100%; }
  .err-actions { justify-content: center; }
}

@media ( max-width: 480px ) {
  .err-code { font-size: 64px; }

  .sr-hero-search {
    padding: 6px 6px 6px 16px;
    border-radius: 16px;
  }
  .sr-hero-search input { font-size: 14px; }
  .sr-hero-search button { width: 38px; height: 38px; }

  .sr-pagination { justify-content: center; }
  .sr-page-item span,
  .sr-page-item a { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; }

  .err-actions { flex-direction: column; width: 100%; }
  .err-actions .btn { width: 100%; justify-content: center; }
}

/* CF7 form */
.sp-cta-form-wrap form.wpcf7-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Remove CF7 default paragraph spacing */
.sp-cta-form-wrap form.wpcf7-form p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Form row */
.sp-cta-form-wrap .sp-cta-form-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

/* Input */
.sp-cta-form-wrap .sp-cta-email {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    margin: 0;
    border: 1px solid #d9dfe7;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sp-cta-form-wrap .sp-cta-email:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* CF7 validation */
.sp-cta-form-wrap .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 12px;
}

.sp-cta-form-wrap .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 8px 12px !important;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 6px;
}

/* ==========================================================================
   PRICING PAGE — NEW STYLES ONLY
   Everything else this page uses (header, footer, .container, .btn /
   .btn-outline / .scale-btn, .section-title, .section-bg-white,
   .faq-section / .faq-item / .faq-trigger / .faq-answer / .faq-icon,
   .dark-cta-section / .dark-cta-*, .reveal-card) already exists in
   style.css and main.js and is reused as-is — do NOT duplicate those
   rules. Paste this whole block into style.css (e.g. at the end). All
   new class names are prefixed "pr-" (Pricing) to avoid collisions.

   Uses only the design tokens already defined in :root — var(--c-navy),
   var(--c-blue), var(--c-red), var(--c-green), var(--c-muted),
   var(--c-border), var(--c-border-soft), var(--bg-light), var(--bg-white),
   var(--bg-dark), var(--font), var(--r-sm/md/lg/xl), var(--dur), var(--ease),
   var(--t-h1/h2/body-lg/body/small), var(--w-*) — plus the one brand
   yellow (#F9BC15) already used elsewhere on the site (hero/footer
   gradients), scoped here as --pr-yellow so it stays consistent without
   touching :root.

   No new JS is required — the FAQ accordion and scroll-reveal wiring in
   main.js already target the generic ".faq-item" / ".reveal-card"
   classes reused on this page, regardless of how they're nested.
   ========================================================================== */

.pr-yellow   { color: var(--pr-yellow, #F9BC15); }
.pr-blue-text { color: var(--c-blue); }

/* ----------------------------------------------------------------------
   1. HERO — dark
   ---------------------------------------------------------------------- */
.pr-hero-section {
  --pr-yellow: #F9BC15;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #0d2b3f 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 15vw, 150px) 0 clamp(56px, 6vw, 76px);
  text-align: center;
}
.pr-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.pr-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.pr-hero-glow-1 {
  width: 480px; height: 480px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(69,83,164,0.30), transparent 70%);
}
.pr-hero-glow-2 {
  width: 420px; height: 420px;
  bottom: -180px; left: -120px;
  background: radial-gradient(circle, rgba(16,185,129,0.14), transparent 70%);
}
.pr-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }

.pr-hero-title {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.6px;
  margin: 0 0 20px;
}
.pr-hero-desc {
  font-size: var(--t-body-lg);
  color: #C6C9CF;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 12px;
}
.pr-hero-subdesc {
  font-size: 14px;
  color: #8A93A0;
  margin: 0 auto;
}

@media (max-width: 1024px) { .pr-hero-section { padding: 108px 0 52px; } }
@media (max-width: 768px)  { .pr-hero-section { padding: 96px 0 44px; } }
@media (max-width: 480px)  { .pr-hero-section { padding: 88px 0 40px; } }

/* ----------------------------------------------------------------------
   2. TIER CARDS
   ---------------------------------------------------------------------- */
.pr-tiers-section { text-align: center; }
.pr-tiers-head { max-width: 640px; margin: 0 auto 40px; }
.pr-tiers-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  letter-spacing: -0.4px;
  margin-bottom: 12px;
}
.pr-tiers-desc { font-size: var(--t-body-lg); color: var(--c-muted); line-height: 1.7; }

.pr-tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(11,29,58,0.08);
  overflow: hidden;
  text-align: left;
}

.pr-tier-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 26px;
  border-right: 1px solid var(--c-border-soft);
  background: #fff;
  transition: transform var(--dur) var(--ease);
}
.pr-tier-card:last-child { border-right: none; }

.pr-tier-name {
  font-family: var(--font);
  font-size: 22px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 14px;
}
.pr-tier-upto {
  display: block;
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-subtle);
  margin-bottom: 6px;
}
.pr-tier-num {
  font-family: var(--font);
  font-size: 40px;
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1;
  letter-spacing: -1px;
}
.pr-tier-unit {
  display: block;
  font-size: 12.5px;
  color: var(--c-muted);
  margin: 6px 0 18px;
}
.pr-tier-price {
  font-family: var(--font);
  font-size: 26px;
  font-weight: var(--w-black);
  color: var(--c-navy);
  letter-spacing: -0.5px;
}
.pr-tier-price-custom { font-size: 22px; }
.pr-tier-billing {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin: 4px 0 22px;
}

.pr-tier-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1;
}
.pr-tier-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
}
.pr-tier-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-red);
}

.pr-tier-btn { width: 100%; justify-content: center; font-size: 14px; }

/* Featured / Medium tier — dark card */
.pr-tier-featured {
  position: relative;
  background: var(--c-navy);
  transform: scale(1.035);
  z-index: 2;
  box-shadow: 0 30px 60px rgba(11,29,58,0.28);
}
.pr-tier-flag {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--pr-yellow, #F9BC15);
  color: #1a1a18;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: 100px;
}
.pr-tier-featured .pr-tier-name,
.pr-tier-featured .pr-tier-num,
.pr-tier-featured .pr-tier-price { color: #fff; }
.pr-tier-featured .pr-tier-upto,
.pr-tier-featured .pr-tier-unit,
.pr-tier-featured .pr-tier-billing { color: #9AA5B5; }
.pr-tier-featured .pr-tier-list li { color: #C6CCD6; }
.pr-tier-featured .pr-tier-list li::before { background: var(--pr-yellow, #F9BC15); }

.pr-tier-btn-white {
  background: #fff;
  color: var(--c-navy);
}
.pr-tier-btn-white:hover {
  background: var(--pr-yellow, #F9BC15);
  color: #1a1a18;
  transform: translateY(-2px);
}

.pr-tiers-note {
  max-width: 900px;
  margin: 28px auto 0;
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.6;
  text-align: center;
}
.pr-tiers-note strong { color: var(--c-navy); font-weight: var(--w-bold); }

@media (max-width: 1024px) {
  .pr-tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .pr-tier-card { border-bottom: 1px solid var(--c-border-soft); }
  .pr-tier-card:nth-child(2n) { border-right: none; }
  .pr-tier-featured { transform: none; }
}
@media (max-width: 640px) {
  .pr-tiers-grid { grid-template-columns: 1fr; }
  .pr-tier-card { border-right: none !important; }
  .pr-tier-featured { transform: none; }
}

/* ----------------------------------------------------------------------
   3. EVERY TIER INCLUDES
   ---------------------------------------------------------------------- */
.pr-includes-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}
.pr-includes-head h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--c-navy);
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.pr-includes-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
.pr-includes-item h4 {
  font-size: 15.5px;
  font-weight: var(--w-bold);
  color: var(--c-navy);
  margin-bottom: 8px;
}
.pr-includes-item p {
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .pr-includes-grid { grid-template-columns: 1fr; }
  .pr-includes-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pr-includes-items { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   4. "WHAT UNLIMITED MEANS" DARK PANEL
   ---------------------------------------------------------------------- */
.pr-unlimited-section { --pr-yellow: #F9BC15; }
.pr-unlimited-panel {
  background: linear-gradient(150deg, #14264a 0%, #0B1D3A 55%, #060f21 100%);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 56px);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.pr-unlimited-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9AA5B5;
  margin-bottom: 16px;
}
.pr-unlimited-title {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: var(--w-black);
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.pr-unlimited-desc {
  font-size: 15px;
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------------
   5. VANILLA / PROFESSIONAL SERVICES SPLIT
   ---------------------------------------------------------------------- */
.pr-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pr-split-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.pr-split-green { border-left-color: var(--c-green); }
.pr-split-yellow { border-left-color: var(--pr-yellow, #F9BC15); }

.pr-split-title {
  display: block;
  font-size: 15px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-red);
  margin-bottom: 18px;
}
.pr-split-title-yellow { color: #B0831F; }

.pr-split-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pr-split-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
}
.pr-split-list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--c-green);
  font-weight: var(--w-bold);
  font-size: 12.5px;
}
.pr-split-yellow .pr-split-list li::before { color: #B0831F; }

@media (max-width: 768px) {
  .pr-split-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   6. FAQ — two independent columns (keeps topics grouped, unlike the
   default row-major .faq-list grid used on the homepage)
   ---------------------------------------------------------------------- */
.pr-faq-section .section-title { margin-bottom: 48px; }
.pr-faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  max-width: 1160px;
  margin: 0 auto;
  text-align: left;
  align-items: start;
}
.pr-faq-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 860px) {
  .pr-faq-cols { grid-template-columns: 1fr; max-width: 720px; }
}


/* ==========================================================================
   COMING SOON PAGE — NEW STYLES ONLY
   ========================================================================== */

.cs-section {
  --cs-yellow: #F9BC15;
  position: relative;
  overflow: hidden;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, #14264a 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #0d2b3f 0%, transparent 50%),
    linear-gradient(160deg, #0B1D3A 0%, #08152b 55%, #060f21 100%);
  padding: clamp(120px, 16vw, 156px) 0 clamp(64px, 8vw, 96px);
  text-align: center;
  color: #fff;
}

/* dot-grid texture, matches .pa-hero-section::before elsewhere on the site */
.cs-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* soft glowing blobs, matches the hero/AI section treatment */
.cs-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.cs-glow-1 {
  width: 520px; height: 520px;
  top: -200px; left: -140px;
  background: radial-gradient(circle, rgba(69,83,164,0.32), transparent 70%);
  animation: csFloat 12s ease-in-out infinite;
}
.cs-glow-2 {
  width: 460px; height: 460px;
  bottom: -200px; right: -140px;
  background: radial-gradient(circle, rgba(16,185,129,0.18), transparent 70%);
  animation: csFloat 14s ease-in-out infinite reverse;
}
@keyframes csFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}

/* faint connective network, echoes .ai-network elsewhere on the site */
.cs-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}
.cs-network svg { width: 100%; height: 100%; }

/* ---- Content ---- */
.cs-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  color: #A9B4EA;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.cs-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-teal, #10B981);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.22);
  flex-shrink: 0;
  animation: csPulse 2.4s ease-in-out infinite;
}
@keyframes csPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.22); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,.08); }
}

.cs-title {
  font-family: var(--font);
  font-size: clamp(32px, 5.4vw, 54px);
  font-weight: var(--w-black, 800);
  color: #fff;
  line-height: 1.14;
  letter-spacing: -1px;
  margin: 0 0 20px;
}
.cs-title .cs-highlight {
  background-image: linear-gradient(92deg, #EC4A2C 0%, #F9BC15 30%, #60B14A 60%, #578ECA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-desc {
  font-size: clamp(15px, 1.6vw, 17px);
  color: #B9C0CB;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 44px;
}

/* ---- Countdown ---- */
.cs-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 480px;
  margin: 0 auto 40px;
}
.cs-count-box {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 18px 8px 14px;
}
.cs-count-num {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cs-count-label {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8A93A0;
}

/* ---- Progress bar (optional "build progress" touch) ---- */
.cs-progress-wrap {
  max-width: 420px;
  margin: 0 auto 44px;
  text-align: left;
}
.cs-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #8A93A0;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.cs-progress-labels b { color: #fff; font-weight: 700; }
.cs-progress-track {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  overflow: hidden;
}
.cs-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-teal, #10B981), #57E0A8);
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(.2,.7,.3,1);
}

/* ---- Notify form ---- */
.cs-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.cs-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  height: 52px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  padding: 0 22px;
  font-family: var(--font);
  font-size: 14.5px;
  color: #fff;
  outline: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cs-form input[type="email"]::placeholder { color: #7E8794; }
.cs-form input[type="email"]:focus {
  border-color: var(--c-blue);
  background: rgba(255,255,255,0.09);
}
.cs-form-btn {
  height: 52px;
  padding: 0 28px;
  border-radius: 100px;
  font-size: 14.5px;
  white-space: nowrap;
}

.cs-form-msg {
  display: none;
  font-size: 13.5px;
  color: #6BD989;
  font-weight: 600;
  margin: 0 0 20px;
}
.cs-form-msg.is-visible { display: block; }
.cs-form-note {
  font-size: 12px;
  color: #6C7686;
  margin-bottom: 40px;
}

/* ---- Social row ---- */
.cs-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cs-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C6CCD6;
  text-decoration: none;
  font-size: 15px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-social a:hover {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
  transform: translateY(-3px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) { .cs-section { padding: 108px 0 60px; } }
@media (max-width: 768px)  { .cs-section { padding: 96px 0 52px; min-height: auto; } }
@media (max-width: 560px) {
  .cs-countdown { gap: 8px; }
  .cs-count-box { padding: 14px 4px 10px; border-radius: 10px; }
  .cs-count-label { font-size: 9.5px; }
  .cs-form { flex-direction: column; }
  .cs-form input[type="email"], .cs-form-btn { width: 100%; justify-content: center; }
  .cs-glow-1, .cs-glow-2 { width: 320px; height: 320px; filter: blur(70px); }
}
@media (max-width: 380px) {
  .cs-countdown { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-glow-1, .cs-glow-2, .cs-eyebrow-dot { animation: none; }
  .cs-progress-fill { transition: none; }
}

.tw-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.tw-map-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.tw-map-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tw-map-tab {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tw-map-tab:hover {
  border-color: #e0522f;
}

.tw-map-tab.is-active {
  border-color: #e0522f;
  color: #e0522f;
  background: #fff5f2;
}

.tw-map-frame-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.tw-map-open-link {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1a73e8;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .tw-map-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .tw-map-tabs {
    width: 100%;
  }
  .tw-map-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  .tw-map-frame-wrap iframe {
    height: 320px;
  }
}

@media (max-width: 480px) {
  .tw-map-tabs {
    flex-direction: column;
  }
  .tw-map-tab {
    width: 100%;
  }
}

.tw-skip-section {
  padding: 60px 0;
  background: #f7f6f3;
}

.tw-skip-form-card-full {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  max-width: 100%;
}

.tw-skip-form-header {
  margin-bottom: 24px;
}

.tw-skip-form-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.tw-skip-form-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* ===== LINKS GRID — 3 columns desktop ===== */
.tw-skip-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.tw-skip-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  text-decoration: none;
  color: #1a1a1a;
  transition: all 0.2s ease;
}

.tw-skip-link:hover {
  border-color: #e0522f;
  background: #fff8f6;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(224,82,47,0.12);
}

.tw-skip-link-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #fff3ef;
  color: #e0522f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.tw-skip-link-text {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}

.tw-skip-link-arrow {
  font-size: 13px;
  color: #9ca3af;
  transition: transform 0.2s ease, color 0.2s ease;
}

.tw-skip-link:hover .tw-skip-link-arrow {
  color: #e0522f;
  transform: translateX(4px);
}

/* ===== FOOTER TRUST BADGES ===== */
.tw-skip-form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
}

.tw-footer-badge-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  border: 1px solid #eee0e0;
  padding: 2px;
}

.tw-footer-badge-ribbon {
  height: 36px;
}

.tw-footer-divider {
  color: #d1d5db;
  font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .tw-skip-links-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .tw-skip-form-card-full {
    padding: 24px 20px;
  }
  .tw-skip-form-title {
    font-size: 20px;
  }
  .tw-skip-links-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tw-skip-link {
    padding: 16px;
  }
  .tw-skip-form-footer {
    justify-content: flex-start;
    gap: 10px;
  }
  .tw-footer-badge-img {
    height: 40px;
  }
  .tw-footer-badge-ribbon {
    height: 40px;
  }
}

/* ==========================================================================
   MOBILE STICKY QUICK-CONTACT BAR
   ========================================================================== */
.tw-mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: #4553a4;
  box-shadow: 0 -4px 16px rgba(11, 29, 58, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease, ease);
}
.tw-mobile-bar.is-visible { transform: translateY(0); }
.tw-mobile-bar.is-hidden-at-footer { transform: translateY(100%); }

.tw-mobile-bar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px 12px;
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: var(--w-medium, 500);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.tw-mobile-bar-item:last-child { border-right: none; }
.tw-mobile-bar-item:active { background: #3a4489; }
.tw-mobile-bar-item svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
  .tw-mobile-bar { display: flex; }
}

/* ==========================================================================
   SIDE FLOATING CONTACT BUTTON — vertical tab, hugs the right edge
   Wrapper is sized to the ROTATED bounding box (height becomes width,
   width becomes height) so the button is always fully on-screen and
   never clipped, regardless of rotate() math quirks.
   ========================================================================== */
.tw-side-tab-wrap {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 52px;    /* = button's HEIGHT before rotation */
  height: 180px;  /* = button's WIDTH before rotation */
  z-index: 1300;
  overflow: visible;
}

.tw-side-tab {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;   /* original horizontal width */
  height: 52px;   /* original horizontal height */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #4553a4;
  color: #fff;
  border: none;
  padding: 0 18px;
  border-radius: 10px 10px 0 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(69, 83, 164, 0.35);
  transition: background var(--dur) var(--ease);
  animation: twSideTabPulse 2.6s ease-in-out infinite;
}
.tw-side-tab svg { width: 20px; height: 20px; flex-shrink: 0; }
.tw-side-tab:hover {
  background: var(--c-red, #EC4A2C);
  animation-play-state: paused;
}

/* Highlight glow pulse so it never blends into the page */
@keyframes twSideTabPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(69, 83, 164, 0.35), 0 0 0 0 rgba(69, 83, 164, 0.35); }
  50%      { box-shadow: 0 8px 24px rgba(69, 83, 164, 0.45), 0 0 0 10px rgba(69, 83, 164, 0); }
}

/* ==========================================================================
   SIDE FORM POPUP — blurred backdrop
   ========================================================================== */
.tw-side-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.tw-side-form-overlay.is-open { display: flex; opacity: 1; }

.tw-side-form-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 38px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: scale(0.94) translateY(16px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  max-height: 90vh;
  overflow-y: auto;
}
.tw-side-form-overlay.is-open .tw-side-form-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.tw-side-form-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-light);
  color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tw-side-form-close svg { width: 16px; height: 16px; }
.tw-side-form-close:hover { background: var(--c-border); color: var(--c-navy); }

.tw-side-form-title {
  font-size: 22px;
  font-weight: var(--w-black);
  color: var(--c-navy);
  margin-bottom: 8px;
}
.tw-side-form-desc {
  font-size: 14px;
  color: var(--c-muted);
  margin-bottom: 24px;
}

/* ==========================================================================
   FORM LAYOUT (works for both plain HTML fields and CF7-wrapped fields)
   ========================================================================== */
.tw-side-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Plain custom markup fields (non-CF7) */
.tw-side-form-field { margin-bottom: 16px; }
.tw-side-form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-bottom: 6px;
}
.tw-side-form-field input,
.tw-side-form-field textarea {
  width: 100%;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  box-sizing: border-box;
}
.tw-side-form-field input:focus,
.tw-side-form-field textarea:focus { border-color: var(--c-blue); }
.tw-side-form-field textarea { resize: vertical; min-height: 90px; }

/* ==========================================================================
   CF7-SPECIFIC STYLING
   CF7 wraps every field in <span class="wpcf7-form-control-wrap">.
   We make that span "invisible" to layout so our .tw-side-form-row grid
   and label/input styling still line up, exactly like the plain fields.
   ========================================================================== */
.tw-side-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.tw-side-form-row .wpcf7-form-control-wrap {
  display: contents;
}

.tw-side-form label {
  display: block;
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  color: var(--c-navy);
  margin-bottom: 16px; /* keeps consistent vertical rhythm between fields */
}

.tw-side-form input[type="text"],
.tw-side-form input[type="tel"],
.tw-side-form input[type="email"],
.tw-side-form textarea {
  width: 100%;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  box-sizing: border-box;
  margin-top: 6px;
}
.tw-side-form input:focus,
.tw-side-form textarea:focus { border-color: var(--c-blue); }
.tw-side-form textarea { resize: vertical; min-height: 90px; }

.tw-side-form-submit,
.tw-side-form input[type="submit"],
.tw-side-form .wpcf7-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* CF7 validation tips + success/error response box */
.tw-side-form .wpcf7-not-valid-tip {
  font-size: 11.5px;
  color: #e53935;
  margin-top: 4px;
  display: block;
}
.tw-side-form .wpcf7-response-output {
  font-size: 13px;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-top: 16px !important;
}

/* Optional custom success message (only relevant if you're NOT relying
   purely on CF7's own .wpcf7-response-output) */
.tw-side-form-success {
  display: none;
  text-align: center;
  font-size: 13.5px;
  font-weight: var(--w-semibold);
  color: #15803D;
  margin-top: 12px;
}
.tw-side-form-success.is-visible { display: block; }

/* Prevent background scroll while popup open */
body.tw-no-scroll { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .tw-side-tab-wrap {
    display: none;
  }
}

@media (max-width: 480px) {
  .tw-side-form-row { grid-template-columns: 1fr; gap: 0; }
  .tw-side-form-modal { padding: 24px 20px; }
}

/* ============================================================
   DEFAULT PAGE TEMPLATE (page.php)
   Reuses .sp-hero, .sp-title, .sp-breadcrumb, .sp-featured-media,
   .sp-content, .sp-content-col typography from single-post.css
   as-is. Only the bits unique to a plain full-width page are
   defined here — a shorter hero (no author/meta row needed) and
   a centered, readable full-width content column.
   ============================================================ */

/* Hero: same banner, but shorter since pages don't need author/meta */
.pg-hero {
  padding-bottom: 40px;
}
.pg-hero-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 4px 0 0;
  line-height: 1.65;
}

/* Featured image sits directly below the hero, full container width */
.pg-featured-media {
  margin-top: 0;
}

/* ============================================================
   BODY — full width, no sidebar
   ============================================================ */
.pg-body-section {
  background: #fff;
  padding: 56px 0 72px;
}

/* Keep the reading line-length comfortable even though there's no
   sidebar — content is centered within a max-width column rather
   than stretching edge-to-edge on large screens. */
.pg-content-wrap {
  margin: 0 auto;
}

/* Multi-page (<!--nextpage-->) links, styled like a small pill row */
.pg-page-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border, #e2e5ea);
  font-size: 13.5px;
  color: var(--c-muted, #6b7280);
}
.pg-page-links a,
.pg-page-links span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-border, #e2e5ea);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text, #1a1a2e);
  font-weight: 600;
}
.pg-page-links a:hover {
  border-color: var(--c-blue, #0a66c2);
  color: var(--c-blue, #0a66c2);
}
.pg-page-links span.current {
  background: var(--c-blue, #0a66c2);
  border-color: var(--c-blue, #0a66c2);
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pg-body-section { padding: 40px 0 56px; }
}

@media (max-width: 480px) {
  .pg-hero-desc { font-size: 14.5px; }
  .pg-body-section { padding: 32px 0 44px; }
}

.sp-contentt ul {
    margin: 0 0 15px;
    padding-left: 20px;
}

.sp-contentt ul li {
    margin-bottom: 8px;
}
.sp-contentt.pg-content p {
    margin-bottom: 15px;
}

/* ============================================================================
   DYNAMIC AUTHOR CARD (tw_author CPT based)
   Matches the reference screenshot: dark navy card, rounded photo,
   name + bio with Read More, two pill buttons, LinkedIn icon.
   Renders only when tw_render_author_card() finds a selected author.
   ============================================================================ */

.tw-author-card {
  --tw-ac-bg: #33447c;
  --tw-ac-btn-bg: #1c2444;
  --tw-ac-btn-bg-hover: #121630;
  --tw-ac-text: #dbe3f5;
  --tw-ac-text-muted: #b7c1de;

  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: var(--tw-ac-bg);
  border-radius: 18px;
  padding: 28px 30px;
  margin: 32px 0;
  box-shadow: 0 14px 34px rgba(20, 27, 60, 0.22);
  max-width: 760px; /* matches .sp-content column width */
}

.tw-author-card-photo {
  flex-shrink: 0;
}
.tw-author-card-img {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  object-fit: cover;
  background: #eef0f5;
}
.tw-author-card-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a4c9;
  font-size: 30px;
}

.tw-author-card-body {
  flex: 1;
  min-width: 0;
}

.tw-author-card-name {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.tw-author-card-bio {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tw-ac-text);
}
.tw-author-bio-full { display: inline; }

.tw-author-bio-toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
}
.tw-author-bio-toggle:hover { color: #cfe0ff; }

.tw-author-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.tw-author-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tw-ac-btn-bg);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tw-author-card-btn:hover {
  background: var(--tw-ac-btn-bg-hover);
  transform: translateY(-1px);
}

.tw-author-card-social {
  display: flex;
  gap: 10px;
}
.tw-author-card-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.tw-author-card-social a:hover {
  color: #8fb4ff;
  transform: translateY(-2px);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 640px) {
  .tw-author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 22px;
    gap: 16px;
  }
  .tw-author-card-actions { justify-content: center; }
  .tw-author-card-social { justify-content: center; }
  .tw-author-card-bio { text-align: left; } /* bio reads better left-aligned even when card is centered */
}

@media (max-width: 400px) {
  .tw-author-card { padding: 20px 16px; border-radius: 14px; }
  .tw-author-card-img { width: 68px; height: 68px; border-radius: 12px; }
  .tw-author-card-name { font-size: 18px; }
  .tw-author-card-btn { flex: 1 1 auto; padding: 10px 14px; font-size: 13px; }
}