/* ==========================================================================
   Lucrative AI — Design tokens
   ========================================================================== */
:root {
  --navy-900: #0F2D4D;
  --navy-800: #163352;
  --navy-700: #1D3A57;
  --navy-600: #26415E;
  --blue-600: #175FA4;
  --blue-500: #2F72C4;
  --blue-100: #E8EFF6;
  --gold-600: #D6931F;
  --gold-500: #E8A63D;
  --gold-100: #FDF6E8;
  --teal-600: #12807F;
  --teal-500: #17999B;
  --teal-100: #E7F7F7;
  --red-600: #D5453F;
  --red-500: #E8615A;
  --red-100: #FDEBEA;
  --green-600: #2E8F53;
  --green-500: #37A55F;
  --green-100: #E7F7EE;
  --grey-bg: #EEF2F6;
  --grey-50: #F7F8FA;
  --white: #FFFFFF;
  --text-900: #16181D;
  --text-700: #333947;
  --text-600: #5B6472;
  --text-400: #8A93A3;
  --border: #E5E9EF;
  --border-soft: #EEF1F5;

  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Lato', 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 2px rgba(15,45,77,0.06);
  --shadow-md: 0 8px 24px rgba(15,45,77,0.08);
  --shadow-lg: 0 20px 48px rgba(15,45,77,0.14);
  --shadow-glow-gold: 0 0 40px rgba(232,166,61,0.35);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,.9,.32,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* `clip` (not `hidden`) — some browsers treat overflow-x:hidden on body/html
     as creating a scroll container, which breaks position:sticky for every
     descendant (the stacking-card sections rely on sticky). `clip` still
     prevents horizontal scrollbars from stray decorative elements without
     that side effect. */
  overflow-x: clip;
}
h1,h2,h3,h4 {
  font-family: var(--font-head);
  margin: 0;
  color: var(--text-900);
  letter-spacing: -0.01em;
}
p { margin: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
}
.section { padding: 50px 0; position: relative;}
.section--tight { padding: 72px 0; }
.section--grey { background: var(--grey-bg); }
.section--light-grey {background: #F4F6F6;}
.section--navy { background: linear-gradient(180deg,#0B2440,#123258); color: white; }
.section--navy h2, .section--navy h3 { color: white; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}
.eyebroww {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}
.section-sub {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--text-600);
  text-align: center;
  max-width: 850px;
  margin: 12px auto 0;
  line-height: 1.5;
}
.section-sub-ii {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-600);
  text-align: center;
  max-width: 850px;
  margin: 12px auto 0;
  line-height: 1.5;
}
.text-blue { color: var(--blue-600); }
.text-gold { color: var(--gold-500); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 10px;  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary {
  background: #185FA5;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: #123761;
  box-shadow: 0 10px 24px rgba(15,45,77,0.28);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--navy-900);
  border-color:  var(--navy-900);
}
.btn-outline:hover {
  border-color: var(--navy-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
  transform: translateY(-2px);
}
.btn-white {
  background: #fff;
  color: var(--navy-900);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--text-900);
}

.logo svg {
  display: block;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links > a {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-700);
  padding: 4px 0;
  transition: color 0.2s;
}

.nav-links > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links > a:hover {
  color: var(--text-900);
}

.nav-links > a:hover::after {
  transform: scaleX(1);
}
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-900);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
/* Bars 1/3 rotate into an X and bar 2 fades out when the menu is open. */
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown panel — only rendered in the DOM at all while `open` is true
   (see Nav.jsx), so this just needs to look right; no need for a
   desktop-only display:none safety net. */
.nav-mobile-menu {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 24px 22px;
  animation: navMenuDown .22s var(--ease);
}
.nav-mobile-menu a.nav-mobile-link {
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-700);
  border-bottom: 1px solid var(--border-soft);
}
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* .nav-signin and the Signup button are both display:none at this
   breakpoint's header row (see below) — mobile keeps only the logo + burger
   visible up top, so both re-appear here inside the open dropdown instead. */
.nav-mobile-actions .nav-signin { display: inline-block; }
.nav-mobile-actions .btn-primary { display: inline-flex; }
@keyframes navMenuDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-signin { display: none; }
  .nav-right .btn-primary { display: none; }
}
@media (max-width: 420px) {
  .nav-right { gap: 12px; }
  .logo { font-size: 17px; }
}

/* =========================================================
   RIGHT SIDE
   ========================================================= */

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-signin {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-700);
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-signin:hover {
  color: var(--navy-900);
}


/* =========================================================
   SERVICES DROPDOWN
   ========================================================= */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}


/* Services button */

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;

  border: none;
  background: transparent;

  padding: 4px 0;

  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;

  color: var(--text-700);

  cursor: pointer;

  transition: color 0.2s;
}

.nav-dropdown-trigger:hover {
  color: var(--text-900);
}


/* Arrow */

.dropdown-arrow {
  font-size: 12px;

  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.nav-dropdown-menu {
  position: absolute;

  /*
    Keep the menu visually 14px below the button,
    but don't create a real hover gap.
  */
  top: 100%;
  left: 50%;

  transform: translateX(-50%) translateY(14px);

  min-width: 220px;

  padding: 8px;

  background: #fff;

  border: 1px solid rgba(0, 0, 0, 0.08);

  border-radius: 12px;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);

  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}


/*
  Invisible hover bridge.

  This fills the space between the Services button
  and the visible dropdown.

  So the cursor can move down without triggering
  onMouseLeave.
*/

.nav-dropdown-menu::before {
  content: '';

  position: absolute;

  top: -15px;
  left: 0;

  width: 100%;
  height: 15px;

  background: transparent;
}


/* =========================================================
   OPEN DROPDOWN
   ========================================================= */

.nav-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateX(-50%) translateY(14px);
}


/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.nav-dropdown-item {
  display: block;

  padding: 11px 14px;

  border-radius: 8px;

  color: var(--text-700);

  text-decoration: none;

  white-space: nowrap;

  font-size: 14px;
  font-weight: 600;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nav-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-900);
}


/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 80px 0 100px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.hero-grid--solo { display: block; }
.hero-grid--solo > div { max-width: 560px; }
.hero h1 {
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.12;
  font-weight: 500;
}
.hero p.lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-600);
  max-width: 480px;
}
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.hero-visual { position: relative; min-height: 380px; }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* welcome-back card */
.welcome-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 22px 26px;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.welcome-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(15,45,77,0.18); }
.welcome-card h3 { font-size: 19px; font-weight: 700; }
.welcome-card h3 span { color: var(--blue-600); }
.welcome-card .sub { font-size: 12.5px; color: var(--text-400); margin-top: 4px; }
.welcome-stats { display: flex; gap: 22px; margin-top: 18px; }
.welcome-stats .stat b { font-size: 20px; font-family: var(--font-head); }
.welcome-stats .stat .label { font-size: 11px; color: var(--text-400); margin-top: 2px; }

.apps-used-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-top: 16px;
  display: flex;
  gap: 18px;
  align-items: center;
  transition: transform .4s var(--ease);
}
.apps-used-card:hover { transform: translateY(-4px); }
.apps-used-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px;}
.donut-wrap { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.donut-wrap .center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-wrap .center b { font-size: 20px; font-family: var(--font-head); }
.donut-wrap .center span { font-size: 9px; color: var(--text-400); }
.legend-row { display:flex; align-items:center; gap:6px; font-size: 11.5px; color: var(--text-600); margin-bottom: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink:0; }
.legend-row .val { margin-left: auto; color: var(--text-400); }

/* ==========================================================================
   Dashboard mockup (product screenshot rebuild)
   ========================================================================== */
.dash-mock {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border-soft);
}
.dash-sidebar {
  width: 56px;
  background: var(--navy-900);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
.dash-sidebar .logo-mark { margin-bottom: 6px; }
.dash-sidebar .icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.55);
  transition: all .2s;
}
.dash-sidebar .icon-btn.active { background: rgba(255,255,255,0.12); color: #fff; }
.dash-sidebar .icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); cursor:pointer; }
.dash-main { flex: 1; padding: 22px 26px; min-width: 0; }
.dash-topbar { display:flex; align-items:center; gap: 14px; margin-bottom: 26px; }
.dash-search {
  flex: 1;
  background: var(--grey-50);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-400);
  display:flex; align-items:center; gap:8px;
}
.dash-topbar .icon-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--grey-50); border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-600);
  transition: all .2s;
}
.dash-topbar .icon-btn:hover { background: var(--blue-100); color: var(--blue-600); }
.dash-avatar {
  display:flex; align-items:center; gap:6px;
  font-size: 13px; font-weight:700; color: var(--text-700);
  background: var(--grey-50); border:1px solid var(--border);
  border-radius: 999px; padding: 5px 10px 5px 5px;
}
.dash-avatar .av { width: 24px; height:24px; border-radius:50%; background: linear-gradient(135deg,var(--gold-500),var(--blue-500)); }

.dash-cards { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.dash-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.dash-card h5 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.dash-item { display:flex; align-items:center; gap: 12px; padding: 9px 0; }
.dash-item .ic {
  width: 36px; height:36px; border-radius: 9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--blue-100); color: var(--blue-600);
}
.dash-item .txt b { display:block; font-size: 13.5px; font-weight:700; }
.dash-item .txt span { font-size: 11.5px; color: var(--text-400); }

.dash-activities { margin-top: 18px; border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 20px; }
.dash-activities h5 { font-size: 15px; font-weight:700; margin-bottom: 10px; display:flex; justify-content:space-between; align-items:center;}
.activity-row { display:flex; align-items:center; gap:12px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.activity-row:first-of-type { border-top:none; }
.activity-row .ic { width:32px;height:32px;border-radius:8px;background:var(--blue-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.activity-row .txt { flex:1; min-width:0; }
.activity-row .txt b { display:block; font-size:13px; font-weight:700; }
.activity-row .txt span { font-size:11px; color:var(--text-400); }
.badge-credit { font-size:11px; font-weight:700; background:var(--red-100); color:var(--red-600); padding:4px 9px; border-radius:999px; margin-right:8px; white-space:nowrap;}
.mini-btn { font-size:11.5px; font-weight:700; background:var(--navy-900); color:#fff; padding:7px 12px; border-radius:8px; white-space:nowrap; transition:.2s;}
.mini-btn:hover { background: var(--blue-600); }

/* ==========================================================================
   Trusted-by logo strip
   ========================================================================== */
.logo-strip { padding: 46px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); overflow:hidden;}
.logo-strip .tag { text-align:center; font-size:12px; letter-spacing:.12em; font-weight:700; color:var(--text-400); text-transform:uppercase; margin-bottom:26px;}
.marquee { display:flex; gap:64px; width:max-content; animation: scroll-left 26s linear infinite; }
.marquee-track:hover .marquee { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-head); font-weight:700; font-size:17px; color: var(--text-700);
  display:flex; align-items:center; gap:8px; opacity:.75; transition:opacity .2s;
}
.marquee span:hover { opacity:1; }
.marquee .dot { width:7px;height:7px;border-radius:50%;background:var(--green-500); }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Product overview cards
   ========================================================================== */
.tag-pill {
  display:inline-flex;
  align-items:center; 
  gap:6px;
  font-size:14px; 
  font-weight:700;
  letter-spacing:.04em;
  padding:5px 14px;
  border-radius:999px; 
  border:1.5px solid currentColor;
  margin-bottom:16px;
  /* `color` is normally set per-card via an inline style; on hover we flip
     the pill to a solid fill using that same color via currentColor. */
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:56px; }
.overview-card {
  background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding:30px 32px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.overview-card.reveal:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-lg);
  border-color: var(--tagc, var(--blue-500));
}
/* The pill's own color comes from an inline style per-card, so `color` needs
   !important here to flip its text white once the pill fills solid — a
   stylesheet rule can't out-rank an inline style otherwise. */
.overview-card--wide { grid-column: 1 / -1; max-width: calc(50% - 11px); margin: 0 auto; }
@media (max-width: 980px) {
  .overview-card--wide { max-width: 100%; }
}
.overview-card h3 { font-size:21px; font-weight:700; margin-bottom:10px; }
.overview-card p { color:var(--text-600); font-size:14.5px; line-height:1.65; }
.overview-foot { text-align:center; margin-top:40px; font-size:13px; font-weight:700; letter-spacing:.08em; color: var(--text-400); }
.overview-foot span { margin: 0 14px; }

/* ==========================================================================
   Feature detail pairs
   ========================================================================== */
.feature-row {
  display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center;
  padding: 56px 0;
}
.feature-row.reverse .feature-text { order:2; }
.feature-row.reverse .feature-visual { order:1; }
.feature-text .tag-pill { }
.feature-text h3 { font-size: clamp(24px,2.6vw,30px); font-weight:500; line-height:1.3; margin-bottom:14px; transition: color .25s var(--ease); }
.feature-row:hover .feature-text h3 { color: var(--tagc, var(--text-900)); }
.feature-text p { color:var(--text-600); font-size:15px; line-height:1.75; max-width:460px; }
.feature-text .meta { margin-top:26px; font-size:13px; color:var(--text-400); font-weight:600; }
.feature-list p { padding:5px 0; }
/* ===== Feature List ===== */

.feature-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.feature-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

/* Vertical line */
.feature-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 32px;
  width: 2px;
  height: calc(100% + 8px);
  background: linear-gradient(
    to bottom,
    rgba(31,110,214,.35),
    rgba(31,110,214,.08)
  );
}

