/* ==========================================================================
   Orgalytics.ai — site sections & components (style.css)
   Order: page shell → header → hero → hero dashboard → shared (section
          head / buttons) → platforms → AI analytics → why orgalytics
          → MCP → trust → FAQ → final CTA → footer → features page →
          platform detail pages → keyframes
   All media queries live in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   The mockup relies on border-box sizing per component; apply it to the
   homepage subtree only (style.css is not loaded on the login page).
   -------------------------------------------------------------------------- */
.page,
.page *,
.page *::before,
.page *::after {
  box-sizing: border-box;
}

.page {
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Header (.site-header) — sticky glass bar, burger below 960px
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--c-border-soft);
  padding-top: env(safe-area-inset-top, 0px);
}

.header-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo-link img {
  display: block;
  height: 42px;
  width: auto;
}

.header-desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.header-desktop-nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: #3a4260;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color .15s, background .15s;
}

.header-desktop-nav a:hover {
  color: #1a54d8;
  background: #f2f5ff;
}

/* Current-page state (Features link on /features) */
.header-desktop-nav a.is-active {
  color: var(--c-brand);
  background: var(--c-tint);
}

/* Platforms dropdown in the desktop nav (mobile uses the panel sub-list) */
.header-dropdown {
  position: relative;
}

.header-dropdown > a svg {
  margin-left: 6px;
  transition: transform .15s;
}

.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(11, 26, 59, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

/* Invisible bridge over the gap so the pointer never leaves .header-dropdown */
.header-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
}

.header-dropdown:hover .header-dropdown-menu,
.header-dropdown:focus-within .header-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-dropdown:hover > a svg,
.header-dropdown:focus-within > a svg {
  transform: rotate(180deg);
}

/* Links inherit .header-desktop-nav a; only sizing differs inside the card */
.header-dropdown-menu a {
  height: 38px;
  padding: 0 12px;
  font-size: 14.5px;
}

/* Platform mark before each dropdown / panel sub-list label (both rows are
   flex; the icon files are square transparent marks) */
.header-dropdown-menu a img,
.header-submenu-list a img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.header-cta-button {
  display: none;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  background: var(--c-brand);
  color: #ffffff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -10px rgba(26, 115, 232, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: background .15s, transform .15s;
}

/* When enabled via site.json global.feature_toggles.desktop_header_button, show the button on desktop. */
.header-desktop-button-shown .header-cta-button {
  display: flex;
}

/* Mobile sidebar CTA button — shown only when the desktop_header_button toggle is enabled. */
.header-desktop-button-shown .header-mobile-panel a.header-mobile-cta-button {
  display: flex;
}

.header-cta-button:hover {
  background: var(--c-brand-hover);
  transform: translateY(-1px);
}

/* Keep the label white in hover/focus/active: the global a:hover rule
   repaints link text var(--c-brand-hover), the same color as the hover
   background above, which made the label invisible. */
.header-cta-button:hover,
.header-cta-button:focus,
.header-cta-button:active {
  color: #ffffff;
}

.header-cta-button svg {
  flex-shrink: 0;
}

.header-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background: #ffffff;
  color: var(--c-ink-2);
  cursor: pointer;
}

.header-menu-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: background .2s;
}

.header-menu-toggle span::before,
.header-menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform .2s, top .2s;
}

.header-menu-toggle span::before {
  top: -6px;
}

.header-menu-toggle span::after {
  top: 6px;
}

.site-header.is-open .header-menu-toggle span {
  background: rgba(14, 21, 48, 0);
}

.site-header.is-open .header-menu-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.is-open .header-menu-toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

.header-mobile-panel {
  display: none;
}

.site-header a:focus-visible,
.header-menu-toggle:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero (.home-hero-section) — copy left, sample dashboard right
   -------------------------------------------------------------------------- */
.home-hero-section {
  position: relative;
  overflow: hidden;

  background: #ffffff;
  color: var(--c-ink-2);
}

.home-hero-glow {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  background: radial-gradient(680px 440px at 84% 12%, rgba(26, 115, 233, .11), rgba(26, 115, 233, 0) 70%), radial-gradient(560px 440px at 4% 98%, rgba(148, 95, 224, .08), rgba(148, 95, 224, 0) 70%);
  will-change: transform;
}

.home-hero-grid-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(14, 21, 48, .05) 1px, rgba(14, 21, 48, 0) 1px), linear-gradient(90deg, rgba(14, 21, 48, .05) 1px, rgba(14, 21, 48, 0) 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 26%, #000 18%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(ellipse at 70% 26%, #000 18%, rgba(0, 0, 0, 0) 72%);
}

.home-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 48px var(--wrap-pad) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: start;
}

.home-hero-copy-column {
  min-width: 0;
  padding-top: 20px;
}

.home-hero-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(61, 107, 255, .07);
  border: 1px solid rgba(61, 107, 255, .22);
  color: var(--c-eye);
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 20px;
}

.home-hero-section-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(26, 115, 232, .14);
}

.home-hero-heading {
  text-wrap: balance;
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 40px);
  line-height: 1.12;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 0 20px;
}

.home-hero-heading-highlight {
  color: var(--c-brand);
}

.home-hero-description {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 0 26px;
  max-width: 600px;
}

.home-hero-benefit-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.home-hero-benefit-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.home-hero-benefit-list svg {
  flex-shrink: 0;
}

.home-hero-benefit-list b {
  display: block;
  color: var(--c-ink-2);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}

.home-hero-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.home-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

.home-hero-button svg {
  flex-shrink: 0;
}

.home-hero-button-primary {
  background: var(--c-brand-text);
  color: #ffffff;
  box-shadow: var(--shadow-btn);
}

.home-hero-button-primary:hover {
  background: var(--c-brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(26, 115, 232, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.home-hero-button-secondary {
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  background: #ffffff;
}

.home-hero-button-secondary:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.home-hero-reassurance-line {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--c-muted);
}

.home-hero-section a:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
}

.home-hero-screen-reader-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;

  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hero visual: plain wrapper, the dashboard card below carries the surface */
.home-hero-visual-column {
  min-width: 0;
  position: relative;
}

/* --------------------------------------------------------------------------
   Hero dashboard (.hero-dashboard) — KPIs, chart, AI insights
   -------------------------------------------------------------------------- */
.hero-dashboard {
  margin-top: 0;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  box-shadow: 0 34px 70px -36px rgba(11, 26, 59, .38);
  padding: 16px;
}

.hero-dashboard-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hero-dashboard-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dashboard-title img {
  display: block;
}

.hero-dashboard-title b {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.hero-dashboard-meta-text {
  font-size: 11.5px;
  color: var(--c-body);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.hero-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.hero-dashboard-kpi {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid #eaedf5;
  min-width: 0;
}

.hero-dashboard-kpi small {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;

  text-overflow: ellipsis;
}

.hero-dashboard-kpi b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  color: var(--c-ink);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.hero-dashboard-kpi span {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}

.hero-dashboard-delta-bad {
  color: var(--c-err);
  background: var(--c-err-bg);
}

.hero-dashboard-delta-good {
  color: var(--c-text);
  background: var(--c-ok-bg);
}

.hero-dashboard-chart {
  border: 1px solid #eaedf5;
  border-radius: 12px;
  padding: 8px 12px 4px;
  margin-bottom: 10px;
}

.hero-dashboard-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--c-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hero-dashboard-chart-header > span:first-child {
  font-weight: 600;
  color: var(--c-ink);
}

.hero-dashboard-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-dashboard-chart-legend i {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid var(--c-brand);
  margin-left: 6px;
}

.hero-dashboard-chart-legend i.hero-dashboard-legend-previous {
  border-top: 2px dashed #b9c2d6;
}

.hero-dashboard-chart svg {
  display: block;
  width: 100%;
  height: 58px;
}

.hero-dashboard-insights {
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid #eaedf5;
  padding: 10px 12px;
}

.hero-dashboard-insights-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hero-dashboard-insights-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
}

.hero-dashboard-insights-icon img {
  display: block;
}

.hero-dashboard-insights-header b {
  font-size: 13px;
  color: var(--c-ink);
  font-weight: 700;
}

.hero-dashboard-insights-count {
  margin: 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-brand-text);
  background: var(--c-tint);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.hero-dashboard-insight-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 5px;
}

.hero-dashboard-insight-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-body-2);
}

.hero-dashboard-insight-list code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-code);
}

.hero-dashboard-insight-pill {
  flex-shrink: 0;
  width: 74px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 0;
  border-radius: 6px;
  margin-top: 1px;
}

.hero-dashboard-pill-high {
  color: var(--c-err);
  background: var(--c-err-bg);
}

.hero-dashboard-pill-medium {
  color: #a05a00;
  background: #fef3e0;
}

.hero-dashboard-pill-opportunity {
  color: var(--c-text);
  background: var(--c-ok-bg);
}

.hero-dashboard-next-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--c-tint);
  border: 1px solid rgba(26, 115, 233, .28);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-body-2);
}

.hero-dashboard-next-step svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.hero-dashboard-next-step b {
  color: var(--c-brand-text);
}

/* Hero + dashboard motion */
.home-hero-section-label {
  animation: homeHeroUp .6s ease both;
}

.home-hero-heading {
  animation: homeHeroUp .7s .08s ease both;
}

.home-hero-description {
  animation: homeHeroUp .7s .18s ease both;
}

.home-hero-benefit-list li {
  animation: homeHeroUp .6s ease both;
}

.home-hero-benefit-list li:nth-child(1) {
  animation-delay: .28s;
}

.home-hero-benefit-list li:nth-child(2) {
  animation-delay: .36s;
}

.home-hero-benefit-list li:nth-child(3) {
  animation-delay: .44s;
}

.home-hero-button-group {
  animation: homeHeroUp .7s .52s ease both;
}

.home-hero-reassurance-line {
  animation: homeHeroUp .7s .62s ease both;
}

.home-hero-visual-column {
  animation: homeHeroPop .9s .25s cubic-bezier(.2, .8, .2, 1) both;
}

.home-hero-glow {
  animation: homeHeroDrift 14s ease-in-out infinite alternate;
}

.home-hero-button-primary {
  position: relative;
  overflow: hidden;

}

.home-hero-button-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-20deg);
  animation: homeHeroShine 4.8s 1.6s ease-in-out infinite;
  pointer-events: none;
}

.hero-dashboard-chart {
  overflow: hidden;

}

/* Nudges the dashboard down 8px once its count-up starts (main.js adds
   is-anim ~0.7s after load; no-JS and reduced-motion keep the resting spot) */
.hero-dashboard.is-anim {
  margin-top: 8px;
}

.hero-dashboard.is-anim .hero-dashboard-chart-line {
  animation: heroDashboardDraw 1.4s .2s ease both;
}

.hero-dashboard.is-anim .hero-dashboard-chart-area {
  animation: heroDashboardFade 1s .9s ease both;
}

.hero-dashboard.is-anim .hero-dashboard-insight-list li,
.hero-dashboard.is-anim .hero-dashboard-next-step {
  animation: homeHeroUp .5s ease both;
}

.hero-dashboard.is-anim .hero-dashboard-insight-list li:nth-child(1) {
  animation-delay: 1s;
}

.hero-dashboard.is-anim .hero-dashboard-insight-list li:nth-child(2) {
  animation-delay: 1.15s;
}

.hero-dashboard.is-anim .hero-dashboard-insight-list li:nth-child(3) {
  animation-delay: 1.3s;
}

.hero-dashboard.is-anim .hero-dashboard-next-step {
  animation-delay: 1.5s;
}

/* --------------------------------------------------------------------------
   Shared: section header (.section-heading), buttons (.site-button), CTA row (.site-button-row)
   -------------------------------------------------------------------------- */
.section-heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(61, 107, 255, .07);
  border: 1px solid rgba(61, 107, 255, .22);
  color: var(--c-eye);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.section-label svg {
  flex-shrink: 0;
}

.section-heading-title {
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.15;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
}

.section-heading-highlight {
  color: var(--c-brand);
}

.section-description {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-body);
  margin: 16px auto 0;
  max-width: 640px;
}

/* Dark-section variants */
.section-heading-dark .section-label {
  background: rgba(69, 140, 245, .12);
  border-color: rgba(69, 140, 245, .38);
  color: #a9c8fb;
}

.section-heading-dark .section-label path {
  fill: var(--c-eye-dk);
}

.section-heading-dark .section-heading-title {
  color: #ffffff;
}

.section-heading-dark .section-heading-highlight {
  color: var(--c-eye-dk);
}

.section-heading-dark .section-description {
  color: #b6c2dd;
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

.site-button svg {
  flex-shrink: 0;
}

.site-button-primary {
  background: var(--c-brand-text);
  color: #ffffff;
  box-shadow: var(--shadow-btn);
}

.site-button-primary:hover {
  background: var(--c-brand-hover);
  transform: translateY(-1px);
}

.site-button-secondary {
  background: #ffffff;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
}

.site-button-secondary:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.site-button-on-dark {
  background: rgba(255, 255, 255, 0);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, .6);
}

.site-button-on-dark:hover {
  background: #ffffff;
  color: var(--c-ink);
  border-color: #ffffff;
}

/* Keep white-on-navy labels white: the global.css a:hover rule repaints link
   text var(--c-brand-hover), the same color these hover backgrounds use */
.site-button-primary:hover, .site-button-primary:focus, .site-button-primary:active,
.home-hero-button-primary:hover, .home-hero-button-primary:focus, .home-hero-button-primary:active {
  color: #ffffff;
}

.site-button-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

.site-button:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Platforms strip (.platforms-section)
   -------------------------------------------------------------------------- */
.platforms-section {
  background: #f7f8fc;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
}

/* Features page: platforms follows the dark feature row and precedes the
   soft FAQ, so it flips to white to keep the alternating rhythm. */
.features-page .platforms-section {
  background: #ffffff;
}

/* MCP Connector page: same flip - platforms follows the soft security
   section and precedes the white FAQ. */
.mcp-connector-page .platforms-section {
  background: #ffffff;
}

.platforms-section-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 48px var(--wrap-pad) 52px;
}

.platforms-section-header {
  text-align: center;
  margin-bottom: 28px;
}

.platforms-section-heading {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0 0 4px;
  color: var(--c-ink);
}

.platforms-section-description {
  margin: 0;
  color: var(--c-body);
  font-size: 16px;
}

.platform-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.platform-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--c-ink-2);
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 0;
}

.platform-list-item:hover {
  border-color: #b9c6ff;
  box-shadow: 0 10px 24px -16px rgba(30, 50, 140, .45);
  transform: translateY(-1px);
}

.platform-list-item:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.platform-logo,
.platform-logo-image {
  display: block;
  flex-shrink: 0;
}

.platform-name-label {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.platforms-section .site-button-row {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   AI analytics (.analytics-section) — sample-data dashboard tour + AI side panel
   -------------------------------------------------------------------------- */
.analytics-section {
  background: #ffffff;
  color: var(--c-ink);
}

.analytics-section-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 100px var(--wrap-pad);
}

/* Denser head/CTA spacing than the shared defaults */
.analytics-section-inner .section-heading {
  margin-bottom: 32px;
}

.analytics-section-inner .site-button-row {
  margin-top: 36px;
}

.analytics-window {
  border-radius: var(--r-2xl);
  background: #ffffff;
  border: 1px solid var(--c-border);
  box-shadow: 0 40px 80px -48px rgba(11, 26, 59, .45);
  overflow: hidden;

}

.analytics-window-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-border-soft);
  background: #ffffff;
}

