/* =========================================================
   Profiscience — Modernized Enterprise Brand System
   ========================================================= */

:root {
  /* Brand — modernized Profiscience blues */
  --pf-navy:    #0A2540;
  --pf-navy-2:  #0E2E54;
  --pf-blue:    #0E4AC9;
  --pf-blue-2:  #2A6BDD;
  --pf-sky:     #5088EC;
  --pf-cyan:    #1AA6E6;
  --pf-ink:     #0F172A;
  --pf-slate:   #475569;
  --pf-mute:    #64748B;
  --pf-mist:    #F5F8FC;
  --pf-line:    #E2E8F0;
  --pf-white:   #FFFFFF;
  --pf-gold:    #F5A623;
  --pf-success: #10B981;

  /* Gradients */
  --grad-hero: radial-gradient(1200px 600px at 10% -10%, rgba(26,166,230,.35), transparent 60%),
               radial-gradient(900px 500px at 90% 10%, rgba(80,136,236,.35), transparent 60%),
               linear-gradient(135deg, #0A2540 0%, #0E2E54 50%, #0E4AC9 130%);
  --grad-btn:  linear-gradient(135deg, #0E4AC9 0%, #1AA6E6 100%);
  --grad-text: linear-gradient(135deg, #0E4AC9 0%, #1AA6E6 100%);
  /* Brighter blue→cyan for gradient text sitting on dark surfaces,
     where the deep-royal --grad-text loses contrast. */
  --grad-text-on-dark: linear-gradient(135deg, #4D90FF 0%, #2BC4F0 100%);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --sh-md: 0 10px 25px -10px rgba(15,23,42,.25);
  --sh-lg: 0 25px 50px -12px rgba(15,23,42,.35);
  --sh-glow: 0 20px 60px -15px rgba(14,74,201,.45);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --container: 1200px;
  --pf-sticky-offset: 90px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--pf-ink);
  background: var(--pf-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--pf-blue); text-decoration: none; }
a:hover { color: var(--pf-navy); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(80,136,236,.65);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--pf-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }
p  { margin: 0 0 1rem; color: var(--pf-slate); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pf-navy);
  padding: 6px 12px;
  border: 1px solid rgba(14,74,201,.34);
  border-radius: 999px;
  background: rgba(14,74,201,.08);
  margin-bottom: 18px;
}

.eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.eyebrow-link[data-section-eyebrow-link] {
  position: relative;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.eyebrow-link:hover,
.eyebrow-link:focus-visible {
  color: inherit;
}

.eyebrow-link[data-section-eyebrow-link]:hover,
.eyebrow-link[data-section-eyebrow-link]:focus-visible {
  background: rgba(14,74,201,.13);
  border-color: rgba(14,74,201,.45);
  box-shadow: 0 0 0 1px rgba(14,74,201,.14) inset;
}

.eyebrow.inverse {
  color: #BEE1FF;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

.hero .eyebrow {
  color: var(--pf-mist);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

/* Keep the long homepage hero eyebrow on one line at phone widths. */
@media (max-width: 640px) {
  .eyebrow--hero-nowrap {
    white-space: nowrap;
    font-size: .7rem;
    letter-spacing: .08em;
    padding: 5px 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.page-hero .eyebrow {
  color: var(--pf-mist);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* On dark backgrounds the deep-royal gradient loses contrast — use a
   brighter blue→cyan so gradient text stays legible over navy. */
.hero .gradient-text,
.page-hero .gradient-text,
section.dark .gradient-text,
.int-showcase .gradient-text,
.stat-strip-section .gradient-text,
.cta-band .gradient-text {
  background: var(--grad-text-on-dark);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,1);
  border-bottom: 1px solid var(--pf-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--pf-ink);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
.brand img { flex-shrink: 0; height: 45px; width: auto; -webkit-user-drag: none; }
.brand-hover {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 0;
}
.brand-hover .brand-menu {
  top: 100%;
  left: 0;
  min-width: 320px;
  max-height: min(72vh, 560px);
  overflow-y: auto;
}
.brand-hover:hover .brand-menu,
.brand-hover:focus-within .brand-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad-btn);
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--sh-glow);
}
.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}
/* Desktop: push the whole link cluster right so it sits beside the CTA, with
   the wordmark alone on the left. Carets render as static chevrons for
   affordance (hover on the item still opens the menu). */
@media (min-width: 961px) {
  .nav-links { margin-left: auto; margin-right: 30px; }
  /* Hairline divider separating navigation from the conversion CTA — the
     standard enterprise-header device for keeping the two groups distinct. */
  .nav-links::after {
    content: "";
    align-self: center;
    width: 1px;
    height: 22px;
    margin-left: 4px;
    background: var(--pf-line);
  }
  .nav-item > .nav-caret {
    display: inline-grid;
    place-items: center;
    pointer-events: none;
    color: var(--pf-mute);
    opacity: .6;
    transition: opacity .18s ease, color .18s ease;
  }
  .nav-item:hover > .nav-caret { opacity: 1; }
}
/* Top-level labels sit at secondary weight/colour so the CTA is the only
   high-contrast element in the header — brand blue is reserved for the button
   and the active indicator rather than spent on every link. */
.nav-links a {
  color: var(--pf-slate);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: -.005em;
  position: relative;
  padding: 6px 0;
}
.nav-links a.active,
.nav-links a:hover { color: var(--pf-navy); }
/* Bold only the top-level labels. Dropdown entries get background + color
   instead, so hovering one can't widen the panel. */
.nav-item > a.active,
.nav-item > a:hover { font-weight: 600; }
/* Each label reserves its *bold* width up front via a zero-height hidden copy,
   so switching weight on hover/active can't reflow the row. */
.nav-item > a::before {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  font-weight: 600;
}
/* Solid brand rule rather than the gradient — a flat indicator reads as
   product chrome; the gradient reads as marketing. */
.nav-item > a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--pf-blue);
  border-radius: 1px;
}

/* --- Section dropdowns --- */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Padding bridges the gap to the panel so the pointer never leaves :hover. */
  padding: 24px 0;
}
.nav-caret {
  /* Hidden on desktop — hover (and :focus-within for keyboard) opens the panel,
     so the arrow is visual noise. Restored under 900px, where touch needs it. */
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  color: var(--pf-mute);
}
.nav-caret::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}
.nav-item:hover .nav-caret { color: var(--pf-blue); }
.nav-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 230px;
  background: white;
  border: 1px solid var(--pf-line);
  /* Squarer corners and a tighter, lower-spread shadow — panels should read as
     a crisp surface, not a floating card. */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -8px rgba(15, 23, 42, .16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item:hover .nav-caret::before,
.nav-item:focus-within .nav-caret::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.nav-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--pf-ink);
}
/* Neutral wash on hover instead of a blue tint — keeps brand colour scarce. */
.nav-menu a:hover {
  background: var(--pf-mist);
  color: var(--pf-navy);
}
/* Titled dropdown entries (product/solution links carry a description). */
.nav-menu-title { font-weight: 600; line-height: 1.25; }
.nav-menu-desc {
  font-size: .78rem;
  font-weight: 400;
  color: var(--pf-mute);
  line-height: 1.3;
  white-space: normal;
}
.nav-menu a:hover .nav-menu-desc { color: var(--pf-slate); }
/* Small section label inside a panel/column. */
.nav-menu-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-mute);
  padding: 4px 12px 8px;
}

/* --- Mega panel (multi-column dropdown) --- */
.nav-mega {
  display: grid;
  grid-template-columns: repeat(3, 210px);
  gap: 6px 12px;
  padding: 14px;
}
/* Single-column dropdowns with descriptions: bound the width so text wraps. */
.nav-menu:not(.nav-mega) { max-width: 300px; }
.nav-mega-col { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-col + .nav-mega-col {
  border-left: 1px solid var(--pf-line);
  padding-left: 14px;
}
/* "View all customers →" — a link-styled entry that closes out a column. */
.nav-mega-more {
  margin-top: 4px;
  color: var(--pf-blue) !important;
  font-weight: 600;
}
.nav-mega-more:hover { background: var(--pf-mist); }
/* Full-width footer CTA that anchors the panel. */
.nav-mega-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 2px 0;
  padding: 13px 12px 3px;
  border-top: 1px solid var(--pf-line);
}
.nav-foot-text { font-size: .84rem; color: var(--pf-mute); }
.nav-foot-cta {
  font-size: .85rem;
  font-weight: 600;
  color: var(--pf-blue);
  white-space: nowrap;
}
.nav-foot-cta:hover { text-decoration: underline; }

/* With the links right-aligned, a left-anchored panel would hang off the right
   edge of the viewport. Anchor the single-column menus to their item's right
   edge, and center the wide Platform mega on the viewport so it clears both
   sides at every desktop width. Must sit after .nav-menu/.nav-mega to win the
   cascade (equal specificity). */
@media (min-width: 961px) {
  .nav-menu:not(.nav-mega) { left: auto; right: -14px; }
  /* 3×194 cols + 2×12 gaps + 2×14 padding + 2×1 border = 636px wide. */
  .nav-mega { left: 50%; right: auto; margin-left: -318px; }
}

.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--pf-ink);
  /* Never let the CTA squeeze the toggle off-screen. */
  flex-shrink: 0;
}
/* Only appears inside the open mobile sheet, where the header CTA is hidden.
   Needs to outrank .btn's display:inline-flex, which is defined further down. */
.nav-links a.nav-sheet-cta { display: none; }

/* The 3-column Platform mega is wide; below ~960px it can't clear the viewport,
   so the mobile sheet takes over there (see max-width:960px blocks). */
@media (max-width: 1200px) and (min-width: 961px) {
  .nav-links { gap: 22px; margin-right: 22px; }
  .nav-cta .btn { padding: 10px 18px; }
}

/* Mid-size desktop widths can still run out of horizontal room with the full
   nav + CTA visible. Hide the header CTA (it remains available in-page) and
   remove the divider so labels never overlap the wordmark. */
@media (max-width: 1080px) and (min-width: 961px) {
  .nav-cta .btn { display: none; }
  .nav-links { margin-right: 0; }
  .nav-links::after { display: none; }
}

@media (max-width: 960px) {
  .brand-hover {
    padding: 0;
  }
  .brand-hover .brand-menu {
    display: none !important;
  }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 72px; left: 0; right: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: white;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--pf-line);
  }
  /* Dropdowns become tap-to-open accordions — hover has no meaning on touch. */
  .nav-item {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid var(--pf-line);
  }
  .nav-item > a {
    padding: 14px 0;
    /* Leave room for the caret button so the labels don't collide. */
    padding-right: 44px;
  }
  .nav-caret {
    position: absolute;
    top: 0; right: 0;
    width: 44px; height: 50px;
    display: grid;
    place-items: center;
  }
  .nav-menu {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 10px 12px;
    transform: none;
    transition: none;
    display: none;
  }
  /* :hover/:focus-within must not open these — only the explicit .open class. */
  .nav-item:hover .nav-menu,
  .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; display: none; }
  .nav-item.open .nav-menu { display: flex; opacity: 1; visibility: visible; }
  .nav-item.open .nav-caret::before { transform: rotate(-135deg) translate(-2px, -2px); }
  .nav-item:hover .nav-caret::before,
  .nav-item:focus-within .nav-caret::before { transform: rotate(45deg) translate(-1px, -1px); }
  .nav-item.open:hover .nav-caret::before,
  .nav-item.open:focus-within .nav-caret::before { transform: rotate(-135deg) translate(-2px, -2px); }
}

/* Below ~600px the header CTA collides with the wordmark and shoves the
   hamburger off-screen (brand is flex-shrink:0, the button's label can't wrap).
   Drop it from the header and surface it inside the menu sheet instead. */
@media (max-width: 600px) {
  .nav-cta .btn { display: none; }
  .nav.open .nav-links a.nav-sheet-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 18px;
    padding: 12px 22px;
    color: white;
    font-weight: 600;
  }
  .nav.open .nav-links a.nav-sheet-cta:hover { color: white; }
}

/* Mobile accordion: flatten the mega panel to a single column and hide the
   per-item descriptions so the sheet stays compact and easy to scan. */
@media (max-width: 960px) {
  .nav-mega-col + .nav-mega-col {
    border-left: 0;
    padding-left: 0;
    margin-top: 4px;
  }
  .nav-menu-desc { display: none; }
  .nav-menu-label { padding: 10px 0 4px; }
  .nav-menu a { padding: 11px 0; }
  .nav-mega-foot { display: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-btn);
  color: white;
  box-shadow: var(--sh-glow);
  border: none;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 25px 60px -15px rgba(14,74,201,.6);
  color: white;
}
.btn-secondary {
  background: white;
  color: var(--pf-navy);
  border-color: var(--pf-line);
}
.btn-secondary:hover {
  border-color: var(--pf-blue);
  color: var(--pf-blue);
}
.btn-ghost {
  background: rgba(255,255,255,.08);
  color: white;
  border-color: rgba(255,255,255,.25);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.15);
  color: white;
}
.btn-arrow::after {
  content: "→";
  transition: transform .2s ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* Reusable inline button group (side-by-side on desktop, stacked + centered on mobile) */
.btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
@media (max-width: 600px) {
  .btns {
    flex-direction: column;
    align-items: center;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  color: white;
  background: var(--grad-hero);
  overflow: hidden;
  padding: 90px 0 120px;
}
.hero h1 { color: white; }
.hero p.lead {
  color: rgba(255,255,255,.85);
  font-size: 1.2rem;
  max-width: 620px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}
.hero-full-width-head {
  grid-column: 1 / -1;
}
.page-hero .hero-full-width-head h1 {
  max-width: inherit;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
}
.hero-stats .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: white;
  letter-spacing: -0.02em;
}
.hero-stats .stat span {
  color: rgba(255,255,255,.65);
  font-size: .9rem;
}

/* Right hero column: visual stacked above the stat strip */
.hero-visual-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Hero stat strip — sits under the visual as a 2×2 grid */
.hero-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 0;
  align-self: start;
}
.hss-item {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hss-item strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #BEE1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hss-item span {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  line-height: 1.3;
}
.ai-powered-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, rgba(26,166,230,.18) 0%, rgba(14,74,201,.22) 100%);
  border: 1px solid rgba(26,166,230,.5);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(26,166,230,.15),
              0 0 24px rgba(26,166,230,.4),
              0 0 60px rgba(14,74,201,.25);
  animation: aiPulse 2.4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ai-powered-badge:hover,