/* Outer Circle */
.feature-bullet {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(31,110,214,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
}

/* Animated Center Dot */
.feature-bullet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-600);
  animation: pulseBullet 2.5s ease-in-out infinite;
}

.feature-text-item {
  line-height: 1.65;
}

@keyframes pulseBullet {
  0% {
    transform: scale(.8);
    box-shadow: 0 0 0 0 rgba(31,110,214,.45);
  }

  50% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(31,110,214,0);
  }

  100% {
    transform: scale(.8);
    box-shadow: 0 0 0 0 rgba(31,110,214,0);
  }
}

/* Stacking/overlapping scroll cards — each .fp-stack-item is a tall scroll
   track; its .fp-stack-card sticks below the nav and stays pinned while the
   next card's item scrolls up and (thanks to the increasing z-index) slides
   over it, covering it completely. */
.fp-stack { position: relative; }
.fp-stack-item { position: relative; }
/* NOTE: the dwell gap must come from real, in-flow content height (this
   spacer), not padding-bottom on .fp-stack-item — Chromium does not extend a
   sticky element's "stuck" range into a containing block's padding-box, only
   into its content-box, so a padding-based approach silently fails to stick
   at all. */
.fp-stack-spacer { height: 42vh; }
.fp-stack-card {
  position: sticky;
  top: 92px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.fp-stack-card .feature-row { padding: 48px; }
@media (max-width: 900px) {
  .fp-stack-spacer { height: 22vh; }
  .fp-stack-card { top: 78px; }
  .fp-stack-card .feature-row { padding: 32px 24px; }
}
.feature-visual {
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-visual:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 48px -12px rgba(15,45,77,0.28);
  box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--tagc, var(--blue-600)) 35%, transparent);
}
.visual-card {
  background:#fff; border-radius:16px; padding:22px 24px; box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-visual:hover .visual-card { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bar-row { margin-bottom:14px; }
.bar-row .top { display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-600); margin-bottom:6px; }
.bar-row .top b { color:var(--text-900); font-weight:700; }
.bar-track { height:7px; border-radius:6px; background:var(--border-soft); overflow:hidden; }
.bar-fill { height:100%; border-radius:6px; background:var(--blue-600); width:0; transition: width 1.2s var(--ease); }
.bar-row.total .bar-fill { background: var(--text-900); }

.rev-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border-soft); font-size:13.5px; }
.rev-row:first-of-type { border-top:none; }
.rev-row .chip { font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:6px; margin-left:8px;}
.chip-up { background:var(--green-100); color:var(--green-600); }
.chip-warn { background:var(--gold-100); color:var(--gold-600); }
.ai-assist-list { margin-top:16px; }
.ai-assist-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border-soft); font-size:13px; }
.ai-assist-item:first-of-type { border-top:none; }
.ai-assist-item .status { margin-left:auto; font-size:10.5px; font-weight:800; text-transform:uppercase; color:var(--text-400); }
.ai-assist-item.alert .status { color: var(--red-500); }

.chat-window { background:#fff; border-radius:16px; box-shadow:var(--shadow-md); overflow:hidden; }
.chat-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
.chat-head .ic { width:30px;height:30px;border-radius:8px;background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;}
.chat-head b { font-size:13.5px; }
.chat-head span { display:block; font-size:11px; color:var(--text-400); }
.chat-body { padding:16px 18px; font-size:12.5px; line-height:1.6; }
.chat-bubble-user {
  background: #185FA5; 
  color:#fff; 
  padding:10px 14px;
  border-radius: 12px 12px 2px 12px;
  max-width:90%; 
  margin-left:auto; 
  margin-bottom:16px; 
  font-size:12px;
  font-weight: 400;
  line-height: 150%;
  font-family: --font-body;
}
.chat-reply { color:var(--text-700); background:var(--grey-50); border-radius:12px; padding:12px 14px; font-size:12px; }
.chat-reply .tagline { display:inline-block; font-size:10px; font-weight:800; background:var(--navy-900); color:#fff; padding:2px 8px; border-radius:6px; margin-bottom:6px; }
.chat-input { display:flex; align-items:center; gap:10px; margin:14px 18px 16px; background:var(--grey-50); border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--text-400); }
.chat-checklist { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.chat-checklist .row { display:flex; align-items:center; gap:9px; }
.chat-checklist .row .check { width:16px;height:16px;border-radius:5px;background:var(--green-500); color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.chat-checklist .row .pill { margin-left:auto; font-size:10px; font-weight:800; padding:2px 8px; border-radius:6px; background:var(--grey-50); color:var(--text-400); }
.chat-cta { margin: 14px 18px 16px; background: var(--blue-600); color:#fff; text-align:center; padding:11px; border-radius:10px; font-weight:700; font-size:13px; transition:.2s; }
.chat-cta:hover { background: var(--navy-900); }
.brand-row { display:flex; align-items:center; gap:22px; margin-top:20px; opacity:.85; flex-wrap:wrap; }
.brand-row img { height:22px; width:auto; filter:grayscale(1); opacity:.7; transition:.2s; }
.brand-row img:hover { filter:none; opacity:1; }

/* ==========================================================================
   Problem / solution tab section
   ========================================================================== */
/* =========================================================
   WHY BUSINESSES OUTGROW TRADITIONAL CRMs
   ========================================================= */

.tabs-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  margin-top: 42px;
  position: relative;
}

/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

/* Only this section's heading is left aligned */
.section--grey:has(.tabs-layout) .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
}

/* Only this section's subtitle */
.section--grey:has(.tabs-layout) .section-sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
}

/* ---------------------------------------------------------
   LEFT NAVIGATION
   --------------------------------------------------------- */

.tabs-nav-col {
  position: relative;
}

.tabs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 100px;
}

.tabs-list button {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;

  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;

  padding: 12px 18px;

  font-size: 15px;
  font-weight: 600;
  color: var(--text-500, var(--text-600));

  border-radius: 0 10px 10px 0;

  transition:
    background .25s var(--ease),
    color .25s var(--ease),
    border-color .25s var(--ease);
}

.tabs-list button:hover {
  background: var(--grey-50);
  color: var(--text-900);
}

.tabs-list button.active {
  border-left-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--blue-100);
  font-weight: 700;
}

.tabs-list-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-soft, #ddd);
  flex-shrink: 0;

  transition:
    background .25s var(--ease),
    transform .25s var(--ease);
}

.tabs-list button.active .tabs-list-dot {
  background: var(--blue-600);
  transform: scale(1.35);
}

/* ---------------------------------------------------------
   RIGHT SIDE
   --------------------------------------------------------- */

.tabs-stack {
  position: relative;
}

/* Individual story items */
.tabs-stack-item {
  position: relative;
  margin-bottom: 20px;
}

/* Spacer */
.tabs-stack-spacer {
  display: none;
}

/* Card */
.tabs-stack-card {
  position: relative;
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 40px;
}

/* ---------------------------------------------------------
   RIGHT CONTENT
   --------------------------------------------------------- */

.tab-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  animation: fade-in .5s var(--ease);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tab-panel .copy h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}

.tab-panel .copy p {
  color: var(--text-600);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.tab-visual {
  min-width: 0;
}

/* ---------------------------------------------------------
   TOOL CARD
   --------------------------------------------------------- */

.tool-card {
  background: transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
  margin-bottom: 12px;

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.tool-card:hover {
  transform: translateX(4px) scale(1.012);
  box-shadow: var(--shadow-lg);
}

.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.tool-row .x {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--red-500);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  flex-shrink: 0;

  transition: transform .25s var(--ease);
}

.tool-card:hover .tool-row .x {
  transform: rotate(-90deg) scale(1.1);
}

.tool-row .label {
  flex: 1;
}

.tool-row .tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-400);
}

/* ---------------------------------------------------------
   STAT CARD
   --------------------------------------------------------- */

.stat-card {
  background: transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 18px 20px;
  margin-bottom: 12px;

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 9px 0;

  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
}

.stat-line:first-of-type {
  border-top: none;
}

.stat-line .badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;

  transition: transform .2s var(--ease);
}

.stat-line:hover .badge {
  transform: scale(1.08);
}

.badge-red {
  background: var(--red-100);
  color: var(--red-600);
}

.badge-gold {
  background: var(--gold-100);
  color: var(--gold-600);
}

.badge-grey {
  background: var(--grey-50);
  color: var(--text-400);
}

.badge-green {
  background: var(--green-100);
  color: var(--green-600);
}

/* ---------------------------------------------------------
   CHECK CARD
   --------------------------------------------------------- */

.check-card {
  background: transparent;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
  margin-bottom: 12px;

  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.check-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  font-weight: 400;

  padding: 6px 0;
}

.check-row .box {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex-shrink: 0;

  transition: transform .2s var(--ease);
}

.check-row:hover .box {
  transform: scale(1.15);
}

.check-row.checked .box {
  background: var(--blue-600);
}

.check-row.alert .box {
  background: var(--red-500);
}

.check-row .right {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-400);
  font-weight: 700;
}

/* ---------------------------------------------------------
   LARGE STAT
   --------------------------------------------------------- */

.stat-big {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 0;

  border-top: 1px solid var(--border-soft);
}

.stat-big:first-of-type {
  border-top: none;
}

.stat-big b {
  font-family: var(--font-head);
  font-size: 22px;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  .tabs-layout {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 36px;
  }

  .tabs-stack-card {
    padding: 28px;
  }
}