.analytics-window-controls {
  display: flex;
  gap: 6px;
}

.analytics-window-controls i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.analytics-window-url {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f3f4f7;
  font-size: 12.5px;
  color: var(--c-body);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;

  text-overflow: ellipsis;
}

.analytics-sample-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-body);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.analytics-report-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--c-border-soft);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.analytics-report-tabs::-webkit-scrollbar {
  display: none;
}

.analytics-report-tab {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 12px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-body);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.analytics-report-tab:hover {
  color: var(--c-ink);
}

.analytics-report-tab[aria-selected="true"] {
  color: var(--c-brand-text);
  border-bottom-color: var(--c-brand);
  font-weight: 600;
}

.analytics-report-tab:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
  border-radius: 6px;
}

.analytics-report-tab svg {
  flex-shrink: 0;
}

/* Report body (left) + AI aside (right) share one stretched grid */
.analytics-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: stretch;
}

.analytics-reports {
  background: #f3f4f7;
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.analytics-report-panel {
  display: none;
}

@keyframes analyticsIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Uniform heights: every report fills the same space, cards stretch,
   footers sit at the bottom of their card */
.analytics-report-panel.is-on {
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: analyticsIn .35s ease both;
}

.analytics-report-panel.is-on > .analytics-card-grid,
.analytics-report-panel.is-on > .analytics-card:last-child {
  flex: 1;
}

.analytics-card-grid > .analytics-card,
.analytics-report-panel > .analytics-card {
  display: flex;
  flex-direction: column;
}

.analytics-card .analytics-table-footer {
  margin-top: auto;
  padding-top: 14px;
}

.analytics-report-panel > .analytics-card:last-child .analytics-chart {
  flex: 1;
}

/* While JS measures hidden panels, suspend the flex filling */
.analytics-measuring .analytics-report-panel.is-on {
  display: block;
}

.analytics-measuring .analytics-card .analytics-table-footer {
  margin-top: 14px;
  padding-top: 0;
}

.analytics-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--c-border-soft);
  padding: 18px 20px;
  box-sizing: border-box;
  min-width: 0;
}

.analytics-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
}

.analytics-help-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #9aa2bd;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Overview panel: KPI cards */
.analytics-kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.analytics-kpi-card small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.analytics-kpi-card b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}

.analytics-kpi-card span {
  font-size: 12.5px;
  color: var(--c-muted);
}

.analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.analytics-card-header-plain {
  margin: 0;
}

.analytics-range-selector {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
  background: #ffffff;
}

.analytics-chart-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--c-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.analytics-chart-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.analytics-chart-legend b {
  color: var(--c-ink);
  font-weight: 600;
  margin-left: 4px;
}

.analytics-chart {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 6px;
}

.analytics-y-axis {
  position: relative;
  height: 200px;
  font-size: 11.5px;
  color: var(--c-muted);
  text-align: right;
}

.analytics-y-axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}

.analytics-chart-plot {
  position: relative;
  min-width: 0;
}

.analytics-chart-plot svg {
  display: block;
  width: 100%;
  height: 200px;
}

.analytics-x-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--c-muted);
  margin-top: 6px;
  white-space: nowrap;
}

.analytics-chart-line {
  clip-path: inset(0 100% 0 0);
}

.analytics-section.is-seen .analytics-report-panel.is-on .analytics-chart-line {
  animation: analyticsChartDraw 1.4s .15s ease forwards;
}

@keyframes analyticsChartDraw {
  to { clip-path: inset(0 0 0 0); }
}

/* Two-card report grids (Devices + Top Pages, Growth Engine, Countries) */
.analytics-card-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 14px;
}

.analytics-card-grid-equal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.analytics-card-grid-wide {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

/* Device donut */
.analytics-donut {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.analytics-donut-ring {
  position: relative;
  width: 170px;
  height: 170px;
  flex-shrink: 0;
}

.analytics-donut-ring svg {
  display: block;
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
}

.analytics-donut-ring svg circle {
  transition: stroke-dasharray .8s ease;
}

.analytics-donut-ring div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.analytics-donut-ring b {
  font-size: 24px;
  font-weight: 700;
}

.analytics-donut-ring small {
  font-size: 12px;
  color: var(--c-muted);
}

.analytics-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  flex: 1;
  min-width: 180px;
}

.analytics-donut-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #3a4260;
}

.analytics-donut-legend li i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.analytics-donut-legend li span {
  margin: 0 auto;
  letter-spacing: 0;
  color: var(--c-ink);
  white-space: nowrap;
}

.analytics-donut-legend li em {
  font-style: normal;
  font-weight: 500;
  color: var(--c-muted);
  margin-left: 6px;
}

.analytics-card-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-brand-text);
}

/* Report tables: fit their card at every width, no scrollbars */
.analytics-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
  margin-top: 14px;
}

.analytics-table,
.analytics-table.analytics-table-lined {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 0;
}

.analytics-table th {
  background: #f7f8fa;
  color: var(--c-body);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--c-border-soft);
  white-space: nowrap;
}

.analytics-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3f6;
  color: var(--c-ink);
  white-space: nowrap;
}

.analytics-table tr:last-child td {
  border-bottom: 0;
}

.analytics-table .analytics-number-cell {
  text-align: center;
}

.analytics-table a,
.analytics-table .analytics-url-text {
  color: var(--c-brand-text);
  text-decoration: none;
}

.analytics-table td:first-child,
.analytics-table th:first-child {
  white-space: normal;
}

.analytics-table td:first-child {
  font-weight: 600;
}

.analytics-columns .analytics-table {
  font-size: 12.5px;
}

.analytics-columns .analytics-table th,
.analytics-columns .analytics-table td {
  padding: 10px 9px;
}

.analytics-columns .analytics-table td:first-child {
  max-width: 150px;
}

.analytics-table td:has(.analytics-url-text) {
  white-space: normal;
}

.analytics-table .analytics-url-text {
  word-break: break-all;
}

.analytics-table-lined td:first-child {
  font-weight: 500;
}

.analytics-card-description {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-muted);
}

.analytics-table-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--c-muted);
  flex-wrap: wrap;
}

.analytics-table-footer b {
  color: var(--c-brand-text);
  font-weight: 600;
}

.analytics-warning-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: #854d0e;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Auto-advance progress bar on the selected tab */
.analytics-report-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
}

.analytics-section.is-auto .analytics-report-tab[aria-selected="true"] {
  border-bottom-color: rgba(26, 115, 233, .22);
}

.analytics-section.is-auto .analytics-report-tab[aria-selected="true"]::after {
  animation: analyticsProgress 6s linear forwards;
}

.analytics-section.is-paused .analytics-report-tab[aria-selected="true"]::after {
  animation-play-state: paused;
}

@keyframes analyticsProgress {
  to { transform: scaleX(1); }
}

.analytics-report-panel.is-on tbody tr,
.analytics-report-panel.is-on .analytics-kpi-card,
.analytics-report-panel.is-on .analytics-donut-legend li {
  animation: analyticsIn .45s ease both;
}

.analytics-report-panel.is-on tbody tr:nth-child(2),
.analytics-report-panel.is-on .analytics-kpi-card:nth-child(2),
.analytics-report-panel.is-on .analytics-donut-legend li:nth-child(2) {
  animation-delay: .06s;
}

.analytics-report-panel.is-on tbody tr:nth-child(3),
.analytics-report-panel.is-on .analytics-kpi-card:nth-child(3),
.analytics-report-panel.is-on .analytics-donut-legend li:nth-child(3) {
  animation-delay: .12s;
}

.analytics-report-panel.is-on tbody tr:nth-child(4),
.analytics-report-panel.is-on .analytics-kpi-card:nth-child(4) {
  animation-delay: .18s;
}

.analytics-report-panel.is-on tbody tr:nth-child(5) {
  animation-delay: .24s;
}

.analytics-report-panel.is-on tbody tr:nth-child(6) {
  animation-delay: .3s;
}

/* AI side panel: live badge, per-report analysis notes */
.analytics-ai-panel {
  background: #f3f4f7;
  padding: 18px 18px 18px 0;
  box-sizing: border-box;
  display: flex;
  align-self: stretch;
}

.analytics-ai-panel-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: 18px 20px;
  box-sizing: border-box;
  min-width: 0;
}

.analytics-ai-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.analytics-ai-panel-header small {
  margin: 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-brand-text);
  background: #eef4fe;
  padding: 3px 9px;
  border-radius: 999px;
}

.analytics-ai-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
  animation: analyticsPulse 2s ease-in-out infinite;
}

@keyframes analyticsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

.analytics-ai-notes {
  padding: 0;
  box-sizing: border-box;
}

.analytics-ai-note {
  display: none;
}

.analytics-ai-note.is-on {
  display: block;
  animation: analyticsIn .45s ease both;
}

.analytics-ai-note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-ink);
}

.analytics-ai-note-header img {
  display: block;
  flex-shrink: 0;
}

.analytics-ai-note-header span {
  color: var(--c-brand-text);
}

.analytics-ai-note p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-body-2);
}

.analytics-ai-note p b {
  color: var(--c-brand-text);
  font-weight: 700;
}

.analytics-ai-note-next-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef4fe;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-body-2);
}

.analytics-ai-note-next-step > span:first-child {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.analytics-ai-note-next-step b {
  color: var(--c-ink);
}

/* Color helpers converted from the mockup's inline style attributes
   (KPI label/value tints, legend dots, donut legend dots, gap colors) */
.analytics-section .analytics-text-blue { color: #2563eb; }
.analytics-section .analytics-text-violet { color: #7c3aed; }
.analytics-section .analytics-text-green { color: #12883e; }
.analytics-section .analytics-text-red { color: #c5221f; }
.analytics-section .analytics-text-amber { color: #a05a00; }
.analytics-section .analytics-text-indigo { color: #5b5fef; }

.analytics-chart-legend .analytics-legend-dot-clicks { background: #0ea5e9; }
.analytics-chart-legend .analytics-legend-dot-impressions { background: #5b5fef; margin: 0 0 0 6px; }

.analytics-donut-legend .analytics-donut-dot-mobile { background: #3b82f6; }
.analytics-donut-legend .analytics-donut-dot-desktop { background: #16a34a; }
.analytics-donut-legend .analytics-donut-dot-tablet { background: #06b6d4; }

.analytics-window-controls i:nth-child(1) { background: #e94336; }
.analytics-window-controls i:nth-child(2) { background: #fabd03; }
.analytics-window-controls i:nth-child(3) { background: #34a853; }

/* Y-axis label positions (5 evenly spaced rows) */
.analytics-y-axis span:nth-child(1) { top: 9.1%; }
.analytics-y-axis span:nth-child(2) { top: 29.5%; }
.analytics-y-axis span:nth-child(3) { top: 50%; }
.analytics-y-axis span:nth-child(4) { top: 70.5%; }
.analytics-y-axis span:nth-child(5) { top: 90.9%; }

/* --------------------------------------------------------------------------
   Why Orgalytics (.why-orgalytics-section) — benefit points + three-layer stack
   -------------------------------------------------------------------------- */
.why-orgalytics-section {
  background: #ffffff; /* white: the MCP band above now carries the soft tone */
  color: var(--c-ink);
}

.why-orgalytics-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.why-orgalytics-inner .section-heading {
  text-align: left;
  margin: 0 0 28px;
  max-width: none;
}

.why-orgalytics-inner .section-description {
  margin-left: 0;
}

.why-orgalytics-inner .site-button-row {
  justify-content: flex-start;
  margin-top: 32px;
}

.why-orgalytics-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.why-orgalytics-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-body);
}

.why-orgalytics-benefit-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.why-orgalytics-benefit-list b {
  color: var(--c-ink);
}

.why-orgalytics-layer-stack {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.why-orgalytics-layer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  min-width: 0;
}

.why-orgalytics-layer-top {
  background: #ffffff;
  border: 1.5px solid var(--c-brand);
  box-shadow: 0 26px 50px -30px rgba(26, 115, 233, .6);
}

.why-orgalytics-layer-middle {
  background: var(--c-dark);
  color: #ffffff;
  margin: 0 18px;
}

.why-orgalytics-layer-base {
  background: #ffffff;
  border: 1px solid var(--c-border);
  margin: 0 36px;
}

.why-orgalytics-layer-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.why-orgalytics-layer-base .why-orgalytics-layer-icon {
  background: #eef2ff;
}

.why-orgalytics-layer-middle .why-orgalytics-layer-icon {
  background: rgba(255, 255, 255, .18);
}

.why-orgalytics-layer-top .why-orgalytics-layer-icon {
  background: var(--c-tint);
}

.why-orgalytics-layer-top .why-orgalytics-layer-icon img {
  display: block;
}

.why-orgalytics-layer b {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.why-orgalytics-layer small {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 2px;
}

.why-orgalytics-layer-base small {
  color: var(--c-muted);
}

.why-orgalytics-layer-middle small {
  color: #e3ecff;
}

.why-orgalytics-layer-top small {
  color: var(--c-body);
}

.why-orgalytics-layer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.why-orgalytics-layer-chips span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}

.why-orgalytics-layer-base .why-orgalytics-layer-chips span {
  background: #f2f4f9;
  color: var(--c-body);
}

.why-orgalytics-layer-middle .why-orgalytics-layer-chips span {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

.why-orgalytics-layer-top .why-orgalytics-layer-chips span {
  background: var(--c-tint);
  color: var(--c-brand-text);
}

/* corner badge pinned to each layer */
.why-orgalytics-layer-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-dark);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   MCP connector (.mcp-section) — animated data-flow diagram
   -------------------------------------------------------------------------- */
.mcp-section {
  background: #f7f8fc; /* soft band: breaks the white run with the analytics section above */
  color: var(--c-ink-2);
  position: relative;
  overflow: hidden;

}

.mcp-section-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 360px at 50% 60%, rgba(61, 107, 255, .07), rgba(61, 107, 255, 0) 70%);
}

.mcp-section-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 100px var(--wrap-pad);
}

.mcp-data-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  margin: 0 auto 44px;
}

.mcp-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  min-width: 0;
  box-shadow: 0 18px 40px -32px rgba(14, 21, 48, .35);
}

.mcp-flow-node h3 {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.mcp-flow-node p {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.45;
}

.mcp-flow-node-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #eef3ff;
}

.mcp-flow-node-2 .mcp-flow-node-icon {
  background: #ffffff;
  border: 1px solid #ece8ff;
}

.mcp-flow-node-2 .mcp-flow-node-icon img {
  display: block;
}

.mcp-flow-node-3 .mcp-flow-node-icon {
  background: #e6f9fd;
}

.mcp-flow-node-4 .mcp-flow-node-icon {
  background: #e8f8f0;
}

.mcp-flow-node-2 {
  border-color: rgba(123, 92, 255, .4);
  box-shadow: 0 18px 40px -26px rgba(123, 92, 255, .55);
}

.mcp-flow-node-3 {
  border-color: rgba(56, 214, 240, .55);
}

.mcp-flow-node-4 {
  border-color: rgba(47, 209, 139, .5);
}

.mcp-flow-connector {
  position: relative;
  height: 2px;
  margin: 0 6px;
  background: repeating-linear-gradient(90deg, rgba(61, 107, 255, .45) 0 5px, rgba(61, 107, 255, 0) 5px 10px);
  background-size: 20px 2px;
  animation: mcpFlow .9s linear infinite;
}

.mcp-flow-connector i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a9fd6;
  box-shadow: 0 0 8px 2px rgba(56, 214, 240, .55);
  animation: mcpPacket 1.8s ease-in-out infinite;
}

.mcp-flow-connector-2 i {
  background: #7b5cff;
  box-shadow: 0 0 8px 2px rgba(123, 92, 255, .5);
  animation-delay: .6s;
}

.mcp-flow-connector-3 i {
  background: #2fd18b;
  box-shadow: 0 0 8px 2px rgba(47, 209, 139, .55);
  animation-delay: 1.2s;
}

.mcp-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}

.mcp-benefit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink-2);
}

.mcp-benefit-list svg {
  flex-shrink: 0;
}

.mcp-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Trust and data safety (.trust-section) — four data-handling cards
   -------------------------------------------------------------------------- */
.trust-section {
  background: #ffffff;
  color: var(--c-ink);
}

.trust-section-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.trust-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.trust-card {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.trust-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.trust-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-tint);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.trust-card-icon svg {
  display: block;
}

.trust-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.trust-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   FAQ (.faq-section) — two-column native <details> accordions
   -------------------------------------------------------------------------- */
.faq-section {
  background: #f7f8fc;
  color: var(--c-ink);
}

.faq-section-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.faq-list {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  align-items: start;
}

.faq-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.faq-item {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  transition: border-color .2s, box-shadow .2s;
}

.faq-item[open] {
  border-color: #c9d6f5;
  box-shadow: 0 20px 40px -32px rgba(11, 26, 59, .4);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--c-ink);
}

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

.faq-item summary:focus-visible {
  outline: 2px solid #1a73e9;
  outline-offset: 2px;
  border-radius: 16px;
}

/* Plus → × toggle drawn with two bars; the vertical one folds flat when open */
.faq-toggle-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-tint);
  flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: #1a73e9;
  transition: transform .2s;
}

.faq-toggle-icon::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-toggle-icon::after {
  transform: rotate(0deg);
}

/* Height is animated by the accordion JS in main.js (px → px, never
   auto), so the answer slides open/closed; overflow clips mid-motion */
.faq-answer {
  padding: 0 22px 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-body);
  overflow: hidden;

  transition: height .3s ease;
}