.ai-powered-badge:focus-visible {
  transform: translateY(-1px);
}
.ai-powered-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: aiSheen 3s ease-in-out infinite;
}
.ai-badge-icon {
  --ai-icon-size: 1rem;
  width: var(--ai-icon-size);
  height: var(--ai-icon-size);
  flex: 0 0 var(--ai-icon-size);
  display: inline-grid;
  place-items: center;
  color: #EAF7FF;
  filter: drop-shadow(0 0 8px rgba(82,201,255,.92));
  animation: spin 6s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ai-badge-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
@keyframes aiPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(26,166,230,.15),
                0 0 24px rgba(26,166,230,.4),
                0 0 60px rgba(14,74,201,.25);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(26,166,230,.35),
                0 0 40px rgba(26,166,230,.7),
                0 0 90px rgba(14,74,201,.45);
  }
}
@keyframes aiSheen {
  0%   { transform: translateX(-100%); }
  50%, 100% { transform: translateX(200%); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Animated hero visual (platform mockup) */
.hero-visual {
  position: relative;
  perspective: 1400px;
}
.hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: 18px;
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-lg);
  transform: rotateY(-6deg) rotateX(4deg);
  animation: floaty 6s ease-in-out infinite alternate;
}
@keyframes floaty {
  from { transform: rotateY(-6deg) rotateX(4deg) translateY(0); }
  to   { transform: rotateY(-4deg) rotateX(2deg) translateY(-10px); }
}
.hero-card .pill {
  display: inline-block;
  background: rgba(26,166,230,.2);
  color: #BEE1FF;
  border: 1px solid rgba(26,166,230,.4);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.hero-card h4 { color: white; margin-bottom: 6px; font-size: 1.05rem; }
.hero-card small { color: rgba(255,255,255,.65); }
.hero-card .bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  margin: 14px 0 8px;
  overflow: hidden;
}
.hero-card .bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1AA6E6, #0E4AC9);
  width: 72%;
  border-radius: 999px;
  animation: fillUp 2.4s ease-out both;
}
@keyframes fillUp { from { width: 0; } }
.hero-card .thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.hero-card .thumb {
  aspect-ratio: 16/10;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14,74,201,.4), rgba(26,166,230,.4));
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.hero-card .thumb::before {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  color: white;
  font-size: 1rem;
  opacity: .8;
}
.hero-float {
  position: absolute;
  background: white;
  color: var(--pf-ink);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--sh-lg);
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-float .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pf-success);
  box-shadow: 0 0 0 4px rgba(16,185,129,.2);
}
.hero-float.top { top: 245px; right: -10px; animation: floaty 5s ease-in-out infinite alternate-reverse; }
.hero-float.bot { bottom: 20px; left: -20px; animation: floaty 7s ease-in-out infinite alternate; }

@media (max-width: 900px) {
  .hero { padding: 60px 0 80px; }
  /* minmax(0,…) lets the column shrink below its content's intrinsic width,
     otherwise wide children force horizontal overflow on phones. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-float.top, .hero-float.bot { display: none; }
  .hero-visual-col { gap: 34px; }
  .hero-stat-strip { gap: 22px 16px; padding-top: 26px; }
  /* Center the hero copy once it stacks above the visual */
  .hero-grid > div:first-child { text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
}

/* Hero decorative animated blobs */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .6;
  z-index: 0;
  pointer-events: none;
}
.hero::before {
  width: 420px; height: 420px;
  background: #1AA6E6;
  top: -120px; left: -80px;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero::after {
  width: 520px; height: 520px;
  background: #0E4AC9;
  bottom: -200px; right: -100px;
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.1); }
}
.hero .container { position: relative; z-index: 2; }

/* =========================================================
   SECTIONS
   ========================================================= */
/* Vertical rhythm is fluid rather than stepped, so section spacing stays in
   proportion to the content as the viewport narrows. */
section { padding: clamp(56px, 8vw, 90px) 0; }
section.alt { background: var(--pf-mist); }
/* Subtle vertical contour based on .alt: when multiple sections use this
   class back-to-back, their opposing edges create a soft divider line. */
section.alt-gradient {
  background-color: var(--pf-mist);
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.28) 16%,
    rgba(255,255,255,0) 48%,
    rgba(10,37,64,.035) 100%
  );
}
section.dark {
  background: var(--pf-navy);
  color: white;
}
section.dark h2, section.dark h3 { color: white; }
section.dark p { color: rgba(255,255,255,.75); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5.3vw, 60px);
}
.section-head.left { text-align: left; margin-left: 0; }
/* For headings that need more room to breathe — stays fluid below 800px. */
.section-head.wide { max-width: 800px; }

.section-home-clesite-tagline {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem)
}

.platform-pillars-copy {
  max-width: 860px;
  margin: 20px auto 0;
  display: grid;
  gap: 16px;
}

.platform-pillars-copy p {
  margin: 0;
  color: var(--pf-slate);
  font-size: 1.03rem;
  line-height: 1.65;
}

.platform-pillars-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--pf-ink);
}

/* =========================================================
   LOGO TICKER
   ========================================================= */
.logos-section {
  padding: 50px 0;
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  background: white;
}
.logos-kicker {
  text-align: center;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pf-mute);
  margin-bottom: 32px;
  font-weight: 600;
}
.logo-ticker {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.logo-slot {
  flex: 0 0 160px;
  height: 72px;
  overflow: hidden;
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--pf-line);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-slot .ls-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1), opacity 0.45s ease;
}
.logo-slot .ls-inner.exit-up {
  transform: translateY(-110%);
  opacity: 0;
}
.logo-slot .ls-inner.enter-below {
  transform: translateY(110%);
  opacity: 0;
}
.logo-slot img {
  max-width: 140px;
  max-height: 58px;
  width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 0.9;
  transition: opacity .3s ease;
}
.logo-slot:hover img {
  filter: none;
  opacity: 1;
}
.logos-more {
  text-align: center;
  margin-top: 28px;
}
@media (max-width: 900px) {
  .logo-ticker { gap: 10px; }
  .logo-slot { flex: 0 0 120px; height: 60px; }
  .logo-slot img { max-width: 100px; max-height: 44px; }
}
@media (max-width: 600px) {
  .logo-ticker { flex-wrap: wrap; justify-content: center; }
  .logo-slot { flex: 0 0 calc(33% - 8px); }
}

/* =========================================================
   INFOGRAPHIC + PRODUCT SPOTLIGHTS
   ========================================================= */
.infographic-wrap {
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: none;
}
.infographic-wrap img {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: block;
  max-height: none;
  object-fit: contain;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.product-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.product-card-header {
  padding: 24px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card-header.us {
  background: linear-gradient(135deg, #0A2540 0%, #0E4AC9 100%);
}
.product-card-header.cle {
  background: linear-gradient(135deg, #0E2E54 0%, #1AA6E6 100%);
}
.product-card-header.sf {
  background: linear-gradient(135deg, #1a1040 0%, #7C3AED 100%);
}
.product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0;
  white-space: nowrap;
}
.product-card-header h3 {
  color: white;
  font-size: 1.35rem;
  margin: 0;
}
.product-card-intro {
  padding: 20px 24px 0;
  font-size: .98rem;
  color: var(--pf-slate);
  line-height: 1.6;
  max-width: 42ch;
  flex: 1;
}
.product-bullets {
  list-style: none;
  padding: 20px 24px;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-bullets li {
  font-size: .92rem;
  color: var(--pf-slate);
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.product-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pf-blue);
  font-weight: 700;
  font-size: .85rem;
}
.product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--pf-blue);
  margin-top: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--pf-line);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.product-link:hover {
  color: var(--pf-navy);
  gap: 10px;
}
.product-link:focus-visible {
  outline-offset: 4px;
}
.product-link::after {
  content: "→";
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feat-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(14,74,201,.3);
}
.feat-card .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-btn);
  display: grid; place-items: center;
  color: white;
  font-size: 1.4rem;
  margin-bottom: 20px;
  box-shadow: var(--sh-glow);
}
.feat-card .dev-feat-logo {
  height: 46px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  margin-bottom: 18px;
}
.feat-card h3 { margin-bottom: 10px; }
.feat-card p { margin: 8px 0 0; }
/* Tag sits in normal flow as a badge above the heading, so longer labels
   (e.g. "Extend further") can never overlap the title. */
.feat-card .tag {
  display: inline-block;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #F5A623, #F77B3C);
  color: white;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Why Profiscience — numbered reason cards (home) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.why-card {
  position: relative;
  overflow: hidden;
  padding: 40px 36px 36px;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(26,166,230,.07), transparent 70%),
    white;
  box-shadow: var(--sh-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Gradient rail that fills in on hover */
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--grad-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(14,74,201,.28);
  box-shadow: var(--sh-glow);
}
.why-card:hover::before { transform: scaleX(1); }

/* Oversized ghost numeral */
.why-card-num {
  position: absolute;
  top: 16px; right: 24px;
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .13;
  transition: opacity .3s ease;
  pointer-events: none;
}
.why-card:hover .why-card-num { opacity: .7; }

.why-card h3 {
  position: relative;
  max-width: 20ch;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.28;
  letter-spacing: -.015em;
}
.why-card p {
  position: relative;
  margin: 0;
  color: var(--pf-slate);
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .why-card { padding: 68px 26px 28px; }
  .why-card-num { font-size: 3.2rem; }
  .why-card h3 { font-size: 1.18rem; }
}

/* Core-platform cards — shingled panels (solutions page).
   Three distinct cards that physically overlap, so the row reads as pieces
   fitting together while each product keeps its own surface and colour.
   Left card sits highest; each following card tucks under its neighbour. */
.platform-grid {
  display: flex;
  align-items: stretch;
}

.platform-card {
  --platform-rgb: 26,166,230;
  --platform-accent-text: #7FC3FF;
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 28px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(var(--platform-rgb), .45);
  /* Opaque, or the overlap stops reading as one panel in front of another.
     Three stacked layers: a hot bloom under the rail, a body-wide wash that
     carries the hue all the way down, then the shared navy base. */
  background:
    radial-gradient(460px 320px at 50% 0%, rgba(var(--platform-rgb), .42), transparent 72%),
    linear-gradient(165deg, rgba(var(--platform-rgb), .2) 0%, rgba(var(--platform-rgb), .08) 55%, rgba(var(--platform-rgb), .03) 100%),
    linear-gradient(165deg, #0C2544 0%, #0A2540 60%, #0E2E54 100%);
  box-shadow: 0 18px 44px rgba(2,8,23,.28);
  color: rgba(255,255,255,.9);
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* The shingle: each card slides left over its neighbour, and pads its content
   back in by the same amount so nothing hides under the overlap. */
.platform-card + .platform-card {
  margin-left: -30px;
  padding-left: 60px;
}
.platform-card:nth-child(1) { z-index: 3; }
.platform-card:nth-child(2) { z-index: 2; }
.platform-card:nth-child(3) { z-index: 1; }

/* Accent rail — each card's own colour, so the seams stay legible */
.platform-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--platform-rgb)), rgba(var(--platform-rgb), .45));
}
/* Lit inner edge along the seam, so the overlap reads as depth not a gap */
.platform-card + .platform-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
}
.platform-card > * { position: relative; z-index: 1; }

/* Hovered piece pulls out of the stack and in front of its neighbours */
.platform-card:hover {
  z-index: 10;
  transform: translateY(-8px);
  border-color: rgba(var(--platform-rgb), .6);
  box-shadow:
    0 30px 64px rgba(2,8,23,.4),
    0 20px 50px -22px rgba(var(--platform-rgb), .8);
}

/* Three clearly separate hues, all drawn from the existing palette. Cohesion
   comes from the shared navy base and identical treatment, not from the colours
   being close together. */
.platform-card--learning   { --platform-rgb: 26,166,230;  --platform-accent-text: #8AD3FF; } /* --pf-cyan */
.platform-card--compliance { --platform-rgb: 16,185,129;  --platform-accent-text: #6EE7B7; } /* --pf-success */
.platform-card--delivery   { --platform-rgb: 139,92,246;  --platform-accent-text: #C9B6FF; } /* ScormFly violet */

.platform-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(var(--platform-rgb), .55);
  background: rgba(var(--platform-rgb), .26);
  color: var(--platform-accent-text);
  box-shadow: 0 8px 22px -10px rgba(var(--platform-rgb), .9);
  margin-bottom: 22px;
  transition: border-color .3s ease, background-color .3s ease;
}
.platform-card:hover .platform-card-icon {
  border-color: rgba(var(--platform-rgb), .7);
  background: rgba(var(--platform-rgb), .24);
}
.platform-card-icon svg { width: 22px; height: 22px; }

.platform-card-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--platform-accent-text);
  margin-bottom: 10px;
}
.platform-card-name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: white;
}
.platform-card p {
  margin: 0 0 24px;
  flex: 1;
  color: rgba(255,255,255,.72);
  font-size: .97rem;
  line-height: 1.65;
}

.platform-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--platform-rgb), .45);
  color: white;
  font-size: .88rem;
  font-weight: 600;
}
.platform-card-link::after {
  content: "\2192";
  color: var(--platform-accent-text);
  transition: transform .25s ease;
}
.platform-card:hover .platform-card-link::after { transform: translateX(5px); }

/* Stacked: the shingle rotates to vertical rather than disappearing */
@media (max-width: 900px) {
  .platform-grid { flex-direction: column; }
  .platform-card + .platform-card {
    margin-left: 0;
    margin-top: -26px;
    padding-left: 30px;
    padding-top: 56px;
  }
  .platform-card + .platform-card::after {
    top: 0; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
  }
}
@media (max-width: 640px) {
  .platform-card { padding: 32px 24px 26px; }
  .platform-card + .platform-card { padding-left: 24px; padding-right: 24px; }
  .platform-card-name { font-size: 1.35rem; }
}

@media (max-width: 900px) {
  .feat-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  /* Center card content to match the single-column stack */
  .why-card { text-align: center; }
  .why-card h3 { max-width: none; }
  /* Center the ghost numeral above the content so headings don't slide under it */
  .why-card-num { top: 20px; right: 0; left: 0; text-align: center; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .why-card { padding-top: 76px; }
}

/* =========================================================
   SPLIT / SHOWCASE
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }

/* ---- Detached eyebrow in split sections (UniversitySite + CLESite) ---- */
/* Desktop: eyebrow sits above the text column, mock spans both rows.       */
@media (min-width: 901px) {
  #universitysite .split,
  #clesite .split {
    row-gap: 0;
  }
  /* UniversitySite (.split.reverse): eyebrow + text in col-1, mock in col-2 */
  #universitysite .split__eyebrow {
    grid-column: 1; grid-row: 1; order: 0;
    justify-self: start;
  }
  #universitysite .split-media {
    grid-column: 2; grid-row: 1 / 3; order: 0;
  }
  #universitysite .split > .reveal:not(.split-media) {
    grid-column: 1; grid-row: 2;
  }
  /* CLESite (.split): mock in col-1, eyebrow + text in col-2 */
  #clesite .split__eyebrow {
    grid-column: 2; grid-row: 1;
    justify-self: start;
  }
  #clesite .split-media {
    grid-column: 1; grid-row: 1 / 3;
  }
  #clesite .split > .reveal:not(.split-media) {
    grid-column: 2; grid-row: 2;
  }
}
/* Mobile: eyebrow → mock → text */
@media (max-width: 900px) {
  .split__eyebrow { order: 1; text-align: center; justify-self: center; }
  #universitysite .split-media,
  #clesite .split-media { order: 2; }
  #universitysite .split > .reveal:not(.split-media),
  #clesite .split > .reveal:not(.split-media) { order: 3; }
}
.split-media {
  border-radius: var(--r-xl);
  overflow: hidden;
   background: var(--pf-navy); 
  aspect-ratio: 4/3;
  position: relative;
   box-shadow: var(--sh-lg);
   border: 1px solid rgba(255,255,255,.08); 
}
.split-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 300px at 20% 20%, rgba(26,166,230,.35), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(14,74,201,.45), transparent 60%);
}
.split-media.media-image::before { display: none; }
.split-media.media-image {
  background: white;
  border: 1px solid rgba(255,255,255,.12);
}
.split-media.media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-media.no-bg {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.split-media.no-bg::before { display: none; }
.split-media .mock {
  position: absolute;
  inset: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  padding: 20px;
  color: white;
}
.split-media .mock .row {
  height: 10px;
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  margin-bottom: 10px;
}
.split-media .mock .row.w-70 { width: 70%; }
.split-media .mock .row.w-50 { width: 50%; }
.split-media .mock .row.w-90 { width: 90%; }
.split-media .mock .cta {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: white;
  font-size: .75rem;
  font-weight: 600;
  margin-top: 10px;
}

/* About mission visual */
#our-mission .split {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 64px;
}