@media (max-width: 900px) {
  .tabs-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tabs-list {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tab-panel {
    grid-template-columns: 1fr;
  }

  .tabs-stack-card {
    padding: 28px 22px;
  }
}


/* HOW TO APPLY:
   In styles.css, find the comment that says "Orbit diagram" and select
   EVERYTHING from that comment down to — but not including — the next
   section's comment, which starts with "LLM connection diagram".
   Delete that whole range and paste this entire file in its place. */

/* ==========================================================================
   Orbit diagram
   ========================================================================== */
.orbit-hero-image{
    display:block;
    width:100%;
    max-width:1000px;
    height:auto;
    margin:40px auto 60px;
}
.orbit-section { text-align:center; padding-bottom:40px; }
.orbit-section + section { padding-top:40px; padding-bottom: 40px; }
.orbit-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 60px auto 0;
}
.orbit-ring {
  position:absolute; border-radius:50%;
  top:50%; left:50%; transform: translate(-50%,-50%);
  border: 1.5px dashed rgba(15,45,77,0.18);
}
.orbit-ring.r1 { width:100%; height:100%; border-style:dotted; }
.orbit-ring.r2 { width:74%; height:74%; }
.orbit-ring.r3 { width:46%; height:46%; border-style:dotted; }
.orbit-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:92px; height:92px; border-radius:24px;
  background: var(--gold-100); border:1px solid #F3E1BC;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
}
.orbit-label {
  position:absolute;
  background:#fff; border:1px solid var(--border-soft);
  border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700;
  box-shadow: var(--shadow-sm); display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
/* CRM / Marketing / Finance sit on the outer ring (r1, radius 50%), spaced
   exactly 120° apart (CRM at 12 o'clock, Marketing/Finance each rotated
   ±120° from it — a symmetric "Mercedes logo" split, not eyeballed).
   Support / Sales sit on the middle ring (r2, radius 37%); the innermost
   ring (r3) carries no labels at all — just the orbiting dots. Each pair
   of coordinates is the exact point on its ring's circumference at that
   angle, so the ring's dashed/dotted line disappears cleanly behind the
   pill's center instead of visibly cutting across a corner of it. */
.orbit-label--crm { top:0%; left:50%; }
.orbit-label--marketing { top:75%; left:93.3%; }
.orbit-label--finance { top:75%; left:6.7%; }
.orbit-label--support { top:50%; left:13%; }
.orbit-label--sales { top:69.3%; left:81.6%; }

/* Loft page "One AI brain" diagram reuse — outer ring (r1, radius 50%):
   One customer timeline / No duplicate contacts / AI insights everywhere,
   spaced exactly 120° apart same as CRM/Marketing/Finance above. Inner
   ring (r2, radius 37%): No manual updates / No syncing issues, mirrored
   left/right same as Support/Sales above (left = triangle mascot side,
   right = flower mascot side). */
.orbit-label--customer-timeline { top:0%; left:50%; }
.orbit-label--duplicate-contacts { top:75%; left:93.3%; }
.orbit-label--ai-insights { top:75%; left:6.7%; }
.orbit-label--manual-updates { top:50%; left:13%; }
.orbit-label--syncing-issues { top:69.3%; left:81.6%; }

.orbit-spin { position:absolute; inset:0; }

/* Orbiter: an invisible ring-sized box (percentage, matching .orbit-ring
   r1/r2/r3 exactly) that rotates around its own center. The dot is pinned
   to its right edge, so it sweeps a circle whose radius is always exactly
   the ring's current radius — at 640px desktop or a 300px phone alike —
   instead of the old fixed-pixel translateX radius that only matched the
   diagram at its full 640px desktop size. */
.orbit-orbiter {
  position:absolute; top:50%; left:50%; border-radius:50%;
  animation-name: orbit-cw; animation-timing-function: linear; animation-iteration-count: infinite;
  pointer-events:none;
}
.orbit-orbiter.r1 { width:100%; height:100%; }
.orbit-orbiter.r2 { width:74%; height:74%; }
.orbit-orbiter.r3 { width:46%; height:46%; }
.orbit-dot {
  position:absolute; top:50%; left:100%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  box-shadow: 0 0 8px currentColor;
}
@keyframes orbit-cw {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.orbit-mascot { position:absolute; width:200px; top:50%; transform:translateY(-50%); transition: transform .4s var(--ease); }
.orbit-mascot:hover { transform: translateY(-56%) scale(1.05); }
.orbit-mascot.left {
  left: -225px;
}
.orbit-mascot-squiggle {
  position: absolute;
  width: 34px;
  top: -75px;
  right: -190px;
  opacity: .85;
}
.orbit-mascot.right {
  right: -225px;
}
.orbit-mascot .squiggle { position:absolute; top:-28px; right:10px; width:34px; opacity:.8; }

/* Mobile keeps CRM/Marketing/Finance at the SAME exact 120°-apart positions
   as desktop (no per-label overrides) — the "Mercedes logo" split stays
   identical on every screen size. Two things had to change instead of
   moving the labels:
     1. Side padding grows from the default down to 32px on phones, giving
        Marketing/Finance's pills (which sit near the ring's left/right
        edge at that angle) room to overflow past the ring itself without
        running past the actual screen edge.
     2. The pill text shrinks in three steps as the ring gets smaller
        (900px, then 480px, then 340px), because the absolute pixel gap
        between the outer-ring labels (Marketing/Finance) and the
        middle-ring labels (Sales/Support) shrinks together with the ring
        — a fixed-size label that was fine at 900px would start overlapping
        its neighbor by the time the ring is down to phone width, so the
        text has to shrink in step with the ring to keep the same gap. */
@media (max-width: 900px) {
  .orbit-mascot, .orbit-mascot-squiggle { display:none; }
  .orbit-section .container { padding-left:32px; padding-right:32px; }
  /* .orbit-orbiter is an invisible square the same size as the ring that
     spins continuously (see @keyframes orbit-cw) to carry the small dot
     around it. A rotating square's bounding box is up to ~1.41x wider
     than its side at a 45° angle, and since .orbit-wrap has no overflow
     clipping (desktop needs it open so the mascot images can intentionally
     poke out ±225px on each side), that invisible rotating box was
     pushing the page's real scrollable width past the viewport — the
     right-side whitespace/horizontal scroll bug on mobile. Mascots are
     already hidden at this breakpoint, so clipping here is safe. */
  .orbit-wrap { margin-top:56px; overflow: hidden; }
  .orbit-label { font-size:10px; padding:4px 9px; gap:4px; }
  .orbit-label svg { width:9px; height:9px; }
  .orbit-center { width:64px; height:64px; border-radius:16px; }
  .orbit-dot { width:8px; height:8px; }
}
@media (max-width: 480px) {
  .orbit-label { font-size:8.5px; padding:3px 6px; gap:3px; }
  .orbit-label svg { width:7px; height:7px; }
}
@media (max-width: 340px) {
  .orbit-label { font-size:7.5px; padding:2px 5px; gap:2px; }
  .orbit-label svg { width:6px; height:6px; }
}
.orbit-label--sales-marketing { top:0%; left:50%; }
.orbit-label--no-manual { top:20.7%; left:90.5%; }
.orbit-label--no-broken { top:100%; left:50%; }
.orbit-label--dynamic-list { top:50%; left:13%; }
.orbit-label--revenue-visibility { top:71.7%; left:80%; }
/* HOW TO APPLY:
   In styles.css, find the comment that says "LLM connection diagram"
   (it looks like the block below) and select EVERYTHING from that comment
   down to — but not including — the next section's comment, which starts
   with "Persona switcher / use cases". Delete that whole range and paste
   this entire file in its place. This is the complete section, so nothing
   needs to be preserved from what you're deleting. */

/* ==========================================================================
   LLM connection diagram
   ========================================================================== */
.llm-diagram { position:relative; margin-top:60px; }
.llm-row { display:flex; align-items:center; justify-content:space-between; gap:0; position:relative; }
.llm-card {
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14);
  border-radius:18px; padding:22px 24px; width:270px; backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s;
  position: relative; z-index: 2;
}
.llm-card:hover { transform: translateY(-4px); border-color: rgba(232,166,61,0.5); }
.llm-card .tag { font-size:11px; font-weight:800; letter-spacing:.1em; color: var(--gold-500); display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.llm-card .tag .dot { width:6px;height:6px;border-radius:50%; background: var(--green-500); box-shadow:0 0 6px var(--green-500); }
.llm-model-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:10px 14px; margin-bottom:10px; }
.llm-model-row .l { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:#fff; }
.llm-model-row .status { font-size:11px; font-weight:800; }
.llm-model-row .status.active { color:#3FD98A; }
.llm-model-row .status.ready { color:#9AB0C9; }
.llm-card .foot { font-size:10.5px; color:#7C93AC; margin-top:14px; text-align:center; letter-spacing:.03em; }

.llm-suite-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:10px 14px; margin-bottom:9px; font-size:13.5px; font-weight:700; color:#fff; transition:.2s; }
.llm-suite-row:hover { background:rgba(255,255,255,0.09); }
.llm-suite-row span { color:#9AB0C9; font-weight:700; }
.llm-bridge {
  width:96px; height:96px; border-radius:20px;
  background: rgba(232,166,61,0.1); border:1px solid rgba(232,166,61,0.5);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; box-shadow: 0 0 50px rgba(232,166,61,0.25);
}
.llm-bridge-label { text-align:center; margin-top:12px; position:relative; z-index:2; }
.llm-bridge-label b { color: var(--gold-500); font-size:14px; }
.llm-bridge-label span { display:block; font-size:10.5px; color:#7C93AC; letter-spacing:.06em; margin-top:2px; }
.llm-bridge-col { display:flex; flex-direction:column; align-items:center; }

.llm-svg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; overflow:visible; }
.llm-flow-label {
  position:absolute; z-index:2; transform: translate(-50%,-50%);
  font-size:11px; font-weight:800; letter-spacing:.08em; color: var(--gold-500);
  white-space:nowrap; pointer-events:none;
}
@media (max-width: 900px) { .llm-flow-label { display:none; } }
.llm-path { fill:none; stroke-width:1.5; }
.llm-glow-dot { filter: drop-shadow(0 0 5px currentColor); }

/* Connector only exists for the mobile stacked layout (base rule must come
   before the media query below so its equal-specificity display:none
   doesn't win the cascade on mobile). */
.llm-connector { display:none; }
@keyframes llm-flow-down {
  0% { top:0; opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { top:100%; opacity:0; }
}

@media (max-width: 900px) {
  .llm-row { flex-direction:column; gap:0; }
  .llm-svg { display:none; }
  /* Card is a fixed 270px on desktop for the flex row's spacing math; on a
     stacked mobile column let it shrink on narrow phones (e.g. 320px wide)
     instead of overflowing the container. */
  .llm-card { width:100%; max-width:270px; }

  /* Vertical stand-in for the animated CONTEXT/ACTION paths — a short
     dashed line with a dot that flows top-to-bottom on a loop, replacing
     the desktop SVG (which is hidden above since its coordinates are
     locked to the horizontal layout). */
  .llm-connector { display:flex; justify-content:center; position:relative; width:2px; height:40px; margin:6px auto; }
  .llm-connector::before {
    content:''; position:absolute; inset:0; margin:0 auto; width:2px;
    background: repeating-linear-gradient(to bottom, rgba(232,166,61,0.45) 0 4px, transparent 4px 9px);
  }
  .llm-connector--action::before { background: repeating-linear-gradient(to bottom, rgba(74,143,214,0.45) 0 4px, transparent 4px 9px); }
  .llm-connector-dot {
    position:absolute; left:50%; top:0; width:6px; height:6px; margin-left:-3px; margin-top:-2px;
    border-radius:50%; background:#E8A63D; box-shadow:0 0 6px #E8A63D;
    animation: llm-flow-down 2s linear infinite;
  }
  .llm-connector--action .llm-connector-dot { background:#4A8FD6; box-shadow:0 0 6px #4A8FD6; }
}
@media (prefers-reduced-motion: reduce) {
  .llm-connector-dot { animation:none; opacity:1; top:50%; margin-top:-3px; }
}
/* ==========================================================================
   Persona switcher / use cases
   ========================================================================== */
.persona-tabs { display:flex; justify-content:center; gap:14px; margin-top:50px; flex-wrap:wrap; }
.persona-tab {
  display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--border);
  border-radius:999px; padding:8px 18px 8px 8px; font-size:14px; font-weight:700; color:var(--text-600);
  transition: all .25s var(--ease);
}
.persona-tab img { width:30px; height:30px; border-radius:50%; }
.persona-tab:hover { border-color: var(--blue-500); color:var(--text-900); transform: translateY(-2px); }
.persona-tab.active { border-color: var(--blue-600); color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); }

.persona-panel {
  margin-top:40px; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding:44px 48px; display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center;
  animation: fade-in .5s var(--ease);
}
.persona-panel .avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.persona-panel .avatar-row img { width:56px; height:56px; }
.persona-panel .index { font-size:12px; color:var(--text-400); font-weight:700; }
.persona-panel h3 { font-size: clamp(22px,4vw,36px); font-weight:500; line-height:1.3; margin-bottom:16px; }
.persona-panel p { color:var(--text-600); font-size:15px; line-height:1.7; }
.persona-quote { border-left:3px solid var(--blue-600); padding-left:16px; margin-top:20px; font-style: --font-body; color:var(--text-700); font-size:17px; font-weight: 700; }
.pipeline-card { background: var(--grey-50); border-radius:16px; padding:22px 24px; }
.pipeline-card .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pipeline-card .top .dots span { width:8px;height:8px;border-radius:50%; display:inline-block; margin-left:4px; }
.pipeline-card .amount { font-size:22px; font-family: var(--font-head); font-weight:500; }
.pipeline-card .sub { font-size:12px; color:var(--text-400); margin-bottom:14px; }
.pipeline-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border-soft); font-size:13px; }
.pipeline-row:first-of-type { border-top:none; }
.pipeline-row .ic { width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;flex-shrink:0;}
.pipeline-row .right { margin-left:auto; color:var(--blue-600); font-weight:700; font-size:12px; }
.pipeline-foot { text-align:center; margin-top:14px; font-size:13px;font-weight: 700 ;color:var(--text-400); border-top:1px solid var(--border-soft); padding-top:12px; }
.pipeline-foot b { color: var(--text-900); }
@media (max-width: 900px) {
  .persona-panel { grid-template-columns: 1fr; padding: 30px 26px; }
}

/* ==========================================================================
   Capabilities grid
   ========================================================================== */
.cap-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px; }
.cap-card {
  border-radius: var(--radius-lg); padding:32px 34px; min-height:230px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
  position:relative; overflow:hidden;
}
.cap-card.reveal:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--shadow-lg); filter: brightness(1.04); }
.cap-card.light.reveal:hover { border-color: var(--blue-500); filter:none; }
.cap-card.dark { background: #0F2E4D; color:#fff; }
.cap-card.teal { background: linear-gradient(270deg,#218181,#12AFAE); color:#fff; }
.cap-card.light { background:#fff; border:1px solid var(--border-soft); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.cap-card .tag-pill { 
  border-color: currentColor;
   opacity:.9;
    transition: opacity .25s var(--ease); }
.cap-card.reveal:hover .tag-pill { opacity: 1; }
.cap-card h3 { font-size:24px; font-weight:500; margin: 6px 0 18px; line-height:1.3; }
.cap-card.dark h3, .cap-card.teal h3 { color:#fff; }
.cap-card .count { position:absolute; top:32px; right:34px; font-size:11px; font-weight:700; opacity:.7; }
.cap-pills { display:flex; flex-wrap:wrap; gap:8px; }
.cap-pill {
  font-size: 15.5x;
  font-weight: 400;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #b9d8f5;
  color: var(--text-700);
  transition: background .2s;
}
.cap-card.dark .cap-pill, .cap-card.teal .cap-pill { background: rgba(255,255,255,0.14); color:#fff; }
.cap-pill:hover { background: rgba(15,45,77,0.12); }
.cap-card.dark .cap-pill:hover, .cap-card.teal .cap-pill:hover { background: rgba(255,255,255,0.24); }

/* ==========================================================================
   Power house section
   ========================================================================== */
.ph-checklist { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:20px; }
.ph-checklist span { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:400; color:var(--text-700); }
.ph-grid-top { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.ph-grid-bottom { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:20px; }
.ph-card {
  background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding:26px 28px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display:flex; flex-direction:column;
}
.ph-card.reveal:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-lg);
  border-color: var(--tagc, var(--blue-500));
}
.ph-card.reveal:hover .tag-pill {
  background: color-mix(in srgb, var(--tagc) 15%, #fff 85%);
  color: var(--tagc) !important;
  border-color: var(--tagc);
}

.ph-card.reveal:hover .ph-visual { transform: scale(1.02); }
.ph-card h3 { font-size:18px; font-weight:500; margin:6px 0 12px; }
.ph-pills { display:flex; flex-wrap:wrap; gap:8px; }
.ph-visual { border-radius:14px; padding:20px; margin-bottom:6px; transition: transform .3s var(--ease); }
.ph-visual--blue { background: var(--blue-100); }
.ph-visual--gold { background: var(--gold-100); }
.ph-visual--teal { background: var(--teal-100); }
.ph-visual--red { background: var(--red-100); }
.ph-visual--grey { background: var(--grey-50); border:1px solid var(--border-soft); }
.ph-score { font-family: var(--font-head); font-size:34px; font-weight:500; color:var(--text-900); }
.ph-score span { font-size:16px; color:var(--text-400); font-weight:600; }
.ph-score .ph-score-value { font-size: inherit; font-weight: inherit; color: inherit; }
.ph-score-sub { font-size:12px; color:var(--text-500,var(--text-600)); margin-top:2px; }
.ph-dot {
  width:16px; height:16px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:10px; font-weight:800; line-height:1;
}
.ph-dot--red { background: var(--red-500); }
.ph-dot--gold { background: var(--gold-500); }
.ph-dot--blue { background: var(--blue-600); }
.stat-line {
  display: flex;
  align-items: center;

  padding: 9px 0;

  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.ph-migration { display:flex; flex-direction:column; align-items:center; min-height:150px; justify-content:space-between; }
.ph-migration-row { display:flex; align-items:center; gap:16px; justify-content:center; width:100%; }
.ph-mig-chip { font-size:12px; font-weight:800; color: var(--green-600); }
.ph-migration-lines { flex:1; width:1px; border-left:1.5px dashed var(--teal-500); margin:10px 0; }
.ph-migration-hub {
  width:36px; height:36px; border-radius:10px; background: var(--gold-100); border:1.5px solid var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; color:var(--gold-600);
}
.ph-holdout-tag { font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--text-400); }
.ph-holdout-lift { font-family: var(--font-head); font-size:32px; font-weight:500; color:var(--red-600); margin-top:6px; }
.ph-holdout-sub { font-size:12px; color:var(--text-500,var(--text-600)); margin-bottom:14px; }
.ph-holdout-split { display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--text-400); border-top:1px solid rgba(0,0,0,0.06); padding-top:10px; }
.ph-pipeline-top { display:flex; justify-content:space-between; font-size:11px; font-weight:800; color:var(--text-400); letter-spacing:.04em; margin-bottom:14px; }
.ph-live { color:var(--green-600); }
.ph-bars { display:flex; align-items:flex-end; gap:8px; height:80px; }
.ph-bar { flex:1; background: var(--blue-500); border-radius:5px 5px 0 0; opacity:.85; transition: height 1s var(--ease); }

@media (max-width: 980px) {
  .ph-grid-top, .ph-grid-bottom { grid-template-columns:1fr; }
}
.ph-card .tag-pill {
  display: inline-flex;
  align-self: flex-start;

  width: auto;
  max-width: max-content;

  margin-top: 20px !important;

  padding: 4px 9px;

  border: 1px solid currentColor;
  border-radius: 999px;

  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;

  box-sizing: border-box;
   transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease
}
/* ==========================================================================
   Comparison table
   ========================================================================== */
/* ==========================================================================
   Comparison table
   ========================================================================== */

.comparison-wrap {
  margin-top: 56px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  padding: 0 8px 8px;
}
.comparison--wrap {
  margin-top: 56px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  padding: 0 8px 8px;
}
table.comparison {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

/* Header */
table.comparison thead th {
  background: var(--blue-100);
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-600);
  font-weight: 800;
  padding: 14px 12px;
}

table.comparison thead th:first-child {
  text-align: left;
  border-radius: 10px 0 0 10px;
}

table.comparison thead th:last-child {
  border-radius: 0 10px 10px 0;
}

table.comparison thead th.lucrative {
  color: var(--blue-600);
}

/* Individual rows */
table.comparison tbody td {
  text-align: center;
  padding: 14px 12px;
  font-size: 13.5px;
  border: none;
  background: #fff;
}

table.comparison tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-800, var(--text-900));
  padding-left: 28px;
  border-radius: 10px 0 0 10px;
}

table.comparison tbody td:last-child {
  border-radius: 0 10px 10px 0;
}

/* Row hover */
table.comparison tbody tr {
  transition: transform .2s ease;
}

table.comparison tbody tr:hover td {
  background: #fff;
}

table.comparison tbody tr:hover {
  transform: translateY(-1px);
}

/* Checkmarks */
.chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  font-weight: 800;
}

.chk-muted {
  background: var(--grey-50);
  color: var(--text-400);
}

/* Values */
.val-limited,
.val-partial,
.val-addon {
  color: var(--gold-600);
  font-weight: 700;
}

.val-no {
  color: var(--red-500);
}

.mini-cta { text-align:center; margin-top:0px; padding-top:20px; border-top:1px solid var(--border-soft); }
.mini-cta-tag {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-400);
  max-width: none;
  margin: 0 auto;
  white-space: nowrap;
}
.mini-cta-btns { display:flex; justify-content:center; gap:14px; margin-top:20px; }
.mini-cta-logo { display:inline-flex; margin-top:22px; justify-content:center; }

/* ==========================================================================
   Testimonial
   ========================================================================== */
.testimonial-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-top:20px; }
.testimonial-card {
  background: linear-gradient(135deg,#0F2D4D,#1B4066); color:#fff; border-radius: var(--radius-lg);
  padding:36px 40px; position:relative; box-shadow: var(--shadow-lg);
}
.testimonial-card .tag-pill { border-color: rgba(255,255,255,0.4); color:#fff; }
.testimonial-card h3 { color:white; font-size:21px; font-weight:600; line-height:1.5; margin: 16px 0 26px; }
.testimonial-foot { display:flex; align-items:center; gap:12px; }
.testimonial-foot .avatar { width:44px;height:44px;border-radius:50%; background: linear-gradient(135deg,var(--gold-500),var(--blue-500)); flex-shrink:0; }
.testimonial-foot b { display:block; font-size:14px; }
.testimonial-foot span { font-size:12.5px; color:#9AB0C9; }
.testimonial-index { margin-left:auto; font-family: var(--font-head); font-size:13px; color:#7C93AC; }
.testimonial-nav { display:flex; gap:10px; margin-top:22px; }
.testimonial-nav button {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.testimonial-nav button:hover { background: var(--navy-900); color:#fff; border-color:var(--navy-900); }
.add-on {
  padding-top: 60px;
  padding-bottom: 60px;
}
/* ==========================================================================
   CTA banner (start with one product)
   ========================================================================== */
.cta-banner-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.cta-banner-grid h2 { font-size: clamp(26px,3vw,34px); font-weight:600; line-height:1.3; color:#fff; text-align:left; }
.cta-banner-grid p { color:#B9C7D9; margin-top:16px; font-size:15px; line-height:1.7; max-width:480px; }
.cta-banner-grid .btns { display:flex; gap:14px; margin-top:26px; }
.cta-check-list { display:flex; flex-direction:column; gap:16px; }
.cta-check-item { display:flex; align-items:center; gap:12px; font-size:14.5px; color:#fff; }
.cta-check-item .ic { width:22px;height:22px;border-radius:50%; background:rgba(63,217,138,0.15); color:#3FD98A; display:flex;align-items:center;justify-content:center;flex-shrink:0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 20px;
}

/* Left side */

.faq-layout h2 {
  margin: 0;
  text-align: left;
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-900);
}

.faq-layout .sub {
  margin-top: 16px;
  font-size: 18px;
  color: var(--text-600);
}

/* FAQ Cards */

.faq-item {
  background: #fff;
  border-radius: 24px;
  margin-bottom: 16px;
  overflow: hidden;
  border: none;
  transition: all .3s var(--ease);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item.open {
  box-shadow: 0 8px 30px rgba(0,0,0,.04);
}

/* Question */

.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;                           
}

/* Title */

.faq-title {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-900);
}                               

/* Plus / Minus */

.faq-q .icon {
  width: 22px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  background: none;
  border-radius: 0;

  color: var(--gold-600);
  font-size: 28px;
  font-weight: 300;

  transition: .25s;
}

/* Minus when open */

.faq-item.open .faq-q .icon {
  color: var(--gold-600);
  background: none;
  transform: none;
}

/* Answer */

.faq-a {
  max-height: 0;
  overflow: hidden;

  padding: 0 28px 0 68px;

  font-size: 16px;
  line-height: 1.8;
  color: var(--text-600);

  transition:
    max-height .35s ease,
    padding .35s ease;
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 28px 24px 68px;
}

/* Hover */

.faq-item:hover {
  transform: translateY(-2px);
}

/* Mobile */

@media (max-width:900px) {

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .faq-layout h2 {
    font-size: 48px;
  }

  .faq-layout .sub {
    font-size: 16px;
  }

  .faq-q {
    padding: 20px 22px;
    gap: 14px;
  }

  .faq-title {
    font-size: 17px;
  }

  .faq-a {
    padding: 0 22px 0 56px;
  }

  .faq-item.open .faq-a {
    padding: 0 22px 20px 56px;
  }

}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing-cta { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:40px; align-items:center; border-radius: var(--radius-lg); padding:50px 56px; }
/* Grid items default to min-width:auto, which means their min-content size
   (the widest thing inside them that can't shrink) sets a floor on how
   narrow the column is allowed to get. .btns below holds two nowrap
   buttons in a row that don't wrap by default, so without this override
   their combined width becomes that floor — forcing the single mobile
   column (and the heading/paragraph riding along in it) wider than the
   phone screen instead of actually wrapping to fit it. */
.closing-cta > div { min-width: 0; }
/* width:100% is the actual fix here — the source PNG's natural size (446px)
   is under the 500px cap, so max-width alone never engaged and the image
   rendered at its fixed intrinsic size regardless of a narrower mobile
   column, overflowing off both sides (centered by margin:auto, so it
   doesn't look obviously "cut off" — it's clipped symmetrically by the
   page's overflow-x:clip instead of ever becoming visibly a bug). */
.closing-cta img { width:100%; max-width:500px; height:auto; margin:0 auto; display:block; }
.closing-cta h2 { text-align:left; font-size: clamp(24px,2.8vw,32px); }
.closing-cta .btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
@media (max-width:900px) {
  .closing-cta { grid-template-columns:1fr; text-align:center; padding:40px 28px; }
  .closing-cta h2 { text-align:center; }
  .closing-cta .btns { justify-content:center; }
}
.hero-heading {
  font-size: 44px;
  font-weight: 500;
}
/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding:64px 0 32px; border-top:1px solid var(--border-soft); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand p { color:var(--text-600); font-size:13.5px; margin-top:14px; line-height:1.6; max-width:240px; }
.footer-col h6 { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-400); font-weight:800; margin-bottom:16px; }
.footer-col a { display:block; font-size:14px; color:var(--text-700); margin-bottom:12px; transition:.2s; }
.footer-col a:hover { color: var(--blue-600); transform: translateX(2px); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding-top:24px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--text-400); flex-wrap:wrap; gap:12px; }
@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { margin-top: 40px; }
  .overview-grid { grid-template-columns:1fr; }
  .feature-row, .feature-row.reverse { grid-template-columns:1fr; }
  .feature-row.reverse .feature-text { order:1; }
  .feature-row.reverse .feature-visual { order:2; }
  .cap-grid { grid-template-columns:1fr; }
  .testimonial-grid { grid-template-columns:1fr; }
  .cta-banner-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .section { padding: 64px 0; }
}
/* =========================================================
   FeaturePairs isolated stacking cards
   ========================================================= */

.lsc26-deck {
  position: relative;
  width: 100%;
}

/* Each track creates the scroll distance for one card */
.lsc26-track {
  position: relative;
  width: 100%;
  min-height: 115vh;
}

/* Last card doesn't need as much extra scrolling space */
.lsc26-track:last-child {
  min-height: 100vh;
}

/* The actual stacking card */
.lsc26-card {
  position: sticky;
  top: 100px;
  z-index: 1;

  width: 100%;
  box-sizing: border-box;

  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  /* THIS fixes the spacing issue */
  padding: 48px 56px 48px 56px;

  overflow: hidden;

  /* Equalized height (set via JS, see FeaturePairs.jsx) means shorter
     cards (Sales/Quote/Governance vs. the taller Analytics card) get
     extra blank space. Anchoring to the top keeps that slack at the
     bottom of the card (harmless — the next card slides over it) instead
     of centering it, which pushed a gap in above the tag pill/title. */
  display: flex;
  align-items: flex-start;
}

/* Make sure the existing feature row fills the card correctly */
.lsc26-card .feature-row {
  width: 100%;
  margin: 0;
}

/* Keep the existing two-column layout */
.lsc26-card .feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Text side */
.lsc26-card .feature-text {
  min-width: 0;
}

/* Visual side */
.lsc26-card .feature-visual {
  min-width: 0;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

  .lsc26-track {
    min-height: 105vh;
  }

  /* The sticky/equalized-height stacking effect is desktop-only (see
     STACK_MIN_WIDTH in FeaturePairs.jsx) — the tallest card needs ~1550px,
     taller than most mobile/tablet viewports, so staying sticky here would
     trap a card's lower content behind the next card before it ever
     scrolls into view. Cards fall back to a plain, naturally-stacked list:
     no sticky pin, no forced shared height, no clipping. */
  .lsc26-card {
    position: static;
    top: auto;
    overflow: visible;
    margin-bottom: 24px;
    padding: 36px 32px;
  }

  .lsc26-card .feature-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

  .lsc26-track {
    min-height: 100vh;
  }

  .lsc26-card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .lsc26-card .feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =========================================================
   Governance page (governance.html) — all rules scoped under
   the "gov-" prefix so nothing here touches the homepage.
   ========================================================= */


/* --- Hero --- */
.gov-hero { padding: 50px 0 60px; }
.gov-hero-frame{
    position:relative;
    max-width:1080px;
    margin:auto;
    padding:80px 110px;
    border-radius:40px;
}
.gov-hero-frame::before{
 
    content:"";
 
    position:absolute;
 
    left:40px;
    right:40px;
    top:30px;
    bottom:30px;
 
    border-left:2px solid #E7EDF5;
    border-right:2px solid #E7EDF5;
    border-bottom:2px solid #E7EDF5;
 
    border-radius:0 0 34px 34px;
 
    z-index:0;
}
.gov-hero-copy { text-align: center; position: relative; z-index: 1; }
.gov-hero-h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 16px;
}
.gov-hero-lead { max-width: 560px; margin: 20px auto 0; color: var(--text-600); font-size: 20px; font-weight: 400; line-height: 1.7; }
.gov-trust-row { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
.gov-trust-row span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-600); font-weight: 600; }
.gov-trust-row svg { color: var(--blue-600); }
 
.gov-float-pill{
 
    position:absolute;
 
    display:flex;
    align-items:center;
    gap:10px;
 
    padding:14px 22px;
 
    background:#fff;
 
    border:1px solid #DCE5F1;
 
    border-radius:14px;
 
    font-weight:600;
    font-size: 13px;
    white-space: nowrap;
 
    color:#7B8796;
 
    z-index:5;
 
    transition:.35s;
}
.gov-float-pill svg { color: var(--blue-600); }
.gov-float-pill.dark { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }


/* --- Dashboard grid --- */
.gov-dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: 48px; }
.gov-dash-panel {
  grid-row: 1 / 3;
  background: var(--grey-50);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
}
.gov-dash-panel h5 { font-size: 24px; font-weight: 500; color: var(--text-900); margin-top: 0; }
.gov-dash-panel .gov-card-sub { color: var(--text-400); margin-top: 4px; }
.gov-audit-steps-wrap {
  margin-top: 18px;
  flex: 1;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border-radius: var(--radius-md);
  padding: 18px 16px;
  color: #fff;
}
.gov-audit-steps { display: flex; flex-direction: column; gap: 6px; }

.gov-audit-step { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; transition: background .2s var(--ease); }
.gov-audit-step:hover { background: rgba(255,255,255,.06); }
.gov-audit-step .ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gov-audit-step .txt b { display: block; font-size: 13.5px; font-weight: 700; }
.gov-audit-step .txt span { font-size: 11.5px; color: rgba(255,255,255,.55); }

.gov-dash-card { background: var(--grey-50); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 20px 22px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.gov-dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gov-dash-card h5 { font-size: 24px; font-weight: 500; margin-top: 14px; }
.gov-card-label { font-size: 12px; color: var(--text-400); font-weight: 700; }
.gov-card-big { font-family: var(--font-head); font-size: 44px; font-weight: 400; color: var(--text-900); margin-top: 6px; }
.gov-card-big span { font-size: 16px; color: var(--text-400); font-weight: 500; }
.gov-card-sub { display: block; font-size: 11.5px; color: var(--text-400); margin-top: 4px; }

.gov-ring-row { display: flex; align-items: center; gap: 24px; }
.gov-ring {
  --pct: 50;
  width: 130px; height: 130px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--red-500) calc(var(--pct) * 1%), var(--border-soft) 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
}
.gov-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--grey-50); }
.gov-ring-pct { position: relative; font-family: var(--font-head); font-size: 33.04px; font-weight: 400; color: var(--text-900); line-height: 1; }
.gov-ring-caption { position: relative; font-size: 13px; color: var(--text-400); margin-top: 4px; }
.gov-ring-desc { font-size: 13.5px; color: var(--text-400); line-height: 1.6; max-width: 150px; }