.faq-answer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Final CTA (.final-call-to-action-section) — dark gradient box
   -------------------------------------------------------------------------- */
.final-call-to-action-section {
  background: #ffffff;
}

.final-call-to-action-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  /* Top pad matches the standard 96px section rhythm so the panel gets the
     same breathing room after the FAQ as every other section pair. */
  padding: 96px var(--wrap-pad) 100px;
}

.final-call-to-action-panel {
  position: relative;
  overflow: hidden;

  border-radius: 28px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark);
  padding: 80px 40px;
  text-align: center;
}

.final-call-to-action-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 320px at 12% 0%, rgba(26, 115, 233, .42), rgba(26, 115, 233, 0) 70%), radial-gradient(520px 320px at 90% 100%, rgba(148, 95, 224, .34), rgba(148, 95, 224, 0) 70%);
}

.final-call-to-action-panel .section-heading {
  position: relative;
  margin-bottom: 32px;
}

.final-call-to-action-button-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.final-call-to-action-reassurance {
  position: relative;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   Footer (.site-footer)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-footer);
  color: var(--c-on-dark);
  border-top: 1px solid var(--c-footer);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 64px var(--wrap-pad) 28px;
}

.footer-top {
  display: grid;
  /* Column count must match the link columns in templates/layout/footer.php. */
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 16px;
}

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

.footer-about-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 340px;
}

.footer-column-heading {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.footer-link-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-link-column a {
  color: var(--c-on-dark);
  text-decoration: none;
  font-size: 14.5px;
  transition: color .15s;
}

.footer-link-column a:hover {
  color: #ffffff;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--c-brand-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 13.5px;
  color: #7f8fb3;
}

.footer-social-links {
  display: flex;
  gap: 18px;
}

.footer-social-links a {
  color: var(--c-on-dark);
  text-decoration: none;
}

.footer-social-links a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Features page: hero (.ofh)
   -------------------------------------------------------------------------- */
.ofh {
  position: relative;
  overflow: hidden;

  background: var(--c-surface);
  color: var(--c-ink);
}

.ofh-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px 360px at 80% 0%, rgba(26, 115, 233, .10), rgba(26, 115, 233, 0) 70%), radial-gradient(560px 360px at 10% 100%, rgba(148, 95, 224, .08), rgba(148, 95, 224, 0) 70%);
}

.ofh-in {
  position: relative;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 56px var(--wrap-pad) 64px;
  text-align: center;
}

.ofh-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(26, 115, 233, .07);
  border: 1px solid rgba(26, 115, 233, .22);
  color: var(--c-brand);
  font-size: 13px;
  font-weight: 500; /* Home hero-pill weight (.home-hero-section-label) */
  margin: 0 0 18px;
}

.ofh-eye svg {
  flex-shrink: 0;
}

.ofh-h1 {
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 40px); /* Home hero H1 scale (.home-hero-heading) */
  line-height: 1.12;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 auto 18px;
  max-width: 860px;
  text-wrap: balance;
}

.ofh-acc {
  color: var(--c-brand);
}

.ofh-sub {
  font-size: 17.5px; /* Home hero lead (.home-hero-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 auto 30px;
  max-width: 680px;
}

.ofh-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ofh-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.ofh-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px; /* Home hero benefit-chip text (.home-hero-benefit-list b) */
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
}

.ofh-stats svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Features page: index grid (.oix)
   -------------------------------------------------------------------------- */
.oix {
  background: #f7f8fc;
  color: var(--c-ink);
}

.oix-in {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.oix-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  text-decoration: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.oix-card:hover {
  border-color: #b9cdf5;
  box-shadow: 0 16px 34px -24px rgba(11, 26, 59, .35);
  transform: translateY(-2px);
}

.oix-card:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.oix-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--c-tint);
  flex-shrink: 0;
}

.oix-t {
  min-width: 0;
  flex: 1;
}

.oix-t b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}

.oix-t span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-body);
}

.oix-go {
  flex-shrink: 0;
  align-self: center;
  transition: transform .15s;
}

.oix-card:hover .oix-go {
  transform: translateX(3px);
}

.oix-card:hover .oix-go path {
  stroke: var(--c-brand);
}

/* --------------------------------------------------------------------------
   Features page: feature rows (.ofr) - shared two-column shell, card frame,
   tone tags, plus the dark band variant (.ofr-dark). Visual bodies:
   .ofd .ofa .ofe .ofrp .ofmx below.
   -------------------------------------------------------------------------- */
.ofr {
  background: var(--c-surface);
  color: var(--c-ink);
}

.ofr-alt {
  background: #f7f8fc;
}

.ofr-in {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

.ofr-rev .ofr-txt {
  order: 2;
}

.ofr-rev .ofr-vis {
  order: 1;
}

.ofr-txt,
.ofr-vis {
  min-width: 0;
}

.ofr-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12.5px; /* Home section-label typography (.section-label) */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.ofr-eye span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-tint);
}

.ofr-alt .ofr-eye span {
  background: #e6eefd;
}

.ofr-h2 {
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 34px); /* Home section-H2 scale (.section-heading-title) */
  line-height: 1.15;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0 0 14px;
  color: var(--c-ink);
  text-wrap: balance;
}

.ofr-acc {
  color: var(--c-brand);
}

.ofr-p {
  font-size: 17px; /* Home body-description scale (.section-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 0 22px;
}

.ofr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ofr-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-body);
}

.ofr-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.ofr-list b {
  color: var(--c-ink);
  font-weight: 700; /* Home benefit-list bold lead (default b weight) */
}

.ofr-card {
  border-radius: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 30px 60px -40px rgba(11, 26, 59, .38);
  padding: 18px;
}

.ofr-alt .ofr-card {
  box-shadow: 0 30px 60px -38px rgba(11, 26, 59, .42);
}

.ofr-card-soft {
  background: #f7f9fd;
}

.ofr-chead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  flex-wrap: wrap;
}

.ofr-chead img {
  display: block;
}

.ofr-chead small {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-muted);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.ofr-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.ofr-hi {
  color: var(--c-err);
  background: var(--c-err-bg);
}

.ofr-md {
  color: #a05a00;
  background: #fef3e0;
}

.ofr-op {
  color: var(--c-text);
  background: var(--c-ok-bg);
}

.ofr-lo {
  color: var(--c-brand);
  background: var(--c-tint);
}

.ofr-mono {
  font-family: var(--font-mono);
}

.ofr-note {
  margin: 10px 0 0;
  font-size: 12.5px; /* Home stat sub-text scale (.analytics-kpi-card span) */
  color: var(--c-muted-3);
}

/* --------------------------------------------------------------------------
   Features page: dark feature row variant (.ofr-dark) — the same shell on
   the dark band. Text/tint overrides follow the site's dark-section values
   (same palette as .section-heading-dark / .final-call-to-action-panel).
   -------------------------------------------------------------------------- */
.ofr-dark {
  position: relative;
  overflow: hidden;
  background: var(--c-dark);
}

/* Brand glows painted behind the row content (same pattern as the final
   CTA panel's ::before). */
.ofr-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 360px at 85% 0%, rgba(26, 115, 233, .28), rgba(26, 115, 233, 0) 70%),
              radial-gradient(520px 340px at 0% 100%, rgba(148, 95, 224, .22), rgba(148, 95, 224, 0) 70%);
}

.ofr-dark .ofr-in {
  position: relative;
}

.ofr-dark .ofr-eye {
  color: #a9c8fb;
}

.ofr-dark .ofr-eye span {
  background: rgba(69, 140, 245, .18);
}

.ofr-dark .ofr-eye svg path {
  stroke: var(--c-eye-dk);
}

.ofr-dark .ofr-h2 {
  color: #ffffff;
}

.ofr-dark .ofr-acc {
  color: var(--c-eye-dk);
}

.ofr-dark .ofr-p {
  color: #b6c2dd;
}

.ofr-dark .ofr-list li {
  color: #b6c2dd;
}

.ofr-dark .ofr-list b {
  color: #ffffff;
}

/* The shared check icon's light circle and blue check get the dark
   treatment (CSS overrides the SVG presentation attributes). */
.ofr-dark .ofr-list svg circle {
  fill: rgba(69, 140, 245, .18);
}

.ofr-dark .ofr-list svg path {
  stroke: #a9c8fb;
}

/* Footnote sits outside a bare card, on the dark band. */
.ofr-dark .ofr-note {
  margin: 12px 0 0;
  color: #8a9bc0;
}

/* --------------------------------------------------------------------------
   Features page: dashboard visual (.ofd)
   -------------------------------------------------------------------------- */
.ofd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.ofd-kpi {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid #eaedf5;
  min-width: 0;
}

.ofd-kpi small {
  display: block;
  font-size: 11.5px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;

  text-overflow: ellipsis;
}

.ofd-kpi b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.02em;
  margin: 2px 0 4px;
  white-space: nowrap;
}

.ofd-kpi i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

.ofd-chart {
  border: 1px solid #eaedf5;
  border-radius: 12px;
  padding: 10px 12px 6px;
}

.ofd-ch {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ofd-ch b {
  color: var(--c-ink);
}

.ofd-chart svg {
  display: block;
  width: 100%;
  height: 120px;
}

/* --------------------------------------------------------------------------
   Features page: action center visual (.ofa) — numbered alert list
   -------------------------------------------------------------------------- */
.ofa-list {
  display: grid;
  gap: 10px;
}

.ofa-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #f7f9fd;
  border: 1px solid #eaedf5;
}

.ofa-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.ofa-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ofa-top .ofr-tag {
  margin-top: 2px;
}

.ofa-top b {
  font-size: 14.5px; /* old .ofi-top b scale — compact card title */
  color: var(--c-ink);
  line-height: 1.4;
}

.ofa-why,
.ofa-fix {
  margin: 0;
  font-size: 13.5px; /* Home compact card text scale (.why-orgalytics-layer small) */
  line-height: 1.55;
  color: var(--c-body);
}

.ofa-why strong {
  color: var(--c-ink);
  font-weight: 700;
}

.ofa-fix {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #dde2ec;
}

.ofa-fix strong {
  color: var(--c-brand);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Features page: dashboard visual extras (.ofe) — setup steps strip
   -------------------------------------------------------------------------- */
.ofe-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ofe-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: #f7f9fd;
  border: 1px solid #eaedf5;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  min-width: 0;
}

.ofe-step svg,
.ofe-step img {
  display: block;
  flex-shrink: 0;
}

.ofe-step span {
  min-width: 0;
}

.ofe-now {
  background: var(--c-tint);
  border-color: #b9cdf5;
  color: var(--c-brand);
}

/* --------------------------------------------------------------------------
   Features page: report table visual (.ofrp) — tabbed breakdown table,
   brand bar and period comparison. Every tab's table is server-rendered;
   the report tabs module in main.js only switches visibility.
   -------------------------------------------------------------------------- */
.ofrp-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.ofrp-tab {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-body);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.ofrp-tab:hover {
  color: var(--c-brand);
  border-color: #b9cdf5;
}

.ofrp-tab[aria-selected="true"] {
  color: #ffffff;
  background: var(--c-brand);
  border-color: var(--c-brand);
}

.ofrp-tab:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.ofrp-tw {
  overflow-x: auto;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
}

.ofrp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 380px;
}

.ofrp-tbl th {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  background: #f7f8fc;
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-border-soft);
  white-space: nowrap;
}

.ofrp-tbl th:first-child,
.ofrp-tbl td:first-child {
  text-align: left;
}

.ofrp-tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f3f8;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px; /* compact data table scale (platform action table) */
  color: #3a4260;
  white-space: nowrap;
}

.ofrp-tbl tr:last-child td {
  border-bottom: 0;
}

.ofrp-tbl td.ofrp-up {
  color: var(--c-ok);
  font-weight: 700;
}

.ofrp-tbl td.ofrp-dn {
  color: var(--c-err);
  font-weight: 700;
}

.ofrp-brand {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: #f7f9fd;
  border: 1px solid #eaedf5;
}

.ofrp-bh {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink);
}

.ofrp-bh span {
  color: var(--c-muted);
  font-weight: 500;
}

.ofrp-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: #e6e9f2;
}

.ofrp-bar i {
  display: block;
  height: 100%;
}

/* Bar widths as classes (same pattern as the old .ofp-w*) — the data picks
   one per segment, so bars stay data-driven without inline styles. */
.ofrp-w38 { width: 38%; }
.ofrp-w62 { width: 62%; }

.ofrp-seg-brand {
  background: var(--c-purple);
}

.ofrp-seg-nonbrand {
  background: var(--c-brand);
}

.ofrp-leg {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-body);
}

.ofrp-leg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ofrp-leg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ofrp-cmp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--c-body);
}

.ofrp-cmp span {
  font-weight: 700;
  color: var(--c-ink);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  border-radius: var(--r-sm);
  padding: 4px 9px;
}

/* --------------------------------------------------------------------------
   Features page: MCP chat visual (.ofmx) — sample chat card. Rendered bare
   (the row sets bare_card, so this component carries its own card chrome).
   -------------------------------------------------------------------------- */
.ofmx-chat {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.ofmx-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-soft);
  background: #fbfcfe;
}