.mission-visual {
  background: transparent;
  border: none;
  box-shadow: none;
  aspect-ratio: auto;
  overflow: visible;
}
.mission-visual::before {
  display: none;
}
.mission-visual .mission-mock {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 32px;
  background: linear-gradient(165deg, #072955 0%, #04224A 48%, #031A3D 100%);
  border: 1px solid rgba(147, 197, 253, .28);
  box-shadow: 0 24px 46px rgba(2, 20, 45, .34);
  backdrop-filter: none;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #DCEBFF;
}
.mission-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, .95rem + .6vw, 1.62rem);
  line-height: 1.14;
}
.mission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mission-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(148, 197, 255, .24);
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(20, 82, 152, .44) 0%, rgba(10, 56, 115, .36) 100%);
  padding: 11px 13px;
}
.mission-item-content {
  min-width: 0;
}
.mission-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, .42);
  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .3), rgba(20, 76, 153, .42) 70%);
  display: grid;
  place-items: center;
  color: #D7ECFF;
}
.mission-item-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mission-item-content h4 {
  margin: 0 0 4px;
  color: #F6FAFF;
  font-size: clamp(.96rem, .9rem + .18vw, 1.08rem);
  line-height: 1.25;
}
.mission-item-content p {
  margin: 0;
  color: #CFE2F7;
  font-size: clamp(.88rem, .84rem + .2vw, 1rem);
  line-height: 1.45;
}
@media (max-width: 900px) {
  #our-mission .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mission-visual .mission-mock {
    border-radius: 22px;
    padding: 20px;
  }
  .mission-item {
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .mission-item-icon {
    width: 44px;
    height: 44px;
  }
  .mission-item-icon svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 620px) {
  #our-mission .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #our-mission .split > * {
    min-width: 0;
  }
  .mission-visual {
    overflow: hidden;
  }
  .mission-item {
    grid-template-columns: 52px 1fr;
    align-items: start;
    padding: 10px 11px;
    gap: 10px;
  }
  .mission-item-icon {
    width: 40px;
    height: 40px;
  }
  .mission-item-icon svg {
    width: 18px;
    height: 18px;
  }
  .mission-item-content h4 {
    font-size: .95rem;
  }
  .mission-item-content p {
    line-height: 1.35;
  }
}

/* CLE compliance dashboard mock (home page CLESite section) */
.cle-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cle-dash-head b { font-size: .92rem; }
.cle-dash-head .cle-tag {
  font-size: .64rem; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
}
.cle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cle-av {
  width: 30px; height: 30px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--grad-btn);
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: white;
}
.cle-meta { flex: 1; min-width: 0; line-height: 1.25; }
.cle-meta b { display: block; font-size: .82rem; font-weight: 600; }
.cle-meta span { font-size: .7rem; color: rgba(255,255,255,.55); }
.cle-badge {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.cle-badge.ok {
  background: rgba(16,185,129,.18); color: #6EE7B7;
  border: 1px solid rgba(16,185,129,.35);
}
.cle-badge.pending {
  background: rgba(245,166,35,.16); color: #FBBF77;
  border: 1px solid rgba(245,166,35,.35);
}

/* CLESite mock (home page CLESite section) — dense 5-row list, so scale its
   contents with the box via container-query units, otherwise the rows spill
   out the bottom of the fixed 4/3 frame on narrow screens. */
#clesite .split-media { container-type: inline-size; }
#clesite .split-media .mock {
  inset: clamp(14px, 4.3cqw, 24px);
  padding: clamp(12px, 3.5cqw, 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#clesite .cle-dash-head {
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: 0;
}
#clesite .cle-dash-head b { font-size: clamp(.74rem, 2.6cqw, .92rem); }
#clesite .cle-dash-head .cle-tag {
  font-size: clamp(.55rem, 1.85cqw, .64rem);
  padding: clamp(2px, .8cqw, 4px) clamp(6px, 1.8cqw, 10px);
}
#clesite .cle-row {
  flex: 1 1 0;
  min-height: 0;
  gap: clamp(8px, 2.6cqw, 12px);
  padding: 0;
}
#clesite .cle-av {
  width: clamp(22px, 6.6cqw, 30px);
  height: clamp(22px, 6.6cqw, 30px);
  font-size: clamp(.58rem, 1.9cqw, .7rem);
}
#clesite .cle-meta b { font-size: clamp(.68rem, 2.3cqw, .82rem); }
#clesite .cle-meta span { font-size: clamp(.58rem, 1.9cqw, .7rem); }
#clesite .cle-badge {
  font-size: clamp(.56rem, 1.9cqw, .68rem);
  padding: clamp(2px, .9cqw, 4px) clamp(6px, 1.8cqw, 9px);
}

/* LMS stats dashboard mock (home page UniversitySite section) */
/* The LMS mock is the densest of the split-media mocks, so its metrics scale
   with the box instead of being fixed — otherwise it outgrows the 4/3 frame. */
#universitysite .split-media {
  container-type: inline-size;
  aspect-ratio: auto;
}
#universitysite .split-media .mock {
  position: relative;
  inset: auto;
  margin: clamp(14px, 4.3cqw, 24px);
  padding: clamp(12px, 3.5cqw, 20px);
}
#universitysite .cle-dash-head b { font-size: clamp(.74rem, 2.6cqw, .92rem); }
#universitysite .cle-dash-head .cle-tag {
  font-size: clamp(.55rem, 1.85cqw, .64rem);
  padding: clamp(2px, .8cqw, 4px) clamp(6px, 1.8cqw, 10px);
}
.lms-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 2.1cqw, 12px);
  margin-top: clamp(8px, 2.5cqw, 14px);
}
.lms-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: clamp(10px, 2.5cqw, 14px);
}
.lms-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 3.2cqw, 1rem);
  font-weight: 700;
  line-height: 1.05;
  background: var(--pf-white);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lms-stat > span {
  display: block;
  margin-top: clamp(4px, 1.4cqw, 8px);
  font-size: clamp(.58rem, 1.95cqw, .68rem);
  color: rgba(255,255,255,.6);
  line-height: 1.35;
}
.lms-comp-title {
  display: block;
  font-size: clamp(.66rem, 2.3cqw, .8rem); font-weight: 600; color: white;
  margin-bottom: clamp(6px, 1.8cqw, 10px);
}
.lms-comp-checks {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(4px, 1.1cqw, 6px);
}
.lms-comp-checks span {
  font-size: clamp(.58rem, 1.95cqw, .68rem); font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: #6EE7B7;
  background: rgba(16,185,129,.16);
  border: 1px solid rgba(16,185,129,.32);
  padding: clamp(2px, .5cqw, 3px) clamp(6px, 1.6cqw, 9px); border-radius: 999px;
}
@container (max-width: 380px) {
  .lms-comp-checks { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media { order: 0; }
  /* Center the text column once it stacks under the visual */
  .split > .reveal:not(.split-media) { text-align: center; }
  .split > .reveal:not(.split-media) p { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   STAT STRIP
   ========================================================= */
.stat-strip-section {
  padding: 56px 0;
}
.stat-strip-label {
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 0 0 36px;
}
.stat-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.stat-strip-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 16px;
}
.stat-strip-item strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #BEE1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-strip-item span {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  max-width: 140px;
  min-height: calc(1.35em * 2);
  line-height: 1.35;
}
.stat-strip-divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .stat-strip { flex-wrap: wrap; gap: 32px; }
  .stat-strip-divider { display: none; }
  .stat-strip-item { flex: 0 0 calc(50% - 16px); }
}

/* =========================================================
   STATS (grid — kept for other pages)
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-card {
  padding: 28px 16px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: white;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFFFFF 0%, #BEE1FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card span {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
/* Offset anchor targets so they clear the 72px sticky nav when linked from the nav dropdowns, footer, etc. */
[data-page-section],
section[id],
#what-clients-say,
.feature-detail,
#ai-knowledge-check,
.feat-card[id],
.platform-subsection[id] {
  scroll-margin-top: var(--pf-sticky-offset, 90px);
}

/* Compact page-section controller: fixed location for repeat next/prev clicks. */
.section-nav-control {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 38;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 68px;
  padding: 8px 8px 10px;
  border: 1px solid rgba(10,37,64,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
}

body.bot-open .section-nav-control {
  display: none !important;
}

.section-nav-btn,
.section-nav-count {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pf-ink);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}

.section-nav-btn {
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}

.section-nav-btn:hover,
.section-nav-btn:focus-visible,
.section-nav-count:hover,
.section-nav-count:focus-visible {
  background: rgba(14,74,201,.08);
}

.section-nav-btn.is-disabled {
  opacity: .33;
  cursor: default;
  pointer-events: none;
}

.section-nav-count {
  padding: 4px 2px;
  color: var(--pf-slate);
}

.section-nav-count-text {
  display: block;
  font-size: .73rem;
  letter-spacing: .01em;
}

.section-nav-tip {
  position: absolute;
  right: calc(100% + 10px);
  width: min(280px, 34vw);
  white-space: normal;
  overflow-wrap: break-word;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--pf-line);
  background: rgba(255,255,255,.98);
  color: var(--pf-slate);
  font-size: .73rem;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(10, 37, 64, .10), 0 1px 3px rgba(10, 37, 64, .06);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .16s ease, transform .16s ease;
}

.section-nav-tip-prev { top: 10px; }
.section-nav-tip-next { bottom: 10px; }

.section-nav-prev:hover ~ .section-nav-tip-prev,
.section-nav-prev:focus-visible ~ .section-nav-tip-prev,
.section-nav-next:hover ~ .section-nav-tip-next,
.section-nav-next:focus-visible ~ .section-nav-tip-next {
  opacity: 1;
  transform: translateX(0);
}

.section-nav-menu {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: min(280px, 60vw);
  max-height: min(64vh, 440px);
  overflow: auto;
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--sh-md);
  padding: 8px;
}

.section-nav-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav-menu-link {
  display: block;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--pf-slate);
  font-size: .8rem;
  line-height: 1.35;
}

.section-nav-menu-link:hover,
.section-nav-menu-link:focus-visible {
  color: var(--pf-ink);
  background: rgba(14,74,201,.08);
}

.section-nav-menu-link.is-active {
  color: var(--pf-ink);
  background: rgba(14,74,201,.12);
  font-weight: 600;
}

@media (max-width: 900px) {
  .section-nav-control {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    grid-template-columns: 30px auto 30px;
    align-items: center;
    width: auto;
    min-width: 170px;
    padding: 7px;
    gap: 8px;
  }

  .section-nav-btn,
  .section-nav-count {
    min-height: 34px;
  }

  .section-nav-tip {
    display: none;
  }

  .section-nav-menu {
    top: auto;
    right: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(50%);
    width: min(320px, 88vw);
    max-height: min(48vh, 360px);
  }

  .section-nav-control.section-nav-hidden-end {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
  }
}

/* Keep the fixed navigator off medium desktop widths where it intrudes into
   the centered 1200px content container; show it only with enough side gutter. */
@media (min-width: 901px) and (max-width: 1420px) {
  .section-nav-control {
    display: none;
  }
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.test-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 30px;
  display: flex; flex-direction: column;
}
.test-card blockquote {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: var(--pf-ink);
  line-height: 1.55;
  flex: 1;
}
/* Attribution stacks under the quote: avatar on its own line, name/title/firm
   centered beneath it. Column direction means the avatar no longer sits beside
   a ragged text block, so nothing needs the old -20px lift to look balanced. */
.test-card .who {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--pf-line);
  text-align: center;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;   /* keep the circle round next to long names */
  background: var(--grad-btn);
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
}
.test-card .avatar { margin-top: 0; }
.who-name { display: block; color: var(--pf-ink); font-size: .95rem; }
.who-title, .who-firm { display: block; line-height: 1.6; color: var(--pf-mute); font-size: .85rem; }

.who b { display: block; color: var(--pf-ink); font-size: .95rem; }
.who small { color: var(--pf-mute); }
@media (max-width: 900px) {
  .test-grid { grid-template-columns: 1fr; }
}

/* Testimonials wall — a uniform card grid in both states. "Show more" only
   reveals the remaining cards; it never changes the layout, and the quote clamp
   stays on throughout so every card keeps the same height. Reading a long quote
   is a per-card action (see .quote-more) rather than a whole-wall mode. */
.testimonials-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Critical: cards size to their own content instead of stretching to the
     tallest in the row. Without this, expanding one tile inflates every tile
     beside it and the expansion reads as a whole-row action. */
  align-items: start;
}
.testimonials-wall .test-card {
  margin: 0;
}
/* Uniform tile height comes from the quote area being a fixed 8 lines tall
   (8 × the 1.55 line-height) rather than from row stretching — so short and
   long quotes produce the same card, and an expanded card is the only one
   that grows. */
.testimonials-wall .test-card blockquote {
  flex: none;
  font-size: 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  min-height: calc(8 * 1.55em);
}
/* Show only the first 6 testimonials; the rest reveal when .show-all is set. */
.testimonials-wall .test-card:nth-child(n+7) { display: none; }
.testimonials-wall.show-all .test-card:nth-child(n+7) { display: flex; }

/* Per-quote expansion. The 8-line clamp cuts longer quotes mid-sentence, so a
   truncated card gets its own toggle and can be read in place. clients.html
   renders a button on every tile but only shows it where the text genuinely
   overflows — see .is-placeholder. Opening a card grows that card alone. */
.quote-more {
  align-self: flex-start;
  margin: -10px 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--pf-blue);
  cursor: pointer;
}
.quote-more:hover { color: var(--pf-navy); text-decoration: underline; }
/* Tiles whose quote already fits still render the button, hidden — it holds the
   same vertical space so every card stays the same height. visibility:hidden
   also keeps it out of the tab order and the accessibility tree. */
.quote-more.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
/* Outranks the clamp above (0,3,1 vs 0,2,1). */
.testimonials-wall .test-card.quote-open blockquote {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  min-height: 0;
}