.gov-bar-row + .gov-bar-row { margin-top: 16px; }
.gov-bar-top { display: flex; justify-content: space-between; font-size: 16px; color: var(--text-600); margin-bottom: 6px; }
.gov-bar-top b { font-size: 20px; color: #185FA5; font-weight: 700; }
.gov-bar { height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.gov-bar-fill { height: 100%; border-radius: 999px; background: #378ADD; }
.gov-bar-fill--muted { background: #378ADD; }

@media (max-width: 900px) {
  .gov-dash-grid { grid-template-columns: 1fr; }
  .gov-dash-panel { grid-row: auto; }
}

/* --- "Decaying quietly" options --- */
.gov-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.gov-option-card { background: var(--white); border-radius: var(--radius-md); padding: 24px 24px 26px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.gov-option-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gov-option-n { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-400); }
.gov-option-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.gov-option-top h4 { font-size: 24px; font-weight: 500; }
.gov-option-card p { margin-top: 12px; font-size: 14px; color: var(--text-600); line-height: 1.65; }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-600); }
.badge-blue { background: var(--blue-100); color: var(--blue-600); }
.gov-fourth-option { text-align: center; margin-top: 32px; font-size: 19px; font-weight: 500; color: var(--text-900); }
@media (max-width: 900px) { .gov-options { grid-template-columns: 1fr; } }

/* --- Find it. Fix it. Govern it. --- */
.gov-ff-layout { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.gov-ff-sticky { position: sticky; top: 100px; }
.gov-ff-title { font-size: clamp(28px, 3vw, 36px); font-weight: 500; font-family: var(--font-head); }
.gov-ff-sub { margin-top: 12px; font-size: 14.5px; color: var(--text-600); line-height: 1.6; }
.gov-ff-list { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.gov-ff-list button {
  text-align: left; background: none; border: none; border-left: 2px solid var(--border);
  padding: 9px 0 9px 16px; font-size: 14.5px; color: var(--text-600); font-weight: 500;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.gov-ff-list button:hover { color: var(--text-900); }
.gov-ff-list button.active { color: var(--blue-600); border-left-color: var(--blue-600); font-weight: 700; }

.gov-ff-stack { position: relative; }
.gov-ff-item { position: relative; margin-bottom: 60px; }
.gov-ff-item:last-child { margin-bottom: 0; }
.gov-ff-card {
  position: sticky; 
  top: 100px; 
  background: transparent;
  border-radius: var(--radius-lg); 
  padding: 34px 36px; 
}
.gov-ff-card h3 { font-size: 24px; font-weight: 500; }
.gov-ff-card > p { margin-top: 10px; font-size: 14.5px; color: var(--text-600); line-height: 1.7; max-width: 560px; }
.gov-ff-panel-card { margin-top: 22px; background: var(--grey-50); border-radius: var(--radius-md); padding: 8px 20px; }
.gov-ff-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.gov-ff-row:first-child { border-top: none; }
.gov-ff-check-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.gov-ff-check-row:first-child { border-top: none; }
.gov-ff-check-box { width: 20px; height: 20px; border-radius: 6px; background: #9AC8FF; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gov-ff-check-row .tag { margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--text-400); letter-spacing: .04em; }
.gov-ff-version-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.gov-ff-version-row:first-child { border-top: none; }
.gov-ff-version-row .v { font-weight: 700; color: var(--text-900); }
.gov-ff-version-row .date { color: var(--text-400); font-size: 12.5px; }
.gov-ff-version-row .score { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
@media (max-width: 900px) {
  .gov-ff-layout { grid-template-columns: 1fr; }
  .gov-ff-sticky { position: static; }
  .gov-ff-card { position: static; }
}

/* --- Multi-CRM diagram --- */
.gov-crm-diagram { position: relative; max-width: 900px; margin: 56px auto 0; height: 380px; }
.gov-crm-logos { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.gov-crm-logos img { height: 34px; width: auto; object-fit: contain; }
.gov-crm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gov-crm-vbox {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 16px; background: var(--gold-100);
  border: 1.5px solid var(--gold-500); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) { .gov-crm-logos img { height: 24px; } .gov-crm-diagram { height: 320px; } }

/* --- Pricing panel --- */
.gov-pricing-card {
  display: grid; 
  grid-template-columns: 1.1fr 0.9fr; 
  gap: 40px; 
  align-items: center;
  background: transparent; 
  padding: 48px 52px;
}
.closing-cta-h2 { font-size: clamp(26px, 2.8vw, 44px); font-weight: 500; font-family: var(--font-head); line-height: 1.25; }
.gov-pricing-number { font-family: var(--font-head); font-size: clamp(52px, 12vw, 96px); font-weight: 500; color: #3088D9; margin-top: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gov-pricing-number span { font-size: 14px; font-weight: 500; color: var(--text-600); }
.gov-pricing-number .gov-pricing-number-value { font-size: inherit; font-weight: inherit; color: inherit; }
.gov-pricing-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.gov-pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-700); line-height: 1.5; }
.gov-pricing-list li svg { flex-shrink: 0; margin-top: 4px; color: var(--blue-600); }
.gov-pricing-mascot { max-width: 340px; margin: 0 auto; }
@media (max-width: 900px) { .gov-pricing-card { grid-template-columns: 1fr; padding: 32px 26px; text-align: center; } .gov-pricing-list li { text-align: left; } }

/* ==========================================================================
   Stratum for Insights page — new page, everything below is prefixed
   .strat- so nothing here touches the homepage or the governance page.
   ========================================================================== */

/* --- Hero checklist (2x2) --- */
.strat-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; justify-content: center; margin: 26px auto 0; width: fit-content; }
.strat-check-grid span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-600); font-weight: 400; }
.strat-check-grid svg { color: var(--blue-600); flex-shrink: 0; }

/* --- Dashboard showcase floats --- */
.strat-dash-wrap { position: relative; max-width: 950px; margin: 56px auto 76px; }
.strat-dash-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.strat-float-chat {
  position: absolute; background: var(--blue-600); color: #fff; padding: 14px 18px;
  border-radius: 16px 16px 2px 16px; font-size: 13.5px; font-weight: 600; max-width: 300px;
  box-shadow: var(--shadow-lg); line-height: 1.5; animation: floaty 6s ease-in-out infinite;
}
.strat-float-chat time { display: block; font-size: 10.5px; font-weight: 600; opacity: .7; margin-top: 6px; }
.strat-float-card {
  position: absolute; background: #fff; border-radius: 16px; padding: 18px 20px;
  box-shadow: var(--shadow-lg); width: 260px; animation: floaty 7s ease-in-out infinite;
}
.strat-float-note {
  position: absolute; background: var(--grey-50); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow-md); width: 280px; display: flex; gap: 10px; animation: floaty 8s ease-in-out infinite;
}
.strat-float-note .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-600); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.strat-float-note b { font-size: 12.5px; display: block; margin-bottom: 4px; }
.strat-float-note p { font-size: 12px; color: var(--text-600); line-height: 1.55; }
@media (max-width: 1000px) { .strat-float-chat, .strat-float-card, .strat-float-note { display: none; } }

/* --- Problem section --- */
.strat-problem-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 48px; }
.strat-problem-list p { padding: 11px 0; border-bottom: 1px solid var(--border-soft); color: var(--text-600); font-size: 17px; }
.strat-problem-list p:last-child { border-bottom: none; }
.strat-problem-list p.lead { border-left: 3px solid var(--blue-600); padding-left: 14px; color: var(--blue-600); font-weight: 700; border-bottom: none; margin-bottom: 6px; }
.strat-mascot-wrap { position: relative; margin-top: 30px; max-width: 320px; }
@media (max-width: 900px) { .strat-problem-layout { grid-template-columns: 1fr; gap: 36px; } }

/* --- Feature grid extras --- */
.strat-input-mock { border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 15.5px; font-weight: 400; color: var(--text-400); background: #fff; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.strat-input-mock:last-child { margin-bottom: 0; }
.strat-input-mock svg { color: var(--teal-600); flex-shrink: 0; }
.strat-stat-row { display: flex; gap: 12px; margin-top: 16px; }
.strat-stat-box { background: var(--grey-50); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; flex: 1; }
.strat-stat-box .lbl { font-size: 11px; color: var(--text-400); margin-bottom: 4px; }
.strat-stat-box .val { font-family: var(--font-head); font-size: 40px; font-weight: 400; color: var(--text-900); }
.strat-pill-strike { text-decoration: line-through; opacity: .55; }

/* =========================================================
   STRATUM MONDAY TIMELINE
   ========================================================= */

.strat-timeline-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 48px auto 0;
  display: grid;
  /* LEFT CARD | TIME | RIGHT CARD */
  grid-template-columns: 1fr 90px 1fr;
  column-gap: 24px;
  row-gap: 12px;
  align-items: center;
}
 
/* Headers */
.strat-timeline-header { align-self: end; }
.strat-timeline-header.left { grid-column: 1; }
.strat-timeline-header-center { grid-column: 2; }
.strat-timeline-header.right { grid-column: 3; }
.strat-timeline-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-400); text-align: center; margin: 0 0 4px; }
.strat-timeline-header.right .strat-timeline-eyebrow { color: var(--blue-600); }
.strat-timeline-heading { font-size: 22px; font-weight: 500; text-align: center; margin: 0 0 18px; }
 