.ofmx-top b {
  font-size: 14px;
  color: var(--c-ink);
}

.ofmx-pills {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ofmx-pill {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.ofmx-pill:hover {
  color: var(--c-brand);
  border-color: #b9cdf5;
}

.ofmx-pill[aria-pressed="true"] {
  color: #ffffff;
  background: var(--c-dark);
  border-color: var(--c-dark);
}

.ofmx-pill:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.ofmx-body {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}

.ofmx-you {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--c-dark);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.ofmx-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: var(--c-tint);
  border: 1px solid #c9daf8;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-brand);
}

.ofmx-tool img {
  display: block;
}

.ofmx-ans {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-body-2);
}

.ofmx-ans b {
  color: var(--c-ink);
}

.ofmx-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-ink);
  background: #f4f6fb;
  border: 1px solid #e7eaf3;
  border-radius: 6px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.ofmx-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: #f7f9fd;
  font-size: 13.5px;
  color: var(--c-muted-3);
}

.ofmx-ph {
  flex: 1;
  min-width: 0;
}

.ofmx-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-brand);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Platform detail pages (/wix …) — hero, action center, steps, MCP,
   feature columns, audiences, reviews, pricing. Sections are generic and
   data-driven (site.json → platform_detail → {slug}); colors follow the
   site tokens, with a few literal accents carried over from the mockup
   (chart red/green, Google wordmark colors, purple AI borders).
   -------------------------------------------------------------------------- */

/* New-tab marker inside the shared button partial (visually hidden) */
.site-button-new-tab-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;

  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* — Hero — */
.platform-hero-section {
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 70%);
  color: var(--c-ink);
  overflow: hidden;

}

.platform-hero-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 72px var(--wrap-pad) 96px;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: 88px;
  align-items: center;
}

.platform-hero-copy {
  min-width: 0;
}

.platform-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  background: #ffffff;
  border: 1px solid var(--c-border);
  font-size: 13px; /* Home hero-pill scale (.home-hero-section-label) */
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 20px;
}

.platform-hero-badge-platform {
  display: inline-grid;
  place-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

.platform-hero-heading {
  font-size: clamp(30px, 3.1vw, 40px);
  line-height: 1.12; /* Home hero scale (.home-hero-heading) */
  letter-spacing: var(--heading-letter-spacing);
  font-weight: 800;
  max-width: 13em;
  margin: 0;
  text-wrap: balance;
}

.platform-hero-heading-highlight {
  color: var(--c-brand);
}

.platform-hero-description {
  font-size: 17.5px; /* Home hero lead (.home-hero-description) */
  line-height: 1.6;
  color: #4a5576;
  max-width: 600px;
  margin: 22px 0 0;
}

.platform-hero-google-word {
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.platform-hero-google-word i {
  font-style: normal;
}

.platform-hero-google-word .is-blue { color: #4285f4; }
.platform-hero-google-word .is-red { color: #ea4335; }
.platform-hero-google-word .is-yellow { color: #fbbc05; }
.platform-hero-google-word .is-green { color: #34a853; }

.platform-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.platform-hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #4a5576;
}

.platform-hero-trust-list li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.platform-hero-trust-list b {
  color: var(--c-ink);
  font-weight: 700;
}

.platform-hero-trust-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.platform-hero-trust-icon svg {
  display: block;
}

.platform-hero-visual {
  position: relative;
  min-width: 0;
}

.platform-hero-window {
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  box-shadow: 0 40px 80px -40px rgba(11, 26, 59, .35), 0 12px 28px -18px rgba(11, 26, 59, .2);
  overflow: hidden;

}

.platform-hero-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e9ecf3;
}

.platform-hero-titlebar-icon {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}

.platform-hero-segment {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-md);
  background: #e9edf5;
}

.platform-hero-segment button {
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-body);
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s ease .1s;
}

.platform-hero-segment button.is-active {
  color: var(--c-ink);
}

.platform-hero-segment-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 2px 8px -2px rgba(11, 26, 59, .25);
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1);
}

.platform-hero-range {
  margin: 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-brand);
  background: var(--c-tint);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

.platform-hero-mock {
  padding: 18px;
  background: #f7f8fc;
}

.platform-hero-views {
  display: grid;
}

.platform-hero-view {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

.platform-hero-view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease .12s, transform .5s ease .12s, visibility 0s;
}

.platform-hero-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.platform-hero-kpi {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.platform-hero-kpi small {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;

  text-overflow: ellipsis;
}

.platform-hero-kpi strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 2px;
}

.platform-hero-kpi em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.platform-hero-chart {
  position: relative;
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 10px 12px 6px;
}

.platform-hero-chart svg {
  display: block;
  width: 100%;
  height: 96px;
}

.platform-hero-chart-note {
  position: absolute;
  top: 10px;
  right: 28px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c53030;
  background: #fdecec;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.platform-hero-summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  background: #ffffff;
  border: 1.5px solid #d9c8f6;
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.platform-hero-summary i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--c-purple);
  display: grid;
  place-items: center;
}

.platform-hero-summary p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a4566;
}

.platform-hero-summary b {
  color: var(--c-ink);
}

.platform-hero-moving-rows {
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 4px 12px;
}

.platform-hero-moving-rows div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px solid #f2f4f9;
}

.platform-hero-moving-rows div:last-child {
  border-bottom: 0;
}

.platform-hero-moving-rows span {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;

  text-overflow: ellipsis;
}

.platform-hero-moving-rows em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--c-muted-3);
  white-space: nowrap;
}

.platform-hero-moving-rows b {
  font-size: 12px;
  width: 40px;
  text-align: right;
}

.platform-hero-kpi em.is-up,
.platform-hero-moving-rows b.is-up {
  color: #12a05c;
}

.platform-hero-kpi em.is-down,
.platform-hero-moving-rows b.is-down {
  color: #c53030;
}

.platform-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.platform-hero-stats div {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--c-body);
}

.platform-hero-stats b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

.platform-hero-feed {
  position: relative;
  height: 306px;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}

.platform-hero-alert-frame {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .6s cubic-bezier(.65, 0, .35, 1), opacity .5s ease .1s;
}

.platform-hero-alert-frame.is-collapsing {
  grid-template-rows: 0fr;
  opacity: 0;
}

.platform-hero-alert-frame > div {
  overflow: hidden;

  min-height: 0;
}

.platform-hero-alert {
  margin: 0 0 8px;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid #c9d1e2;
  border-radius: var(--r-md);
  padding: 11px 13px;
}

.platform-hero-alert[data-kind="drop"] { border-left-color: #e5484d; }
.platform-hero-alert[data-kind="win"] { border-left-color: #12a05c; }
.platform-hero-alert[data-kind="ctr"] { border-left-color: #e3a008; }
.platform-hero-alert[data-kind="new"] { border-left-color: var(--c-brand); }

.platform-hero-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
}

.platform-hero-alert-chip {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.platform-hero-alert[data-kind="drop"] .platform-hero-alert-chip { background: #fdecec; color: #c53030; }
.platform-hero-alert[data-kind="win"] .platform-hero-alert-chip { background: #e7f7ef; color: #0d7d47; }
.platform-hero-alert[data-kind="ctr"] .platform-hero-alert-chip { background: #fff4e0; color: #a8650a; }
.platform-hero-alert[data-kind="new"] .platform-hero-alert-chip { background: var(--c-tint); color: #1a5fc4; }

.platform-hero-alert-head time {
  font-size: 10.5px;
  color: var(--c-muted-3);
}

.platform-hero-alert p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a4566;
}

.platform-hero-alert p b {
  color: var(--c-ink);
}

.platform-hero-alert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.platform-hero-alert-foot small {
  font-size: 11px;
  color: var(--c-body);
}

.platform-hero-alert-foot small b {
  color: #0d7d47;
}

.platform-hero-alert-fix {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: var(--c-brand);
  border-radius: 7px;
  padding: 5px 10px;
}

/* — AI Action Center — */
.platform-action-section {
  background: #f7f8fc;
  color: var(--c-ink);
}

.platform-action-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.platform-action-section .section-heading {
  margin-bottom: 32px;
}

.platform-action-tabs-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0 0 -1px;
}

.platform-action-tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.platform-action-tabs::-webkit-scrollbar {
  display: none;
}

.platform-action-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  box-sizing: border-box;
  border-radius: 14px 14px 0 0;
  background: var(--c-border-faint);
  border: 1px solid var(--c-border);
  border-bottom: 0;
  overflow: hidden;

  will-change: transform, width;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1), width .55s cubic-bezier(.65, 0, .35, 1);
}

.platform-action-progress {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: rgba(26, 115, 233, .15);
  overflow: hidden;

}

.platform-action-progress i {
  display: block;
  height: 100%;
  background: var(--c-brand);
  transform-origin: left center;
  transform: scaleX(0);
}

.platform-action-tab {
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  border-radius: 14px 14px 0 0;
  padding: 14px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .35s ease .1s;
}

.platform-action-tab:hover {
  color: var(--c-ink);
  background: rgba(11, 26, 59, .04);
}

.platform-action-tab[aria-selected="true"],
.platform-action-tab[aria-selected="true"]:hover {
  color: var(--c-ink);
  background: transparent;
}

.platform-action-tab:focus-visible {
  outline: 2px solid #1a73e9;
  outline-offset: -2px;
}

.platform-action-frame {
  display: grid;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-border-faint);
  padding: 24px;
  box-shadow: 0 30px 60px -44px rgba(11, 26, 59, .4);
}

.platform-action-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  opacity: 1;
  transform: none;
  transition: opacity .4s ease .08s, transform .4s ease .08s;
}

/* [hidden] keeps the panel in the grid cell (visibility, not display) so the
   crossfade can run and the no-JS fallback still stacks behind */
.platform-action-panel[hidden] {
  display: grid;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

.platform-action-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: 18px;
}

.platform-action-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 16px; /* Home compact card-title scale (.why-orgalytics-layer b) */
  font-weight: 700;
  margin: 0 0 12px;
}

.platform-action-card h3 small {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
}

.platform-action-table-wrap {
  overflow-x: auto;
}

.platform-action-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
}

.platform-action-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border-soft);
  white-space: nowrap;
}

.platform-action-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #f2f4f9;
  color: #3a4566;
}

.platform-action-table td:first-child {
  color: var(--c-ink);
  font-weight: 600;
}

.platform-action-table th:not(:first-child),
.platform-action-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.platform-action-table code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.platform-action-table .is-down {
  color: #c53030;
  font-weight: 600;
}

.platform-action-table .is-gain {
  color: #12a05c;
  font-weight: 600;
}

.platform-action-ai {
  min-width: 0;
  background: #ffffff;
  border: 1.5px solid #d9c8f6;
  border-radius: 14px;
  padding: 18px;
}

.platform-action-ai-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px; /* Home compact card-title scale (.why-orgalytics-layer b) */
  font-weight: 700;
  margin: 0 0 14px;
}

.platform-action-ai-heading i {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-purple);
  display: grid;
  place-items: center;
}

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

.platform-action-ai li {
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: #3a4566;
  background: #faf8fe;
  border-radius: 10px;
  padding: 12px;
}

.platform-action-ai li b {
  color: var(--c-ink);
}

.platform-action-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  margin: 0 0 6px;
}

.platform-action-chip.is-high { background: #fdecec; color: #c53030; }
.platform-action-chip.is-medium { background: #fff4e0; color: #a8650a; }
.platform-action-chip.is-opportunity { background: #e7f7ef; color: #0d7d47; }

/* — Setup steps — */
.platform-steps-section {
  background: #ffffff;
  color: var(--c-ink);
}

.platform-steps-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.platform-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.platform-steps-list li {
  min-width: 0;
  background: #f7f8fc;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px;
}

.platform-steps-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 18px;
}

.platform-steps-list h3 {
  font-size: 16px; /* Home compact card-title scale (.why-orgalytics-layer b) */
  font-weight: 700;
  margin: 0 0 10px;
}

.platform-steps-list p {
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-body);
  margin: 0;
}

.platform-steps-time {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px; /* Home hero-pill scale (.home-hero-section-label) */
  font-weight: 500;
  color: var(--c-ink);
  background: #f2f4f9;
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
}

.platform-steps-note {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px; /* Home card-body scale (.trust-card p) */
  line-height: 1.6;
  color: var(--c-body);
}

.platform-steps-note b {
  color: var(--c-ink);
}

/* — MCP connector (dark) — */
.platform-mcp-section {
  background: var(--c-dark);
  color: #ffffff;
  overflow: hidden;

}

.platform-mcp-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

/* This section left-aligns the shared heading block (mockup's own override) */
.platform-mcp-copy .section-heading {
  text-align: left;
  margin: 0 0 28px;
  max-width: none;
}

.platform-mcp-copy .section-description {
  margin: 16px 0 0;
}

.platform-mcp-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.platform-mcp-points li {
  display: flex;
  gap: 14px;
}

.platform-mcp-points li > i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #16264d;
  border: 1px solid #26396b;
  display: grid;
  place-items: center;
}

.platform-mcp-points b {
  display: block;
  font-size: 16px;
  margin: 0 0 3px;
}

.platform-mcp-points span {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-on-dark);
}

.platform-mcp-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 32px 0 0;
}

/* The global primary hover paints navy on a navy section — keep it blue */
.platform-mcp-section .site-button-primary:hover {
  background: rgba(61, 107, 255, .07);
}

.platform-mcp-chat {
  min-width: 0;
  background: #ffffff;
  border-radius: var(--r-xl);
  padding: 20px;
  color: var(--c-ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}

.platform-mcp-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--c-border-soft);
}

.platform-mcp-chat-header > b {
  font-size: 14px;
}

.platform-mcp-chat-apps {
  display: flex;
  gap: 6px;
}

.platform-mcp-chat-apps span {
  font-size: 11.5px;
  font-weight: 600;
  color: #3a4566;
  background: #f2f4f9;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

.platform-mcp-user-message {
  width: fit-content;
  max-width: 82%;
  margin: 0 0 14px auto;
  background: var(--c-brand);
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.platform-mcp-answer {
  display: flex;
  gap: 10px;
}

.platform-mcp-answer > i {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-brand), var(--c-purple));
  display: grid;
  place-items: center;
}

.platform-mcp-answer-body {
  min-width: 0;
  background: #f7f8fc;
  border-radius: 4px 16px 16px 16px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #3a4566;
}

.platform-mcp-answer-body p {
  margin: 0 0 10px;
}

.platform-mcp-answer-body ol {
  margin: 0 0 10px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.platform-mcp-answer-body b {
  color: var(--c-ink);
}

.platform-mcp-next-step {
  margin: 0;
  background: #ffffff;
  border: 1px solid #e4d6f8;
  border-radius: 10px;
  padding: 10px 12px;
}

.platform-mcp-input {
  display: flex;
  align-items: center;
  height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: #9aa3bd;
}

/* — Feature columns — */
.platform-feature-columns-section {
  background: #ffffff;
  color: var(--c-ink);
}

.platform-feature-columns-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.platform-feature-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--r-2xl);
  padding: 32px;
}