@media (max-width: 1100px) {
  .platform-overview-control[data-platform-tour-toggle] {
    display: none;
  }

  .testimonials-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px)  {
  .testimonials-wall { grid-template-columns: 1fr; }
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  margin: 0;
  padding: clamp(64px, 8.9vw, 100px) 0;
  background:
    radial-gradient(800px 400px at 10% 20%, rgba(26,166,230,.35), transparent 60%),
    radial-gradient(600px 400px at 90% 80%, rgba(14,74,201,.45), transparent 60%),
    linear-gradient(135deg, #0A2540, #0E2E54 80%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: white; max-width: 820px; margin: 0 auto 20px; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 620px; margin: 0 auto 30px; }
.cta-band .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background: #01142b;
  color: rgba(255,255,255,.75);
  padding: 70px 0 30px;
}
footer .foot-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 44px 30px;
}
footer .foot-contact {
  font-style: normal;
  color: rgba(255,255,255,.55);
  font-size: .86rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
footer .foot-contact a { color: rgba(255,255,255,.7); }
footer .foot-contact a:hover { color: white; }
footer h5 {
  font-family: var(--font-display);
  font-size: .95rem;
  color: white;
  margin: 0 0 14px;
  letter-spacing: .02em;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 8px; }
footer a {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
}
footer a:hover { color: white; }
footer .sub {
  color: rgba(255,255,255,.55);
  font-size: .88rem;
  margin-bottom: 18px;
}
footer .socials {
  display: flex; gap: 10px;
}
footer .socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  color: white;
  font-size: .9rem;
}
footer .socials a:hover { background: var(--grad-btn); border-color: transparent; }
footer .foot-bot {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
footer .foot-admin { color: rgba(255,255,255,.5); font-weight: 600; }
footer .foot-admin:hover { color: #fff; }

@media (max-width: 1100px) {
  footer .foot-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Small widths and mobile: stack the footer into one centered column. */
@media (max-width: 820px) {
  footer .foot-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }
  footer .foot-grid .brand { justify-content: center; }
  footer .socials { justify-content: center; }
  footer .foot-contact,
  footer .sub {
    color: rgba(255,255,255,.7);
    font-size: .95rem;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  footer h5 { font-size: 1.02rem; margin-bottom: 12px; }
  footer ul li { margin-bottom: 12px; }
  footer a { font-size: .98rem; }
  footer .foot-bot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: .88rem;
    color: rgba(255,255,255,.62);
  }
}

/* =========================================================
   SMALL SCREEN — ≤480px
   ========================================================= */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  /* Section / hero / CTA padding is fluid — see the SECTIONS block. */

  /* Footer: tighter padding (stacking/centering handled at ≤820px) */
  footer { padding: 50px 0 24px; }

  /* Stat strip: full-width items */
  .stat-strip { flex-wrap: wrap; gap: 24px; }
  .stat-strip-divider { display: none; }
  .stat-strip-item { flex: 0 0 100%; text-align: center; }

  /* Stats grid: single column */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* CTA band */
  .cta-band .btns { flex-direction: column; align-items: center; }

  /* About hero stats: single column */
  .about-hero-stats { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT HERO
   ========================================================= */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  /* padding: 20px 0 10px; */
}
.about-hero-copy .lead {
  color: rgba(255,255,255,.82);
  font-size: 1.12rem;
  max-width: 540px;
}
.about-hero-copy h1 { color: white; }
.about-hero-side {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.about-hero-side .ai-powered-badge {
  margin-bottom: 0;
  width: fit-content;
  max-width: 100%;
}
.about-hero-stats {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ahs-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ahs-card strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #BEE1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ahs-card span {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-side {
    justify-self: start;
    max-width: 640px;
  }
}

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-hero {
  color: white;
  background: var(--grad-hero);
  padding: clamp(64px, 8.9vw, 100px) 0 clamp(52px, 7.1vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 80% 0%, rgba(26,166,230,.25), transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; max-width: 820px; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 680px; font-size: 1.12rem; }

.platform-page-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: clamp(52px, 8vw, 110px);
  align-items: start;
}

.platform-page-hero-main {
  min-width: 0;
}

.platform-page-hero-head {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.platform-page-hero-head h1 {
  max-width: none;
}

.platform-page-hero-main .btn {
  margin-top: 10px;
}

.platform-page-hero-side {
  width: 100%;
  max-width: 440px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.platform-page-hero-side .ai-powered-badge {
  margin-bottom: 0;
  width: fit-content;
  max-width: 100%;
}

.platform-proof-panel {
  width: 100%;
  max-width: none;
  justify-self: auto;
  margin-top: 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(190, 225, 255, 0.34);
  background: linear-gradient(175deg, rgba(16, 44, 79, 0.6) 0%, rgba(9, 30, 58, 0.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 42px -32px rgba(2, 8, 20, 0.72);
  padding: clamp(24px, 2.6vw, 30px);
}

.platform-proof-primary {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(190, 225, 255, 0.28);
}

.platform-proof-number {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.8vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #9fdbff;
}

.platform-proof-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  color: #f4f9ff;
}

.platform-proof-copy {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(237, 247, 255, 0.76);
}

.platform-proof-row {
  padding-top: 16px;
  border-top: 1px solid rgba(190, 225, 255, 0.22);
}

.platform-proof-row + .platform-proof-row {
  margin-top: 14px;
}

.platform-proof-row-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #f1f8ff;
}

.platform-proof-row p {
  margin: 6px 0 0;
  font-size: 0.93rem;
  line-height: 1.45;
  color: rgba(231, 243, 255, 0.72);
}

@media (max-width: 1020px) {
  .platform-page-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .platform-page-hero-head {
    margin-bottom: 22px;
  }

  .platform-page-hero-side {
    justify-self: start;
    max-width: 640px;
  }

  .platform-proof-panel {
    margin-top: 0;
    padding: 24px;
  }

  .platform-proof-number {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }
}

@media (max-width: 640px) {
  .platform-proof-panel {
    padding: 20px;
  }

  .platform-proof-title {
    font-size: 1.08rem;
  }

  .platform-proof-copy,
  .platform-proof-row p {
    font-size: 0.9rem;
  }
}

/* =========================================================
   TABS / FEATURE BREAKDOWN
   ========================================================= */
.feature-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 50px 0;
  border-bottom: 1px solid var(--pf-line);
}
.feature-detail:last-child { border-bottom: 0; }
.feature-detail.reverse .fd-media { order: 2; }
.fd-media {
  border-radius: var(--r-xl);
  background: var(--pf-navy);
  aspect-ratio: 5/4;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.fd-media.fd-media-image {
  background: white;
  border: 1px solid var(--pf-line);
}
.fd-media.fd-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-media .chrome {
  position: absolute;
  inset: 0;
  padding: 26px;
  color: white;
}
.fd-media .tabs {
  display: flex; gap: 8px;
  margin-bottom: 18px;
}
.fd-media .tabs span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.fd-media .screen {
  position: absolute;
  inset: 70px 26px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: 18px;
  overflow: hidden;
}
.fd-media .bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); margin-bottom: 10px; }
.fd-media .bar.s1 { width: 70%; }
.fd-media .bar.s2 { width: 50%; }
.fd-media .chip-row { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.fd-media .chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(26,166,230,.2);
  border: 1px solid rgba(26,166,230,.35);
  color: #BEE1FF;
  font-size: .75rem;
  font-weight: 600;
}
.fd-media .screen { color: #fff; }
/* Rich feature-detail mocks (Scormfly / AI Connector / CLE) */
.fdm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fdm-head b { font-size: .95rem; color: #fff; }
.fdm-live { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 600; color: #6EE7B7; }
.fdm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); }

/* Scormfly delivery rows */
.sf-region { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sf-region:first-of-type { border-top: none; }
.sf-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sf-name { width: 74px; font-size: .82rem; font-weight: 600; color: #fff; flex-shrink: 0; }
.sf-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.sf-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0E4AC9, #1AA6E6); }
.sf-val { font-size: .72rem; color: rgba(255,255,255,.6); width: 58px; text-align: right; flex-shrink: 0; }
.sf-foot { display: flex; gap: 10px; margin-top: 16px; }
.sf-stat { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 11px 12px; }
.sf-stat strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; line-height: 1.1; }
.sf-stat span { font-size: .62rem; color: rgba(255,255,255,.55); }

/* AI Connector model routing */
.ai-model { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; margin-bottom: 7px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ai-model.active { background: rgba(14,74,201,.16); border-color: rgba(14,74,201,.45); }
.ai-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); flex-shrink: 0; }
.ai-model.active .ai-radio { border-color: #1AA6E6; background: radial-gradient(circle, #1AA6E6 42%, transparent 48%); }
.ai-name { flex: 1; font-size: .82rem; font-weight: 600; color: #fff; }
.ai-tag { font-size: .62rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .04em; }
.ai-status { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ai-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(16,185,129,.16); color: #6EE7B7; border: 1px solid rgba(16,185,129,.3); }

@media (max-width: 900px) {
  .feature-detail { grid-template-columns: 1fr; gap: 30px; }
  .feature-detail.reverse .fd-media { order: 0; }
}

/* =========================================================
   INTEGRATIONS SHOWCASE
   ========================================================= */
.int-showcase {
  background:
    radial-gradient(800px 500px at 20% 50%, rgba(26,166,230,.12), transparent 60%),
    radial-gradient(600px 400px at 80% 50%, rgba(14,74,201,.18), transparent 60%),
    var(--pf-navy);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.platform-options-section .section-head {
  text-align: center;
  margin-bottom: 40px;
}

.platform-options-intro {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255,255,255,.76);
}

.platform-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.platform-option-card {
  --option-accent: rgba(26,166,230,.45);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 28px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%),
    linear-gradient(180deg, rgba(12,37,68,.94) 0%, rgba(10,37,64,.94) 100%);
  box-shadow: 0 16px 40px rgba(2,8,23,.18);
  color: rgba(255,255,255,.9);
}

.platform-option-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--option-accent), transparent 40%);
  opacity: .18;
}

.platform-option-card--applications { --option-accent: rgba(26,166,230,.65); }
.platform-option-card--extensions { --option-accent: rgba(14,74,201,.7); }
.platform-option-card--integrations { --option-accent: rgba(80,136,236,.65); }

.platform-option-card > * { position: relative; z-index: 1; }

.platform-option-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platform-option-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #D9ECFF;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.platform-option-icon svg {
  width: 24px;
  height: 24px;
}

.platform-option-label {
  display: inline-block;
  color: rgba(190,225,255,.94);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.platform-option-card h3 {
  color: white;
  margin: 0;
  font-size: 1.4rem;
}

.platform-option-card p {
  color: rgba(255,255,255,.72);
  margin: 0;
}

.platform-option-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.platform-option-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  line-height: 1.35;
}

.platform-option-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: .45em;
  border-radius: 999px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4D90FF 0%, #2BC4F0 100%);
  box-shadow: 0 0 0 3px rgba(26,166,230,.12);
}

.platform-option-list--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-option-groups {
  display: grid;
  gap: 16px;
}

.platform-option-group h4 {
  color: #D9ECFF;
  margin: 0 0 10px;
  font-size: 1rem;
}

.platform-option-link {
  margin-top: auto;
  align-self: flex-start;
  color: #BEE1FF;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(190,225,255,.35);
  padding-bottom: 2px;
}

.platform-option-link:hover {
  color: white;
  border-bottom-color: rgba(255,255,255,.8);
}

.platform-option-link:focus-visible,
.platform-options-cta .btn:focus-visible {
  outline: 3px solid rgba(80,136,236,.65);
  outline-offset: 4px;
}

.platform-options-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

@media (max-width: 1100px) {
  .platform-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-option-card--integrations { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .platform-options-section { padding: 76px 0; }
  .platform-options-grid { grid-template-columns: 1fr; }
  .platform-option-card--integrations { grid-column: auto; }
  .platform-option-card { padding: 24px; }
  .platform-option-list--two-col { grid-template-columns: 1fr; }
  .platform-options-cta { margin-top: 28px; }
  /* Center card content to match the single-column stack */
  .platform-foundation-band { text-align: center; }
  .platform-foundation-band__content p { max-width: none; margin-left: auto; margin-right: auto; }
  .platform-option-card { text-align: center; }
  .platform-option-card__header { justify-content: center; }
}

/* =========================================================
   BOOK PAGE — Stay CLEver
   ========================================================= */
.book-hero-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: center;
}
.book-cover-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.book-cover-wrap img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
}
.book-byline {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  margin: 18px 0 0;
}
.book-takeaways {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 14px;
}
.book-takeaways li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--pf-slate);
}
.book-takeaways .tk-ico {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(14,74,201,.1);
  color: var(--pf-blue);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  margin-top: 1px;
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}
.chapter-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.chapter-card:hover { border-color: rgba(14,74,201,.3); box-shadow: var(--sh-sm); }
.chapter-card.open { border-color: rgba(14,74,201,.35); box-shadow: var(--sh-md); }
.chapter-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 22px;
  font: inherit;
  color: inherit;
}
.chapter-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--grad-btn);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: var(--sh-glow);
}
.chapter-headline { flex: 1; min-width: 0; }
.chapter-headline .ch-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pf-blue);
}
.chapter-headline h3 { margin: 3px 0 0; font-size: 1.02rem; line-height: 1.3; }
.chapter-caret {
  margin-left: 8px;
  flex-shrink: 0;
  color: var(--pf-mute);
  font-size: .9rem;
  transition: transform .25s ease;
}
.chapter-card.open .chapter-caret { transform: rotate(180deg); }
.chapter-body { display: none; padding: 0 22px 22px 84px; }
.chapter-card.open .chapter-body { display: block; }
.chapter-body p { margin: 0 0 10px; color: var(--pf-slate); font-size: .9rem; line-height: 1.6; }
.chapter-body p:last-child { margin-bottom: 0; }
.chapter-body .ch-sub { color: var(--pf-blue); font-weight: 600; font-size: .85rem; margin-bottom: 12px; }
.chapter-body .ch-whats { color: var(--pf-mute); font-size: .84rem; font-style: italic; margin-top: 12px; }

/* Modal (free-copy request form) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,37,64,.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay.open { display: flex; }
.modal {
  background: white;
  border-radius: var(--r-lg);
  max-width: 440px;
  width: 100%;
  padding: 32px;
  box-shadow: var(--sh-lg);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none; border: none;
  font-size: 1.6rem; line-height: 1;
  color: var(--pf-mute); cursor: pointer;
}
.modal h3 { margin: 0 0 6px; font-size: 1.3rem; }
.modal .modal-sub { color: var(--pf-mute); font-size: .9rem; margin: 0 0 20px; }
.modal .form-group { margin-bottom: 14px; }
.modal label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.modal input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-sm);
  font: inherit; font-size: .92rem;
  box-sizing: border-box;
}
.modal input:focus { outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 3px rgba(14,74,201,.15); }

@media (max-width: 900px) {
  .book-hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .book-cover-wrap { order: -1; }
  .book-takeaways li { text-align: left; }
}
@media (max-width: 700px) {
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-body { padding-left: 22px; }
}
.int-showcase .section-head {
  margin-bottom: 48px;
}
.int-logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px 56px;
  margin-bottom: 48px;
}
.int-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: default;
}
.int-logo-item img {
  height: 100px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  border-radius: 16px;
  transition: transform .25s ease;
}
.int-logo-item:hover img {
  transform: translateY(-4px) scale(1.05);
}
.int-logo-item span {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  transition: color .2s ease;
}
.int-logo-item:hover span {
  color: rgba(255,255,255,.85);
}
.int-chip-dark {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.75) !important;
}
.int-chip-dark:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(26,166,230,.4) !important;
  color: white !important;
}
.int-chip-dark .int-chip-dot {
  background: var(--pf-cyan);
}
@media (max-width: 700px) {
  .int-logo-wall { gap: 36px 32px; }
  .int-logo-item img { height: 72px; max-width: 160px; }
}

/* Trusted-by client logo strip (solutions page) */
.trust-strip {
  background: var(--pf-mist);
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  padding: 34px 0;
}
.trust-strip .trust-label {
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-mute);
  margin: 0 0 26px;
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 34px 52px;
}
.trust-logos img {
  height: 32px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.trust-logos img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 700px) {
  .trust-logos { gap: 26px 36px; }
  .trust-logos img { height: 26px; max-width: 110px; }
}

/* =========================================================
   INTEGRATIONS — FEATURED (homepage)
   ========================================================= */