/* Cards */
.strat-timeline-card { background: #fff; border-radius: 14px; padding: 16px 18px; font-size: 17px; font-weight: 400; color: var(--text-600); line-height: 1.45; box-shadow: var(--shadow-sm); }
.strat-timeline-card.dark { background: var(--blue-600); color: #fff; }
 
/* Time column */
.strat-timeline-time { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.strat-timeline-time::before { content: ''; position: absolute; top: -12px; bottom: -12px; left: 50%; transform: translateX(-50%); border-left: 1px dashed var(--blue-600); }
.strat-timeline-dot {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 4px 10px; background: var(--blue-100); border: 1px solid var(--blue-600);
  border-radius: 999px; font-size: 11px; font-weight: 400; color: var(--blue-600); white-space: nowrap;
}
 
/* Footer */
.strat-timeline-foot { width: 100%; max-width: 1080px; margin: 18px auto 0; position: relative; min-height: 110px; display: flex; align-items: center; justify-content: center; }
.strat-footer-pending {
  position: absolute; right: calc(50% + 70px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 400; color: var(--text-400); white-space: nowrap;
}
.strat-footer-flower { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; object-fit: contain; }
.strat-footer-win { position: absolute; left: calc(50% + 70px); top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 00; color: var(--text-900); white-space: nowrap; }
 
@media (max-width: 900px) {
  .strat-timeline-wrap { grid-template-columns: 1fr; row-gap: 12px; }
  .strat-timeline-header-center { display: none; }
  .strat-timeline-header.left, .strat-timeline-header.right { grid-column: 1; }
  .strat-timeline-time { display: none; }
  .strat-timeline-card { grid-column: 1; }
 
  .strat-timeline-foot { min-height: 180px; flex-direction: column; justify-content: center; gap: 8px; padding-top: 10px; }
  .strat-footer-pending { position: static; right: auto; top: auto; transform: none; order: 2; justify-content: center; text-align: center; }
  .strat-footer-flower { position: static; left: auto; top: auto; transform: none; width: 80px; height: 80px; order: 1; }
  .strat-footer-win { position: static; left: auto; top: auto; transform: none; order: 3; text-align: center; white-space: normal; }
}

/* --- Integrations hub (navy) --- */
.strat-hub-wrap { max-width: 900px; margin: 40px auto 0; }
.strat-hub-wrap img { width: 100%; }

/* --- What changes grid --- */
.strat-changes-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.strat-changes-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; }
.strat-mini-card { background: #fff; border-radius: 16px; padding: 20px 22px; border: 1px solid var(--border-soft); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.strat-mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.strat-mini-card h4 { font-size: 22px; font-weight: 600; margin: 16px 0 14px; line-height: 1.35; }
.strat-mini-preview { background: var(--grey-50); border-radius: 12px; padding: 14px; margin-bottom: 4px; }
.strat-mini-preview.tint-blue { background: var(--blue-100); }
.strat-mini-preview.tint-gold { background: var(--gold-100); }
.strat-mini-preview.tint-teal { background: var(--teal-100); }
.strat-mini-preview.tint-red { background: var(--red-100); }
.strat-mini-preview.tint-grey { background: var(--grey-50); border: 1px solid var(--border-soft); }
.strat-mini-preview .chat-checklist .row .check { background: var(--gold-500); }
.strat-holdout-box { background: #fff; border-radius: 12px; padding: 16px 18px; text-align: center; }
.strat-holdout-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-400); margin: 0; }
.strat-holdout-lift { font-family: var(--font-head); font-size: 30px; font-weight: 500; color: var(--red-500); margin: 6px 0 2px; }
.strat-holdout-sub { font-size: 12px; color: var(--text-400); margin: 0 0 14px; }
.strat-holdout-split { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-400); border-top: 1px solid rgba(0,0,0,0.06); padding-top: 10px; }
@media (max-width: 900px) { .strat-changes-top, .strat-changes-bottom { grid-template-columns: 1fr; } }

/* --- Why choose Stratum --- */
.strat-why-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 20px; }
.strat-why-cloud img { width: 100%; border-radius: var(--radius-lg); }
@media (max-width: 900px) { .strat-why-wrap { grid-template-columns: 1fr; } }

/* ==========================================================================
   Loft page
   ========================================================================== */

/* Problem grid header (h2/sub left, note + CTA right) */
.loft-problem-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.loft-problem-note { padding-top: 6px; }
.loft-problem-note p { font-size: 17px; font-weight: 400; color: var(--text-600); line-height: 1.7; margin-bottom: 16px; }
@media (max-width: 900px) { .loft-problem-head { grid-template-columns: 1fr; } }

.loft-problem-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 40px; }
.loft-problem-card {
  background: #fff; border-radius: 16px; padding: 22px 24px; border: 1px solid var(--border-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.loft-problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.loft-problem-card h4 { font-size: 24px; font-weight: 500; margin: 4px 0 8px; }
.loft-problem-card p { font-size: 14px; color: var(--text-600); line-height: 1.6; }
@media (max-width: 900px) { .loft-problem-grid { grid-template-columns: 1fr; } }

/* Sticky "why choose" tab panel — stacked variant (copy on top, visual below) */
.tab-panel--stacked {
  grid-template-columns: 1fr;
  gap: 18px;
}
/* Status pill rows (AI relationship intelligence card) */
.loft-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.loft-status-pill { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.loft-status-pill--teal { background: var(--teal-100); color: var(--teal-600); }
.loft-status-pill--red { background: var(--red-100); color: var(--red-600); }
.loft-status-pill--gold { background: var(--gold-100); color: var(--gold-600); }
.loft-check-card.check-card { background: var(--grey-50); box-shadow: none; padding: 12px; }
.loft-check-card.check-card:hover { transform: none; box-shadow: none; }
.loft-check-card .check-row { background: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; }
.loft-check-card .check-row:last-of-type { margin-bottom: 0; }
.loft-check-card .check-row.checked .box { background: #9AC8FF; border-radius: 8px; }
/* Numbered step rows (Workflow automation card) */
.loft-step-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
.loft-step-num {
  width: 20px; 
  height: 20px; 
  border-radius: 6px; 
  background: #185FA51A; 
  color: #185FA5;
  font-size: 12px; 
  font-weight: 700; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
}
.loft-step-row .right { margin-left: auto; font-size: 10.5px; color: #378ADD; font-weight: 700; }

/* Revenue-team rows */
.loft-team-list { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; }
.loft-team-row {
  display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px;
  padding: 22px 28px; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.loft-team-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.loft-team-name { font-size: 24px; font-weight: 400; min-width: 200px; }
/* In src/styles.css, update the existing .loft-team-desc rule to add text-align: center */

.loft-team-desc { color: var(--text-500, var(--text-600)); font-size: 15.5px; font-weight: 400; flex: 1; text-align: center; }
@media (max-width: 700px) {
  .loft-team-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .loft-team-name { min-width: 0; }
}

/* Comparison table badge variants (X / dash inside a circle, matching the check badge) */
.chk.chk-no { background: var(--red-100); color: var(--red-500); }
.chk.chk-partial { background: var(--gold-100); color: var(--gold-600); font-weight: 800; }

/* ==========================================================================
   Loft for Marketing page
   ========================================================================== */

/* Hero dashboard mockup — built in HTML/CSS rather than a screenshot image,
   so swap in a real product screenshot any time by replacing DashboardMock
   in LucrativeMarketingHero.jsx with an <img>, same as LucrativeSalesHero.jsx does. */
.loft-mkt-dash { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; display:flex; font-size:12px; color:var(--text-600); }
.loft-mkt-dash-sidebar { width:150px; flex-shrink:0; background:var(--grey-50); border-right:1px solid var(--border-soft); padding:16px 14px; display:flex; flex-direction:column; }
.loft-mkt-dash-logo { font-size:13px; font-weight:800; color:var(--navy-900); }
.loft-mkt-dash-logo-sub { display:block; font-size:9px; font-weight:600; color:var(--text-400); margin-top:1px; }
.loft-mkt-dash-workspace { display:flex; align-items:center; gap:8px; margin-top:18px; padding:8px; background:#fff; border-radius:8px; border:1px solid var(--border-soft); font-weight:700; font-size:11.5px; color:var(--text-900); }
.loft-mkt-dash-workspace .sq { width:18px; height:18px; border-radius:5px; background:var(--teal-500); flex-shrink:0; }
.loft-mkt-dash-nav { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.loft-mkt-dash-nav li { padding:6px 8px; border-radius:6px; font-size:11px; color:var(--text-500, var(--text-600)); }
.loft-mkt-dash-nav li.active { background:var(--blue-100); color:var(--blue-600); font-weight:700; }
.loft-mkt-dash-user { margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); font-size:10px; color:var(--text-400); line-height:1.5; }
.loft-mkt-dash-main { flex:1; min-width:0; padding:18px 20px; }
.loft-mkt-dash-main h4 { font-size:15px; font-weight:700; color:var(--text-900); margin:0; }
.loft-mkt-dash-main .sub { font-size:11px; color:var(--text-400); margin:2px 0 14px; }
.loft-mkt-dash-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.loft-mkt-dash-stat { background:var(--grey-50); border-radius:10px; padding:10px 12px; }
.loft-mkt-dash-stat .lbl { font-size:9px; font-weight:800; letter-spacing:.05em; color:var(--text-400); }
.loft-mkt-dash-stat .val { font-size:19px; font-weight:700; color:var(--text-900); margin:4px 0 2px; }
.loft-mkt-dash-stat .cap { font-size:10px; color:var(--text-400); }
.loft-mkt-dash-panel { background:var(--grey-50); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.loft-mkt-dash-panel h5 { font-size:11px; font-weight:700; color:var(--text-900); margin:0 0 8px; }
.loft-mkt-dash-campaign-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px solid var(--border-soft); font-size:10.5px; }
.loft-mkt-dash-campaign-row:first-of-type { border-top:none; }
.loft-mkt-dash-campaign-row .name { font-weight:600; color:var(--text-900); }
.loft-mkt-dash-campaign-row .name span { display:block; font-weight:400; color:var(--text-400); font-size:9.5px; }
.loft-mkt-dash-pill { font-size:9px; font-weight:700; padding:3px 8px; border-radius:999px; }
.loft-mkt-dash-pill--done { background:var(--green-100); color:var(--green-600); }
.loft-mkt-dash-pill--draft { background:var(--grey-50); color:var(--text-400); border:1px solid var(--border-soft); }

/* Marketing Workspace sticky-tabs section — same tabs-layout pattern as
   LucrativeSalesWhyChoose, but the nav column also carries constant intro copy above
   the sticky tab list, and each panel's visual can be one of several types
   (two-column check cards, bullet cards, stat cards, or step rows). */
.loft-mkt-intro p { font-size:14.5px; color:var(--text-600); line-height:1.7; margin-bottom:14px; }
.loft-mkt-intro .example { font-style:--font-body; color:#5b6472; font-size: 17px; font-weight: 400; border-left:2px solid var(--border-soft); padding-left:14px; margin:14px 0; }
.loft-mkt-graphic { width:170px; margin-top:28px; align-self:flex-start; }
.loft-mkt-twocol { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tabs-layout--wide { grid-template-columns: 420px 1fr; }
@media (max-width: 900px) { .tabs-layout--wide { grid-template-columns: 1fr; } }
@media (max-width:700px) { .loft-mkt-twocol { grid-template-columns:1fr; } }



/* ==========================================================================
   Quotebase page
   ========================================================================== */

/* Reusable circle-icon list (blue checks for "verified"/positive lists, red
   X's for problem lists) — used in LucrativeQuoteVerified and LucrativeQuoteChatProblem. */
.qb-check-list { display:flex; flex-direction:column; gap:16px; margin-top:24px; list-style:none; padding:0; }
.qb-check-list li { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-700, var(--text-900)); line-height:1.5; }
.qb-check-circle, .qb-x-circle {
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.qb-check-circle { background:var(--blue-100); color:var(--blue-600); }
.qb-check-circle--sm { width:18px; height:18px; }
.qb-x-circle { background:var(--red-100); color:#EC736E; }

/* "Every quote. Fully verified." — quote receipt card */
.qb-verified-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:12px; }
.qb-quote-card { background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); padding:30px 32px; }
.qb-quote-card-head { display:flex; justify-content:space-between; align-items:flex-start; }
.qb-quote-card-head h4 { font-size:20px; font-weight:600; margin:0; }
.qb-quote-card-sub { font-size:12px; color:var(--text-400); margin:4px 0 22px; }
.qb-quote-line { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--border-soft); font-size:14px; color:var(--text-700, var(--text-900)); }
.qb-quote-line:first-of-type { border-top:none; }
.qb-quote-line.discount span:last-child { color:var(--blue-600); font-weight:600; }
.qb-quote-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:2px; border-top:1.5px solid var(--text-900); }
.qb-quote-total b:first-child { font-size:14px; font-weight:700; }
.qb-quote-total b:last-child { font-family:var(--font-head); font-size:28px; font-weight:500; }
.qb-quote-steps { margin-top:24px; background:var(--grey-50); border-radius:14px; padding:6px 16px; }
@media (max-width:900px) { .qb-verified-grid { grid-template-columns:1fr; gap:36px; } }

/* "Every sales team eventually runs into..." — live chat mockup */
.qb-chat-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.qb-chat-card { background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); padding:26px; }
.qb-chat-head { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.qb-chat-avatar { width:44px; height:44px; border-radius:50%; background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qb-chat-head b { display:block; font-size:15px; font-weight:700; }
.qb-chat-head span { font-size:12px; color:var(--text-400); }
.qb-chat-bubble { background:var(--blue-600); color:#fff; border-radius:14px 14px 4px 14px; padding:12px 16px; font-size:13.5px; max-width:82%; margin-left:auto; margin-bottom:22px; line-height:1.5; }
.qb-chat-checklist { background:var(--grey-50); border-radius:14px; padding:16px 18px 18px; }
.qb-chat-checklist .check-row { padding:7px 0; font-size:13px; }
.qb-chat-ready-btn { width:100%; justify-content:center; margin-top:10px; }
.qb-chat-foot { display:flex; align-items:center; gap:12px; margin-top:28px; }
.qb-chat-foot img { width:38px; height:38px; flex-shrink:0; }
.qb-chat-input { flex:1; display:flex; align-items:center; background:var(--grey-50); border-radius:999px; padding:11px 18px; font-size:13px; color:var(--text-400); }
.qb-chat-input .send { margin-left:auto; color:var(--blue-600); display:flex; align-items:center; }
@media (max-width:900px) { .qb-chat-grid { grid-template-columns:1fr; gap:36px; } }

/* "Everything you need to generate accurate quotations." — bento feature grid */
.qb-features-row { display:grid; gap:20px; margin-bottom:20px; }
.qb-features-row--top { grid-template-columns:2fr 1fr; }
.qb-features-row--half { grid-template-columns:1fr 1fr; }
.qb-features-row:last-child { margin-bottom:0; }
@media (max-width:800px) { .qb-features-row, .qb-features-row--top, .qb-features-row--half { grid-template-columns:1fr; } }

.qb-feature-card{
    background:#fff;
    border-radius:24px;
    padding:28px 28px 30px;
    box-shadow:none;
}

.qb-feature-card h4{
    font-size:20px;
    font-weight:500;
    line-height:1.2;
    margin:0 0 16px;
    color:#232323;
}

.qb-feature-card > .tag-pill:first-child{
    margin-top:0;
}

.qb-feature-card p{
    font-size:15px;
    color:#666;
    line-height:1.7;
    margin:0;
}


.qb-feature-card--dark { background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); color:#fff; display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:center; }
.qb-feature-card--dark h4 { color:#fff; }
.qb-feature-card--dark p { color:rgba(255,255,255,.65); }
@media (max-width:700px) { .qb-feature-card--dark { grid-template-columns:1fr; } }

.qb-mini-receipt { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:6px 18px; }
.qb-mini-receipt .qb-quote-line { border-top-color:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.qb-mini-receipt .qb-quote-line.discount span:last-child { color:#9AC8FF; }
.qb-mini-receipt .qb-quote-total { border-top-color:rgba(255,255,255,.3); flex-direction:column; align-items:flex-end; gap:4px; }
.qb-mini-receipt .qb-quote-total b:last-child { color:#fff; }

.qb-status-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border-soft); font-size:13.5px; }
.qb-status-row:first-of-type { border-top:none; margin-top:8px; }

.qb-feature-img { display:block; width:100%; height:auto; border-radius:12px; margin-top:16px; }

.qb-audit-log { margin-top:16px; }
.qb-audit-row { display:flex; align-items:center; padding:9px 0; border-top:1px solid var(--border-soft); font-size:13px; color:var(--text-700, var(--text-900)); }
.qb-audit-row:first-of-type { border-top:none; }
.qb-audit-row .right { margin-left:auto; color:var(--text-400); font-weight:600; font-size:12px; }
.qb-audit-card h4{
    margin:0;
    font-size:22px;
    font-weight:500;
    line-height:1.2;
    color:#232323;
}
.qb-audit-card{
    padding:28px 30px 26px;
    min-height:360px;
}
.qb-audit-card p{
    margin:18px 0 0;
    font-size:15px;
    line-height:1.75;
    color:#666;
    max-width:96%;
}
/* Push timeline lower like the design */
.qb-audit-log{
    margin-top:90px;
}

/* Timeline rows */
.qb-audit-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    border-top:1px solid #D7D7D7;
    font-size:15px;
    color:#555;
}

.qb-audit-row:first-child{
    border-top:none;
}

/* Colored status dot */
.qb-audit-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
}

/* Left text */
.qb-audit-row span:nth-child(2){
    font-size:15px;
    font-weight:400;
    color:#555;
}

/* Right text */
.qb-audit-row .right{
    margin-left:auto;
    font-size:15px;
    font-weight:400;
    color:#6E6E6E;
}
.qb-role-list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.qb-role-row { display:flex; align-items:center; gap:12px; border:1px solid var(--border-soft); border-radius:10px; padding:11px 14px; font-size:13px; }
.qb-role-row b { font-weight:700; min-width:70px; }
.qb-role-row span { color:var(--text-400); flex:1; }
.qb-role-row svg { color:var(--text-400); flex-shrink:0; }

.qb-template-stack { position:relative; height:120px; margin-top:24px; }
.qb-template-card {
  position:absolute; top:0; left:0; width:78%; background:#fff; border:1px solid var(--border-soft);
  border-top:3px solid var(--tc); border-radius:10px; box-shadow:var(--shadow-sm); padding:14px 16px;
  font-size:11px; font-weight:700; color:var(--text-600); transition:transform .25s var(--ease);
}
.qb-template-card:nth-child(1) { transform:translate(0,0) rotate(-3deg); }
.qb-template-card:nth-child(2) { transform:translate(14%,20px) rotate(1deg); }
.qb-template-card:nth-child(3) { transform:translate(28%,40px) rotate(4deg); }
.qb-feature-card:hover .qb-template-card:nth-child(1) { transform:translate(-4%,-4px) rotate(-5deg); }
.qb-feature-card:hover .qb-template-card:nth-child(2) { transform:translate(14%,16px) rotate(1deg); }
.qb-feature-card:hover .qb-template-card:nth-child(3) { transform:translate(32%,44px) rotate(5deg); }

/* "One AI Agent. Every Business System" — dark radial hub diagram */
.qb-agent-wrap { display:flex; align-items:center; justify-content:center; gap:56px; max-width:1020px; margin:56px auto 0; }
.qb-agent-col { display:flex; flex-direction:column; gap:20px; width:240px; }
.qb-agent-center { width:220px; display:flex; flex-direction:column; align-items:center; gap:36px; position:relative; }
.qb-agent-center::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.15); z-index:0; }
.qb-agent-node {
  position:relative; z-index:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; width:100%;
}
.qb-agent-node .ic {
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.qb-agent-node b { display:block; font-size:13.5px; font-weight:700; color:#fff; }
.qb-agent-node .sub { font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.04em; font-weight:700; }
.qb-agent-node--vert { width:220px; }
.qb-agent-col--left .qb-agent-node::after,
.qb-agent-col--right .qb-agent-node::before {
  content:''; position:absolute; top:50%; width:56px; height:1px; background:rgba(255,255,255,.18);
}
.qb-agent-col--left .qb-agent-node::after { right:-56px; }
.qb-agent-col--right .qb-agent-node::before { left:-56px; }
.qb-agent-logo {
  width:76px; height:76px; border-radius:20px; background:var(--gold-100); border:1.5px solid var(--gold-500);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); position:relative; z-index:1;
}
@media (max-width:960px) {
  .qb-agent-wrap { flex-direction:column; gap:16px; }
  .qb-agent-col, .qb-agent-node--vert, .qb-agent-center { width:100%; max-width:340px; }
  .qb-agent-col--left .qb-agent-node::after, .qb-agent-col--right .qb-agent-node::before { display:none; }
  .qb-agent-center::before { display:none; }
}

/* ==========================================
   Workflow Animation
========================================== */

@keyframes workflow {

  0% {
    background:#fff;
    color:#7B8796;
    border-color:#DCE5F1;
  }

  12% {
    background:#E9F4FF;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
    color:#1760A5;
  }

  25% {
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
    box-shadow:none;
  }

  100% {
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
  }

}
@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}

.pill-1,
.pill-2,
.pill-3{

animation-name:workflow,pulse;

animation-duration:9s,1.5s;

animation-iteration-count:infinite,infinite;
}
.pill-1{
    left:0;
    top:50%;
    transform:translate(-50%,-50%);
}

.pill-2{
    right:0;
    top:50%;
    transform:translate(50%,-50%);
}

.pill-3{
    left:50%;
    bottom:0;
    transform:translate(-50%,50%);
}
@media (max-width: 900px) 
{
  .pill-1, .pill-2 { 
    top: 850px !important;
  }
  .pill-3 { bottom: 15px !important; }
}
.pill-icon{
    width:16px;
    height:16px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.spinner{
    width:14px;
    height:14px;
    border:2px solid #BFD8FF;      /* Light blue ring */
    border-top-color:#2563EB;      /* Dark blue moving part */
    border-radius:50%;
    position:absolute;
    opacity:0;
}
.tick{
    position:absolute;
    opacity:0;
    color:#fff;
    stroke:#fff;

}
@keyframes spin{

from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}

}
@keyframes step1{

0%,8%{
    background:#fff;
    color:#6F7C90;
    border-color:#DCE5F1;
}

8%,18%{
    background:#EAF5FF;
    color:#2563EB;
    border-color:#73B7FF;
}

18%,100%{
    background:#163B6D;
    color:#fff;
    border-color:#163B6D;
}

}
@keyframes step2{

0%,25%{
    background:#fff;
    color:#6F7C90;
    border-color:#DCE5F1;
}

25%,35%{
    background:#EAF5FF;
    color:#2563EB;
    border-color:#73B7FF;
}

35%,100%{
    background:#163B6D;
    color:#fff;
    border-color:#163B6D;
}

}
@keyframes step3{

0%,52%{
    background:#fff;
    color:#6F7C90;
    border-color:#DCE5F1;
}

52%,62%{
    background:#EAF5FF;
    color:#2563EB;
    border-color:#73B7FF;
}

62%,100%{
    background:#163B6D;
    color:#fff;
    border-color:#163B6D;
}

}
.pill-1 .spinner{
    opacity:0;
    animation:
        spin .8s linear infinite,
        showSpinner1 12s linear infinite;
}

.pill-2 .spinner{
    opacity:0;
    animation:
        spin .8s linear infinite,
        showSpinner3 12s linear infinite;
}

.pill-3 .spinner{
    opacity:0;
    animation:
        spin .8s linear infinite,
        showSpinner2 12s linear infinite;
}
.pill-1 .tick{
    opacity:0;
    animation:showTick1 12s linear infinite;
}


.pill-2 .tick{
    opacity:0;
    animation:showTick3 12s linear infinite;
}

.pill-3 .tick{
    opacity:0;
    animation:showTick2 12s linear infinite;
}

@keyframes showSpinner1{
    0%,15%{opacity:1;}
    16%,100%{opacity:0;}
}

@keyframes showTick1{
    0%,15%{opacity:0;}
    16%,100%{opacity:1;}
}


@keyframes showSpinner2{
    0%,33%{opacity:0;}
    34%,49%{opacity:1;}
    50%,100%{opacity:0;}
}

@keyframes showTick2{
    0%,49%{opacity:0;}
    50%,100%{opacity:1;}
}


@keyframes showSpinner3{
    0%,67%{opacity:0;}
    68%,83%{opacity:1;}
    84%,100%{opacity:0;}
}

@keyframes showTick3{
    0%,83%{opacity:0;}
    84%,100%{opacity:1;}
}

/* ---------- Governance Hero Workflow ---------- */


.pill-icon { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.pill-icon .spinner {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(80,160,255,.3);
  border-top-color: #1760A5;
  animation: spin .8s linear infinite;
}
.gov-float-pill.dark .pill-icon .spinner {
  border-color: rgba(255,255,255,.3);
  border-top-color: #fff;
}
.pill-icon .tick { position: absolute; inset: 0; width: 15px; height: 15px; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
/* Each pill's background/border/color cycles through the same 10s loop as
   its icon: idle (grey) -> flash (blue, while its spinner is showing) ->
   done (navy, once its tick is showing) -> holds done for the rest of the
   loop -> hard-cuts back to idle when the loop restarts. The five steps
   fire in sequence: step1 (0-11%) -> step2 (20-31%) -> step3 (40-51%) ->
   step5/"AI Suggestions" (60-71%) -> step4/"Fix issues" (80-91%) — note
   step4 and step5 are intentionally swapped in the timing vs. their
   number, matching the govShowSpinner4/5 + govShowTick4/5 wiring below. */
.step1{ animation: step1 10s infinite; }
.step2{ animation: step2 10s infinite; }
.step3{ animation: step3 10s infinite; }
.step4{ animation: step4New 10s infinite; }
.step5{ animation: step5New 10s infinite; }
 
@keyframes step1{
0%,10%{
    background:#E9F4FF;
    color:#1760A5;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
}
20%,100%{
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
}
}
 
@keyframes step2{
0%,20%{
    background:#fff;
    color:#7B8796;
    border-color:#DCE5F1;
}
30%{
    background:#E9F4FF;
    color:#1760A5;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
}
40%,100%{
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
}
}
 
@keyframes step3{
0%,40%{
    background:#fff;
    color:#7B8796;
    border-color:#DCE5F1;
}
50%{
    background:#E9F4FF;
    color:#1760A5;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
}
60%,100%{
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
}
}
 
@keyframes step4New{
 
0%,80%{
    background:#fff;
    color:#7B8796;
    border-color:#DCE5F1;
}
 
90%{
    background:#E9F4FF;
    color:#1760A5;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
}
 
100%{
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
}
 
}
 
@keyframes step5New{
 
0%,60%{
    background:#fff;
    color:#7B8796;
    border-color:#DCE5F1;
}
 
70%{
    background:#E9F4FF;
    color:#1760A5;
    border-color:#73B7FF;
    box-shadow:0 0 0 8px rgba(80,160,255,.15);
}
 
82%,100%{
    background:#163B6D;
    border-color:#163B6D;
    color:#fff;
}
 
}
 
/* ==========================
   GOVERNANCE SPINNER
========================== */
 
.step1 .spinner{
    animation: spin .8s linear infinite, govShowSpinner1 10s infinite;
}
 
.step2 .spinner{
    animation: spin .8s linear infinite, govShowSpinner2 10s infinite;
}
 
.step3 .spinner{
    animation: spin .8s linear infinite, govShowSpinner3 10s infinite;
}
 
.step5 .spinner{
    animation: spin .8s linear infinite, govShowSpinner4 10s infinite;
}
 
.step4 .spinner{
    animation: spin .8s linear infinite, govShowSpinner5 10s infinite;
}
 
/* ==========================
   GOVERNANCE TICK
========================== */
 
.step1 .tick{
    animation: govShowTick1 10s infinite;
}
 
.step2 .tick{
    animation: govShowTick2 10s infinite;
}
 
.step3 .tick{
    animation: govShowTick3 10s infinite;
}
 
.step5 .tick{
    animation: govShowTick4 10s infinite;
}
 
.step4 .tick{
    animation: govShowTick5 10s infinite;
}
 
/* ==========================
   SPINNER VISIBILITY
========================== */
 
@keyframes govShowSpinner1{
    0%,10%{opacity:1;}
    11%,100%{opacity:0;}
}
 
@keyframes govShowSpinner2{
    0%,20%{opacity:0;}
    20%,30%{opacity:1;}
    31%,100%{opacity:0;}
}
 
@keyframes govShowSpinner3{
    0%,40%{opacity:0;}
    40%,50%{opacity:1;}
    51%,100%{opacity:0;}
}
 
@keyframes govShowSpinner4{
    0%,60%{opacity:0;}
    60%,70%{opacity:1;}
    71%,100%{opacity:0;}
}
 
@keyframes govShowSpinner5{
    0%,80%{opacity:0;}
    80%,90%{opacity:1;}
    91%,100%{opacity:0;}
}
 
/* ==========================
   TICK VISIBILITY
========================== */
 
@keyframes govShowTick1{
    0%,10%{opacity:0;}
    11%,100%{opacity:1;}
}
 
@keyframes govShowTick2{
    0%,30%{opacity:0;}
    31%,100%{opacity:1;}
}
 
@keyframes govShowTick3{
    0%,50%{opacity:0;}
    51%,100%{opacity:1;}
}
 
@keyframes govShowTick4{
    0%,70%{opacity:0;}
    71%,100%{opacity:1;}
}
 
@keyframes govShowTick5{
    0%,90%{opacity:0;}
    91%,100%{opacity:1;}
}
 
/* Mobile: keep the pills absolutely positioned and floating around the
   card edges — same idea as desktop — instead of dropping into normal
   document flow. Two things have to change for that to work at phone
   width, both because the copy is a single full-width column on mobile
   instead of a narrow block with side margins to float pills into:
 
   1. HORIZONTAL: the 40px left/right anchor (set inline from JSX, so it
      needs !important here) pulls in to 34px. Only the ONE side each
      pill is actually anchored on gets touched (step1/step2 -> left,
      step4/step5 -> right) — step3 ("Get Report") uses left:50% to stay
      centered and must be left alone, since setting BOTH left and right
      !important on an auto-width absolutely-positioned element makes the
      browser stretch it to span the gap between them instead of sizing
      to its content (that's a much worse bug than the one being fixed —
      it's exactly what happened on an earlier pass at this).
 
   2. VERTICAL: desktop's top:18% / top:50% / bottom:30px split the pills
      into a band above, a band beside the middle of the text, and a band
      below — that works because the desktop copy column is narrow enough
      to have empty space on either side at every one of those heights.
      On mobile the heading/lead text fills the full width and (being a
      single column instead of two) is much taller, so top:50% now lands
      partway down the middle of the wrapped heading text with nowhere
      safe on either side — there is no "beside the text" on a phone.
      The two safe bands are the small gap the frame's own extra top/
      bottom padding reserves before the eyebrow and after the trust row.
      So step1/step4 move up into the top band (top:20px, overriding
      their 18%) and step2/step5 move down to sit alongside "Get Report"
      in the bottom band (top:auto + bottom:30px, overriding their 50%)
      — three pills sharing the bottom band, one anchored to each side,
      one centered. */
@media (max-width: 900px) {
  .gov-hero-frame {
    padding: 86px 6px 96px;
  }
  .gov-hero-frame::before { left: 10px; right: 10px; }
  .gov-float-pill {
    padding: 7px 10px;
    font-size: 10px;
    gap: 5px;
  }
  .step1 { top: 20px !important; left: 34px !important; }
  .step4 { top: 20px !important; right: 34px !important; }
  .step2 { top: auto !important; bottom: 30px !important; left: 34px !important; }
  .step5 { top: auto !important; bottom: 30px !important; right: 34px !important; }
  .pill-icon, .pill-icon .tick { width: 11px; height: 11px; }
}
@media (max-width: 380px) {
  .gov-float-pill { font-size: 9px; padding: 6px 8px; }
}

/* ==========================================================================
   Hero — pinned hero + docking animation (scroll-driven)
   ========================================================================== */
.hero-stage {
  position: relative;
  height: 220vh;
}
.hero-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-frame {
  position: relative;
  width: min(1300px, 94vw);
  height: 100%;
  margin: 0 auto;
}

.hero-copy {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: min(46%, 520px);
  z-index: 6;
  will-change: transform, opacity;
}
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero-copy h1 {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.hero-copy .hero-ctas { margin-top: 32px; }

.hero-float-card {
  position: absolute;
  z-index: 8;
  will-change: transform, filter;
  transform-origin: top left;
  filter: drop-shadow(0 24px 40px rgba(14,32,54,0.18));
}
.hero-card-inner {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.hero-card-inner img { width: 100%; height: auto; display: block; }

#heroCardContacts { top: 16%; right: 2%; width: min(30vw, 360px); }
#heroCardFunnel { top: 47%; right: 12%; width: min(27vw, 320px); }

.hero-dashboard-panel {
  position: absolute;
  left: 0; right: 0; margin: 0 auto;
  top: 26vh;
  width: min(1120px, 92vw);
  aspect-ratio: 1664 / 925;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  z-index: 2;
  will-change: transform;
}
.hero-dashboard-panel img { width: 100%; height: 100%; object-fit: cover; }

/* Accessibility fallback — OS-level reduced motion only */
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto; }
  .hero-stage__sticky {
    position: relative; height: auto; overflow: visible;
    display: block;
    padding: clamp(36px,9vw,56px) clamp(18px,5vw,28px) clamp(48px,10vw,72px);
  }
  .hero-frame {
    height: auto; width: 100%; max-width: 520px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    align-items: center; justify-items: center;
    gap: clamp(18px,5vw,28px);
  }
  .hero-float-card {
    position: relative !important; grid-row: 1;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important; max-width: 220px;
    margin: 0 !important; transform: none !important;
    filter: drop-shadow(0 16px 30px rgba(14,32,54,0.16)) !important;
  }
  #heroCardContacts { grid-column: 1; }
  #heroCardFunnel { grid-column: 2; }
  .hero-copy {
    position: relative; transform: none; left: 0; top: 0;
    grid-row: 2; grid-column: 1/3;
    width: 100%; text-align: center;
  }
  .hero-copy .hero-ctas { justify-content: center; flex-wrap: wrap; }
  .hero-dashboard-panel {
    position: relative; top: auto; left: auto; right: auto;
    grid-row: 3; grid-column: 1/3;
    width: 100%; margin-top: 0;
    transform: none !important; opacity: 1 !important;
  }
}

/* Mobile — animation stays active; only starting positions change.
   Two things drove the empty space:
   1) The pinned frame was a full 100vh, but once docked (cards moved into
      the dashboard, copy faded out — see the opacity crossfade in
      Hero.jsx's render()) only the ~200px-tall dashboard was left visible,
      so most of that 100vh sat blank. Shrinking the pinned frame itself
      (78vh) means the dashboard now fills a much bigger share of it.
   2) The dashboard was bottom-anchored, far from the copy above it. It's
      now positioned mid-frame instead, right where the copy sits — that's
      safe to overlap because copy is fully faded (opacity 0) well before
      the dashboard reaches full opacity/scale, so nothing is ever visually
      double-printed.
   The stage height (148vh = 78vh pinned + 70vh scroll buffer) keeps the
   docking animation completing within roughly one mobile scroll gesture. */
@media (max-width: 860px) {
  .hero-stage { height: 148vh; }
  .hero-stage__sticky { height: 78vh; }
  .hero-frame { width: 92vw; }

  #heroCardContacts { top: 4%; left: 2%; right: auto; width: 44%; }
  #heroCardFunnel { top: 4%; right: 2%; left: auto; width: 44%; }

  .hero-copy {
    left: 0; right: 0; margin: 0 auto;
    top: 40%;
    width: 94%; text-align: center;
  }
  .hero-copy .hero-ctas { justify-content: center; flex-wrap: wrap; }

  .hero-dashboard-panel { top: 58%; bottom: auto; width: 98vw; }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(24px, 7.2vw, 32px); }
  .hero-copy .eyebrow { font-size: clamp(13px, 3.6vw, 15px); }
}