.platform-feature-column.is-blue { border: 1px solid #d6e5fc; }
.platform-feature-column.is-purple { border: 1px solid #e4d6f8; }

.platform-feature-column > h3 {
  font-size: 18px; /* Home card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0 0 8px;
}

.platform-feature-column > p {
  font-size: 15px; /* Home card-body scale (.trust-card p) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--c-border-soft);
}

.platform-feature-column-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
  grid-auto-rows: 1fr;
}

.platform-feature-column-list li {
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.platform-feature-column.is-blue .platform-feature-column-list li {
  background: #f7faff;
  border: 1px solid #e1ecfd;
}

.platform-feature-column.is-purple .platform-feature-column-list li {
  background: #faf7ff;
  border: 1px solid #ece2fa;
}

.platform-feature-column-list li:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(11, 26, 59, .45);
}

.platform-feature-column.is-blue .platform-feature-column-list li:hover {
  border-color: #c4dafb;
}

.platform-feature-column.is-purple .platform-feature-column-list li:hover {
  border-color: #d9c8f6;
}

.platform-feature-column-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}

.platform-feature-column-item-head i {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  place-items: center;
}

.platform-feature-column-item-head b {
  font-size: 16px;
  font-weight: 700;
}

.platform-feature-column-list span {
  display: block;
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-body);
  padding-left: 44px;
}

/* — Audiences — */
.platform-audiences-section {
  background: #f7f8fc;
  color: var(--c-ink);
}

.platform-audiences-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.platform-audiences-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px;
}

.platform-audiences-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-tint);
  display: grid;
  place-items: center;
}

.platform-audiences-card h3 {
  font-size: 18px; /* Home card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  margin: 14px 0 10px;
}

.platform-audiences-card > p {
  font-size: 15px; /* Home card-body scale (.trust-card p) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 0 20px;
}

.platform-audiences-question {
  margin-top: auto;
  background: #f4f8ff;
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-ink);
}

.platform-audiences-question small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-purple);
  margin: 0 0 4px;
}

/* — Reviews (dark) — */
.platform-reviews-section {
  background: var(--c-dark);
  color: #ffffff;
}

.platform-reviews-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.platform-reviews-score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  font-size: 15px;
  color: var(--c-on-dark);
}

.platform-reviews-score strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #ffffff;
}

.platform-reviews-stars {
  display: inline-flex;
  gap: 3px;
}

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

.platform-reviews-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  background: var(--c-dark-2);
  border: 1px solid #22335f;
  border-radius: 18px;
  padding: 26px;
}

.platform-reviews-card blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #ffffff;
}

.platform-reviews-card figcaption {
  margin-top: auto;
  font-size: 13.5px;
  color: #8a96b8;
}

.platform-reviews-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  text-align: center;
}

.platform-reviews-cta p {
  margin: 0;
  font-size: 13.5px;
  color: #8a96b8;
}

/* — Pricing — */
.platform-pricing-section {
  background: #ffffff;
  color: var(--c-ink);
}

.platform-pricing-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.platform-pricing-toggle {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}

.platform-pricing-switch {
  display: inline-flex;
  background: #f2f4f9;
  border-radius: var(--r-pill);
  padding: 4px;
}

.platform-pricing-switch button {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #3a4566;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.platform-pricing-switch button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--c-ink);
  box-shadow: 0 2px 8px -2px rgba(11, 26, 59, .2);
}

.platform-pricing-switch button:focus-visible {
  outline: 2px solid #1a73e9;
  outline-offset: 2px;
}

.platform-pricing-switch em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #0d7d47;
  margin-left: 6px;
}

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

.platform-pricing-plan {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 32px;
}

.platform-pricing-plan.is-featured {
  border: 2px solid var(--c-brand);
  box-shadow: 0 30px 60px -40px rgba(26, 115, 233, .6);
}

.platform-pricing-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

.platform-pricing-plan-head h3 {
  font-size: 18px; /* Home card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0;
}

.platform-pricing-badge {
  font-size: 12.5px;
  font-weight: 700;
  color: #0d7d47;
  background: #e7f7ef;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

.platform-pricing-badge:empty {
  display: none;
}

.platform-pricing-plan-description {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0 0 20px;
}

.platform-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
}

.platform-pricing-price strong {
  font-size: 34px; /* pricing page price-display role (.pricing-comparison-price-value) */
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.platform-pricing-was {
  font-size: 16px; /* pricing page was-price role (.pricing-comparison-price-was) */
  font-weight: 700;
  color: #9aa3bd;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-right: 4px;
}

.platform-pricing-was:empty {
  display: none;
}

.platform-pricing-price > span {
  font-size: 13px; /* pricing page price-suffix role (.pricing-comparison-price-suffix) */
  font-weight: 500;
  color: var(--c-body);
}

.platform-pricing-billing-note {
  font-size: 13.5px;
  color: var(--c-muted);
  margin: 0 0 24px;
  min-height: 20px;
}

.platform-pricing-plan ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.platform-pricing-plan li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #3a4566;
}

.platform-pricing-plan li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.platform-pricing-plan .site-button {
  margin-top: auto;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Pricing page (.pricing-*) — hero platform picker, plan comparison card
   and included-in-every-plan cards. Mockup fidelity:
   pricing-specific sizes/offsets come from the pricing mockup; colors use
   the site tokens wherever the mockup value matches one. Shared pieces
   (section headings, FAQ, final CTA, .site-button) keep their site styles
   with local size overrides only. Media queries live in responsive.css.
   -------------------------------------------------------------------------- */

/* Hero: heading, lead, platform tabs */
/* Pricing hero follows the site's page-hero conventions (features hero):
   same container behavior, H1 scale and lead treatment — see .ofh-in,
   .ofh-h1, .ofh-sub — but deliberately tighter paddings (50/30, not
   .ofh's 56/64). The billing switch renders with the comparison
   section it controls, so the introduction ends at the platform tabs. */
.pricing-hero-section {
  background: var(--c-surface);
  color: var(--c-ink);
}

.pricing-hero-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 50px var(--wrap-pad) 30px;
  box-sizing: border-box;
  text-align: center;
}

.pricing-hero-title {
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 40px); /* Home hero H1 scale (.home-hero-heading) */
  line-height: 1.12;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 auto 18px;
  max-width: 860px;
  text-wrap: balance;
}

.pricing-hero-title [data-platform-name] {
  color: var(--c-brand);
}

.pricing-hero-lead {
  font-size: 17.5px; /* Home hero lead (.home-hero-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 auto 30px;
  max-width: 680px;
}

.pricing-platform-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.pricing-platform-tab:hover {
  border-color: #b9cdf3;
}

.pricing-platform-tab[aria-selected="true"] {
  border-color: var(--c-brand);
  background: var(--c-tint);
  box-shadow: 0 8px 22px -12px rgba(26, 115, 233, .55);
}

.pricing-platform-tab:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}

/* Logo chip: neutral soft square behind each platform's real logo asset */
.pricing-platform-tab-logo {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--c-bg-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;

}

.pricing-platform-tab-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pricing-billing-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 28px;
}

.pricing-billing-switch {
  display: inline-flex;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--c-border-faint);
}

.pricing-billing-switch button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-billing-switch button[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 2px 8px rgba(11, 26, 59, .08);
}

.pricing-billing-switch button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.pricing-billing-switch [data-save-badge] {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #188038;
  background: var(--c-ok-bg);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

.pricing-billing-note {
  font-size: 13.5px; /* Home small-support scale */
  color: var(--c-muted-2);
  margin: 0;
}

/* Comparison card — the site's soft section tone (#f7f8fc, as on the
   homepage analytics/FAQ sections) gives the hero → comparison transition
   a clean edge; the card itself stays white and pops off it. */
.pricing-comparison-section {
  background: #f7f8fc;
  color: var(--c-ink);
}

.pricing-comparison-inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 24px var(--wrap-pad) 80px;
  box-sizing: border-box;
}

.pricing-comparison-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px -40px rgba(11, 26, 59, .25);
}

/* Plan header: intro cell + Basic + paid plan (38/31/31) */
.pricing-comparison-head {
  display: grid;
  grid-template-columns: 38% 31% 31%;
  border-bottom: 1.5px solid var(--c-border);
  border-radius: 18.5px 18.5px 0 0;
}

.pricing-comparison-intro {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 18.5px 0 0 0;
}

.pricing-comparison-title {
  font-size: clamp(26px, 2.5vw, 34px); /* Home section-H2 scale (.section-heading-title) */
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0;
}

.pricing-comparison-intro-app {
  color: var(--c-brand);
}

.pricing-comparison-intro-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-tint);
  margin: 0 0 12px;
}

.pricing-comparison-intro-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-body);
  margin: 6px 0 0;
}

.pricing-comparison-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border-left: 1.5px solid #eef0f5;
  min-width: 0;
}

.pricing-comparison-plan.is-featured {
  background: #eef4fe;
  border-radius: 0 18.5px 0 0;
}

/* Basic plan column carries a light green tint (head cell here, the
   feature-table column below); the paid column keeps its brand-blue tint */
.pricing-comparison-head .pricing-comparison-plan:nth-child(2) {
  background: #e6f4ea;
}

.pricing-comparison-recommended {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(26, 115, 233, .7);
}

.pricing-comparison-recommended svg {
  display: block;
}

.pricing-comparison-plan-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.pricing-comparison-plan-name h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0;
}

.pricing-comparison-plan-description {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-body);
  margin: 4px 0 0;
  min-height: 40px;
}

.pricing-comparison-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
}

.pricing-comparison-price-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

/* Cents in a price display render as a small superscript next to the
   dollars ($11<sup>20</sup>, the app-market price style). Relative
   positioning raises the digits without touching the line box. */
.pricing-comparison-price-value sup,
.pricing-comparison-sticky-bar small sup {
  font-size: .55em;
  line-height: 0;
  position: relative;
  top: -.55em;
  vertical-align: baseline;
}

.pricing-comparison-price-was {
  font-size: 16px;
  font-weight: 700;
  color: #9aa3bd;
  text-decoration-thickness: 2px;
}

.pricing-comparison-price-was:empty {
  display: none;
}

.pricing-comparison-price-suffix {
  font-size: 13px;
  color: var(--c-body);
  font-weight: 500;
}

.pricing-comparison-billing {
  font-size: 13px;
  color: var(--c-muted-2);
  margin: 4px 0 14px;
  min-height: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.pricing-comparison-offer {
  font-size: 12px;
  font-weight: 700;
  color: #188038;
  white-space: nowrap;
}

.pricing-comparison-offer:not(:empty)::before {
  content: "\00b7";
  margin: 0 6px 0 2px;
  color: #b9c0d4;
}

.pricing-comparison-offer:empty {
  display: none;
}

/* Compact sticky bar: collapses (static, zero height) while the plan header
   is on screen — main.js toggles .is-at-top on the card */
.pricing-comparison-sticky-bar {
  position: sticky;
  top: 72px;
  z-index: 3;
  display: grid;
  grid-template-columns: 38% 31% 31%;
  background: var(--c-surface);
  box-shadow: 0 1.5px 0 var(--c-border);
  transition: opacity var(--t-fast);
}

.pricing-comparison-sticky-bar > div {
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.pricing-comparison-sticky-bar > div:first-child {
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 700;
}

.pricing-comparison-sticky-bar b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.pricing-comparison-sticky-bar .is-featured b {
  color: var(--c-brand);
}

.pricing-comparison-sticky-bar small {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  white-space: nowrap;
}

.pricing-comparison-sticky-bar .site-button {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

.pricing-comparison-card.is-at-top .pricing-comparison-sticky-bar {
  position: static;
  height: 0;
  overflow: hidden;

  opacity: 0;
  box-shadow: none;
}

/* Feature table */
.pricing-comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pricing-comparison-col-feature { width: 38%; }
.pricing-comparison-col-basic { width: 31%; }
.pricing-comparison-col-paid { width: 31%; }

.pricing-comparison-table tbody th {
  font-size: 15px; /* Home row-label scale (.platform-name-label) */
  font-weight: 600;
  text-align: left;
  padding: 12px 26px;
  border-bottom: 1px solid #f0f2f7;
  color: var(--c-ink);
  vertical-align: middle;
  width: 38%;
}

.pricing-comparison-table tbody th small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: #8a93ad;
  line-height: 1.45;
  margin-top: 2px;
}

.pricing-comparison-table tbody td {
  padding: 12px 22px;
  border-bottom: 1px solid #f0f2f7;
  /* same interior column divider as the plan header above */
  border-left: 1.5px solid #eef0f5;
  text-align: center;
  font-size: 14px;
  color: #3a4566;
  vertical-align: middle;
}

.pricing-comparison-table tbody td:first-of-type {
  background: #e6f4ea;
}

.pricing-comparison-table tbody td:last-child {
  background: #eef4fe;
}

/* Table wrapper: carries the card's bottom corners (the old foot strip
   was removed with its note; overflow clips the tinted column ends to
   the rounded card edge without touching the sticky bar above) */
.pricing-comparison-table-wrap {
  border-radius: 0 0 18.5px 18.5px;
  overflow: hidden;

}

.pricing-comparison-table tbody tr:last-child th,
.pricing-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-comparison-included {
  display: inline-block;
  vertical-align: middle;
}

.pricing-comparison-excluded {
  display: inline-block;
  width: 12px;
  height: 2px;
  background: #d6dbe8;
  border-radius: 2px;
  vertical-align: middle;
}

/* Plan-header buttons (moved up from a bottom foot strip) — same
   site-button design, one size down from the old foot buttons.
   margin-top:auto pins both CTAs to the cell bottoms so they line up
   across the columns (the billing line's bottom margin is the
   minimum gap when there is no free space, e.g. stacked on mobile) */
.pricing-comparison-plan .site-button {
  margin-top: auto;
  width: 100%;
  padding: 0 12px;
  height: 38px;
  font-size: 13px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Included in every plan */
.pricing-included-section {
  background: var(--c-surface);
  color: var(--c-ink);
}

.pricing-included-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 88px var(--wrap-pad);
  box-sizing: border-box;
}

.pricing-included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.pricing-included-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 26px 24px;
}

.pricing-included-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px; /* Home card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0;
}

.pricing-included-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-tint);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pricing-included-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pricing-included-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px; /* Home card-body scale (.trust-card p) */
  line-height: 1.6;
  color: #3a4566;
}

.pricing-included-points li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Contact page (.contact-*) — hero, message form card and information
   column. Typography follows the Home page (not the mockup): the hero
   reuses Home's hero H1/lead scale (.home-hero-heading /
   .home-hero-description), card headings Home's card titles (.trust-card
   h3 / .why-orgalytics-layer b), card text the trust-card body, and
   small notes Home's 13.5px supporting size. Form labels/inputs follow
   the site's existing form typography (login gate .gate-label /
   .gate-input / .gate-error). Colors use the site tokens wherever the
   mockup value matches one (blue → --c-brand, soft blue → --c-tint,
   greens → --c-ok / --c-ok-bg, red → --c-err, borders → --c-border).
   The submit button is the site .site-button. Media queries live in
   responsive.css.
   -------------------------------------------------------------------------- */

/* Hero: soft gradient with a faint grid pattern behind a centered title
   (page-hero conventions: same container, H1 scale and lead treatment as
   the features / pricing heroes). The Terms and Conditions, Privacy
   Policy, Refund Policy and WordPress help pages' heroes are the same
   device — their .terms-hero-*, .privacy-hero-*, .refund-hero-* and
   .wordpress-help-hero-* classes share these rules. */
.contact-hero-section,
.terms-hero-section,
.privacy-hero-section,
.refund-hero-section,
.wordpress-help-hero-section {
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-surface) 100%);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}