.int-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.int-featured-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.int-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(14,74,201,.25);
}
.int-featured-logo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  border: 1px solid var(--pf-line);
  background: white;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.int-featured-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.int-initials {
  width: 38px;
  height: 38px;
  background: var(--grad-btn);
  color: white;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  display: grid;
  place-items: center;
}
.int-featured-body h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.int-featured-body p {
  margin: 0 0 10px;
  font-size: .85rem;
  color: var(--pf-mute);
  line-height: 1.45;
}
.int-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pf-mist);
  color: var(--pf-mute);
  border: 1px solid var(--pf-line);
}
.int-badge.featured {
  background: rgba(14,74,201,.08);
  color: var(--pf-blue);
  border-color: rgba(14,74,201,.2);
}
.int-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.int-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--pf-line);
  font-size: .85rem;
  font-weight: 500;
  color: var(--pf-ink);
  transition: border-color .2s ease, color .2s ease;
}
.int-chip:hover {
  border-color: var(--pf-blue);
  color: var(--pf-blue);
}
.int-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-blue);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .int-featured-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .int-featured-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   INTEGRATIONS GRID
   ========================================================= */
.int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.int-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-md);
  padding: 22px;
  transition: all .2s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.int-card:hover { border-color: var(--pf-blue); transform: translateY(-2px); box-shadow: var(--sh-md); }
.int-card .ico-sm {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pf-mist);
  display: grid; place-items: center;
  color: var(--pf-blue);
  font-weight: 700;
  font-family: var(--font-display);
}
.int-card h4 { margin: 4px 0 0; font-size: 1rem; }
.int-card p { font-size: .85rem; margin: 0; color: var(--pf-mute); }
.int-card-logo {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 4px;
}
.int-tag {
  display: inline-block;
  margin-top: auto;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--pf-mist);
  color: var(--pf-slate);
  border-radius: 99px;
  border: 1px solid var(--pf-line);
  width: fit-content;
}

/* Category sections */
.int-category {
  margin-bottom: 56px;
}
.int-category-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pf-line);
}
.int-category-header h3 { margin: 0 0 4px; font-size: 1.3rem; }
.int-category-header p { margin: 0; font-size: .9rem; color: var(--pf-mute); max-width: 560px; }
.int-category-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--pf-mist);
  border: 1px solid var(--pf-line);
  display: grid; place-items: center;
  font-size: 1.4rem;
}

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

/* int-all-grid — unified integration card grid */
.int-all-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.int-all-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s ease;
}
.int-all-card:hover { border-color: var(--pf-blue); transform: translateY(-2px); box-shadow: var(--sh-md); }
/* Logo media tile — uniform frame so every logo reads at the same scale,
   regardless of its native shape or background. */
.int-all-card-top {
  position: relative;
  flex: 0 0 auto;
  height: 132px;
  min-height: 0;
  padding: 24px;
  background: var(--pf-mist);
  border-bottom: 1px solid var(--pf-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.int-all-logo {
  max-height: 84px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
/* Dark tile — for logos supplied as a white/transparent wordmark that would
   be invisible on the default light tile (e.g. ScormFly). */
.int-all-card-top.is-dark {
  background: var(--pf-navy);
  border-bottom-color: var(--pf-navy);
}
.int-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.int-all-initial {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--pf-line);
  display: grid; place-items: center;
  color: var(--pf-blue);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.int-all-card h4 { margin: 0; padding: 18px 20px 0; font-size: .95rem; }
.int-all-card p { margin: 0; padding: 6px 20px 20px; font-size: .83rem; color: var(--pf-mute); flex: 1; }
@media (max-width: 1024px) { .int-all-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .int-all-grid { grid-template-columns: repeat(2, 1fr); }
  .int-all-card-top { height: 112px; padding: 20px; }
  .int-all-logo { max-height: 72px; }
}

/* =========================================================
   TEAM GRID
   ========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.team-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.team-card .portrait {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: var(--sh-glow);
}
.team-card .portrait-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  box-shadow: 0 20px 60px -15px rgba(14,74,201,.45);
}
.team-card b { display: block; font-size: 1.1rem; color: var(--pf-ink); }
.team-card .role {
  color: var(--pf-blue);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 8px;
}
.team-card.new::after {
  content: "NEW";
  background: linear-gradient(135deg, #F5A623, #F77B3C);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: .04em;
  vertical-align: middle;
}

#leadership .team-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

#leadership.leadership-collapsed .team-card:nth-child(n+4) {
  display: none;
}

@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

/* =========================================================
   COMPANY TIMELINE
   ========================================================= */
.company-timeline {
  max-width: 940px;
  margin: 0 auto;
}

.company-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* Vertical distance from the top of an item to the centre of its marker.
     Kept identical at both breakpoints so the connector maths stays simple. */
  --tl-dot-center: 31px;
  --tl-gap: 18px;
  --tl-line-left: 16px;
}

.company-timeline-item {
  position: relative;
  padding-left: 52px;
}

.company-timeline-item + .company-timeline-item {
  margin-top: var(--tl-gap);
}

/* Connector segments run marker-centre to marker-centre, so the line never
   pokes above the first dot nor trails past "Today". */
.company-timeline-item::before {
  content: "";
  position: absolute;
  left: var(--tl-line-left);
  top: var(--tl-dot-center);
  height: calc(100% + var(--tl-gap));
  width: 2px;
  background: linear-gradient(180deg, var(--tl-seg-from) 0%, var(--tl-seg-to) 100%);
}

.company-timeline-item:last-child::before {
  display: none;
}

/* Stops sampled off one continuous navy → sky ramp so the per-item segments
   read as a single gradient rather than repeating bands. */
.company-timeline-item:nth-child(1) { --tl-seg-from: rgba(14,74,201,.45); --tl-seg-to: rgba(17,97,208,.39); }
.company-timeline-item:nth-child(2) { --tl-seg-from: rgba(17,97,208,.39); --tl-seg-to: rgba(20,120,216,.34); }
.company-timeline-item:nth-child(3) { --tl-seg-from: rgba(20,120,216,.34); --tl-seg-to: rgba(23,143,223,.28); }
.company-timeline-item:nth-child(4) { --tl-seg-from: rgba(23,143,223,.28); --tl-seg-to: rgba(26,166,230,.22); }

.company-timeline-marker {
  position: absolute;
  left: 8px;
  top: 22px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0E4AC9 0%, #1AA6E6 100%);
  box-shadow: 0 0 0 4px rgba(14,74,201,.14);
}

/* "Today" terminates the line, so it gets a halo to read as ongoing rather
   than as an abrupt stop. */
.company-timeline-item:last-child .company-timeline-marker {
  background: linear-gradient(135deg, #1AA6E6 0%, #0E4AC9 100%);
  box-shadow:
    0 0 0 4px rgba(26,166,230,.18),
    0 0 0 9px rgba(26,166,230,.09);
}

.company-timeline-item:last-child .company-timeline-marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(26,166,230,.4);
  animation: tlPulse 2.8s ease-out infinite;
}

@keyframes tlPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.company-timeline-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(14,74,201,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,248,252,.98) 100%),
    radial-gradient(220px 100px at 0% 0%, rgba(26,166,230,.1), transparent 70%);
  box-shadow: 0 14px 34px rgba(2,8,23,.08);
  padding: 18px 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.company-timeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14,74,201,.3);
  box-shadow: 0 20px 40px rgba(2,8,23,.12);
}

.company-timeline-card h3 {
  margin: 0 0 6px;
  color: var(--pf-navy);
  font-size: 1.06rem;
  letter-spacing: -.01em;
}

.company-timeline-card p {
  margin: 0;
  color: var(--pf-slate);
  line-height: 1.62;
}

/* ── "Now" card ──────────────────────────────────────────── */
.company-timeline-item-now .company-timeline-card {
  border-color: rgba(26,166,230,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(240,247,253,.98) 100%),
    radial-gradient(320px 140px at 0% 0%, rgba(26,166,230,.16), transparent 70%);
  box-shadow: 0 16px 40px rgba(2,8,23,.1), 0 0 0 1px rgba(26,166,230,.08);
}

.company-timeline-item-now .company-timeline-card:hover {
  border-color: rgba(26,166,230,.5);
}

/* Reuses the hero badge's sheen/spin keyframes, retuned for a light card. */
.company-timeline-now-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pf-blue);
  background: linear-gradient(135deg, rgba(26,166,230,.14) 0%, rgba(14,74,201,.12) 100%);
  border: 1px solid rgba(26,166,230,.34);
  position: relative;
  overflow: hidden;
}

.company-timeline-now-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: aiSheen 3s ease-in-out infinite;
}

.company-timeline-now-icon {
  font-size: .8rem;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spin 6s linear infinite;
}

.company-timeline-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
}

.company-timeline-tags li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--pf-navy);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(14,74,201,.2);
  box-shadow: 0 2px 8px rgba(2,8,23,.05);
}

@media (max-width: 700px) {
  .company-timeline-list { --tl-line-left: 10px; }
  .company-timeline-item { padding-left: 38px; }
  .company-timeline-marker {
    left: 4px;
    width: 14px;
    height: 14px;
    top: 24px; /* keeps the marker centre at --tl-dot-center */
  }
  .company-timeline-card { padding: 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .company-timeline-item:last-child .company-timeline-marker::after {
    animation: none;
    opacity: .45;
  }

  .company-timeline-now-chip::before { animation: none; opacity: 0; }
  .company-timeline-now-icon { animation: none; }
}

/* =========================================================
   PRICING
   ========================================================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-xl);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  position: relative;
}
.price-card.featured {
  background: linear-gradient(180deg, #0A2540 0%, #0E2E54 100%);
  color: white;
  border-color: transparent;
  box-shadow: var(--sh-lg);
  transform: translateY(-10px);
}
.price-card.featured h3 { color: white; }
.price-card.featured .price { color: white; }
.price-card.featured .bullet { color: rgba(255,255,255,.85); }
.price-card.featured .bullet::before { color: #1AA6E6; }
.price-card .badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F5A623, #F77B3C);
  color: white;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.price-card h3 { margin-bottom: 6px; font-size: 1.15rem; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--pf-ink);
  letter-spacing: -0.02em;
}
.price-card .price small {
  font-size: .9rem;
  color: var(--pf-mute);
  font-weight: 500;
  margin-left: 4px;
}
.price-card ul { list-style: none; padding: 0; margin: 22px 0 28px; flex: 1; }
.price-card .bullet {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
  color: var(--pf-slate);
  font-size: .95rem;
}
.price-card .bullet::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--pf-blue);
  font-weight: 700;
}

/* Pricing: implementation factors section */
#implementation-scope .section-head {
  margin-bottom: 26px;
}

.impl-factors-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.impl-factor-card {
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.impl-factor-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(14,74,201,.2);
  background: rgba(14,74,201,.06);
  color: var(--pf-blue);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.impl-factor-icon svg {
  width: 18px;
  height: 18px;
}

.impl-factor-card h3 {
  margin-bottom: 8px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.impl-factor-card p {
  margin: 0;
  color: var(--pf-slate);
  font-size: .93rem;
  line-height: 1.52;
}

.impl-factor-card-wide {
  grid-column: span 2;
}

.impl-migration-callout {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(14,74,201,.25);
  background: linear-gradient(180deg, rgba(14,74,201,.05), rgba(26,166,230,.06));
}

.impl-migration-callout h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.impl-migration-callout p {
  margin: 0;
  font-size: .95rem;
  color: var(--pf-slate);
}

.impl-closing-copy {
  margin: 16px auto 0;
  max-width: 920px;
  text-align: center;
  color: var(--pf-slate);
}

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }

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

  .impl-factor-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .impl-factors-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .impl-factor-card {
    padding: 16px;
  }

  .impl-factor-card h3 {
    font-size: .98rem;
  }

  .impl-factor-card p,
  .impl-migration-callout p,
  .impl-closing-copy {
    font-size: .92rem;
  }

  .impl-closing-copy {
    text-align: left;
    max-width: none;
    line-height: 1.5;
  }

  .impl-migration-callout {
    margin-top: 16px;
    padding: 16px;
  }
}

/* =========================================================
   RESOURCES CARDS
   ========================================================= */
.res-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.res-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--pf-line);
  background: white;
  color: var(--pf-slate);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.res-chip:hover { border-color: rgba(14,74,201,.4); color: var(--pf-blue); }
.res-chip.active {
  background: var(--grad-btn);
  color: white;
  border-color: transparent;
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.res-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.res-card .thumb {
  aspect-ratio: 16/9;
  background: var(--grad-hero);
  position: relative;
}
.res-card .thumb .tag {
  position: absolute;
  top: 14px; left: 14px;
  background: white;
  color: var(--pf-blue);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.res-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Client-logo tile: center the logo at a consistent, sensible size on white,
   never upscaling small logos to fill (which looks soft/stretched). */
.res-card .thumb.logo-thumb {
  background: #fff;
  display: grid;
  place-items: center;
  padding: 24px 30px;
  border-bottom: 1px solid var(--pf-line);
}
.res-card .thumb.logo-thumb img {
  width: auto;
  height: auto;
  max-height: 48px;   /* cap tall logos; small ones stay at natural size = sharp */
  max-width: 70%;     /* cap ultra-wide logos so they don't run edge to edge */
  object-fit: contain;
}
/* The tag is white-on-blue over the gradient hero; on a white logo tile it
   needs its own outline to stay visible. */
.res-card .thumb.logo-thumb .tag {
  background: var(--pf-mist);
  border: 1px solid var(--pf-line);
}
.res-card .body { padding: 20px 24px 24px; }
.res-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.res-card .meta { font-size: .82rem; color: var(--pf-mute); }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }

/* Skeleton placeholders — shown while resources load, so a slow network
   shows shimmering tiles instead of an empty page. Mirrors .res-card layout. */
.res-card.skeleton { pointer-events: none; }
.res-card.skeleton:hover { transform: none; box-shadow: none; }
.res-card.skeleton .sk-thumb { aspect-ratio: 16/9; }
.res-card.skeleton .body { padding: 20px 24px 24px; }
.sk-thumb,
.sk-line {
  background: linear-gradient(100deg, var(--pf-mist) 30%, #E4EBF3 50%, var(--pf-mist) 70%);
  background-size: 200% 100%;
  animation: pf-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.sk-title { height: 18px; margin-bottom: 8px; }
.sk-line.short { width: 55%; }
.sk-line.sk-meta { height: 11px; width: 40%; margin-top: 18px; margin-bottom: 0; }
@keyframes pf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-thumb, .sk-line { animation: none; }
}

/* Filter groups (type + subject) */
.res-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.res-filter-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-mute);
  margin-right: 4px;
  min-width: 62px;
}
.res-filters { display: block; }
.res-count {
  color: var(--pf-mute);
  font-size: .88rem;
  margin: 6px 0 26px;
}
.res-count-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.res-show-all {
  margin: 0 0 24px;
  border: 0;
  background: transparent;
  color: var(--pf-blue);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.res-show-all:hover {
  color: var(--pf-blue-dark);
}

/* Pipedrive embedded web form.
   Reserve height so the card doesn't collapse then jump when the iframe loads. */
.pd-form-card .pipedriveWebForms { min-height: 780px; }
.pd-form-card iframe { width: 100% !important; border: 0; }

/* =========================================================
   FORM (contact)
   ========================================================= */
.form-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--sh-md);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label {
  font-size: .85rem; font-weight: 600; color: var(--pf-ink);
}
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--pf-line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--pf-ink);
  background: white;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: var(--pf-blue);
  box-shadow: 0 0 0 4px rgba(14,74,201,.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }

.contact-client-note {
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--pf-mist);
  border: 1px solid var(--pf-line);
  border-radius: var(--r-md);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 90px;
}
.contact-info .info-card {
  display: flex; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--pf-line);
}
.contact-info .info-card:last-child { border-bottom: 0; }
.contact-info .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--pf-mist);
  color: var(--pf-blue);
  display: grid; place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.contact-info b { display: block; color: var(--pf-ink); }
.contact-info small { color: var(--pf-mute); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* =========================================================
   CHAT WIDGET
   Behaviour: js/chat.js → supabase/functions/chat
   ========================================================= */
.bot-launcher {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: white;
  display: grid; place-items: center;
  box-shadow: var(--sh-glow);
  cursor: pointer;
  z-index: 60;
  border: 0;
  font-size: 1.4rem;
  transition: transform .2s ease;
}
.bot-launcher:hover { transform: scale(1.06); }
.bot-launcher-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--pf-white);
}
.bot-launcher-icon .ai-badge-icon {
  --ai-icon-size: 1.5rem;
  color: #F4FBFF;
  filter: drop-shadow(0 0 10px rgba(116,225,255,.98));
}
.bot-launcher-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--pf-white);
  background: var(--pf-navy);
  color: var(--pf-white);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 8px 16px -10px rgba(0,0,0,.65);
}
.bot-panel {
  position: fixed;
  bottom: 100px; right: 24px;
  width: 380px; max-width: calc(100vw - 40px);
  height: 540px; max-height: calc(100vh - 140px);
  background: white;
  border-radius: 20px;
  box-shadow: var(--sh-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
  border: 1px solid var(--pf-line);
}
.bot-panel.open { display: flex; }
.bot-header {
  padding: 18px;
  background: var(--grad-hero);
  color: white;
  position: relative;
}
.bot-header b { display: block; font-family: var(--font-display); }
.bot-header small { color: rgba(255,255,255,.8); font-size: .8rem; }
.bot-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.75);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.bot-close:hover { color: white; }
.bot-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--pf-mist);
}
.bot-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;   /* the model replies in short paragraphs */
  overflow-wrap: anywhere; /* long URLs must not widen the panel */
}
.bot-msg.bot { background: white; border: 1px solid var(--pf-line); }
.bot-msg.user { background: var(--grad-btn); color: white; align-self: flex-end; }
.bot-msg.error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.bot-msg a { color: var(--pf-blue); text-decoration: underline; }
.bot-msg.user a { color: white; }

/* Typing indicator — three dots that breathe while awaiting the model.
   Replies are not streamed, so without this the panel looks frozen. */
.bot-typing {
  display: flex; gap: 4px; align-items: center;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  align-self: flex-start;
}
.bot-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-mute);
  animation: botBlink 1.4s infinite both;
}
.bot-typing span:nth-child(2) { animation-delay: .2s; }
.bot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes botBlink {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-typing span { animation: none; opacity: .6; }
  .bot-launcher { transition: none; }
}

.bot-foot {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--pf-line);
  background: white;
}
.bot-foot input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: .9rem;
  font-family: inherit;
}
.bot-foot input:focus { outline: 0; border-color: var(--pf-blue); }
.bot-foot button {
  border: 0;
  background: var(--grad-btn);
  color: white;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.bot-foot button:disabled,
.bot-foot input:disabled { opacity: .55; cursor: default; }

/* Phones: a bottom sheet, not a floating card.
   ---------------------------------------------------------
   The old rule kept a card inset on all four sides at 100vh minus a fixed
   160px. Three things go wrong with that on a real phone: 100vh counts the
   area behind the browser's URL bar, so the sheet is taller than the screen
   and its top is clipped; the launcher floats on top of the panel it just
   opened; and the page keeps scrolling behind it. A sheet anchored to the
   bottom edge fixes all three and is what a phone user expects. */
@media (max-width: 600px) {
  .bot-panel {
    left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    /* dvh follows the URL bar AND the on-screen keyboard. vh follows
       neither, which is why a vh-sized sheet hides its own input the moment
       the keyboard appears. The vh line is the fallback for older browsers. */
    height: 86vh;
    height: 86dvh;
    max-height: none;
    /* Only the top corners round — the bottom edge is the screen edge. */
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }
  /* The launcher is a 60px circle sitting exactly where the sheet now is. */
  body.bot-open .bot-launcher { display: none; }
  /* Stop the page scrolling behind the sheet, and stop a flick inside the
     transcript from chaining out to it once the log hits its end. */
  body.bot-open { overflow: hidden; }
  .bot-body { overscroll-behavior: contain; }

  /* The short grabber that says "this is a sheet you can dismiss". */
  .bot-header::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 36px; height: 4px;
    margin-left: -18px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
  }
  .bot-header { padding: 20px 18px 16px; }
  /* 44px is the smallest reliable touch target; the desktop button is ~32. */
  .bot-close {
    top: 8px; right: 6px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    padding: 0;
  }

  .bot-msg { max-width: 90%; }

  /* iOS zooms the entire page when a focused input is under 16px, which
     leaves the site scaled up after the keyboard closes. This is the one
     place the font size is not a free choice. */
  .bot-foot input { font-size: 16px; }
  /* Clear the home indicator on gesture-nav phones. */
  .bot-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .bot-foot button { padding: 0 18px; min-height: 44px; }
}

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

/* =========================================================
   CASE STUDY (article pages)
   ========================================================= */
/* Client logo chip in the case-study hero — white tile so dark/colored logos
   read against the gradient. max-height keeps small logos sharp (no upscaling). */
.cs-hero-logo {
  display: flex;         /* block-level: sits on its own line under the eyebrow */
  width: fit-content;    /* but only as wide as the logo */
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 14px 22px;
  margin: 4px 0 22px;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.45);
}
.cs-hero-logo img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.cs-hero-meta .btn-secondary {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: white;
}
.cs-hero-meta .btn-secondary:hover { background: rgba(255,255,255,.18); }

.cs-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}

.cs-prose > *:first-child { margin-top: 0; }
.cs-prose h2 { font-size: 1.7rem; margin: 44px 0 16px; }
.cs-prose h2:first-child { margin-top: 0; }
.cs-prose .eyebrow {
  font-size: .8rem;
  line-height: 1.2;
  margin-top: 34px;
  margin-bottom: 10px;
}
.cs-prose > .eyebrow:first-child {
  margin-top: 1rem;
}
.cs-prose .eyebrow + h2,
.cs-prose .eyebrow + h3 {
  margin-top: 1rem;
}
.cs-prose p { font-size: 1.05rem; line-height: 1.75; }
.cs-prose ul {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}
.cs-prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--pf-slate);
  line-height: 1.6;
}
.cs-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-btn);
}

/* Pull quote inside the article body */
.cs-quote {
  margin: 32px 0;
  padding: 28px 32px;
  border-left: 3px solid var(--pf-blue);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--pf-mist);
}
.cs-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--pf-ink);
  letter-spacing: -0.01em;
}
.cs-quote .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* "At a glance" sidebar */
.cs-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 20px;
}
.cs-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-lg);
}
.cs-card h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pf-mute);
  margin: 0 0 18px;
}
.cs-fact + .cs-fact {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pf-line);
}
.cs-fact b {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-blue);
  margin-bottom: 6px;
}
.cs-fact span {
  display: block;
  color: var(--pf-slate);
  font-size: .95rem;
  line-height: 1.6;
}
.cs-card ul { margin: 0; padding-left: 0; list-style: none; }
.cs-card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--pf-slate);
  font-size: .95rem;
  line-height: 1.55;
}
.cs-card ul li:last-child { margin-bottom: 0; }
.cs-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-cyan);
}

/* PDF download card */
.cs-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  background: var(--pf-mist);
  transition: border-color .2s ease, transform .2s ease;
}
.cs-doc:hover { border-color: var(--pf-blue); transform: translateY(-2px); }
.cs-doc-icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--grad-btn);
  color: white;
  display: grid; place-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.cs-doc b { display: block; color: var(--pf-ink); font-size: .95rem; }
.cs-doc small { color: var(--pf-mute); }

/* Back link */
.cs-back {
  display: block;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.cs-back:hover { color: white; }

@media (max-width: 1000px) {
  .cs-layout { grid-template-columns: 1fr; gap: 44px; }
  .cs-side { position: static; }
}

/* Utility */
.center-text { text-align: center; }
.max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }

/* =========================================================
   PRINT / PDF
   Turns a case-study page into a branded document.
   Used by "Print → Save as PDF" and by the generated downloads
   in assets/case-studies/.
   ========================================================= */
@media print {
  @page {
    size: Letter;
    margin: 0.55in 0.6in;
  }

  html, body {
    background: white !important;
    font-size: 11pt;
  }

  /* Keep brand gradients instead of printing them as white boxes. */
  .page-hero,
  .avatar,
  .cs-doc-icon,
  .eyebrow,
  .gradient-text,
  .cs-prose ul li::before,
  .cs-card ul li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Screen furniture that has no business in a document. */
  .nav,
  footer,
  .cta-band,
  .cs-back,
  .cs-hero-meta,
  .cs-doc,
  /* Pipedrive LeadBooster injects a srcless iframe with this id — confirmed
     against the live widget, so don't switch this to an [src*=] match. */
  #LeadboosterContainer,
  #site-header,
  #site-footer {
    display: none !important;
  }

  /* Scroll-reveal leaves content at opacity 0 until JS marks it visible.
     Print must never depend on that having run. */
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .container { max-width: none; padding: 0; }

  /* Collapse section spacing — but not the hero, which needs its own
     inset or the title sits flush against the paper edge. */
  section:not(.page-hero) { padding: 0 !important; }

  .page-hero {
    border-radius: 10px;
    padding: 30px 34px 28px !important;
    margin-bottom: 26px;
  }
  .page-hero h1 { font-size: 21pt; margin-bottom: 8px; }
  .page-hero p  { font-size: 10.5pt; margin: 0; }

  /* One column — the sticky sidebar becomes a block at the end. */
  .cs-layout { display: block; }
  .cs-side {
    position: static;
    display: block;
    margin-top: 26px;
  }
  .cs-card {
    box-shadow: none;
    break-inside: avoid;
    margin-bottom: 16px;
  }

  .cs-prose h2 {
    font-size: 14pt;
    margin: 22px 0 10px;
    break-after: avoid;
  }
  .cs-prose p, .cs-prose li { font-size: 10.5pt; line-height: 1.55; }
  .cs-prose p { orphans: 3; widows: 3; }

  .cs-quote {
    break-inside: avoid;
    padding: 18px 22px;
    margin: 20px 0;
  }
  .cs-quote blockquote { font-size: 12.5pt; }

  /* Links shouldn't look like links on paper. */
  a { color: inherit !important; text-decoration: none !important; }
}

/* =========================================================
   HERO TRUST STRIP (enterprise credibility, above the fold)
   ========================================================= */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-trust span {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.82);
}
.hero-trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-cyan);
  box-shadow: 0 0 10px rgba(26,166,230,.8);
  flex-shrink: 0;
  margin-top: 0.5em;
}

/* =========================================================
   SECURITY & TRUST SECTION
   ========================================================= */
.trust-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.trust-intro .eyebrow { margin-bottom: 18px; }
.trust-intro h2 { margin-bottom: 18px; }
.trust-intro > p { max-width: 46ch; }

.trust-metrics {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 26px 0 30px;
}
.trust-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pf-navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.trust-metric span {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--pf-mute);
  max-width: 16ch;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.trust-card {
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-md);
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(14,74,201,.3);
}
.trust-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.15rem;
  margin-bottom: 14px;
  background: rgba(14,74,201,.08);
  border: 1px solid rgba(14,74,201,.16);
}
.trust-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--pf-ink);
  margin-bottom: 6px;
}
.trust-card span {
  display: block;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--pf-slate);
}