.contact-hero-grid-background,
.terms-hero-grid-background,
.privacy-hero-grid-background,
.refund-hero-grid-background,
.wordpress-help-hero-grid-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 20%, transparent 75%);
}

.contact-hero-inner,
.terms-hero-inner,
.privacy-hero-inner,
.refund-hero-inner,
.wordpress-help-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 56px var(--wrap-pad) 64px;
}

.contact-hero-title,
.terms-hero-title,
.privacy-hero-title,
.refund-hero-title,
.wordpress-help-hero-title {
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 40px); /* Home hero H1 scale (.home-hero-heading) */
  line-height: 1.12;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.contact-hero-lead,
.terms-hero-lead,
.privacy-hero-lead,
.refund-hero-lead,
.wordpress-help-hero-lead {
  font-size: 17.5px; /* Home hero lead (.home-hero-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 auto;
  max-width: 620px;
}

/* Main grid: form card left, information column right */
.contact-section {
  background: var(--c-surface);
  color: var(--c-ink);
}

.contact-section-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 56px var(--wrap-pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}

/* Form card */
.contact-form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 36px;
  scroll-margin-top: 88px; /* keep the is-sent scroll clear of the sticky header */
}

.contact-form-card-title {
  margin: 0 0 6px;
  font-size: 18px; /* Home card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.contact-form-card-lead {
  margin: 0 0 28px;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.6; /* site card-body rhythm (.trust-card p) */
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contact-form-field.is-full-width {
  grid-column: 1 / -1;
}

.contact-form-label {
  font-size: 14px;
  font-weight: 500; /* site form-label weight (.gate-label) */
  color: var(--c-ink-2);
}

.contact-form-required-mark {
  color: var(--c-brand);
  margin-left: 2px;
}

.contact-form-control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #b9c4d3; /* mockup value — inputs want a firmer edge than --c-border */
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.contact-form-control::placeholder {
  color: var(--c-muted);
  opacity: .8;
}

.contact-form-control:hover {
  border-color: var(--c-brand);
}

.contact-form-control:focus {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-focus);
  outline: none;
}

textarea.contact-form-control {
  height: auto;
  min-height: 132px;
  padding: 12px 14px;
  resize: vertical;
}

select.contact-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236a7290' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.contact-form-field.is-invalid .contact-form-control {
  border-color: var(--c-err);
}

.contact-form-error-text {
  display: none;
  font-size: 14px; /* site form-error text size (.gate-error) */
  color: var(--c-err);
}

.contact-form-field.is-invalid .contact-form-error-text {
  display: block;
}

/* Hidden honeypot: off-screen (not display:none, so bots that check for
   hidden fields still fill it) and out of the tab order. */
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;

}

.contact-form-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.contact-form-submit-button {
  height: 46px;
  padding: 0 24px;
  border: none;
  cursor: pointer;
}

.contact-form-note {
  font-size: 13.5px; /* site small-note scale (.final-call-to-action-reassurance) */
  color: var(--c-body);
}

.contact-form-note a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Success state: replaces the form after a sent message (.is-sent on the
   card, added by main.js or server-side for the ?sent=1 fallback). */
.contact-form-success {
  display: none;
  padding: 20px 22px;
  border-radius: 10px;
  background: var(--c-ok-bg);
  border: 1px solid rgba(19, 115, 51, .35); /* --c-ok at 35% */
  color: var(--c-ink-2);
}

.contact-form-success strong {
  color: var(--c-text);
}

.contact-form-success p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6; /* site card-body rhythm (.trust-card p) */
  color: var(--c-body);
}

.contact-form-card.is-sent .contact-form {
  display: none;
}

.contact-form-card.is-sent .contact-form-success {
  display: block;
}

/* Failure note (submission could not be stored / rate limited) */
.contact-form-failure-note {
  display: none;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--c-err-bg);
  border: 1px solid rgba(197, 34, 31, .3); /* --c-err at 30% */
  color: var(--c-err);
  font-size: 14px; /* .gate-error banner treatment (regular weight) */
}

.contact-form-failure-note.is-visible {
  display: block;
}

/* Information column */
.contact-information-column {
  display: grid;
  gap: 16px;
}

.contact-information-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.contact-information-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-information-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--c-tint);
  color: var(--c-brand);
}

.contact-information-icon.is-success {
  background: var(--c-ok-bg);
  color: var(--c-text);
}

.contact-information-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700; /* Home compact card-title weight (.why-orgalytics-layer b) */
  color: var(--c-ink);
}

.contact-information-text {
  margin: 0;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.6; /* site card-body rhythm (.trust-card p) */
}

.contact-information-text + .contact-information-text {
  margin-top: 8px;
}

.contact-information-link {
  color: var(--c-brand);
  font-weight: 600;
}

.contact-information-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-information-quick-links {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.contact-information-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-2);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
}

.contact-information-quick-link:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.contact-information-quick-link svg {
  flex-shrink: 0;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------

/* Contact card: centered card with contact details. */
.contact-card-section {
  padding: 56px 0 80px;
}

.contact-card-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.contact-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--c-brand);
  padding: 40px 40px;
  margin: 0 auto;
  max-width: 560px;
  position: relative;
}

.contact-card-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 4px 12px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.contact-card-line:last-child {
  margin-bottom: 0;
}

.contact-card-line:hover {
  background: rgba(26, 115, 233, 0.03);
}

.contact-card-label {
  flex: none;
  width: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink-2);
  letter-spacing: 0.02em;
}

.contact-card-link {
  color: var(--c-brand);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(26, 115, 233, 0.25);
  transition: all 0.15s ease;
}

.contact-card-link:hover {
  border-bottom-color: var(--c-brand);
}

.contact-card-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-body);
}
   About page (.about-*) — hero with key-facts stats strip, founding story,
   mission cards, technology steps, trust cards and platform link cards.
   The section heads and the closing dark panel are the shared components
   (section-heading / final-call-to-action); everything here is page-
   specific. Typography follows the Home page (not the mockup): hero
   H1/lead on Home's hero scale (.home-hero-heading /
   .home-hero-description), stat numbers on Home's analytics KPI scale
   (.analytics-kpi-card b/span), the story H2 on the shared section-H2
   scale and its body on the section-description scale, card
   titles/bodies on Home's card scales (.trust-card h3/p,
   .why-orgalytics-layer b/small), platform names on
   .platform-name-label. Colors, surfaces and borders use the site tokens
   (soft section background → --c-bg-soft, borders → --c-border, body
   text → --c-body). Media queries live in responsive.css.
   -------------------------------------------------------------------------- */

/* Section rhythm shared by the page-specific about sections: the site
   container, the mockup's generous vertical padding, and alternating
   soft / white surfaces. */
.about-story-section,
.about-mission-section,
.about-technology-section,
.about-trust-section,
.about-platforms-section {
  color: var(--c-ink);
}

.about-story-inner,
.about-mission-inner,
.about-technology-inner,
.about-trust-inner,
.about-platforms-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

/* Scroll reveal (the mockup's staggered fade-up; main.js adds .is-in when
   an element enters the viewport — reduced-motion users get everything
   visible immediately, see responsive.css). */
.about-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.about-reveal.is-in {
  opacity: 1;
  transform: none;
}

.about-reveal-delay-1 { transition-delay: .07s; }
.about-reveal-delay-2 { transition-delay: .14s; }
.about-reveal-delay-3 { transition-delay: .21s; }
.about-reveal-delay-4 { transition-delay: .28s; }
.about-reveal-delay-5 { transition-delay: .35s; }

/* Hero: soft surface, centered page-hero H1 and lead; the stats strip
   hangs half of its height over the hero's bottom edge into the story
   section (which pads its top to make room). */
.about-hero-section {
  background: var(--c-bg-soft);
  color: var(--c-ink);
  text-align: center;
}

.about-hero-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 72px var(--wrap-pad) 0;
}

.about-hero-title {
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 40px); /* Home hero H1 scale (.home-hero-heading) */
  line-height: 1.12;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
}

.about-hero-title-highlight {
  color: var(--c-brand);
}

.about-hero-lead {
  font-size: 17.5px; /* Home hero lead (.home-hero-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 18px auto 0;
  max-width: 640px;
}

.about-hero-stat-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 20px;
  transform: translateY(50%);
  position: relative;
  z-index: 1;
}

.about-hero-stat {
  padding: 22px 24px;
  text-align: center;
}

.about-hero-stat + .about-hero-stat {
  border-left: 1.5px solid var(--c-border);
}

.about-hero-stat-value {
  display: block;
  font-size: 22px; /* site stat-number scale (.analytics-kpi-card b) */
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.about-hero-stat-label {
  display: block;
  font-size: 12.5px; /* Home stat sub-text under the value (.analytics-kpi-card span) */
  color: var(--c-body);
  margin-top: 4px;
}

/* Founding story: photo card left, story text right. */
.about-story-section {
  background: var(--c-surface);
}

.about-story-inner {
  padding-top: 110px; /* room for the hero stats strip hanging over this section */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}

.about-story-photo-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;

  background: linear-gradient(160deg, var(--c-tint), var(--c-bg-soft) 55%, #f8f5ff);
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--c-border);
}

.about-story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.about-story-photo-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 16px 36px -24px rgba(11, 26, 59, .35);
}

.about-story-photo-caption-name {
  display: block;
  font-size: 16px;
  font-weight: 700; /* Home compact card-title weight (.why-orgalytics-layer b) */
  color: var(--c-ink);
}

.about-story-photo-caption-role {
  display: block;
  font-size: 13.5px; /* site caption scale */
  color: var(--c-body);
  margin-top: 2px;
}

.about-story-label {
  margin: 0 0 18px;
}

.about-story-title {
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 34px); /* Home section-H2 scale (.section-heading-title) */
  line-height: 1.15;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
}

.about-story-title-highlight {
  color: var(--c-brand);
}

.about-story-paragraph {
  font-size: 17px; /* Home body-description scale (.section-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 16px 0 0;
}

.about-story-paragraph-lead {
  color: var(--c-ink);
  font-weight: 700;
}

.about-story-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
}

.about-story-social-heading {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-body);
  margin-right: 4px;
}

.about-story-social-link {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1.5px solid var(--c-border);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.about-story-social-link:hover {
  border-color: #b9cdf3; /* mockup value — the soft hover edge between --c-tint and --c-brand */
  background: var(--c-tint);
}

.about-story-social-link:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* Mission: three principle cards on the soft surface. */
.about-mission-section {
  background: var(--c-bg-soft);
}

.about-mission-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.about-mission-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 18px;
  padding: 28px 26px;
}

/* The icon tile both card sections use (soft blue square, brand-blue
   glyph). */
.about-card-icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  margin: 0 0 18px;
}

.about-mission-card-title {
  font-size: 18px; /* site card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  margin: 0;
  color: var(--c-ink);
}

.about-mission-card-description {
  font-size: 15px;
  line-height: 1.6; /* site card-body rhythm (.trust-card p) */
  color: var(--c-body);
  margin: 8px 0 0;
}

/* Technology: four numbered steps joined by connector lines on the white
   surface. */
.about-technology-section {
  background: var(--c-surface);
}

.about-technology-step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-technology-step {
  position: relative;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 18px;
  padding: 26px 24px;
}

.about-technology-step + .about-technology-step::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 40px;
  width: 20px;
  height: 2px;
  background: #dde3ef; /* mockup value — the connector needs a firmer tone than --c-border */
}

.about-technology-step-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: 12.5px;
  font-weight: 600; /* site small-label weight (.section-label) */
  margin: 0 0 16px;
}

.about-technology-step-title {
  font-size: 16px; /* Home compact card-title scale (.why-orgalytics-layer b) */
  font-weight: 700;
  margin: 0;
  color: var(--c-ink);
}

.about-technology-step-description {
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-body);
  margin: 8px 0 0;
}

.about-technology-step-highlight {
  display: block;
  font-style: normal;
  font-size: 13.5px; /* site caption scale, emphasized */
  font-weight: 600;
  color: var(--c-brand);
  margin: 14px 0 0;
}

/* Trust: six horizontal cards back on the soft surface. */
.about-trust-section {
  background: var(--c-bg-soft);
}

.about-trust-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.about-trust-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
}

.about-trust-card .about-card-icon-tile {
  flex-shrink: 0;
  margin: 0;
}

.about-trust-card-title {
  font-size: 16px;
  font-weight: 700; /* Home compact card-title weight (.why-orgalytics-layer b) */
  margin: 0;
  color: var(--c-ink);
}

.about-trust-card-description {
  font-size: 13.5px; /* Home compact card text (.why-orgalytics-layer small) */
  line-height: 1.45;
  color: var(--c-body);
  margin: 6px 0 0;
}

/* Platforms: five link cards with the real logo marks on white tiles. */
.about-platforms-section {
  background: var(--c-surface);
}

.about-platform-card-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.about-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 16px 22px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 18px;
  color: var(--c-ink);
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.about-platform-card:hover {
  transform: translateY(-3px);
  border-color: #b9cdf3; /* mockup value — the platform cards' hover edge */
  box-shadow: 0 18px 40px -28px rgba(26, 115, 233, .45);
}

.about-platform-card:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.about-platform-card-logo-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  overflow: hidden;

}

.about-platform-card-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.about-platform-card-name {
  font-size: 15px;
  font-weight: 600; /* site platform-name label (.platform-name-label) */
  color: var(--c-ink);
}

.about-platform-card-marketplace {
  font-size: 13.5px; /* site caption scale */
  color: var(--c-muted-2);
}

/* Closing panel: the shared final-call-to-action component on this page's
   soft section background (the mockup's alternating rhythm — every other
   section is soft, and the platform cards above end on white). */
.about-page .final-call-to-action-section {
  background: var(--c-bg-soft);
}

/* --------------------------------------------------------------------------
   Terms and Conditions (.terms-*) / Privacy Policy (.privacy-*) pages —
   legal reading column. The heroes reuse the contact hero rules above
   (shared selectors); everything in this block is the document column
   below it, shared by both pages. Typography follows the Home page (not
   the mockups): clause headings the shared section-H2 scale
   (.section-heading-title), body paragraphs and list items the
   section-description body scale, sub-headings (privacy clause 1) the
   large card title scale, the Last Updated line Home's 13.5px supporting
   size with label-weight emphasis. Inline links use the site brand
   token. The 760px column matches the site's existing narrow reading
   width (.platform-steps-note). Media queries live in responsive.css.
   -------------------------------------------------------------------------- */

.terms-legal-section,
.privacy-legal-section,
.refund-legal-section {
  background: var(--c-surface);
  color: var(--c-ink);
}

.terms-legal-inner,
.privacy-legal-inner,
.refund-legal-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 56px var(--wrap-pad) 80px;
}

.terms-last-updated,
.privacy-last-updated,
.refund-last-updated {
  font-size: 13.5px; /* Home supporting-text size (.home-hero-reassurance-line) */
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 20px;
}

.terms-intro,
.privacy-intro,
.refund-intro {
  margin-bottom: 40px;
}

/* Clause body text: the long-form prose scale (shared section-description
   body role) for paragraphs and the bullet list alike. */
.terms-intro p,
.terms-clause p,
.terms-clause-list li,
.privacy-intro p,
.privacy-clause p,
.privacy-clause-list li,
.refund-intro p,
.refund-clause p,
.refund-clause-list li {
  font-size: 17px; /* Home body-description scale (.section-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0 0 12px;
}

.terms-clause,
.privacy-clause,
.refund-clause {
  padding-top: 8px;
  margin-bottom: 40px;
}

.terms-clause-heading,
.privacy-clause-heading,
.refund-clause-heading {
  font-size: clamp(26px, 2.5vw, 34px); /* Home section-H2 scale (.section-heading-title) */
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 0 12px;
}