@media (max-width: 900px) {
  .trust-layout { grid-template-columns: 1fr; gap: 36px; }
  .trust-intro { text-align: center; }
  .trust-intro > p { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .trust-metrics { justify-content: center; }
  .trust-metric span { max-width: none; }
  .trust-card { text-align: center; }
  .trust-ico { margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-metrics { gap: 20px; }
}

.platform-graphic {
  width: min(100%, 1100px);
  margin-inline: auto;
  padding:0;
}

.platform-graphic__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.platform-graphic__canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.platform-graphic__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.platform-graphic__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  The circles sit empty on mobile once the product copy drops below the image,
  so the label stack fills them: product name, the plain word for what it does,
  and one line of detail.

  Width is 36% of the stage against a circle roughly 50% wide. A circle's
  widest point is its middle, which is where this block is centred, but 36%
  still keeps the text clear of both the outer edge and the wave motif in the
  centre of the image.
*/
.platform-graphic__mobile-label {
  display: none;
  position: absolute;
  top: 48%;
  width: 36%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  /* White on both circles. It carries easily on the navy; on the cyan it is
     the shadow rather than the fill doing the work, so keep the shadow. */
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38), 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* nowrap on both: "UniversitySite" breaking into "University / Site" reads as
   a mistake. The block is centred on the circle, which is half the stage wide,
   so a line wider than the 36% box still has room to sit in. */
.platform-graphic__mobile-label-kicker {
  font-size: clamp(0.66rem, 2.8vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.85;
}

.platform-graphic__mobile-label-title {
  font-size: clamp(1.35rem, 6.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  white-space: nowrap;
}

/* The detail line breaks over two lines by design — a single long line under a
   three-letter title looks bottom-heavy, and the circle has the height to
   spare. The ch cap is what forces the break; without it "Firm-wide training"
   fits on one line and the stack goes wide instead of tall. */
.platform-graphic__mobile-label-note {
  font-size: clamp(0.66rem, 2.7vw, 0.92rem);
  font-weight: 500;
  line-height: 1.25;
  max-width: 10ch;
  opacity: 0.9;
}

/* The two modifiers only place the block; color is shared above. */
.platform-graphic__mobile-label--learning {
  left: 26%;
}

.platform-graphic__mobile-label--cle {
  left: 74.5%;
}

.platform-graphic__product {
  position: absolute;
  top: 45%;
  width: 30%;
  color: #fff;
  z-index: 2;
  text-align: left;
  transform: translateY(-50%);
}

.platform-graphic__product--learning {
  left: 15.5%;
  width: 26%;
}

.platform-graphic__product--cle {
  right: 11%;
  top: 46%;
  width: 24.5%;
}

.platform-graphic__eyebrow {
  margin: 0 0 0.65rem;
  font-size: clamp(0.68rem, 1.25vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.platform-graphic__product h3 {
  max-width: 14ch;
  margin: 0 0 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.15vw, 1.92rem);
  line-height: 1.1;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  letter-spacing: -0.02em;
}

.platform-graphic__product p:last-child {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(0.78rem, 1.5vw, 0.94rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.platform-graphic__connection {
  position: absolute;
  left: 50%;
  bottom: 20%;
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  text-align: center;
}

.platform-graphic__connection span {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(52, 76, 111, 0.96);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.15vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  text-shadow: none;
}

/* Keeps the heading available to screen readers without showing it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  On narrower screens, place the copy below the image instead of shrinking it
  until it becomes difficult to read.
*/
@media (max-width: 700px) {
  .platform-graphic__canvas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    overflow: visible;
    aspect-ratio: auto;
  }

  .platform-graphic__stage {
    grid-row: 1;
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .platform-graphic__image {
    aspect-ratio: 3 / 2;
  }

  .platform-graphic__mobile-label {
    display: flex;
  }

  .platform-graphic__product,
  .platform-graphic__connection {
    position: static;
    width: auto;
    transform: none;
  }

  .platform-graphic__product {
    padding: 1.5rem;
    border-radius: 1.25rem;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .platform-graphic__product--learning {
    background: linear-gradient(135deg, #0a2540 0%, #0e3c7d 100%);
  }

  .platform-graphic__product--cle {
    background: linear-gradient(135deg, #0d5a8f 0%, #1aa6e6 100%);
  }

  .platform-graphic__product h3,
  .platform-graphic__product p:last-child {
    max-width: none;
    text-shadow: none;
  }

  .platform-graphic__eyebrow {
    text-shadow: none;
  }

  .platform-graphic__connection {
    grid-row: 4;
    text-align: center;
    padding: 1rem;
  }

  .platform-graphic__connection span {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(13, 90, 143, 0.9);
    color: #fff;
    text-shadow: none;
  }
}

/* =========================================================
   PLATFORM OPTIONS — Redesigned
   ========================================================= */

/* ── Section: Platform Overview ─────────────────────────── */
.platform-overview {
  --po-navy-deep: #08284a;
  --po-navy: #0d3769;
  --po-cyan: #1bb0e8;
  --po-cyan-soft: #30c0ef;
  --po-line: rgba(34, 115, 187, 0.3);
  --po-surface: #f8fbff;
  margin-top: 18px;
}

.platform-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.platform-overview-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platform-overview-control {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 600;
}

.platform-overview-control[hidden] {
  display: none !important;
}

.platform-overview .platform-overview-control.btn-ghost {
  background: #ffffff;
  color: var(--pf-navy);
  border-color: rgba(14, 46, 84, 0.2);
}

.platform-overview .platform-overview-control.btn-ghost:hover {
  background: rgba(14, 74, 201, 0.08);
  color: var(--pf-blue);
  border-color: rgba(14, 74, 201, 0.32);
}

.platform-overview .platform-overview-control.btn-ghost[aria-pressed="true"] {
  background: var(--pf-blue);
  color: #ffffff;
  border-color: var(--pf-blue);
}

.platform-overview-note {
  margin: 0 30px;
  font-size: 0.84rem;
  color: var(--pf-mute);
}

.platform-overview-app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 66%);
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(14, 46, 84, 0.12);
  border-radius: var(--r-xl);
  padding: 18px;
  background: var(--po-surface);
  box-shadow: var(--sh-sm);
}

.platform-overview-diagram {
  order: 2;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  border: 1px solid rgba(14, 46, 84, 0.13);
  border-radius: calc(var(--r-xl) - 4px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.92) 100%);
  overflow: hidden;
  padding: 16px;
  min-height: 620px;
}

.platform-overview-diagram::before,
.platform-overview-diagram::after {
  display: none;
}

.platform-overview-connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.platform-overview-connectors::before,
.platform-overview-connectors::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.platform-overview-connectors::before {
  left: 30%;
  right: 30%;
  top: 35.5%;
  border-top: 3px solid rgba(255, 255, 255, 0.9);
}

.platform-overview-connectors::after {
  display: none;
}

.platform-overview-experiences,
.platform-overview-support,
.platform-node {
  position: relative;
  z-index: 2;
}

.platform-overview-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.platform-overview-experiences {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.platform-overview-support {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-node {
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 13px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, border-color 0.14s ease, box-shadow 0.18s ease, color 0.14s ease;
  min-height: 64px;
}

.platform-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
  z-index: 0;
}

.platform-node > * {
  position: relative;
  z-index: 1;
}

.platform-node:hover {
  transform: translateY(-2px);
}

.platform-node:focus-visible {
  outline: 3px solid rgba(80, 136, 236, 0.7);
  outline-offset: 1px;
}

.platform-node[aria-pressed="true"],
.platform-node.is-selected {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(14, 74, 201, 0.28), 0 14px 28px -22px rgba(8, 23, 44, 0.9);
}

.platform-node[aria-pressed="true"]::before,
.platform-node.is-selected::before {
  opacity: 1;
}

.platform-node-label,
.platform-node-kicker {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.platform-node-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.platform-node-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.24;
}

.platform-node-body {
  display: block;
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 62ch;
}

.platform-node-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.platform-node-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.72rem;
  line-height: 1.2;
}

.platform-node--experience {
  --platform-rgb: 26,166,230;
  --platform-accent-text: #8AD3FF;
  background:
    radial-gradient(460px 320px at 50% 0%, rgba(var(--platform-rgb), .42), transparent 72%),
    linear-gradient(165deg, rgba(var(--platform-rgb), .2) 0%, rgba(var(--platform-rgb), .08) 55%, rgba(var(--platform-rgb), .03) 100%),
    linear-gradient(165deg, #0C2544 0%, #0A2540 60%, #0E2E54 100%);
  border-color: rgba(var(--platform-rgb), .45);
  color: #fff;
  min-height: 98px;
}

.platform-node--experience-learning {
  --platform-rgb: 26,166,230;
  --platform-accent-text: #8AD3FF;
}

.platform-node--experience-compliance {
  --platform-rgb: 16,185,129;
  --platform-accent-text: #6EE7B7;
}

.platform-node--experience-delivery {
  --platform-rgb: 139,92,246;
  --platform-accent-text: #C9B6FF;
}

.platform-node--experience .platform-node-label,
.platform-node--experience .platform-node-kicker {
  color: var(--platform-accent-text);
}

.platform-node--foundation {
  background: linear-gradient(160deg, rgba(9, 34, 62, 0.95) 0%, rgba(12, 52, 95, 0.95) 60%, rgba(23, 107, 183, 0.94) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.44);
  border-radius: var(--r-lg);
  padding: 16px;
  min-height: 214px;
}

.platform-node--foundation .platform-node-kicker {
  color: rgba(207, 233, 255, 0.9);
}


.platform-node--foundation .platform-node-name,
.platform-node--cle .platform-node-name {
  font-size: 1.5rem;
}

.platform-node--foundation .platform-node-body {
  color: rgba(237, 247, 255, 0.95);
}

.platform-node--cle {
  border-color: rgba(255, 255, 255, 0.66);
  color: #fff;
  border-radius: var(--r-lg);
  min-height: 0;
  height: 100%;


  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px;

  background:
    radial-gradient(
      520px 420px at 102% 82%,
      rgba(255, 38, 73, 0.48),
      transparent 62%
    ),
    radial-gradient(
      440px 340px at 85% 10%,
      rgba(176, 26, 55, 0.22),
      transparent 66%
    ),
    radial-gradient(
      620px 520px at 5% 35%,
      rgba(15, 2, 10, 0.82),
      transparent 68%
    ),
    linear-gradient(
      145deg,
      rgba(12, 1, 8, 0.62) 0%,
      rgba(43, 4, 19, 0.38) 46%,
      rgba(122, 11, 39, 0.10) 74%,
      transparent 100%
    ),
    linear-gradient(
      145deg,
      #26030f 0%,
      #3c0618 34%,
      #650a27 64%,
      #aa153e 86%,
      #d5284f 100%
    );

  border: 1px solid rgba(255, 100, 125, 0.38);

  box-shadow:
    0 18px 38px rgba(45, 3, 18, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 75, 105, 0.16);
}

.platform-node--cle .platform-node-kicker {
  color: #F3A1A8;
}

.platform-node-power {
  display: inline-flex;
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(6, 37, 63, 0.84);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 185, 195, 0.22);
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);  
}

.platform-node--support {
  background: #ffffff;
  border-color: rgba(14, 74, 201, 0.22);
  color: var(--pf-ink);
  min-height: 72px;
  text-align:center;  
}

.platform-node--support::before {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}

.platform-node--experience::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 244, 255, 0.98) 100%);
}

.platform-node--foundation::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 244, 255, 0.98) 100%);
}

.platform-node--cle::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 244, 255, 0.98) 100%);
}
.platform-node--support[data-platform-node="integrations"] {
  background:
    radial-gradient(260px 180px at 82% 0%,
      rgba(104, 173, 255, 0.22),
      transparent 68%),
    linear-gradient(160deg,
      rgba(78, 146, 224, 0.14) 0%,
      rgba(78, 146, 224, 0.06) 55%,
      rgba(78, 146, 224, 0.02) 100%),
    linear-gradient(160deg,
      #17314D 0%,
      #23496F 58%,
      #2E628F 100%);
  color: #F4F8FD;
}

.platform-node--support[data-platform-node="extensions"] {
  background:
    radial-gradient(240px 170px at 78% 0%,
      rgba(148, 146, 255, 0.18),
      transparent 68%),
    linear-gradient(160deg,
      rgba(111, 117, 215, 0.12) 0%,
      rgba(111, 117, 215, 0.05) 55%,
      rgba(111, 117, 215, 0.02) 100%),
    linear-gradient(160deg,
      #2A2E46 0%,
      #3A3F5D 56%,
      #4B5275 100%);
  color: #F5F7FC;
}

.platform-node--support[data-platform-node="beyond"] {
  background:
    radial-gradient(260px 180px at 82% 0%,
      rgba(84, 201, 186, 0.18),
      transparent 68%),
    linear-gradient(160deg,
      rgba(62, 159, 146, 0.12) 0%,
      rgba(62, 159, 146, 0.05) 55%,
      rgba(62, 159, 146, 0.02) 100%),
    linear-gradient(160deg,
      #183941 0%,
      #21515B 58%,
      #2B6972 100%);
  color: #F3FAF9;
}


.platform-node--support .platform-node-name {
  font-size: 0.95rem;
}

.platform-node[aria-pressed="true"],
.platform-node.is-selected {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color: var(--pf-navy);
  border-color: rgba(14, 74, 201, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 2px rgba(14, 74, 201, 0.24), 0 14px 28px -22px rgba(8, 23, 44, 0.9);
}

.platform-node[aria-pressed="true"] .platform-node-label,
.platform-node[aria-pressed="true"] .platform-node-kicker,
.platform-node.is-selected .platform-node-label,
.platform-node.is-selected .platform-node-kicker {
  color: var(--pf-blue);
}

.platform-node[aria-pressed="true"] .platform-node-name,
.platform-node[aria-pressed="true"] .platform-node-body,
.platform-node.is-selected .platform-node-name,
.platform-node.is-selected .platform-node-body {
  color: var(--pf-ink);
}

.platform-node--foundation[aria-pressed="true"],
.platform-node--foundation.is-selected,
.platform-node--experience[aria-pressed="true"],
.platform-node--experience.is-selected,
.platform-node--cle[aria-pressed="true"],
.platform-node--cle.is-selected,
.platform-node--support[aria-pressed="true"],
.platform-node--support.is-selected {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color: var(--pf-navy);
}

.platform-overview.platform-overview--tour-active .platform-node[aria-pressed="true"],
.platform-overview.platform-overview--tour-active .platform-node.is-selected {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 2px rgba(14, 74, 201, 0.28), 0 14px 28px -22px rgba(8, 23, 44, 0.9);
  transform: none;
}

.platform-overview-detail {
  order: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(14, 46, 84, 0.12);
  border-radius: calc(var(--r-xl) - 4px);
  background: #fff;
  padding: 16px;
}

.platform-overview-detail-kicker {
  margin: 0 0 6px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pf-blue);
}

.platform-overview-detail-title {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--pf-ink);
}

.platform-overview-detail-copy {
  margin: 0 0 12px;
  color: var(--pf-slate);
  font-size: 0.92rem;
  line-height: 1.64;
}

.platform-overview-detail-point {
  margin: 0 0 12px;
  color: var(--pf-navy);
  font-size: 0.9rem;
  line-height: 1.6;
}

.platform-overview-detail-back {
  display: none;
  margin-top: 12px;
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 0.82rem;
  background: #eef4ff;
  color: var(--pf-navy);
  border-color: rgba(14, 74, 201, 0.24);
  box-shadow: 0 8px 18px -14px rgba(14, 74, 201, 0.45);
}

.platform-overview-detail-back:hover {
  background: #e3edff;
  color: var(--pf-navy);
  border-color: rgba(14, 74, 201, 0.34);
}

.platform-overview-detail-examples {
  margin-top: 14px;
}

.platform-overview-detail-examples h5 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-mute);
}

.platform-overview-detail-examples ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: grid;
  gap: 6px;
}

.platform-overview-detail-examples li {
  font-size: 0.87rem;
  color: var(--pf-ink);
  line-height: 1.45;
}

.platform-overview-detail-disclaimer {
  margin-top: 9px;
  font-size: 0.79rem;
  color: var(--pf-mute);
}

.platform-overview-summary {
  margin-top: 18px;
  border: 1px solid rgba(14, 46, 84, 0.12);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 16px 18px;
}

.platform-overview-summary h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--pf-navy);
}

.platform-overview-summary ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.platform-overview-summary li {
  color: var(--pf-slate);
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (max-width: 1160px) {
  .platform-overview-app {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .platform-overview-detail {
    order: 2;
  }

  .platform-overview-detail-back {
    display: inline-flex;
  }
}

@media (max-width: 1160px) and (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .platform-node {
    position: relative;
    padding-bottom: 30px;
  }

  .platform-node::after {
    content: "Click to view";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(8, 23, 44, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.54);
    box-shadow: 0 8px 14px -10px rgba(8, 23, 44, 0.75);
    border-radius: 999px;
    padding: 4px 9px;
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  .platform-overview-diagram {
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  .platform-overview-diagram::before,
  .platform-overview-diagram::after {
    width: 86%;
    top: 12%;
  }

  .platform-overview-diagram::before {
    left: -35%;
  }

  .platform-overview-diagram::after {
    right: -34%;
  }

  .platform-overview-secondary {
    grid-template-columns: 1fr;
  }

  .platform-overview-experiences,
  .platform-overview-support {
    grid-template-columns: 1fr;
  }

  .platform-node--support {
    text-align: left;
  }

  .platform-overview-connectors::before,
  .platform-overview-connectors::after {
    display: none;
  }

  .platform-node--foundation .platform-node-name {
    font-size: 1.33rem;
  }

  .platform-node {
    min-height: 68px;
  }
}

@media (max-width: 760px) {
  .platform-overview {
    margin-top: 10px;
  }

  .platform-overview-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .platform-overview-note {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pf-navy);
    margin: 2px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(14, 74, 201, 0.24);
    background: linear-gradient(180deg, rgba(233, 244, 255, 0.92) 0%, rgba(223, 239, 255, 0.88) 100%);
  }

  .platform-overview-app {
    padding: 12px;
    border-radius: var(--r-lg);
  }

  .platform-overview-diagram {
    padding: 10px;
    border-radius: var(--r-lg);
    background: #f7fbff;
  }

  .platform-node {
    min-height: 74px;
    padding: 12px;
  }

  .platform-node--foundation,
  .platform-node--cle {
    min-height: 0;
  }

  .platform-overview-detail {
    border-radius: var(--r-lg);
    padding: 14px;
  }

  .platform-overview-detail-title {
    font-size: 1.24rem;
  }

  .platform-node {
    position: relative;
    padding-bottom: 30px;
  }

  .platform-node::after {
    content: "Tap to view";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(8, 23, 44, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.54);
    box-shadow: 0 8px 14px -10px rgba(8, 23, 44, 0.75);
    border-radius: 999px;
    padding: 4px 9px;
    pointer-events: none;
  }

  .platform-overview-summary {
    border-radius: var(--r-lg);
  }

}

@media (max-width: 760px) and (hover: hover) and (pointer: fine) {
  .platform-node {
    padding-bottom: 12px;
  }

  .platform-node::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-node,
  .platform-overview-app,
  .platform-overview-diagram {
    transition: none;
  }

  .platform-node:hover {
    transform: none;
  }
}

/* ── Section: UniversitySite ─────────────────────────────── */
.platform-platform-section {
  padding: 90px 0 80px;
  background: white;
}

.platform-subsection-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pf-mute);
  margin: 0 0 16px;
}

/* Three connected experience cards */
.platform-experiences-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--pf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: var(--sh-sm);
}