/* Privacy-only: sub-headings inside a clause (1.1 Account Information,
   ...). The large card title scale (.trust-card h3), which is the site's
   standing role for a heading one step below a section H2. */
.privacy-subheading,
.refund-subheading {
  font-size: 18px; /* Home large-card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 28px 0 10px;
}

.terms-clause-list,
.privacy-clause-list,
.refund-clause-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.terms-clause-list li,
.privacy-clause-list li,
.refund-clause-list li {
  position: relative;
  padding-left: 22px;
  margin: 0;
}

.terms-clause-list li::before,
.privacy-clause-list li::before,
.refund-clause-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* Inline links inside the legal text (Privacy Policy, support email). */
.terms-intro a,
.terms-clause a,
.privacy-intro a,
.privacy-clause a,
.refund-intro a,
.refund-clause a {
  color: var(--c-brand);
  font-weight: 600;
}

.terms-intro a:hover,
.terms-clause a:hover,
.privacy-intro a:hover,
.privacy-clause a:hover,
.refund-intro a:hover,
.refund-clause a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   How It Works page — multi-section marketing page.
   Reuses existing site variables and button classes; adds only the
   section/layout classes needed for this page's sections.
   -------------------------------------------------------------------------- */

/* Wix page: restore dark background on Reviews section (overridden by even-section rule on even-positioned sections). */
body.wix-page .platform-reviews-section {
  background: var(--c-dark);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   How It Works (.how-it-works-*) — hero, overview, steps, benefits, why, CTA
   -------------------------------------------------------------------------- */

/* Hero section */
.how-it-works-hero-section {
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-surface) 100%);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  position: relative;
  overflow: hidden;

}

.how-it-works-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.how-it-works-hero-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad) 88px;
  position: relative;
}

.how-it-works-hero-heading {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.1;
  color: var(--c-ink);
}

.how-it-works-hero-lead {
  margin: 0 auto;
  max-width: 600px;
  font-size: 18px;
  color: var(--c-body);
}

.how-it-works-hero-actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.how-it-works-hero-trust {
  margin: 28px 0 0;
  display: flex;
  gap: 12px 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15.5px;
  color: var(--c-body);
}

/* Section head (shared) */
.how-it-works-section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.how-it-works-section-heading {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.15;
  color: var(--c-ink);
}

.how-it-works-section-description {
  margin: 0;
  font-size: 17px;
  color: var(--c-muted);
}

/* Overview timeline */
.how-it-works-overview-section {
  padding: 96px 0;
  background: var(--c-bg-soft);
}

.how-it-works-overview-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.how-it-works-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}

.how-it-works-timeline::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-border) 0%, var(--c-brand) 50%, var(--c-border) 100%);
  opacity: .6;
}

.how-it-works-timeline li {
  position: relative;
  text-align: center;
}

.how-it-works-timeline-ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--c-surface);
  color: var(--c-brand);
  border: 1px solid var(--c-border);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-panel);
}

.how-it-works-timeline-ic svg {
  width: 24px;
  height: 24px;
}

.how-it-works-timeline-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
}

.how-it-works-timeline-subtitle {
  display: block;
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 3px;
}

/* Steps */
.how-it-works-step-section {
  padding: 64px 0;
}

.how-it-works-step-section + .how-it-works-step-section {
  border-top: 1px solid var(--c-border);
}

/* Alternating step rhythm: the flipped steps (2nd and 4th) take the soft
   background so the five-step flow reads as white/soft pairs, not one long
   white band. */
.how-it-works-step-section.how-it-works-step-flip {
  background: #f7f8fc;
}

.how-it-works-step-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
}

.how-it-works-step-copy.how-it-works-step-copy-flip {
  order: 2;
}

.how-it-works-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-brand);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 20px;
}

.how-it-works-step-badge b {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.how-it-works-step-heading {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.2;
  color: var(--c-ink);
}

.how-it-works-step-body {
  margin: 0;
  font-size: 16.5px;
  color: var(--c-body);
}

.how-it-works-step-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.how-it-works-step-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--c-body);
}

.how-it-works-step-list li svg {
  flex: none;
  margin-top: 2px;
}

.how-it-works-step-figure {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: clamp(20px, 3.2vw, 36px);
}

.how-it-works-step-figure img {
  width: 100%;
  height: auto;

  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  filter: drop-shadow(0 10px 20px rgba(11, 26, 59, 0.18));
  background: var(--c-surface);
}

/* Benefits */
.how-it-works-benefits-section {
  padding: 96px 0;
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.how-it-works-benefits-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.how-it-works-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.how-it-works-benefit-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 20px;
  align-items: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px;
}

.how-it-works-benefit-tile {
  grid-row: 1 / span 2;
  margin-top: 12px;
}

.how-it-works-benefit-tile svg {
  width: 24px;
  height: 24px;
  color: var(--c-brand);
}

.how-it-works-benefit-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.3;
  color: var(--c-ink);
  align-self: center;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.how-it-works-benefit-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* Why */
.how-it-works-why-section {
  padding: 96px 0;
}

.how-it-works-why-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.how-it-works-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  overflow: hidden;

}

.how-it-works-why-card {
  border: 0;
  border-radius: 0;
  padding: 32px 28px;
  background: var(--c-surface);
}

.how-it-works-why-tile svg {
  width: 24px;
  height: 24px;
}

.how-it-works-why-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.3;
  color: var(--c-ink);
}

.how-it-works-why-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* CTA */
.how-it-works-cta-section {
  background: #f7f8fc; /* separates the closing dark panel from the white why-cards section above */
  padding: 0 0 96px;
}

.how-it-works-cta-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.how-it-works-cta-box {
  position: relative;
  overflow: hidden;

  background: var(--c-dark);
  color: #ffffff;
  border-radius: 20px;
  padding: 72px 32px;
  text-align: center;
}

.how-it-works-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 75%);
  pointer-events: none;
}

.how-it-works-cta-heading {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.15;
  color: #ffffff;
}

.how-it-works-cta-description {
  margin: 0 auto;
  max-width: 520px;
  font-size: 16.5px;
  color: rgba(255,255,255,.78);
}

.how-it-works-cta-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.how-it-works-cta-checks {
  margin: 24px 0 0;
  display: flex;
  gap: 12px 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15.5px;
  color: rgba(255,255,255,.88);
}


.how-it-works-cta-checks span{
    display: flex;
    align-items: center;
  
    gap: 10px;
}
.how-it-works-why-tile{
    background: aliceblue;
    color: #1a73e9;
    padding: 8px;
    display: flex;
    align-items: center;
    width: max-content;
   border-radius: 10px;
   margin-bottom:10px;
}
.how-it-works-hero-trust span{
    display: flex;
    align-items: center;
    gap: 12px;

}
   



/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes homeHeroUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes homeHeroPop {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes homeHeroShine {
  0%, 72% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(260%) skewX(-20deg); }
}

@keyframes homeHeroDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-40px, 24px, 0); }
}

@keyframes heroDashboardDraw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes heroDashboardFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mcpFlow {
  to { background-position: 20px 0; }
}

@keyframes mcpPacket {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}


/* ==========================================================================
   MCP Connector page — page-specific family (route /mcp-connector).
   Everything is namespaced .mcp-connector-* so nothing can leak to other
   pages; shared pieces (section-heading, site-button, FAQ, final CTA,
   header/footer) keep their own classes. All media queries live in
   responsive.css. Icons are currentColor strokes on tinted tiles.
   ========================================================================== */

/* — Hero — */
.mcp-connector-hero-section {
  position: relative;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 70%);
  color: var(--c-ink);
  overflow: hidden;
}

.mcp-connector-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 320px at 78% 10%, rgba(26, 115, 233, .12), transparent 70%),
    radial-gradient(520px 300px at 10% 90%, rgba(148, 95, 224, .08), transparent 70%);
  pointer-events: none;
}

.mcp-connector-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 72px var(--wrap-pad) 96px;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: 88px;
  align-items: center;
}

.mcp-connector-hero-copy {
  min-width: 0;
}

.mcp-connector-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: #ffffff;
  border: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 22px;
}

.mcp-connector-hero-badge svg {
  width: 22px;
  height: 22px;
  color: var(--c-brand);
}

.mcp-connector-hero-heading {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.1vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  text-wrap: balance;
}

.mcp-connector-hero-heading-highlight {
  color: var(--c-brand);
}

.mcp-connector-hero-description {
  margin: 0 0 26px;
  max-width: 560px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--c-body);
}

.mcp-connector-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.mcp-connector-hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mcp-connector-hero-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-body-2);
}

/* — Hero visual (decorative preview window) — */
.mcp-connector-hero-visual {
  min-width: 0;
}

.mcp-connector-hero-window {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: 0 40px 80px -48px rgba(11, 26, 59, .45);
  padding: 22px;
}

.mcp-connector-hero-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mcp-connector-flow-node {
  flex: 0 0 auto;
  width: 104px;
  text-align: center;
}

.mcp-connector-flow-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #eef3ff;
  color: var(--c-brand);
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
}

.mcp-connector-flow-tile.is-navy {
  background: var(--c-ink);
  color: #ffffff;
  box-shadow: 0 0 0 6px var(--c-tint);
}

.mcp-connector-flow-tile.is-green {
  background: var(--c-ok-bg);
  color: var(--c-ok);
}

.mcp-connector-flow-node b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}

.mcp-connector-flow-node small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--c-muted-3);
}

.mcp-connector-flow-link {
  flex: 1 1 auto;
  min-width: 28px;
  height: 20px;
}

.mcp-connector-flow-link line {
  stroke: #b9c6e4;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
  animation: mcpConnectorDash 1.6s linear infinite;
}

.mcp-connector-chat-user {
  width: fit-content;
  margin: 0 0 12px auto;
  padding: 10px 14px;
  background: var(--c-brand);
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

.mcp-connector-chat-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mcp-connector-chat-tools b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.mcp-connector-chat-tools code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--c-tint);
  border: 1px solid #dbe6f9;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-brand);
}

.mcp-connector-chat-answer {
  padding: 14px 16px;
  background: #f7f8fc;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px 16px 16px 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-body-2);
}

.mcp-connector-chat-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.mcp-connector-metric {
  background: #ffffff;
  border: 1px solid var(--c-border-faint);
  border-radius: 12px;
  padding: 10px 12px;
}

.mcp-connector-metric small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-muted-3);
}

.mcp-connector-metric b {
  display: block;
  margin: 3px 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}

.mcp-connector-metric em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
}

.mcp-connector-metric em.is-up {
  color: var(--c-ok);
}

.mcp-connector-metric em.is-down {
  color: var(--c-err);
}

.mcp-connector-hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: #f7f8fc;
  border: 1px solid var(--c-border-soft);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-body-2);
}

.mcp-connector-hero-status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ok);
  animation: mcpConnectorPulse 2.4s ease-out infinite;
}

.mcp-connector-hero-status-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-muted-3);
}

.mcp-connector-hero-status-note svg {
  color: var(--c-brand);
}

@keyframes mcpConnectorPulse {
  0% { box-shadow: 0 0 0 0 rgba(19, 115, 51, .35); }
  70% { box-shadow: 0 0 0 7px rgba(19, 115, 51, 0); }
  100% { box-shadow: 0 0 0 0 rgba(19, 115, 51, 0); }
}

@keyframes mcpConnectorDash {
  to { stroke-dashoffset: -18px; }
}

/* — Clients strip — */
.mcp-connector-clients-section {
  background: #f7f8fc;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-ink);
}

.mcp-connector-clients-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 64px var(--wrap-pad);
}

.mcp-connector-clients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.mcp-connector-clients-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}

.mcp-connector-client-logo {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.mcp-connector-client-logo img {
  display: block;
}

.mcp-connector-client-logo svg {
  width: 32px;
  height: 32px;
  color: var(--c-brand);
}

.mcp-connector-client-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

/* — Why connect (compare) — */
.mcp-connector-compare-section {
  color: var(--c-ink);
}

.mcp-connector-compare-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.mcp-connector-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.mcp-connector-compare-panel {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px;
}

.mcp-connector-compare-panel.is-tinted {
  background: linear-gradient(180deg, var(--c-tint), #ffffff 160%);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-compare-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.mcp-connector-compare-tile {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
}

.mcp-connector-compare-tile.is-navy {
  background: var(--c-ink);
  color: #ffffff;
  box-shadow: 0 0 0 6px var(--c-tint);
}

.mcp-connector-compare-panel-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.mcp-connector-compare-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.mcp-connector-compare-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-body-2);
}

.mcp-connector-compare-points li.is-negative {
  color: var(--c-muted);
}

.mcp-connector-compare-points li svg {
  flex: none;
  margin-top: 2px;
}

/* — Tools — */
.mcp-connector-tools-section {
  background: #f7f8fc;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-ink);
}

.mcp-connector-tools-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.mcp-connector-tool-card {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mcp-connector-tool-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-tool-tile {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
}

.mcp-connector-tool-card code {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  align-self: center;
}

.mcp-connector-tool-card p {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* — Steps — */
.mcp-connector-steps-section {
  color: var(--c-ink);
}

.mcp-connector-steps-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.mcp-connector-step-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mcp-connector-step-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-step-number {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
}

.mcp-connector-step-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.mcp-connector-step-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.mcp-connector-step-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* — Setup (#connect) — */
.mcp-connector-setup-section {
  background: #f7f8fc;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-ink);
}

.mcp-connector-setup-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.mcp-connector-setup-card {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mcp-connector-setup-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-setup-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mcp-connector-setup-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
}

.mcp-connector-setup-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}

.mcp-connector-setup-card > p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-body);
}

.mcp-connector-setup-card > p code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--c-tint);
  color: var(--c-ink);
  border-radius: 6px;
  padding: 2px 6px;
}

.mcp-connector-setup-card pre {
  margin: 0;
  padding: 16px 18px;
  background: var(--c-dark);
  border-radius: 12px;
  overflow-x: auto;
}

.mcp-connector-setup-card pre code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: #dbe6f9;
  white-space: pre;
}

.mcp-connector-code-key {
  color: #8cbaf8;
}

.mcp-connector-code-string {
  color: #4fc48a;
}

/* — Prompts — */
.mcp-connector-prompts-section {
  color: var(--c-ink);
}

.mcp-connector-prompts-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

.mcp-connector-prompts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.mcp-connector-prompt-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mcp-connector-prompt-card:hover {
  transform: translateY(-2px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-prompt-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
}

.mcp-connector-prompt-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body-2);
}

/* — Security — */
.mcp-connector-security-section {
  background: #f7f8fc;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-ink);
}

/* Page rhythm: security and FAQ would both be soft here, so the FAQ flips
   to white and the closing CTA takes the soft band (same scoped-CTA pattern
   as .about-page above). */
.mcp-connector-page .faq-section {
  background: #ffffff;
}

.mcp-connector-page .final-call-to-action-section {
  background: #f7f8fc;
}

/* Home page rhythm: the MCP band takes the soft tone so it no longer runs
   white-on-white with the analytics section above, and the chain below it
   re-alternates (why flips in the base rule; trust, FAQ and CTA are shared
   sections, so they are scoped to the home body class). */