.platform-experience-card {
  padding: 30px 28px 32px;
  border-right: 1px solid var(--pf-line);
  position: relative;
}

.platform-experience-card:last-child {
  border-right: none;
}

.platform-experience-card::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-btn);
  margin-bottom: 14px;
}

.platform-experience-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.platform-experience-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-blue);
  margin-bottom: 6px;
}

/* Suppress the block margin when inside the flex top row */
.platform-experience-card-top .platform-experience-label { margin-bottom: 0; }

.platform-experience-card h3 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--pf-ink);
  margin: 0 0 10px;
}

.platform-experience-card p {
  font-size: .92rem;
  color: var(--pf-slate);
  margin: 0;
  line-height: 1.62;
}

.platform-optional-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pf-blue);
  background: rgba(14,74,201,.08);
  border: 1px solid rgba(14,74,201,.22);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Dark-surface variant (used inside platform-card) */
.platform-optional-badge--on-dark {
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
}

/* Flex row holding a platform-card-label + optional badge side by side */
.platform-card-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.platform-card-label-row .platform-card-label { margin-bottom: 0; }

/* ── Extension and integration subsections ───────────────── */
.platform-subsection {
  margin-top: 52px;
  padding-top: 0;
  border-top: none;
}

/* First subsection immediately after a section-head — omit the top border
   since the section-head's bottom margin already provides visual separation. */
.platform-subsection--first {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.platform-subsection-heading {
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--pf-ink);
  max-width: 640px;
  line-height: 1.35;
}

.platform-subsection > p {
  margin: 0 0 22px;
  max-width: 760px;
  font-size: .95rem;
  line-height: 1.64;
  color: var(--pf-slate);
}

.platform-subsection-intro {
  margin: 0 0 24px;
  max-width: 760px;
}

.platform-extension-groups,
.platform-integration-groups {
  display: grid;
  gap: 18px;
}

.platform-extension-groups {
  grid-template-columns: 1.2fr 1.2fr .75fr;
}

.platform-integration-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-extension-group,
.platform-integration-group {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-xl);
  padding: 30px 28px 28px;
  box-shadow: var(--sh-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.platform-extension-group::before,
.platform-integration-group::before,
.platform-clientsite-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--grad-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}

.platform-extension-group-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pf-mute);
  margin: 0 0 16px;
}

.platform-extension-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.platform-extension-list li {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.platform-ext-name {
  font-size: .94rem;
  font-weight: 600;
  color: var(--pf-ink);
  margin-bottom: 4px;
  line-height: 1.35;
}

.platform-ext-desc {
  font-size: .89rem;
  color: var(--pf-slate);
  line-height: 1.62;
}

.platform-integration-context {
  font-size: .92rem;
  color: var(--pf-slate);
  margin: 0 0 14px;
  line-height: 1.62;
}

.platform-integration-list {
  list-style: disc;
  padding: 0 0 0 22px;
  margin: 0;
  display: grid;
  gap: 9px;
}

.platform-integration-list li {
  display: list-item;
  font-size: .94rem;
  font-weight: 500;
  color: var(--pf-ink);
  line-height: 1.5;
}

.platform-integration-list li::marker {
  color: var(--pf-blue);
}

.platform-qualification-note {
  font-size: .8rem;
  color: var(--pf-mute);
  font-style: italic;
  margin: 16px 0 0;
  line-height: 1.55;
}

/* ── Section: CLESite ────────────────────────────────────── */
.platform-clesite-section {
  background:
    radial-gradient(900px 550px at 15% 40%, rgba(26,166,230,.14), transparent 60%),
    radial-gradient(700px 500px at 85% 60%, rgba(14,74,201,.20), transparent 60%),
    var(--pf-navy);
  padding: 100px 0 80px;
  color: white;
}

.platform-clesite-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 22px;
}

.platform-clesite-head h2 {
  color: white;
  margin-bottom: 18px;
}

.platform-clesite-head p {
  color: rgba(255,255,255,.76);
  font-size: 1.08rem;
  line-height: 1.68;
  margin: 0;
}

.platform-clesite-body {
  width: 85%;
  margin: 0 auto 30px;
  text-align: left;
}

.platform-clesite-body p {
  color: rgba(255,255,255,.76);
  font-size: 1.08rem;
  line-height: 1.68;
  margin: 0;
}

.platform-clesite-body p:first-child {
  margin-bottom: 1rem;
}

/* Outcome cards */
.platform-clesite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.platform-outcome-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 26px 30px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%),
    radial-gradient(380px 220px at 100% 0%, rgba(190,225,255,.10), transparent 70%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.platform-outcome-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(190,225,255,.84);
  margin: 0 0 10px;
}

.platform-outcome-heading {
  font-size: 1.12rem;
  font-weight: 700;
  color: white;
  line-height: 1.35;
  margin: 0 0 12px;
  font-family: var(--font-display);
}

.platform-outcome-body {
  font-size: .92rem;
  color: rgba(255,255,255,.72);
  line-height: 1.62;
  margin: 0;
}

.platform-outcome-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 10px;
}

.platform-outcome-list li {
  position: relative;
  padding-left: 16px;
  color: rgba(255,255,255,.86);
  font-size: .89rem;
  font-weight: 500;
  line-height: 1.45;
}

.platform-outcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .47em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(190,225,255,.9);
}

.platform-outcome-card:hover {
  transform: translateY(-6px);
  border-color: rgba(190,225,255,.45);
  box-shadow: 0 22px 46px -24px rgba(3, 10, 22, .8);
}

.platform-integrations-panel {
  margin-top: 20px;
  padding: 24px 26px 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 100%),
    radial-gradient(360px 180px at 100% 0%, rgba(190,225,255,.09), transparent 72%);
}

.platform-integrations-panel-head {
  max-width: 880px;
}

.platform-integrations-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(190,225,255,.84);
  margin: 0 0 8px;
}

.platform-integrations-panel h3 {
  margin: 0 0 10px;
  color: white;
  font-size: 1.06rem;
  line-height: 1.35;
}

.platform-integrations-panel p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  line-height: 1.62;
}

.platform-integrations-badges {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platform-integration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Section: Migration & Implementation ─────────────────── */
.platform-migration-section {
  padding: 84px 0 72px;
  background:
    radial-gradient(900px 420px at 0% -5%, rgba(80,136,236,.16), transparent 62%),
    radial-gradient(720px 360px at 100% 10%, rgba(26,166,230,.12), transparent 65%),
    linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
  border-top: 1px solid rgba(14, 74, 201, .08);
  border-bottom: 1px solid rgba(14, 74, 201, .08);
}

.platform-migration-section .section-head {
  max-width: 900px;
  margin-bottom: 30px;
}

.platform-migration-section .section-head p {
  max-width: 78ch;
}

.platform-migration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.platform-migration-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(14, 74, 201, .14);
  background:
    linear-gradient(170deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 100%),
    radial-gradient(300px 180px at 100% 0%, rgba(80,136,236,.14), transparent 70%);
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .45), var(--sh-sm);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.platform-migration-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 74, 201, .3);
  box-shadow: 0 16px 34px -22px rgba(14, 46, 84, .38), var(--sh-md);
}

.platform-migration-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--pf-mute);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.platform-migration-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--pf-ink);
}

.platform-migration-card p {
  margin: 0;
  color: var(--pf-slate);
  font-size: .94rem;
  line-height: 1.62;
}

.platform-migration-callout {
  margin-top: 20px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(14, 46, 84, .16);
  background:
    radial-gradient(440px 220px at 90% 0%, rgba(26,166,230,.11), transparent 72%),
    linear-gradient(155deg, rgba(14,46,84,.96) 0%, rgba(14,74,201,.9) 100%);
  box-shadow: 0 16px 32px -24px rgba(14, 46, 84, .6);
}

.platform-migration-callout-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
}

.platform-migration-callout-grid .platform-migration-callout {
  margin-top: 0;
  height: 100%;
}

.platform-migration-callout-grid .platform-migration-callout:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.platform-migration-callout-grid .platform-migration-callout:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.platform-migration-callout-grid .platform-migration-callout:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.platform-migration-callout p {
  margin: 0;
  color: rgba(255,255,255,.87);
  max-width: 90ch;
}

.platform-migration-callout p + p {
  margin-top: 10px;
  color: rgba(255,255,255,.78);
}

.platform-migration-platforms {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 10px;
}

.platform-migration-platforms li {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
}

.platform-migration-platforms li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #7cb4ff 0%, #2bc4f0 100%);
}

.platform-migration-cta {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.platform-migration-proof {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--pf-mute);
  max-width: 86ch;
}

/* ── Section: Additional Options ─────────────────────────── */
.platform-additional-section {
  padding: 80px 0 70px;
  border-top: none;
  border-bottom: none;
}

.platform-additional-section .section-head {
  margin-bottom: 34px;
}

.platform-additional-section .platform-subsection + .platform-subsection {
  margin-top: 48px;
}

.platform-additional-section .platform-subsection.platform-subsection--first,
.platform-additional-section .platform-subsection.platform-subsection--first + .platform-subsection {
  margin-top: 64px;
}

.platform-additional-section .platform-subsection {
  position: relative;
}

.platform-additional-section .platform-subsection::before {
  display: none;
}

.platform-additional-section .platform-subsection--first::before {
  display: none;
}

.platform-clientsite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: none;
}

.platform-clientsite-card {
  max-width: none;
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--pf-line);
  border-radius: var(--r-xl);
  padding: 30px 28px 28px;
  box-shadow: var(--sh-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.platform-clientsite-card .platform-experience-label {
  margin-bottom: 7px;
  color: var(--pf-mute);
}

.platform-clientsite-card h3,
.platform-clientsite-card h4 {
  font-size: 1.28rem;
  color: var(--pf-ink);
  margin: 0 0 12px;
  line-height: 1.28;
}

.platform-clientsite-card p {
  color: var(--pf-slate);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.platform-extension-group:hover,
.platform-integration-group:hover,
.platform-clientsite-card:hover {
  border-color: rgba(14,74,201,.26);
  box-shadow: var(--sh-glow);
  transform: translateY(-6px);
}

.platform-extension-group:hover::before,
.platform-integration-group:hover::before,
.platform-clientsite-card:hover::before {
  transform: scaleX(1);
}

/* ── Section: Choosing What Fits ─────────────────────────── */
.platform-config-section {
  padding: 96px 0 88px;
  background: white;
}

.platform-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 36px 44px;
  align-items: start;
}

.platform-config-intro .eyebrow {
  margin-bottom: 16px;
}

.platform-config-intro h2 {
  margin-bottom: 20px;
  max-width: 18ch;
}

.platform-config-intro p {
  color: var(--pf-slate);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.platform-config-intro p:last-child {
  margin-bottom: 0;
}

.platform-config-principles {
  display: block;
}

.platform-config-principles-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(14, 46, 84, .13);
  border-radius: var(--r-lg);
  padding: 0;
  box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .45);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.platform-config-principles-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--grad-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}

.platform-config-principles-card:hover {
  border-color: rgba(14,74,201,.26);
  box-shadow: var(--sh-glow);
  transform: translateY(-4px);
}

.platform-config-principles-card:hover::before {
  transform: scaleX(1);
}

.platform-config-principle-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  align-items: start;
  padding: 24px 28px 24px 24px;
}

.platform-config-principle-item + .platform-config-principle-item {
  border-top: 1px solid rgba(14, 46, 84, .1);
}

.platform-config-principle-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-blue);
  line-height: 1.15;
  padding-top: 1px;
}

.platform-config-principle-item h3 {
  margin: 0 0 8px;
  color: var(--pf-navy);
  font-size: 1.08rem;
  line-height: 1.28;
  grid-column: 2;
}

.platform-config-principle-item p {
  margin: 0;
  color: var(--pf-slate);
  font-size: .96rem;
  line-height: 1.58;
  max-width: 54ch;
  grid-column: 2;
}

.platform-config-closing {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(14, 46, 84, .1);
  color: var(--pf-navy);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 76ch;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .platform-extension-groups,
  .platform-integration-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-migration-section .section-head {
    max-width: 840px;
  }
}

@media (max-width: 860px) {
  .platform-experiences-grid {
    grid-template-columns: 1fr;
  }
  .platform-experience-card {
    border-right: none;
    border-bottom: 1px solid var(--pf-line);
  }
  .platform-experience-card:last-child { border-bottom: none; }

  .platform-clesite-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .platform-migration-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .platform-platform-section { padding: 70px 0 56px; }
  .platform-clesite-section { padding: 70px 0 56px; }
  .platform-migration-section { padding: 64px 0 56px; }
  .platform-additional-section { padding: 60px 0 52px; }
  .platform-config-section { padding: 70px 0 60px; }

  .platform-extension-groups,
  .platform-integration-groups {
    grid-template-columns: 1fr;
  }

  .platform-clientsite-grid {
    grid-template-columns: 1fr;
  }

  .platform-config-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .platform-config-intro h2 {
    max-width: none;
  }

  .platform-config-principle-item {
    padding: 20px;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
  }

  .platform-config-principle-num {
    font-size: .86rem;
  }

  .platform-config-principle-item h3 {
    font-size: 1.02rem;
    margin-bottom: 7px;
  }

  .platform-config-principle-item p {
    font-size: .95rem;
    max-width: none;
  }

  .platform-config-closing {
    margin-top: 2px;
    padding-top: 14px;
  }

  .platform-clesite-head { margin-bottom: 18px; }
  .platform-clesite-body {
    width: 100%;
    margin-bottom: 44px;
  }

  .platform-migration-card {
    padding: 22px 20px 20px;
  }

  .platform-migration-callout {
    padding: 20px 18px;
  }

  .platform-migration-callout-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .platform-migration-callout-grid .platform-migration-callout:nth-child(1),
  .platform-migration-callout-grid .platform-migration-callout:nth-child(2),
  .platform-migration-callout-grid .platform-migration-callout:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .platform-outcome-card { padding: 24px 20px; }
  .platform-integrations-panel { padding: 20px 18px 18px; }
  .platform-clientsite-card,
  .platform-extension-group,
  .platform-integration-group { padding: 26px 22px 24px; }

  .platform-subsection {
    padding-top: 36px;
  }

  .platform-subsection-heading {
    margin-bottom: 18px;
  }

  .platform-migration-card h3 {
    font-size: 1.05rem;
  }

  .platform-migration-platforms {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

@media (min-width: 1180px) {
  .platform-migration-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}