.home-page .trust-section {
  background: #f7f8fc;
}

.home-page .faq-section {
  background: #ffffff;
}

.home-page .final-call-to-action-section {
  background: #f7f8fc;
}

.mcp-connector-security-inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 96px var(--wrap-pad);
}

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

.mcp-connector-security-card {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 24px;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mcp-connector-security-card:hover {
  transform: translateY(-3px);
  border-color: #c9d6f5;
  box-shadow: 0 24px 44px -30px rgba(11, 26, 59, .4);
}

.mcp-connector-security-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.mcp-connector-security-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.mcp-connector-security-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-body);
}

/* Icon sizing inside the tinted tiles (stroke icons, currentColor). */
.mcp-connector-compare-tile svg,
.mcp-connector-tool-tile svg,
.mcp-connector-step-tile svg,
.mcp-connector-security-tile svg {
  width: 24px;
  height: 24px;
}

.mcp-connector-setup-tile svg,
.mcp-connector-prompt-tile svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   WordPress help page (.wordpress-help-*) — the plugin install guide's
   reading column. The hero reuses the contact hero rules above (shared
   selectors) plus the two scoping rules at the top of this block; the
   rest is the column below it. Typography follows the
   Home page (not the mockup): the update heading the shared section-H2
   scale (.section-heading-title / .terms-clause-heading), step headings
   the large card title scale (.trust-card h3), step and update body text
   the section-description body scale, step kickers the plain eyebrow
   device (.ofr-eye), the support line Home's 13.5px supporting size.
   Inline links use the site brand token like the legal pages' links,
   inline code the MCP setup-card convention. The two hero rules at the
   top of this block scope this page's title/actions to the Features
   hero's width behavior; media queries live in responsive.css.
   -------------------------------------------------------------------------- */

/* Hero title: the Features hero H1 width/container behavior (.ofh-h1) -
   centered 860px measure with the 18px bottom margin, instead of the
   contact hero group's full-width title, for the accent-split heading. */
.wordpress-help-hero-title {
  max-width: 860px;
  margin: 0 auto 18px;
}

/* Hero action row: the plugin download button, the Features hero's
   centered CTA row device (.ofh-ctas). */
.wordpress-help-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

.wordpress-help-guide-section {
  background: var(--c-surface);
  color: var(--c-ink);
}

.wordpress-help-guide-inner {
  width: 100%;
  max-width: 1000px; /* page-scoped measure (.platform-pricing-inner convention), not the global wrap */
  margin: 0 auto;
  padding: 56px var(--wrap-pad) 80px;
}

.wordpress-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px;
}

.wordpress-help-step {
  min-width: 0;
}

.wordpress-help-step-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  font-size: 12.5px; /* Home section-label typography (.ofr-eye plain eyebrow) */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.wordpress-help-step-title {
  font-size: 18px; /* Home large-card-title scale (.trust-card h3) */
  font-weight: 700;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 0 10px;
}

.wordpress-help-step-body {
  font-size: 17px; /* Home body-description scale (.section-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0;
}

.wordpress-help-step-body strong {
  color: var(--c-ink);
}

.wordpress-help-step-body code {
  font-family: var(--font-mono);
  font-size: 15px; /* Home card-body scale — one size under the 17px body */
  background: var(--c-tint);
  color: var(--c-ink);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Screenshot card: the admin capture fills a soft bordered frame
   (full-bleed, radius matches the site card family). */
.wordpress-help-step-figure {
  margin: 18px 0 0;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

.wordpress-help-step-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.wordpress-help-step-figure + .wordpress-help-step-figure {
  margin-top: 14px;
}

.wordpress-help-update {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
}

.wordpress-help-update-title {
  font-size: clamp(26px, 2.5vw, 34px); /* Home section-H2 scale (.section-heading-title) */
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
  margin: 0 0 12px;
}

.wordpress-help-update-body {
  font-size: 17px; /* Home body-description scale (.section-description) */
  line-height: 1.6;
  color: var(--c-body);
  margin: 0;
}

.wordpress-help-update-body strong {
  color: var(--c-ink);
}

.wordpress-help-support-note {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  text-align: center;
  font-size: 13.5px; /* Home supporting-text size (.home-hero-reassurance-line) */
  color: var(--c-body);
}

/* Inline links (hero lead download link, support mailto) — the legal
   pages' content-link treatment. */
.wordpress-help-hero-lead a,
.wordpress-help-step-body a,
.wordpress-help-update-body a,
.wordpress-help-support-note a {
  color: var(--c-brand);
  font-weight: 600;
}

.wordpress-help-hero-lead a:hover,
.wordpress-help-step-body a:hover,
.wordpress-help-update-body a:hover,
.wordpress-help-support-note a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Platform plugin download modal (the WordPress hero "Download plugin"
   button). The site has no other dialog, so this defines the surface from
   existing pieces only: card on the panel shadow/radius tokens, site-button
   actions, the legal pages' inline-link treatment for the "click here"
   fallback. Hidden (display:none) until main.js adds is-open.
   ========================================================================== */
.platform-download-modal {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the sticky header (--z-header) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(11, 26, 59, .55); /* --c-ink, 55% scrim */
}

.platform-download-modal.is-open {
  display: flex;
}

/* Open dialog locks the page scroll (class toggled by main.js with is-open). */
html.is-download-modal-open {
  overflow: hidden;
}

.platform-download-modal-card {
  /* Wide enough for both action buttons side by side (their natural row
     is ~507px); narrower screens stack them in responsive.css. */
  width: min(580px, 100%);
  background: #ffffff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  text-align: center;
}

.platform-download-modal-title {
  margin: 0 0 var(--sp-3);
  font-size: 18px; /* card-title scale (.trust-card h3) */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--c-ink);
}

.platform-download-modal-body {
  margin: 0 0 var(--sp-5);
  font-size: 15px; /* card-body copy scale */
  line-height: 1.6;
  color: var(--c-body);
}

.platform-download-modal-body a {
  color: var(--c-brand);
  font-weight: 600;
}

.platform-download-modal-body a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.platform-download-modal-question {
  margin: 0 0 var(--sp-5);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink-2);
}

.platform-download-modal-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Action labels stay on one line inside the dialog (the shared .site-button
   is wrap-tolerant; scoped here so the global component is untouched). */
.platform-download-modal-actions .site-button {
  white-space: nowrap;
}

/* === Blog (.blog-*) ===================================================== */

/* List page: hero */
.blog-hero {
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-8) var(--wrap-pad) var(--sp-7);
}

.blog-hero-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.blog-hero .section-heading {
  margin-bottom: 0;
}

/* Category filter */
.blog-filter {
  padding: var(--sp-5) var(--wrap-pad) 0;
}

.blog-filter-list {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.blog-filter-link {
  display: inline-block;
  padding: var(--sp-2) 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.blog-filter-link:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.blog-filter-link.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-surface);
}

.blog-filter-link:focus-visible,
.blog-pagination-link:focus-visible,
.blog-card a:focus-visible,
.blog-post-nav-link:focus-visible,
.blog-tags a:focus-visible,
.blog-related-all-link:focus-visible,
.blog-crumbs a:focus-visible,
.blog-article-body a:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* Post grid + cards */
.blog-posts {
  padding: var(--sp-7) var(--wrap-pad) var(--sp-8);
}

.blog-posts-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.blog-posts-count {
  margin: 0 0 var(--sp-4);
  font-size: 14px;
  color: var(--c-body);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-brand-soft);
}

.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--c-border);
}

.blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-cover svg {
  width: 56px;
  height: 56px;
}

.blog-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-card-tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-brand);
  background: var(--c-tint);
  padding: var(--sp-1) 10px;
  border-radius: var(--r-pill);
}

.blog-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--c-brand);
}

.blog-card-excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 13px;
  color: var(--c-muted);
}

/* Pagination */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--wrap-pad) var(--sp-8);
}

.blog-pagination-link {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink-2);
  text-decoration: none;
}

.blog-pagination-link:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.blog-pagination-link.is-current {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-surface);
}

/* Empty state */
.blog-empty {
  padding: var(--sp-8) var(--wrap-pad);
}

.blog-empty-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-soft);
}

.blog-empty-title {
  margin: 0 0 var(--sp-2);
  font-size: 22px;
  font-weight: 800;
  color: var(--c-ink);
}

.blog-empty-text {
  margin: 0;
  color: var(--c-body);
}

/* Reading progress bar (width driven by main.js blogReadingProgress) */
.blog-progress {
  position: fixed;
  left: 0;
  top: var(--blog-progress-top, calc(72px + env(safe-area-inset-top, 0px)));
  height: 2px;
  width: 100%;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .1s linear;
  z-index: var(--z-header);
  pointer-events: none;
}

/* Article masthead */
.blog-masthead {
  padding: 48px var(--wrap-pad) 0;
  text-align: center;
  background: var(--c-surface);
}

.blog-masthead-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.blog-crumbs-bar {
  padding: 0 var(--wrap-pad);
  border-bottom: 1px solid var(--c-border-faint);
  background: var(--c-surface);
}

/* Aligned with the header's content edges (.header-inner) */
.blog-crumbs {
  max-width: calc(var(--wrap-max) - var(--wrap-pad) * 2);
  margin: 0 auto;
  padding: 12px 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-muted);
}

.blog-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The current page takes the rest of the line and truncates instead of wrapping */
.blog-crumbs li:last-child {
  flex: 1 1 0;
}

.blog-crumbs a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}

.blog-crumbs a:hover {
  color: var(--c-brand);
}

/* Separator: a small chevron */
.blog-crumbs i {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-top: 1.5px solid var(--c-muted-3);
  border-right: 1.5px solid var(--c-muted-3);
  transform: rotate(45deg);
}

.blog-crumbs-current {
  display: block;
  min-width: 0;
  max-width: min(560px, 100%);
  overflow: hidden;
  color: var(--c-ink-2);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-masthead-title {
  max-width: 960px;
  margin: 0 auto 16px;
  font-size: clamp(28px, calc(2.2vw + 15px), 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.blog-masthead-dek {
  margin: 0 auto 20px;
  max-width: 820px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-body);
}

.blog-byline {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  font-size: 13.5px;
  color: var(--c-muted);
}

.blog-byline strong {
  color: var(--c-ink-2);
  font-weight: 600;
}

.blog-byline i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-border);
}

.blog-cover-wrap {
  max-width: 800px;
  margin: var(--sp-6) auto 0;
}

.blog-cover {
  margin: 0;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  background: var(--c-bg-soft);
  overflow: hidden;
}

.blog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Article body wrapper */
.blog-reading {
  padding: 56px var(--wrap-pad) var(--sp-6);
}

.blog-reading-inner {
  max-width: 960px;
  margin: 0 auto;
  min-width: 0;
}

/* Body content (sanitised post HTML) — everything scoped to the body */
.blog-article-body {
  font-family: var(--font-body);
  color: var(--c-ink-2);
  overflow-wrap: break-word;
  min-width: 0;
}

.blog-article-body > :first-child {
  margin-top: 0;
}

.blog-article-body h2 {
  margin: 48px 0 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  scroll-margin-top: 100px;
}

.blog-article-body h3 {
  margin: 34px 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  scroll-margin-top: 100px;
}

.blog-article-body h4 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
}

.blog-article-body p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.75;
}

.blog-article-body a {
  color: var(--c-brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.blog-article-body a:hover {
  text-decoration-color: currentColor;
}

.blog-article-body strong {
  font-weight: 700;
  color: var(--c-ink);
}

.blog-article-body ul,
.blog-article-body ol {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.blog-article-body li {
  position: relative;
  font-size: 17px;
  line-height: 1.7;
}

.blog-article-body ul > li {
  padding-left: 22px;
}

.blog-article-body ul > li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brand);
}

.blog-article-body ol {
  counter-reset: blog-step;
}

.blog-article-body ol > li {
  counter-increment: blog-step;
  padding-left: 36px;
}

.blog-article-body ol > li::before {
  content: counter(blog-step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-brand);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.blog-article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--c-brand);
  color: var(--c-ink-2);
}

.blog-article-body blockquote p {
  font-size: 18px;
  line-height: 1.65;
}

.blog-article-body blockquote p:last-child {
  margin-bottom: 0;
}

.blog-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  border-radius: var(--r-md);
}

.blog-article-body figure {
  margin: 32px 0;
}

.blog-article-body figure img {
  margin: 0 auto;
}

.blog-article-body figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-muted);
}

.blog-article-body hr {
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: var(--c-border);
}

.blog-article-body pre {
  margin: 0 0 24px;
  padding: var(--sp-4) 20px;
  overflow-x: auto;
  max-width: 100%;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
}

.blog-article-body code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  padding: 1px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.blog-article-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  overflow-wrap: normal;
}

/* TL;DR box */
.blog-article-body .blog-tldr {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
}

.blog-article-body .blog-tldr p {
  margin: 0 0 12px;
}

.blog-article-body .blog-tldr p:last-child {
  margin-bottom: 0;
}

/* Callout */
.blog-article-body .blog-callout {
  margin: 28px 0;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--c-ok) 18%, transparent);
  border-radius: var(--r-md);
  background: var(--c-ok-bg);
}

.blog-article-body .blog-callout p {
  margin: 0 0 12px;
}

.blog-article-body .blog-callout p:last-child {
  margin-bottom: 0;
}

/* FAQ: h3 question / p answers */
.blog-article-body .blog-faq {
  margin: 0 0 24px;
}

.blog-article-body .blog-faq h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.blog-article-body .blog-faq h3:not(:first-child) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

.blog-article-body .blog-faq p:last-child {
  margin-bottom: 0;
}

/* Tags */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-7) 0 0;
  padding: 0;
  list-style: none;
}

.blog-tags a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-bg-soft);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  text-decoration: none;
}

.blog-tags a:hover {
  background: var(--c-tint);
  color: var(--c-brand);
}

/* A tag without a link (no tag pages yet): same pill, no hover state. */
.blog-tags span {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-bg-soft);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

/* Author card */
.blog-author {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.blog-author-label {
  margin: 0 0 var(--sp-2);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.blog-author-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-brand);
}

.blog-author-bio {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-body);
}

/* Previous / next */
.blog-post-nav {
  padding: 0 var(--wrap-pad) var(--sp-8);
}

.blog-post-nav-inner {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.blog-post-nav-link {
  display: block;
  padding: var(--sp-4) 18px;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  color: var(--c-ink-2);
  text-decoration: none;
  transition: background-color .15s ease;
  overflow-wrap: anywhere;
}

.blog-post-nav-link:hover {
  background: var(--c-tint);
}

.blog-post-nav-link.is-prev {
  grid-column: 1;
}

.blog-post-nav-link.is-next {
  grid-column: 2;
  text-align: right;
}

.blog-post-nav-link small {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-body);
  margin-bottom: 6px;
}

.blog-post-nav-link b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--c-ink);
}

.blog-post-nav-link:hover b {
  color: var(--c-brand);
}

/* Related posts */
.blog-related {
  padding: var(--sp-8) var(--wrap-pad) 72px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}

.blog-related-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.blog-related-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.blog-related-title {
  margin: 0 0 var(--sp-2);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--c-ink);
}

.blog-related-text {
  margin: 0;
  color: var(--c-body);
  font-size: 16px;
}

.blog-related-all {
  margin: var(--sp-6) 0 0;
  text-align: center;
}

.blog-related-all-link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
}

.blog-related-all-link:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}