/* ============================================================
   TextIt — Non-Profit Landing
   Type: Inter. Palette anchored on #497FCE.
   ============================================================ */

:root {
  --blue: #497FCE;
  --blue-deep: #2F6391;
  --blue-ink: #1F4570;
  --plum: #893288;
  --tint: #DBEAFE;
  --tint-2: #EEF4FC;
  --paper: #FBFAF7;
  --paper-warm: #F5F1EA;
  --ink: #14171F;
  --ink-soft: #4A5160;
  --ink-mute: #7B8290;
  --line: #E7E3DA;
  --line-tint: color-mix(in oklab, var(--blue) 24%, transparent);  /* a line against the light blues */
  --line-strong: #D6D1C4;
  --white: #FFFFFF;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(31, 69, 112, 0.06), 0 1px 3px rgba(31, 69, 112, 0.04);
  --shadow-md: 0 4px 14px rgba(31, 69, 112, 0.08), 0 2px 6px rgba(31, 69, 112, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(31, 69, 112, 0.25), 0 10px 24px -12px rgba(31, 69, 112, 0.15);

  --container: 1200px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html, body, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { font-family: inherit; }

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Make the brand blue more present by default */
body {
  --paper-warm: #EAF2FC;
  --tint-2: #E3EDFA;
}

/* Theme: cool default */
body[data-theme="warm"]   { --paper: #FBF8F2; --paper-warm: #F2ECDF; --line: #E8E0CE; --tint-2: #EFE8D8; }
body[data-theme="mono"]   { --paper: #FAFAFA; --paper-warm: #F0F0F0; --line: #E5E5E5; --tint: #EEEEEE; --tint-2: #F4F4F4; --blue: #1F2937; --blue-deep: #111827; --blue-ink: #000000; --plum: #4B5563; }
body[data-theme="dark"]   { --paper: #0E1320; --paper-warm: #161C2D; --ink: #F2F4F8; --ink-soft: #B8C0D0; --ink-mute: #7B8499; --line: #232B3F; --line-strong: #2E3852; --tint: #1A2438; --tint-2: #141C2C; --white: #1A2235; }

/* Density */
body[data-density="airy"]    { --section-pad: 140px; }
body[data-density="default"] { --section-pad: 100px; }
body[data-density="packed"]  { --section-pad: 70px; }

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--section-pad, 100px) 0; position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blue-deep);
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 500; }
p  { line-height: 1.55; color: var(--ink-soft); margin: 0; }

.section-title {
  display: grid;
  gap: 18px;
  max-width: 720px;
  margin-bottom: 56px;
}
.section-title p { font-size: 19px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 16px -4px rgba(73, 127, 206, 0.5);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--white); border-color: var(--blue); color: var(--blue-deep); }
.btn-link {
  color: var(--blue-deep);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-link:hover { color: var(--blue); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line-tint);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.nav.scrolled {
  border-color: var(--line-tint);
  background: #ffffff;
  box-shadow: 0 8px 26px -18px rgba(15, 30, 60, 0.40);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; height: 64px; }
.nav-logo img { height: 64px; width: auto; }
.nav-links { display: flex; gap: 6px; align-items: center; }
/* each link is a pill that tints on hover, and the current section's stays tinted, in the brand's blue */
.nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 400;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in oklab, var(--blue) 12%, transparent); }
.nav-links a.active { color: var(--blue-deep); font-weight: 500; background: color-mix(in oklab, var(--blue) 18%, transparent); }
.nav-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-cta .btn { padding: 9px 16px; font-size: 14px; }
/* Keep "Sign in" reading as a clear box no matter what scrolls behind the
   translucent nav — a consistent white fill + defined border at every scroll pos. */
.nav-cta .btn-ghost {
  background: var(--tint);
  border-color: var(--blue);
  color: var(--blue-deep);
  box-shadow: 0 1px 2px rgba(15, 30, 60, 0.06);
}
.nav-cta .btn-ghost:hover {
  background: var(--white);
  border-color: var(--blue);
  color: var(--blue-deep);
}

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding-top: 60px;
  padding-bottom: var(--section-pad, 100px);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.hero-pill .badge {
  background: var(--tint);
  color: var(--blue-deep);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero h1 strong { color: var(--blue); font-weight: 500; }
.hero .lede {
  font-size: 19px;
  margin-top: 24px;
  max-width: 540px;
}
.hero-cta {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-trust {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-mute);
}
.hero-trust .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
}

/* Hero device: the phone with its cards to the right of it (see .hero-annotations), centered together */
.hero-device-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  container-type: inline-size;
}

/* Background flourish */
.hero {
  background:
    radial-gradient(ellipse 900px 600px at 90% -10%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 80%, color-mix(in oklab, var(--blue) 12%, transparent) 0%, transparent 60%),
    var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  right: -120px; top: -200px;
  background: radial-gradient(circle, color-mix(in oklab, var(--blue) 35%, transparent) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
}

/* ============================================================
   Phone mockup
   ============================================================ */
.phone {
  width: 320px;
  background: #0F1626;
  border-radius: 44px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.phone-screen {
  background: #F4F0E8;
  border-radius: 32px;
  overflow: hidden;
  height: 600px;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #0F1626;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-status {
  height: 44px;
  padding: 14px 24px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #14171F;
}
.phone-status .signal { display: flex; gap: 4px; align-items: center; }
.sms-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.6);
}
.sms-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 500;
}
.sms-name { font-size: 14px; font-weight: 500; color: #14171F; }
.sms-sub { font-size: 11px; color: #7B8290; }

.sms-thread {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.sms-time {
  text-align: center;
  font-size: 10px;
  color: #9AA0AB;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 4px 0;
}
.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.4;
  position: relative;
  animation: bubbleIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
/* the phone is the contact's: what they send (in) is theirs on the right, the organization's messages (out) arrive
   on the left */
.bubble.in {
  background: #2F8AF7;
  color: #fff;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}
.bubble.out {
  background: #E9E5DC;
  color: #14171F;
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.bubble.typing {
  background: #E9E5DC;
  align-self: flex-start;
  padding: 14px 16px;
  display: flex;
  gap: 4px;
  border-bottom-left-radius: 6px;
}
.bubble.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9AA0AB;
  animation: dotPulse 1.2s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
/* messages still to come in a playing conversation (see initPhoneChats) */
.sms-thread [hidden] { display: none !important; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.phone-input {
  height: 50px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  background: rgba(255,255,255,0.7);
  font-size: 12px;
  color: #9AA0AB;
}
.phone-input .field {
  flex: 1;
  background: rgba(0,0,0,0.04);
  border-radius: 14px;
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
/* the contact typing a message (see initPhoneChats), with a blinking caret, then pressing send */
.phone-input .field.is-typing { color: #14171F; display: block; line-height: 30px; }
.phone-input .field.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px; height: 14px;
  margin-left: 1px;
  vertical-align: -2px;
  background: #2F8AF7;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.phone-input svg { transition: transform 0.15s ease, color 0.15s ease; }
.phone-input svg.is-pressed { transform: scale(0.8); color: #2F8AF7; }

/* Floating annotation card */
.hero-annotation {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 220px;
}
.hero-annotation .ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--blue-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-annotation strong { font-weight: 500; color: var(--ink); display: block; }
.hero-annotation small { color: var(--ink-mute); font-size: 11.5px; }
/* the cards stand in a column to the right of the phone, down at its foot, and rise into place one after another
   as if stacking up. Where the phone's column can't fit them beside it, they're left out. */
.hero-annotations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 220px;
  flex-shrink: 0;
  padding-bottom: 48px;
}
.hero-annotations .hero-annotation {
  width: auto;
  max-width: none;
  animation: annoRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-annotations .hero-annotation:nth-child(1) { animation-delay: 0.5s; }
.hero-annotations .hero-annotation:nth-child(2) { animation-delay: 0.9s; }
.hero-annotations .hero-annotation:nth-child(3) { animation-delay: 1.3s; }
@keyframes annoRise {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
@container (max-width: 564px) {
  .hero-annotations { display: none; }
}
/* beside the text on a wide enough page, the device can reach into the page's margin to make room for its cards */
@media (min-width: 1240px) {
  .hero-device-wrap { margin-right: -56px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-annotations .hero-annotation { animation: none; }
}
.anno-ngo-badge { background: #893288; text-decoration: none; }
.anno-ngo-badge strong { color: #fff; }
.anno-ngo-badge small { color: rgba(255,255,255,0.8); }
.anno-ngo-badge .ico { background: rgba(255,255,255,0.2); }


/* ============================================================
   Logo cloud — trust band
   ============================================================ */
.logo-cloud {
  padding: 0 0 56px;
  background:
    radial-gradient(ellipse 1000px 600px at 80% -10%, color-mix(in oklab, white 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 0% 110%, color-mix(in oklab, black 6%, transparent) 0%, transparent 60%),
    var(--blue);
  color: #fff;
  border-bottom: 1px solid color-mix(in oklab, var(--blue) 18%, transparent);
}

section.hero { padding-bottom: 40px; }

/* --- Partner bar (full-bleed dark strip) --- */
.partner-bar {
  background: #122947;
  padding: 22px 0;
  position: relative;
  overflow: hidden;
}
.partner-bar::before,
.partner-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.partner-bar::before { left: 0;  background: linear-gradient(90deg,  #122947, transparent); }
.partner-bar::after  { right: 0; background: linear-gradient(-90deg, #122947, transparent); }
.partner-bar-label {
  text-align: center;
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

/* Scrolling logo marquee */
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: logo-scroll 54s linear infinite;
}
.logo-marquee-item { display: flex; align-items: center; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }

/* --- Featured pull-quote --- */
.trust-featured {
  display: block;
  max-width: 1040px;
  margin: 0 auto 64px;
  padding: 44px 52px;
  background: color-mix(in oklab, white 9%, transparent);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-xl, 20px);
  box-shadow: 0 34px 80px -34px rgba(10, 24, 52, 0.7);
  position: relative;
  overflow: hidden;
}
.trust-featured-body { position: relative; }
.trust-featured-quote {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0;
  text-wrap: pretty;
}
.trust-featured-attr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.trust-featured-attr-text { display: flex; flex-direction: column; gap: 4px; }
.trust-featured-name { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.25; }
.trust-featured-role { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.35; }
.trust-featured-wordmark {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.22);
  white-space: nowrap;
}
.trust-featured-orglogo {
  height: 40px;
  max-width: 170px;
  opacity: 1;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.22);
}

/* --- Secondary card row --- */
.trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 88px;
}
.trust-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 28px 26px;
  background: color-mix(in oklab, white 6%, transparent);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg, 14px);
}
.trust-card-quote {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0;
  text-wrap: pretty;
  flex: 1;
}
.trust-card-attr { display: flex; align-items: center; gap: 14px; }
.trust-card-attr-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.20);
}
.trust-card-name { color: #fff; font-weight: 600; font-size: 15.5px; }
.trust-card-role { color: rgba(255,255,255,0.72); font-size: 13.5px; }
.trust-orglogo {
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  display: block;
}
.trust-card-brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 70px;
  flex-shrink: 0;
}
.trust-card-brand .trust-orglogo { height: 24px; max-width: 84px; }
.trust-card-wordmark {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ============================================================
   Use cases
   ============================================================ */
.use-cases { background: var(--paper); }
.use-case-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.use-case-tab {
  padding: 14px 4px;
  font-size: 14px;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-right: 24px;
  transition: color 0.2s, border-color 0.2s;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.use-case-tab.active {
  color: var(--blue-deep);
  border-bottom-color: var(--blue);
  font-weight: 500;
}
.use-case-tab:hover { color: var(--ink); }
.use-case-tab .num {
  font-size: 11px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.use-case-panel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  min-height: 520px;
}
.use-case-panel h3 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 18px;
}
.use-case-panel .lede { font-size: 17px; line-height: 1.55; max-width: 460px; }

.use-case-features {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.use-case-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.use-case-feature .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.use-case-feature strong { font-weight: 500; color: var(--ink); display: block; }
.use-case-feature span { font-size: 14px; color: var(--ink-soft); display: block; }

.use-case-mockup {
  position: relative;
  background: var(--paper-warm);
  border-radius: 24px;
  padding: 36px;
  border: 1px solid var(--line);
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 980px) {
  .use-case-panel { grid-template-columns: 1fr; gap: 40px; }
}

/* Program diagram: the outline of a program, drawn as a plain schematic so it can't be mistaken for the product */
.program-diagram { width: 100%; max-width: 440px; margin: 0; }
.pd-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.pd-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.pd-name { font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.pd-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 20px; }
.pd-steps::before {
  content: "";
  position: absolute;
  left: 15px; top: 16px; bottom: 16px;
  border-left: 2px dashed color-mix(in oklab, var(--blue) 35%, var(--line));
}
.pd-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.pd-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--blue);
  color: var(--blue-deep);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.pd-body { padding-top: 5px; }
.pd-body strong, .pd-option strong { display: block; font-weight: 500; color: var(--ink); font-size: 15px; }
.pd-body span, .pd-option span:not(.pd-if) { display: block; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.pd-either { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-option {
  border: 1px dashed color-mix(in oklab, var(--blue) 40%, var(--line));
  border-radius: 12px;
  padding: 10px 12px;
}
.pd-if {
  display: block;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--plum); font-weight: 600;
  margin-bottom: 2px;
}
@media (max-width: 520px) {
  .pd-either { grid-template-columns: 1fr; }
}

/* ============================================================
   Channels
   ============================================================ */
.channels {
  background:
    radial-gradient(ellipse 800px 500px at 100% 0%, color-mix(in oklab, var(--blue) 14%, transparent) 0%, transparent 65%),
    var(--paper-warm);
  border-top: 1px solid color-mix(in oklab, var(--blue) 16%, var(--line));
  border-bottom: 1px solid color-mix(in oklab, var(--blue) 16%, var(--line));
}
.channels-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.channels-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.channels-art img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}

.channel-highlights {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
}
.channel-chip-ico {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--blue-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.channel-chip-name { font-weight: 500; }
.channel-chip-pin {
  color: var(--ink-mute);
  font-size: 12px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

@media (max-width: 980px) {
  .channels-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   Map
   ============================================================ */
.map-wrap {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.map-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.map-stat .num {
  font-size: 48px;
  font-weight: 500;
  color: var(--blue-deep);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.map-stat .label {
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 8px;
}

/* SVG map styling */
.world-map {
  width: 100%;
  height: auto;
  display: block;
}
.world-map .map-grid-ocean circle { fill: var(--line); opacity: 0.45; }
.world-map .map-grid-land circle { fill: var(--blue-deep); opacity: 0.55; }
.flow-screenshot {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 560px;
}
.world-map .pin {
  fill: var(--blue);
  animation: pinPulse 2.4s infinite ease-out;
  transform-origin: center;
  transform-box: fill-box;
}
.world-map .pin-ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1;
  opacity: 0;
  animation: ringPulse 2.4s infinite ease-out;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pinPulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.7; }
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing {
  background:
    radial-gradient(ellipse 700px 500px at 0% 100%, color-mix(in oklab, var(--blue) 14%, transparent) 0%, transparent 60%),
    var(--paper-warm);
  border-top: 1px solid color-mix(in oklab, var(--blue) 16%, var(--line));
}
/* Pricing helper styles (price-meter, scale callout, emphasis row) */
.price-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: color-mix(in oklab, var(--plum) 10%, var(--white));
  border: 1px solid color-mix(in oklab, var(--plum) 30%, var(--line));
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  margin: 0;
}
.price-meter strong { color: var(--plum); font-weight: 500; }
.meter-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--plum);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--plum) 22%, transparent);
}
.pricing-include.is-emphasis {
  font-weight: 500;
  color: var(--plum);
}
.pricing-include.is-emphasis .check {
  background: var(--plum);
}

.pricing-scale {
  margin-top: 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, var(--plum) 0%, #5C2069 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.pricing-scale::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  right: -150px; top: -200px;
  background: radial-gradient(circle, rgba(73, 127, 206, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-scale > * { position: relative; z-index: 1; }
.pricing-scale-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.14);
  display: grid; place-items: center;
  color: #fff;
}
.pricing-scale-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  margin-bottom: 6px;
}
.pricing-scale-body h3 { color: #fff; font-size: 22px; margin-bottom: 6px; font-weight: 500; }
.pricing-scale-body p { color: rgba(255,255,255,0.82); font-size: 14px; max-width: 540px; line-height: 1.5; }
.pricing-scale-cta {
  background: #fff !important;
  color: var(--plum) !important;
  white-space: nowrap;
}
.pricing-scale-cta:hover { background: #fff !important; transform: translateY(-1px); }
@media (max-width: 860px) {
  .pricing-scale { grid-template-columns: 1fr; text-align: left; }
  .pricing-scale-cta { justify-self: flex-start; }
}

/* Plum accents elsewhere */
.use-case-tab.active {
  color: var(--blue-deep);
  border-bottom-color: var(--plum);
  font-weight: 500;
}
.feature-quote {
  margin-top: 32px;
  padding: 20px 22px;
  background: color-mix(in oklab, var(--plum) 7%, var(--white));
  border: 1px solid color-mix(in oklab, var(--plum) 22%, var(--line));
  border-left: 3px solid var(--plum);
  border-radius: 12px;
}
.feature-quote-tag { color: var(--plum); }
.eyebrow { color: var(--plum); }
.eyebrow::before { background: var(--plum); }
.hero-pill .badge {
  background: color-mix(in oklab, var(--plum) 14%, var(--white));
  color: var(--plum);
}
.hero-trust .dot {
  background: var(--plum);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--plum) 25%, transparent);
}
.map-stat .num { color: var(--plum); }
.pricing-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "price includes";
  gap: 48px 64px;
  align-items: start;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px;
}
.pricing-card-top { grid-area: price; }
.pricing-card-includes { grid-area: includes; padding-top: 6px; }
.pricing-card-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.pricing-card::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  right: -100px; top: -150px;
  background: radial-gradient(circle, color-mix(in oklab, var(--plum) 25%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-card > * { position: relative; z-index: 1; }
.pricing-card h2 { font-size: 36px; line-height: 1.1; margin-bottom: 16px; }
.pricing-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.pricing-card .price {
  font-size: 64px;
  font-weight: 500;
  color: var(--plum);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricing-card .per { color: var(--ink-mute); font-size: 16px; }
.pricing-card .price-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  background: #F8E8F7;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pricing-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.pricing-include {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink);
}
.pricing-include .check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  flex-shrink: 0;
  display: grid; place-items: center;
  margin-top: 2px;
}
@media (max-width: 980px) {
  .pricing-card {
    grid-template-columns: 1fr;
    grid-template-areas: "price" "includes";
    padding: 36px;
    gap: 32px;
  }
  .pricing-card-actions { padding-top: 20px; }
  .pricing-includes { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer CTA
   ============================================================ */
.footer-cta {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-ink) 100%);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: "";
  position: absolute;
  width: 800px; height: 800px;
  left: -200px; bottom: -400px;
  background: radial-gradient(circle, rgba(137, 50, 136, 0.35) 0%, transparent 60%);
}
.footer-cta-inner { position: relative; z-index: 1; text-align: center; }
.footer-cta h2 {
  color: #fff;
  font-size: clamp(36px, 4vw, 56px);
  margin-bottom: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.footer-cta p {
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 36px;
}
.footer-cta .btn-primary {
  background: #fff;
  color: var(--blue-deep);
}
.footer-cta .btn-primary:hover { background: var(--tint); }

/* Footer */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-grid h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-soft); font-size: 14px; }
.footer-grid a:hover { color: var(--blue-deep); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.footer-logo img { height: 88px; margin-bottom: 16px; }

/* ============================================================
   Features section (Contacts / Campaigns / Tickets)
   ============================================================ */
.features {
  background:
    radial-gradient(ellipse 800px 500px at 0% 0%, color-mix(in oklab, var(--blue) 12%, transparent) 0%, transparent 60%),
    var(--paper);
  border-top: 1px solid var(--line);
}

/* two a row: four a row leaves the copy beside each icon too narrow and it wraps */
.features-tablist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}
.feature-tab {
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
/* each tab carries its own --accent; the selected one takes it as a single outline, tint and filled icon */
.feature-tab:hover { border-color: color-mix(in oklab, var(--accent, var(--blue)) 45%, var(--line)); }
.feature-tab.active {
  border-color: var(--accent, var(--blue));
  background: color-mix(in oklab, var(--accent, var(--blue)) 7%, var(--white));
  /* the inset ring doubles the 1px border without the layout shift a wider border would cause */
  box-shadow:
    inset 0 0 0 1px var(--accent, var(--blue)),
    0 12px 28px -18px color-mix(in oklab, var(--accent, var(--blue)) 70%, transparent);
}
.feature-tab-ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent, var(--blue)) 14%, var(--white));
  color: var(--accent, var(--blue));
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.feature-tab.active .feature-tab-ico {
  background: var(--accent, var(--blue));
  color: #fff;
}
.feature-tab-name { font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--accent, var(--blue)); display: block; }
.feature-tab-sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--ink); }

.feature-panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.feature-copy h3 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.feature-copy .lede { font-size: 17px; max-width: 480px; margin-bottom: 28px; }
.feature-quote {
  margin-top: 32px;
  padding: 20px 22px;
  background: color-mix(in oklab, var(--blue) 8%, var(--white));
  border: 1px solid color-mix(in oklab, var(--blue) 22%, var(--line));
  border-left: 3px solid var(--blue);
  border-radius: 12px;
}
.feature-quote-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  font-weight: 500;
  margin-bottom: 8px;
}
.feature-quote p { font-size: 14.5px; color: var(--ink); line-height: 1.55; }

.feature-mockup {
  position: relative;
}
.feature-mockup-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 13px;
}

.contacts-count { font-size: 12px; color: var(--ink-mute); }
.contacts-count em { color: var(--blue-deep); font-style: normal; font-weight: 500; }
.status-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  width: fit-content;
}
.status-tag.tone-ok    { background: #DCFCE7; color: #166534; }

.contacts-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: color-mix(in oklab, var(--blue) 5%, var(--paper-warm));
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.contacts-footer strong { color: var(--ink); font-weight: 500; }

/* AI / translation mockup */

.feature-quote.feature-quote-wide {
  margin-top: 48px;
  padding: 32px 36px;
  background: color-mix(in oklab, var(--plum) 10%, var(--white));
  border: 1px solid color-mix(in oklab, var(--plum) 30%, var(--line));
  border-left: 4px solid var(--plum);
}
.feature-quote.feature-quote-wide .feature-quote-tag {
  color: var(--plum);
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.feature-quote.feature-quote-wide p {
  font-size: 17px;
  line-height: 1.6;
  max-width: none;
}

@media (max-width: 980px) {
  .features-tablist { grid-template-columns: 1fr; }
  .feature-panel { grid-template-columns: 1fr; gap: 48px; }
}
.footer-tagline { font-size: 14px; color: var(--ink-soft); max-width: 280px; line-height: 1.5; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* on phones the logo and each section of links get a row of their own */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo img { height: 64px; margin-bottom: 10px; }
  .footer-tagline { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   Page-wide motion: subtle reveal-on-scroll + ambient drift
   ============================================================ */
.section-title h2 { animation: titleRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.section-title .eyebrow { animation: titleRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.05s; }
.section-title p { animation: titleRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.1s; }

@keyframes titleRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Use-case panel: cross-fade when switching tabs */
.use-case-panel {
  animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes panelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stat counters: pop on appear */
.stat-number, .impact-number {
  animation: statPop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes statPop {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .section-title h2, .section-title p, .section-title .eyebrow,
  .use-case-panel, .stat-number, .impact-number {
    animation: none !important;
  }
}

/* ============================================================
   Breadcrumb (back to non-profits landing)
   ============================================================ */
.breadcrumb-bar {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.breadcrumb-bar .container {
  display: flex;
  padding-top: 13px;
  padding-bottom: 13px;
}
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease, gap 0.15s ease;
}
.breadcrumb-link:hover { color: var(--ink); gap: 12px; }
.breadcrumb-link strong { font-weight: 600; color: var(--blue); }
.breadcrumb-arrow { font-size: 15px; line-height: 1; display: inline-flex; }

/* ============================================================
   Testimonial cards (shared include; was inline in the JSX)
   ============================================================ */
.ht-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:stretch}
  .ht-card{min-height:257px;overflow:hidden}
  .ht-card{
    --color:#497FCE;
    position:relative;display:flex;flex-direction:column;
    border-radius:20px;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(ellipse 500px 240px at 50% -6%, color-mix(in oklab,var(--color) 14%,transparent) 0%,transparent 70%),
      var(--white);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.8) inset,
      0 0 0 4px color-mix(in oklab,var(--color) 18%,transparent),
      0 28px 60px -32px color-mix(in oklab,var(--color) 70%,transparent);
    transition:transform 0.2s ease,box-shadow 0.25s ease;
  }
  .ht-card:hover{
    transform:translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.8) inset,
      0 0 0 4px color-mix(in oklab,var(--color) 28%,transparent),
      0 36px 80px -28px color-mix(in oklab,var(--color) 85%,transparent);
  }
  @keyframes htCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  @media(prefers-reduced-motion:no-preference){.ht-card{animation:htCardIn 0.5s cubic-bezier(0.2,0.8,0.2,1) both}}
  .ht-card--photo{flex-direction:row;align-items:stretch}
  .ht-photo-side{width:25%;flex-shrink:0;overflow:hidden;align-self:stretch}
  .ht-card--photo.ht-photo-right .ht-photo-side{order:1;border-radius:0 20px 20px 0}
  .ht-card--photo:not(.ht-photo-right) .ht-photo-side{border-radius:20px 0 0 20px}
  .ht-photo-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .ht-body{padding:40px 48px 32px;display:flex;flex-direction:column;flex:1;gap:24px}
  .ht-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:28px}
  .ht-brand{display:flex;flex-direction:column;align-items:center;gap:6px}
  .ht-brand img{width:auto;max-width:200px;object-fit:contain;display:block}
  .ht-wordmark{font-weight:800;font-size:16px;letter-spacing:-0.02em;color:var(--ink)}
  .ht-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .ht-stats li{
    font-size:12px;font-weight:500;
    color:color-mix(in oklab,var(--color) 82%,var(--ink));
    background:var(--white);
    border:1px solid color-mix(in oklab,var(--color) 20%,var(--line));
    padding:4px 12px;border-radius:999px;
    display:inline-flex;align-items:center;gap:6px
  }
  .ht-stats li::before{display:none}
  .ht-quote{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:300;line-height:1.5;letter-spacing:-0.018em;color:var(--ink);font-style:normal;text-wrap:pretty;flex:1}
  .ht-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
    padding-top:18px;border-top:1px solid color-mix(in oklab,var(--line) 60%,transparent);margin-top:auto}
  .ht-person{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1}
  .ht-person-text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
  .ht-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
  .ht-role{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .ht-org{font-size:13px;font-weight:500;color:var(--color);margin-top:2px}
  .ht-loc{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-mute);margin-top:4px}
  .ht-read{
    display:inline-flex;align-items:center;gap:5px;flex-shrink:0;align-self:flex-end;
    font-size:13px;font-weight:500;color:var(--color);white-space:nowrap;
    transition:gap 0.15s ease;text-decoration:none
  }
  .ht-read:hover{gap:9px;color:var(--color)}

  .ht-avatar{display:none}

/* on phones the photo can't share the card's width, and a portrait can't be cropped to a banner without losing the
   face, so the card goes full width and the photo becomes a headshot beside the person's name */
@media (max-width: 720px) {
  .ht-grid { gap: 40px; }
  .ht-card--photo { flex-direction: column; }
  .ht-photo-side { display: none; }
  .ht-body { padding: 26px 22px 22px; gap: 18px; }
  .ht-quote { font-size: 17px; }
  .ht-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .ht-read { align-self: flex-end; }
  .ht-person { align-items: center; gap: 14px; }
  .ht-avatar {
    display: block; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; object-position: center 20%;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in oklab, var(--color) 35%, transparent);
  }
}

/* the map's dot grids are <pattern>s (see includes/world_map.html), so their circles live in <defs> */
.world-map #map-dots-ocean circle { fill: var(--line); opacity: 0.45; }
.world-map #map-dots-land circle { fill: var(--blue-deep); opacity: 0.55; }

/* ============================================================
   Combined homepage — additions on top of styles.css
   Each industry has its own accent color so the four chooser
   cards read as four distinct destinations.
   ============================================================ */

:root {
  --c-edu:   #e68628;   /* Education & Research — orange */
  --c-edu-deep: #B8651A;
  --c-edu-tint: #FBEBD7;

  --c-ngo:   #893288;   /* Non-profits — plum */
  --c-ngo-deep: #5C2069;
  --c-ngo-tint: #F4E6F3;

  --c-biz:   #1F8A5B;   /* Business — emerald */
  --c-biz-deep: #14633F;
  --c-biz-tint: #DCEFE6;

  --c-hc:    #C2208B;   /* Care Teams — magenta */
  --c-hc-deep: #8E1565;
  --c-hc-tint: #FBE0EF;
}

/* ============================================================
   Home hero — broader, four "industries served" pills under CTA
   ============================================================ */
.home-hero .hero-pill .badge {
  background: color-mix(in oklab, var(--blue) 14%, var(--white));
  color: var(--blue-deep);
}
.home-hero h1 strong { color: var(--blue); }

.home-hero-industries {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-hero-industries .ind-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1.5px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.home-hero-industries .ind-chip:hover {
  transform: translateY(-3px);
}
.home-hero-industries .ind-chip.ind-chip-ngo:hover {
  background: color-mix(in oklab, var(--c-ngo) 14%, white);
  border-color: var(--c-ngo);
  color: var(--c-ngo-deep);
  box-shadow: 0 4px 18px color-mix(in oklab, var(--c-ngo) 28%, transparent);
}
.home-hero-industries .ind-chip.ind-chip-edu:hover {
  background: color-mix(in oklab, var(--c-edu) 14%, white);
  border-color: var(--c-edu);
  color: var(--c-edu-deep);
  box-shadow: 0 4px 18px color-mix(in oklab, var(--c-edu) 28%, transparent);
}
.home-hero-industries .ind-chip.ind-chip-biz:hover {
  background: color-mix(in oklab, var(--c-biz) 14%, white);
  border-color: var(--c-biz);
  color: var(--c-biz-deep);
  box-shadow: 0 4px 18px color-mix(in oklab, var(--c-biz) 28%, transparent);
}
.home-hero-industries .ind-chip.ind-chip-hc:hover {
  background: color-mix(in oklab, var(--c-hc) 14%, white);
  border-color: var(--c-hc);
  color: var(--c-hc-deep);
  box-shadow: 0 4px 18px color-mix(in oklab, var(--c-hc) 28%, transparent);
}
.home-hero-industries .ind-chip .ind-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   Industry Chooser — the homepage's flagship section.
   Goal: it must be visually obvious that each card opens a
   separate dedicated landing page.
   ============================================================ */
.industry-chooser {
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, color-mix(in oklab, var(--blue) 10%, transparent) 0%, transparent 60%),
    var(--paper);
  border-top: 1px solid var(--line);
  position: relative;
}

.industry-chooser .section-title { max-width: 820px; }
.industry-chooser .section-title .hint {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  width: fit-content;
}
.industry-chooser .section-title .hint .hint-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tint-2);
  color: var(--blue-deep);
  display: grid; place-items: center;
}
.industry-chooser .section-title .hint strong {
  color: var(--ink);
  font-weight: 500;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .industry-grid { grid-template-columns: 1fr; }
}

.ind-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 560px 300px at 50% -8%, color-mix(in oklab, var(--ind-color) 16%, transparent) 0%, transparent 70%),
    var(--white);
  border: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 5px color-mix(in oklab, var(--ind-color) 20%, transparent),
    0 36px 80px -42px color-mix(in oklab, var(--ind-color) 88%, transparent);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  isolation: isolate;
}
.ind-card::before {
  display: none;
}
.ind-card::after {
  /* Subtle accent wash bottom-right */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--ind-color) 12%, transparent) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.ind-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 5px color-mix(in oklab, var(--ind-color) 30%, transparent),
    0 46px 96px -40px color-mix(in oklab, var(--ind-color) 95%, transparent);
}

.ind-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 22px 10px;
}
.ind-card-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: none;
  padding: 0;
  overflow: hidden;
}
.ind-card-icon svg { width: 100%; height: 100%; display: block; }
.ind-card-title strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ind-card-title span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ind-color) 70%, var(--ink-mute));
  font-weight: 500;
  margin-bottom: 3px;
}
.ind-card-pageno {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ind-card-body {
  padding: 0 22px 14px;
}
.ind-card-body p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ind-card-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ind-card-tags li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: color-mix(in oklab, var(--ind-color) 7%, var(--white));
  border: 1px solid color-mix(in oklab, var(--ind-color) 18%, var(--line));
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
}
.ind-card-tags li::before { display: none; }

.ind-ngo-badge {
  display: inline-flex;
  align-items: center;
  background: #497FCE;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ind-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 22px;
  border-top: 1px dashed var(--line);
  background: color-mix(in oklab, var(--ind-color) 4%, var(--white));
}
.ind-card-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--ind-color);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ind-card-url-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ind-color);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ind-color) 22%, transparent);
}
.ind-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--ind-color);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.15s ease, background 0.2s ease;
}
.ind-card-cta:hover {
  background: var(--ind-color-deep);
  transform: translateX(2px);
}

/* Reserve a touch of right padding so the title doesn't run flush. */
.ind-card-head { padding-right: 28px; }

/* Per-industry accent colors, applied via CSS custom property */
.ind-card.ind-edu {  --ind-color: var(--c-edu);  --ind-color-deep: var(--c-edu-deep); }
.ind-card.ind-ngo {  --ind-color: var(--c-ngo);  --ind-color-deep: var(--c-ngo-deep); }
.ind-card.ind-biz {  --ind-card: var(--c-biz);  --ind-color: var(--c-biz);  --ind-color-deep: var(--c-biz-deep); }
.ind-card.ind-hc  {  --ind-color: var(--c-hc);   --ind-color-deep: var(--c-hc-deep);  }

/* ============================================================
   "Not sure where to start?" footer-row under the chooser
   ============================================================ */
.industry-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.industry-footer-text {
  display: flex;
  align-items: center;
  gap: 16px;
}
.industry-footer-text strong {
  font-weight: 500;
  color: var(--ink);
  font-size: 16px;
}
.industry-footer-text p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}
.industry-footer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ============================================================
   Homepage — combined "How it works" features (4 capability cards)
   Used in lieu of the industry-specific Features tablist.
   ============================================================ */
.home-features {
  background:
    radial-gradient(ellipse 800px 500px at 100% 100%, color-mix(in oklab, var(--blue) 8%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, var(--paper) 70%, color-mix(in oklab, var(--blue) 5%, var(--paper)) 100%);
  border-top: 1px solid var(--line);
}

.home-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
@media (max-width: 980px) { .home-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .home-feat-grid { grid-template-columns: 1fr; } }

.home-feat-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.home-feat-more .btn-primary {
  padding: 15px 30px;
  font-size: 16px;
}

.home-feat {
  background:
    radial-gradient(ellipse 480px 260px at 50% -10%, color-mix(in oklab, var(--feat-color, var(--blue)) 15%, transparent) 0%, transparent 70%),
    var(--white);
  border: none;
  border-radius: 24px;
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 5px color-mix(in oklab, var(--feat-color, var(--blue)) 18%, transparent),
    0 34px 76px -44px color-mix(in oklab, var(--feat-color, var(--blue)) 85%, transparent);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.home-feat::before {
  content: none;
}
.home-feat::after {
  content: none;
}
.home-feat > * { position: relative; z-index: 1; }
.home-feat:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 5px color-mix(in oklab, var(--feat-color, var(--blue)) 28%, transparent),
    0 44px 92px -42px color-mix(in oklab, var(--feat-color, var(--blue)) 92%, transparent);
}
.home-feat-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #497FCE;
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.home-feat h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.home-feat p { font-size: 14.5px; line-height: 1.55; }

/* Per-tile accent colors (stripe + hover) */
.home-feat-blue    { --feat-color: #497FCE; }
.home-feat-emerald { --feat-color: #1F8A5B; }
.home-feat-plum    { --feat-color: #893288; }
.home-feat-amber   { --feat-color: #D97706; }
.home-feat-magenta { --feat-color: #C2208B; }
.home-feat-teal    { --feat-color: #0E9488; }

/* ============================================================
   Homepage features — tabbed panel (matches industry pages)
   ============================================================ */
.home-features .features-tablist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}
.home-features .feature-tab {
  align-items: center;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.home-features .feature-tab-ico { width: 44px; height: 44px; }
.home-features .feature-tab-name { font-size: clamp(14px, 1.2vw, 16px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--accent, var(--blue)); }
.home-features .feature-tab-sub { font-size: 12px; font-weight: 400; color: var(--ink); margin-top: 3px; line-height: 1.35; }
.home-features .feature-panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.home-features .feature-mockup { position: relative; }
.home-features .feature-copy h3 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.home-features .feature-copy .lede { font-size: 16px; line-height: 1.55; margin-bottom: 28px; }
.home-features .use-case-features { display: grid; gap: 16px; }
.home-features .use-case-feature { display: flex; gap: 14px; align-items: flex-start; }
.home-features .use-case-feature .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.home-features .use-case-feature strong { font-weight: 500; color: var(--ink); display: block; }
.home-features .use-case-feature span { font-size: 14px; color: var(--ink-soft); display: block; }
.home-features .feature-panel-cta { text-align: center; margin-top: 32px; }

@media (max-width: 1100px) { .home-features .features-tablist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .home-features .features-tablist { grid-template-columns: repeat(2, 1fr); }
  .home-features .feature-panel { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) { .home-features .features-tablist { grid-template-columns: 1fr; } }

/* ============================================================
   Homepage CTA band — switches to neutral copy
   ============================================================ */
.home-cta {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-ink) 100%);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.home-cta::before {
  content: "";
  position: absolute;
  width: 800px; height: 800px;
  left: -200px; bottom: -400px;
  background: radial-gradient(circle, rgba(137, 50, 136, 0.35) 0%, transparent 60%);
  pointer-events: none;
}
.home-cta-inner { position: relative; z-index: 1; text-align: center; }
.home-cta h2 {
  color: #fff;
  font-size: clamp(36px, 4vw, 56px);
  margin-bottom: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.home-cta p {
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 36px;
}
.home-cta .btn-primary {
  background: #fff;
  color: var(--blue-deep);
}
.home-cta .btn-primary:hover { background: var(--tint); }
.home-cta .btn-ghost {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.home-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.home-cta-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Override the eyebrow plum default to blue on the homepage so the
   page reads as the platform-wide site, not a single industry page. */
body.home-page .eyebrow         { color: var(--blue-deep); }
body.home-page .eyebrow::before { background: var(--blue-deep); }
body.home-page .use-case-tab.active { border-bottom-color: var(--blue); }
body.home-page .map-stat .num   { color: var(--blue-deep); }
body.home-page .map-stat-centered { text-align: center; }
body.home-page .pricing-card .price { color: var(--blue-deep); }
body.home-page .pricing-card { align-items: stretch; }
body.home-page .pricing-include .check { width: 26px; height: 26px; }
body.home-page .pricing-card .price-tag {
  color: var(--blue-deep);
  background: var(--tint);
}
body.home-page .pricing-card::before {
  background: radial-gradient(circle, color-mix(in oklab, var(--blue) 25%, transparent) 0%, transparent 60%);
}
body.home-page .pricing-include.is-emphasis { color: var(--blue-deep); }
body.home-page .pricing-include.is-emphasis .check { background: var(--blue); }
body.home-page .hero-pill .badge {
  background: var(--tint-2);
  color: var(--blue-deep);
}
body.home-page .hero-trust .dot {
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
}

/* ============================================================
   "Hub" treatment — applies ONLY to body.home-page so the four
   industry pages stay calm and the homepage reads as the
   platform-wide site. Goals:
     - Anchor harder on the brand blue (#497FCE)
     - Stronger visual rhythm (dark blue band, light tint, dark)
     - Decorative numerals + grid pattern + marquee strips
   ============================================================ */
body.home-page {
  --paper: #F2F7FE;
  --paper-warm: #E3EDFA;
  --tint-2: #DCEAFB;
  --hub-ink: #122947;          /* deepest brand-blue ink */
  --hub-accent: #C16BC0;       /* brand plum, lifted for contrast on dark blue */
  --hub-accent-strong: #893288;
}

/* ---- HERO ------------------------------------------------ */
body.home-page .hero {
  background:
    radial-gradient(ellipse 700px 500px at 110% 8%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 520px 420px at -8% 92%, rgba(137,50,136,0.42) 0%, transparent 60%),
    linear-gradient(135deg, var(--hub-ink) 0%, var(--blue-deep) 48%, var(--blue) 100%);
  color: #fff;
  padding-top: 84px;
  padding-bottom: 130px;
}
/* Replace the light "::before" radial blob with a dot grid overlay */
body.home-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  right: auto; top: auto;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 28px 28px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Soft glow behind the phone */
body.home-page .hero-device-wrap::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, transparent 60%);
  z-index: -1;
}

/* Eyebrow badge */
.hero-eyebrow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none; color: #fff;
  transition: background 150ms ease;
}
.hero-eyebrow-badge:hover { background: rgba(255,255,255,0.20); }
.hero-eyebrow-badge:hover .hero-eyebrow-arrow { transform: translateX(2px); }
.hero-eyebrow-new {
  font: 700 11px/1 Inter; letter-spacing: 0.06em; text-transform: uppercase;
  background: #893288; color: #fff;
  padding: 3px 7px; border-radius: 999px;
}
.hero-eyebrow-text { font: 500 14px/1 Inter; display: inline-flex; align-items: center; gap: 5px; }
.hero-eyebrow-text svg { width: 13px; height: 13px; flex: none; }
.hero-eyebrow-arrow { font-size: 14px; transition: transform 150ms ease; }

body.home-page .hero h1 { color: #fff; }
body.home-page .hero h1 strong,
body.home-page .home-hero h1 strong {
  color: #fff;
  font-weight: 500;
  position: relative;
}
body.home-page .hero .lede {
  color: rgba(255,255,255,0.85);
  max-width: 540px;
}

body.home-page .hero-pill {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
}
body.home-page .hero-pill .badge {
  background: #fff;
  color: var(--blue-deep);
}

body.home-page .hero-trust { color: rgba(255,255,255,0.72); }
body.home-page .hero-trust .dot {
  background: #6EE7B7;
  box-shadow: 0 0 0 4px rgba(110,231,183,0.25);
}

body.home-page .nav-cta .btn-primary {
  background: #893288;
  color: #fff;
  font-weight: 500;
  border: 1px solid #893288;
  box-shadow: 0 4px 12px -6px rgba(137,50,136,0.5);
}
body.home-page .nav-cta .btn-primary:hover {
  background: #74246F;
  border-color: #74246F;
  color: #fff;
}
body.home-page .hero-cta .btn-primary {
  background: #893288;
  color: #fff;
  font-weight: 500;
  border: 1px solid #893288;
  box-shadow: 0 4px 14px -6px rgba(137,50,136,0.5);
}
body.home-page .hero-cta .btn-primary:hover {
  background: #74246F;
  border-color: #74246F;
  color: #fff;
}
body.home-page .hero-cta .btn-ghost {
  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;
  color: #fff;
  font-weight: 500;
}
body.home-page .hero-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

body.home-page .home-hero-industries .ind-chip {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  backdrop-filter: blur(8px);
}
body.home-page .home-hero-industries .ind-chip:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.38);
}
body.home-page .home-hero-industries .ind-chip.ind-chip-ngo:hover {
  background: color-mix(in oklab, var(--c-ngo) 30%, rgba(255,255,255,0.08));
  border-color: color-mix(in oklab, var(--c-ngo) 70%, rgba(255,255,255,0.4));
  color: #fff;
  box-shadow: 0 4px 22px color-mix(in oklab, var(--c-ngo) 40%, transparent);
}
body.home-page .home-hero-industries .ind-chip.ind-chip-edu:hover {
  background: color-mix(in oklab, var(--c-edu) 30%, rgba(255,255,255,0.08));
  border-color: color-mix(in oklab, var(--c-edu) 70%, rgba(255,255,255,0.4));
  color: #fff;
  box-shadow: 0 4px 22px color-mix(in oklab, var(--c-edu) 40%, transparent);
}
body.home-page .home-hero-industries .ind-chip.ind-chip-biz:hover {
  background: color-mix(in oklab, var(--c-biz) 30%, rgba(255,255,255,0.08));
  border-color: color-mix(in oklab, var(--c-biz) 70%, rgba(255,255,255,0.4));
  color: #fff;
  box-shadow: 0 4px 22px color-mix(in oklab, var(--c-biz) 40%, transparent);
}
body.home-page .home-hero-industries .ind-chip.ind-chip-hc:hover {
  background: color-mix(in oklab, var(--c-hc) 30%, rgba(255,255,255,0.08));
  border-color: color-mix(in oklab, var(--c-hc) 70%, rgba(255,255,255,0.4));
  color: #fff;
  box-shadow: 0 4px 22px color-mix(in oklab, var(--c-hc) 40%, transparent);
}
body.home-page .home-hero-industries .hero-inline-cta {
  background: #893288;
  border: 1.5px solid color-mix(in oklab, #893288 42%, #fff);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(137,50,136,0.5);
}
body.home-page .home-hero-industries .hero-inline-cta:hover {
  background: #74246F;
  border-color: #fff;
  color: #fff;
}
body.home-page .home-hero-industries .ind-chip .ind-dot {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.18));
}

.anno-ngo-badge { background: #893288; border-color: color-mix(in oklab, #893288 42%, #fff); }
.anno-ngo-badge strong { color: #fff; }
.anno-ngo-badge small { color: rgba(255,255,255,0.8); }
.anno-ngo-badge .ico { background: transparent; padding: 0; }
body.home-page .anno-ngo-badge { background: #893288; border-color: color-mix(in oklab, #893288 42%, #fff); }
body.home-page .anno-ngo-badge strong { color: #fff; }
body.home-page .anno-ngo-badge small { color: rgba(255,255,255,0.8); }
body.home-page .anno-ngo-badge .ico { background: transparent !important; padding: 0; }
body.home-page .hero-annotation {
  box-shadow:
    0 18px 50px -16px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.20);
}
body.home-page .hero-annotation .ico {
  border-radius: 50%;
  background: #497FCE;
  color: #fff;
}
body.home-page .channel-chip-ico {
  background: #497FCE;
  color: #fff;
}

/* ---- MARQUEE STATS BAND --------------------------------- */
.home-marquee {
  background: var(--hub-ink, #122947);
  color: #fff;
  padding: 22px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.home-marquee::before, .home-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.home-marquee::before { left: 0;  background: linear-gradient(90deg,  var(--hub-ink, #122947), transparent); }
.home-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--hub-ink, #122947), transparent); }
.home-marquee-track {
  display: inline-flex;
  align-items: baseline;
  gap: 48px;
  white-space: nowrap;
  animation: home-marquee 72s linear infinite;
  padding-left: 56px;
  will-change: transform;
}
.home-marquee:hover .home-marquee-track { animation-play-state: paused; }
.home-marquee-item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.72);
  font-weight: 400;
}
.home-marquee-item strong {
  font-size: 22px;
  font-weight: 500;
  color: var(--hub-accent, #C16BC0);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.home-marquee-dot {
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.28);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: -3px;
}
@keyframes home-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- INDUSTRY CHOOSER — bigger blue, watermark numerals - */
body.home-page .industry-chooser {
  background:
    radial-gradient(ellipse 1200px 700px at 50% 0%, color-mix(in oklab, var(--blue) 30%, transparent) 0%, transparent 65%),
    var(--paper);
  padding-top: 130px;
}
body.home-page .industry-chooser .section-title .eyebrow {
  color: var(--blue-deep);
}
body.home-page .industry-chooser .section-title .eyebrow::before {
  background: var(--blue-deep);
}
body.home-page .industry-chooser .section-title .hint {
  background: rgba(255,255,255,0.7);
  border-color: color-mix(in oklab, var(--blue) 22%, var(--line));
  backdrop-filter: blur(8px);
}
body.home-page .ind-card { overflow: hidden; }
body.home-page .ind-card.ind-ngo { overflow: visible; }
body.home-page .ind-card.ind-ngo .ind-card-foot { border-radius: 0 0 24px 24px; }
body.home-page .ind-card.ind-ngo .ind-ngo-badge {
  position: absolute;
  top: -16px;
  right: -14px;
  z-index: 3;
  background: #497FCE;
  color: #fff;
  border: 2px solid color-mix(in oklab, #497FCE 42%, #fff);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: 0 10px 24px -10px rgba(73,127,206,0.65), 0 2px 6px rgba(15,19,24,0.12);
  transform: rotate(3deg);
  transition: transform 0.15s ease;
}
body.home-page .ind-card.ind-ngo:hover .ind-ngo-badge { transform: rotate(3deg) translateY(-2px); }
body.home-page .ind-card-pageno { display: none; }
body.home-page .ind-card-bignum { display: none; }

/* ---- FEATURES — counter watermark on each tile ---------- */
body.home-page .home-features {
  background:
    radial-gradient(ellipse 900px 600px at 0% 0%, color-mix(in oklab, var(--blue) 12%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, var(--paper) 70%, color-mix(in oklab, var(--blue) 6%, var(--paper)) 100%);
}
body.home-page .home-feat {
  position: relative;
}

/* ---- LOGO CLOUD — dark blue marquee strip --------------- */
body.home-page .logo-cloud {
  background: var(--hub-ink);
  border-top: none;
  border-bottom: none;
  padding: 56px 0;
  overflow: hidden;
  position: relative;
}
body.home-page .logo-cloud::before,
body.home-page .logo-cloud::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
body.home-page .logo-cloud::before { left: 0;  background: linear-gradient(90deg,  var(--hub-ink), transparent); }
body.home-page .logo-cloud::after  { right: 0; background: linear-gradient(-90deg, var(--hub-ink), transparent); }
body.home-page .logo-cloud-label {
  text-align: center;
  color: rgba(255,255,255,0.82);
  margin: 0 0 36px;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 600;
  line-height: 1.25;
}
body.home-page .logo-cloud-grid {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 72px;
  width: max-content;
  animation: home-marquee 65s linear infinite;
  padding-left: 72px;
  will-change: transform;
}
body.home-page .logo-cloud:hover .logo-cloud-grid { animation-play-state: paused; }
body.home-page .logo-item {
  color: rgba(255,255,255,0.55) !important;
  white-space: nowrap;
  flex-shrink: 0;
}
body.home-page .logo-item--image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
body.home-page .logo-item--image img {
  display: block;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 1;
  transition: opacity 0.2s ease;
}
body.home-page .logo-cloud:hover .logo-item--image img { opacity: 1; }

/* ---- TESTIMONIALS — light section under the logo strip --- */
body.home-page .testimonials {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 84px 0 88px;
}
body.home-page .testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
  margin-top: 8px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
body.home-page .testimonial-card {
  --tc: var(--blue);
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid color-mix(in oklab, var(--tc) 55%, transparent);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.home-page .testimonial-card:hover { transform: none; box-shadow: none; }
body.home-page .testimonial-plum { --tc: var(--plum); }
body.home-page .testimonial-blue { --tc: var(--blue); }
body.home-page .testimonial-orange { --tc: var(--c-edu); }
body.home-page .testimonial-rose { --tc: #c2447e; }
body.home-page .testimonial-green { --tc: #1b8f5e; }
body.home-page .testimonial-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.home-page .testimonial-card blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
body.home-page .testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.home-page .testimonial-brand {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
body.home-page .testimonial-brand img {
  width: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.82;
}
body.home-page .testimonial-wordmark {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.home-page .testimonial-person {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
body.home-page .testimonial-meta strong {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
body.home-page .testimonial-meta .testimonial-person span {
  font-size: 12.5px;
  color: var(--ink-mute);
}
body.home-page .testimonial-meta .testimonial-person span.testimonial-company {
  color: var(--tc);
  font-weight: 600;
}
@media (max-width: 760px) {
  body.home-page .testimonial-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* ---- CHANNELS — sit on light blue tint for rhythm -------- */
body.home-page .channels {
  background:
    radial-gradient(ellipse 700px 500px at 100% 0%, color-mix(in oklab, var(--blue) 12%, transparent) 0%, transparent 60%),
    var(--paper-warm);
}

/* ---- CTA BAND — keep dark blue, add grid + amber accent - */
body.home-page .home-cta { padding: 110px 0; }
body.home-page .home-cta-inner { z-index: 2; }
body.home-page .home-cta .btn-primary {
  background: #893288;
  color: #fff;
  font-weight: 500;
  border: 1px solid #893288;
  box-shadow: 0 4px 14px -6px rgba(137,50,136,0.5);
}
body.home-page .home-cta .btn-primary:hover {
  background: #74246F;
  border-color: #74246F;
  color: #fff;
}
body.home-page .home-cta .btn-ghost {
  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;
  color: #fff;
  font-weight: 500;
}
body.home-page .home-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* ---- Smooth motion preferences --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-marquee-track,
  body.home-page .logo-cloud-grid { animation: none; }
}

/* ---- Phones --------------------------------------------- */
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  body.home-page section { padding: 64px 0; }

  /* Nav: shrink logo + CTAs so the bar never overflows */
  body.home-page .nav-inner { height: 64px; }
  body.home-page .nav-logo { height: 44px; }
  body.home-page .nav-logo img { width: auto !important; height: 44px !important; }
  body.home-page .nav-cta { gap: 8px; }
  body.home-page .nav-cta .btn { padding: 8px 12px; font-size: 13px; }

  /* Hero */
  body.home-page .hero h1 { font-size: 34px; }
  body.home-page .hero .lede { font-size: 16px; margin-top: 18px; }
  body.home-page .hero-cta { margin-top: 26px; }
  body.home-page .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  body.home-page .home-hero-industries { flex-wrap: wrap; }

  /* Section titles a touch smaller */
  body.home-page .section-title h2 { font-size: 28px; }
}

/* Very narrow phones — drop the secondary nav button if truly tight */
@media (max-width: 360px) {
  body.home-page .nav-cta .btn-ghost { display: none; }
}


/* ============================================================
   Landing-page family (industry pages, features, pricing, signup)
   Generated from the preview's nonprofit/styles.css: rules the base
   lacks are unscoped; rules that differ are scoped to body.landing-page.
   ============================================================ */

/* --- rules not in base.css --- */
.auth-back { position: absolute; top: 22px; left: 26px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: color-mix(in oklab, var(--paper) 86%, transparent); padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); transition: color 0.15s ease, border-color 0.15s ease; }
.auth-back:hover { color: var(--ink); border-color: var(--ink-soft); }
.auth-back strong { font-weight: 600; color: var(--blue); }
.trust-featured-portrait { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex-shrink: 0; transition: box-shadow 0.25s ease; }
.trust-featured-portrait > img { width: 172px; height: 172px; object-fit: cover; display: block; border-radius: var(--radius); background: rgba(255,255,255,0.10); box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 22px 48px -18px rgba(10, 24, 52, 0.6); }
.trust-featured-stars { display: flex; gap: 4px; color: var(--plum); margin-bottom: 20px; }
.trust-featured-stars svg { width: 19px; height: 19px; display: block; }
.trust-card-portrait { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: color-mix(in oklab,var(--blue) 8%,var(--white)); box-shadow: 0 0 0 1px var(--line); }
.trust-card-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-card-org { color: #fff; font-weight: 600; font-size: 12px; }
.trust-featured-name-row { display: flex; align-items: center; gap: 16px; margin-bottom: 3px; }
.trust-featured-name-row .trust-orglogo { height: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.28); border-left-color: var(--line); }
.trust-card-brand .trust-orglogo--icon { height: 50px; max-width: 58px; opacity: 1; }
.trust-logos { max-width: 1100px; margin: 0 auto; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.16); border-top-color: color-mix(in oklab,var(--blue) 16%,var(--line)); }
.trust-logos-label { text-align: center; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 36px; font-weight: 700; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item img { display: block; width: auto; filter: none; opacity: 0.62; transition: opacity 0.2s ease; }
.logo-marquee-item:hover img { opacity: 1; }
.pricing-details-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--blue); font-size: 15px; font-weight: 500; text-decoration: none; }
.pricing-details-link:hover { color: var(--blue-deep); }
.feature-quote-wide { grid-column: 1 / -1; margin-top: 16px; padding: 28px 32px; background: color-mix(in oklab, var(--plum) 10%, var(--white)); border: 1px solid color-mix(in oklab, var(--plum) 30%, var(--line)); border-left: 4px solid var(--plum); border-radius: 16px; }
.feature-quote-wide .feature-quote-tag { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 14px; }
.feature-quote-wide p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.feature-see-all { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 32px; }
.feature-see-all-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px 12px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 22px -8px color-mix(in oklab, var(--blue) 60%, transparent); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.feature-see-all-btn:hover { transform: translateY(-1px); filter: saturate(1.1); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 28px -8px color-mix(in oklab, var(--blue) 70%, transparent); }
.feature-see-all-arrow { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.18s ease, background 0.18s ease; }
.feature-see-all-btn:hover .feature-see-all-arrow { background: rgba(255,255,255,0.30); transform: translateX(3px); }
.use-case-copy { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.feature-copy { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes heroDrift { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; } 100% { background-position: -4% 2%, 4% -2%, 2% 4%, 0% 0%; } }
.use-case-feature:hover .check { transform: scale(1.08); box-shadow: 0 6px 14px -6px rgba(73, 127, 206, 0.45); }
.channel-chip:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 20px -10px rgba(73, 127, 206, 0.35); border-color: color-mix(in oklab, var(--blue) 28%, var(--line)); }
@keyframes meterPulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--plum) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--plum) 5%, transparent); } }
.footer-cta::after { content: ""; position: absolute; width: 720px; height: 720px; right: -200px; top: -250px; background: radial-gradient(circle, color-mix(in oklab, var(--coral) 45%, transparent) 0%, transparent 60%); pointer-events: none; opacity: 0.6; animation: glowDrift 14s ease-in-out infinite alternate; }
@keyframes dotPulseSoft { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--coral) 8%, transparent); } }
.hero-device-wrap::before { content: ""; position: absolute; inset: -160px -120px -160px -1100px; background: radial-gradient(ellipse 70% 60% at 78% 45%, color-mix(in oklab, var(--blue) 26%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 35% 55%, color-mix(in oklab, var(--blue) 14%, transparent) 0%, transparent 65%), radial-gradient(ellipse at 85% 85%, color-mix(in oklab, var(--coral) 14%, transparent) 0%, transparent 60%); filter: blur(40px); z-index: -1; border-radius: 50%; animation: glowDrift 12s ease-in-out infinite alternate; }
@keyframes glowDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10px, -10px) scale(1.05); } }
.use-case-feature .check, .use-case-feature:nth-child(3n+1) .check, .use-case-feature:nth-child(3n+2) .check, .use-case-feature:nth-child(3n+3) .check { background: var(--blue); color: #fff; }
.channel-chip .channel-chip-ico { background: #497FCE; color: #fff; }
.hero-cta .btn-primary { position: relative; overflow: hidden; }
.hero-cta .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero-cta .btn-primary:hover::after { transform: translateX(130%); }
.map-wrap .section-title h2, .pricing .section-title h2 { background: linear-gradient(110deg, var(--ink) 0%, var(--blue-deep) 60%, var(--plum) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.map-wrap .section-title h2 { background: linear-gradient(110deg, var(--ink) 0%, var(--blue-deep) 100%); -webkit-background-clip: text; background-clip: text; }
.hero .hero-eyebrow-badge,.hero-eyebrow-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #4C7EA9 !important; border: 1px solid #406D94; color: #fff !important; text-decoration: none; transition: background 150ms ease; }
.hero .hero-eyebrow-badge:hover,.hero-eyebrow-badge:hover { background: #406D94 !important; }
.trust-featured-portrait>img { background: color-mix(in oklab,var(--blue) 8%,var(--white)); box-shadow: 0 0 0 1px var(--line),0 18px 40px -20px rgba(15,19,24,0.28); }
.trust-featured-quote,.trust-featured-name,.trust-card-quote,.trust-card-name,.trust-card-org,.trust-card-wordmark { color: var(--ink); }
.trust-featured-role,.trust-card-role { color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 32px; }
  .hero, .meter-dot { animation: none !important; }
  .hero h1 strong, .hero-device-wrap::before, .footer-cta::after, .footer-cta::before, .world-map .map-grid-ocean circle, .eyebrow::before, .hero-trust .dot { animation: none !important; }
}
@media (max-width: 1000px) {
  .trust-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .logo-cloud { padding: 72px 0 64px; }
  .trust-featured { grid-template-columns: 1fr; gap: 24px; text-align: center; padding: 36px 28px; margin-bottom: 56px; }
  .trust-featured-quote { font-size: 23px; }
  .trust-featured-attr { flex-direction: column; gap: 16px; align-items: center; }
  .trust-featured-attr-text { align-items: center; }
  .trust-featured-orglogo { padding-right: 0; border-right: none; }
  .trust-cards { grid-template-columns: 1fr; margin-bottom: 64px; }
  .trust-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 36px; }
}

/* --- landing flavour of shared rules --- */
body.landing-page { --blue: #497FCE; --blue-deep: #2F6391; --blue-ink: #1F4570; --plum: #893288; --tint: #DBEAFE; --tint-2: #EEF4FC; --paper: #FBFAF7; --paper-warm: #F5F1EA; --ink: #14171F; --ink-soft: #4A5160; --ink-mute: #7B8290; --line: #E7E3DA; --line-strong: #D6D1C4; --white: #FFFFFF; --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; --shadow-sm: 0 1px 2px rgba(31, 69, 112, 0.06), 0 1px 3px rgba(31, 69, 112, 0.04); --shadow-md: 0 4px 14px rgba(31, 69, 112, 0.08), 0 2px 6px rgba(31, 69, 112, 0.05); --shadow-lg: 0 24px 60px -20px rgba(31, 69, 112, 0.25), 0 10px 24px -12px rgba(31, 69, 112, 0.15); --container: 1200px; --gutter: 32px; }
body.landing-page { --paper-warm: #E3EEFB; --tint-2: #DCE9FA; --tint: #C7DDF8; --plum-soft: #F4E2F3; --coral: #F26A4F; --coral-soft: #FFE0D6; --amber: #F4B43F; --shadow-md: 0 6px 18px rgba(31, 69, 112, 0.10), 0 2px 6px rgba(31, 69, 112, 0.06); --shadow-lg: 0 28px 64px -20px rgba(31, 69, 112, 0.32), 0 12px 28px -12px rgba(31, 69, 112, 0.18); }
body.landing-page .eyebrow { font-size: 11px; padding: 5px 12px; background: linear-gradient(135deg, color-mix(in oklab, var(--plum) 14%, var(--white)) 0%, color-mix(in oklab, var(--blue) 12%, var(--white)) 100%); border-radius: 999px; border: 1px solid color-mix(in oklab, var(--plum) 18%, transparent); }
body.landing-page .eyebrow::before { width: 6px; height: 6px; background: var(--coral); border-radius: 999px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 25%, transparent); animation: dotPulseSoft 2s ease-in-out infinite; }
body.landing-page .hero { background: radial-gradient(ellipse 900px 600px at 90% -10%, color-mix(in oklab, var(--blue) 32%, transparent) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at -10% 80%, color-mix(in oklab, var(--plum) 14%, transparent) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 50% 50%, color-mix(in oklab, var(--coral) 6%, transparent) 0%, transparent 70%), var(--paper); animation: heroDrift 18s ease-in-out infinite alternate; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
body.landing-page .hero-pill { padding: 6px 16px 6px 6px; gap: 12px; }
body.landing-page .hero-pill .badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; }
body.landing-page .hero-pill .badge-mark { width: 22px; height: 22px; flex-shrink: 0; display: block; }
body.landing-page .hero-pill .badge { background: linear-gradient(135deg, color-mix(in oklab, var(--coral) 18%, var(--white)) 0%, color-mix(in oklab, var(--plum) 14%, var(--white)) 100%); font-weight: 600; border: 1px solid color-mix(in oklab, var(--coral) 22%, transparent); }
body.landing-page .hero-trust .dot { background: var(--coral); box-shadow: 0 0 0 4px color-mix(in oklab, var(--coral) 28%, transparent); animation: dotPulseSoft 2s ease-in-out infinite; }
body.landing-page .phone { box-shadow: 0 40px 80px -30px rgba(31, 69, 112, 0.45), 0 16px 30px -12px rgba(137, 50, 136, 0.25), 0 0 0 1px rgba(0,0,0,0.05); }
body.landing-page .hero-annotation { box-shadow: 0 18px 44px -16px rgba(73, 127, 206, 0.42), 0 4px 12px rgba(31, 69, 112, 0.06); }
body.landing-page .hero-annotation .ico { border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 4px 10px -4px rgba(73, 127, 206, 0.45); }
body.landing-page .logo-cloud { background: radial-gradient(ellipse 800px 500px at 100% 0%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%), radial-gradient(ellipse 700px 600px at 0% 100%, color-mix(in oklab, var(--plum) 10%, transparent) 0%, transparent 60%), var(--paper-warm); color: var(--ink); border-top: 1px solid color-mix(in oklab,var(--blue) 16%,var(--line)); border-bottom: 1px solid color-mix(in oklab,var(--blue) 16%,var(--line)); }
body.landing-page .trust-featured { background: var(--white); border-radius: var(--radius-xl); box-shadow: 0 24px 60px -34px rgba(15,19,24,0.22); border-color: var(--line); }
body.landing-page .trust-featured-name { letter-spacing: 0.005em; }
body.landing-page .trust-featured-orglogo { margin-top: 0; border-right-color: var(--line); }
body.landing-page .trust-card { background: var(--white); border-radius: var(--radius-lg); border-color: var(--line); }
body.landing-page .trust-card-attr-text { border-left-color: var(--line); }
body.landing-page .trust-card-name { letter-spacing: 0.01em; }
body.landing-page .trust-orglogo { filter: none; opacity: 0.85; }
body.landing-page .trust-card-brand .trust-orglogo { height: 18px; }
body.landing-page .logo-marquee-track { animation: logo-scroll 42s linear infinite; }
body.landing-page .logo-marquee-item { justify-content: center; height: 80px; flex-shrink: 0; }
body.landing-page .use-case-features { gap: 22px; }
body.landing-page .use-case-feature .check { background: var(--blue); color: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease; }
body.landing-page .use-case-mockup { background: radial-gradient(ellipse 600px 400px at 85% -10%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at -10% 110%, color-mix(in oklab, var(--plum) 10%, transparent) 0%, transparent 60%), color-mix(in oklab, var(--blue) 6%, var(--paper-warm)); border: 1px solid color-mix(in oklab, var(--blue) 24%, var(--line)); box-shadow: 0 28px 60px -28px rgba(73, 127, 206, 0.42), 0 6px 18px -8px rgba(137, 50, 136, 0.12), inset 0 1px 0 rgba(255,255,255,0.7); }
body.landing-page .channels { background: radial-gradient(ellipse 800px 500px at 100% 0%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%), radial-gradient(ellipse 700px 600px at 0% 100%, color-mix(in oklab, var(--plum) 10%, transparent) 0%, transparent 60%), var(--paper-warm); }
body.landing-page .channel-chip { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
body.landing-page .channel-chip-ico { background: #497FCE; color: #fff; }
body.landing-page .map-stat .num { color: var(--blue-ink); background: none; -webkit-text-fill-color: currentColor; }
body.landing-page .flow-screenshot { box-shadow: 0 30px 64px -28px rgba(73, 127, 206, 0.42), 0 6px 16px rgba(31, 69, 112, 0.08); }
body.landing-page .pricing { background: radial-gradient(ellipse 700px 500px at 0% 100%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 100% 0%, color-mix(in oklab, var(--plum) 14%, transparent) 0%, transparent 60%), var(--paper-warm); }
body.landing-page .price-meter { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 460px; }
body.landing-page .meter-dot { animation: meterPulse 2.2s ease-in-out infinite; }
body.landing-page .pricing-include.is-emphasis { color: var(--blue-deep); }
body.landing-page .pricing-include.is-emphasis .check { background: var(--blue); }
body.landing-page .pricing-card { grid-template-areas: "price includes" "actions actions"; box-shadow: 0 32px 70px -30px rgba(31, 69, 112, 0.28), 0 12px 28px -10px rgba(73, 127, 206, 0.20); border: 1px solid color-mix(in oklab, var(--blue) 18%, var(--line)); }
body.landing-page .pricing-card::before { background: radial-gradient(circle, color-mix(in oklab, var(--blue) 25%, transparent) 0%, transparent 60%); }
body.landing-page .pricing-card .price { color: var(--blue-deep); background: none; -webkit-text-fill-color: currentColor; }
body.landing-page .pricing-card .price-tag { color: var(--blue-deep); background: var(--tint); }
body.landing-page .pricing-include .check { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); box-shadow: 0 2px 6px -2px rgba(73, 127, 206, 0.55); }
body.landing-page .footer-cta::before { animation: glowDrift 16s ease-in-out infinite alternate-reverse; }
body.landing-page .feature-panel { grid-template-columns: 1.3fr 1fr; align-items: center; }
body.landing-page .hero-eyebrow-text { color: #fff !important; }
body.landing-page .anno-ngo-badge .ico { background: transparent !important; }
@media (max-width: 980px) {
  body.landing-page .pricing-card { grid-template-areas: "price" "includes" "actions"; }
}

/* --- education: rules not in nonprofit --- */
body[data-vertical="education"] .trust-card-brand .trust-orglogo--lockup { height: 32px; width: auto; max-width: 110px; opacity: 1; }
body[data-vertical="education"] .edu-partner-bar { background: #122947; padding: 22px 0; position: relative; overflow: hidden; }
body[data-vertical="education"] .edu-partner-bar::before, body[data-vertical="education"] .edu-partner-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
body[data-vertical="education"] .edu-partner-bar::before { left: 0; background: linear-gradient(90deg, #122947, transparent); }
body[data-vertical="education"] .edu-partner-bar::after { right: 0; background: linear-gradient(-90deg, #122947, transparent); }
body[data-vertical="education"] .edu-partner-bar-label { text-align: center; font-size: 17px; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; margin-bottom: 18px; }
body[data-vertical="education"] .logo-cloud-label { text-align: center; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 40px; }
body[data-vertical="education"] .logo-cloud-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 54px; max-width: 1000px; margin: 0 auto; }
body[data-vertical="education"] .logo-cloud-grid .logo-item { color: #fff; opacity: 0.8; white-space: nowrap; transition: opacity 0.18s ease, transform 0.18s ease; }
body[data-vertical="education"] .logo-cloud-grid .logo-item:hover { opacity: 1; transform: translateY(-1px); }

/* --- education: differing rules --- */
body[data-vertical="education"] .hero { padding-bottom: 140px; }
body[data-vertical="education"] .hero-pill .badge { background: linear-gradient(135deg, #FBEBD7 0%, #F6D6B4 100%); color: #B8651A; border: 1px solid color-mix(in oklab, #E68628 32%, transparent); }
body[data-vertical="education"] .logo-cloud { border-top-color: color-mix(in oklab, #497FCE 30%, transparent); border-bottom-color: color-mix(in oklab, #497FCE 30%, transparent); }
body[data-vertical="education"] .trust-cards { align-items: stretch; }
body[data-vertical="education"] .trust-card-quote { flex: 1; }
body[data-vertical="education"] .trust-card-brand .trust-orglogo { height: 32px; max-width: 110px; }
body[data-vertical="education"] .trust-card-brand .trust-orglogo--icon { height: 32px; }
body[data-vertical="education"] .logo-marquee-track { animation: logo-scroll 54s linear infinite; }
body[data-vertical="education"] .use-case-panel { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
body[data-vertical="education"] .use-case-features { gap: 16px; }
body[data-vertical="education"] .feature-panel { grid-template-columns: 1.05fr 1fr; align-items: start; }

/* --- healthcare: rules not in nonprofit --- */
body[data-vertical="healthcare"] .trust-featured-wordmark { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: #fff; padding-right: 18px; border-right: 1px solid rgba(255,255,255,0.22); white-space: nowrap; }
body[data-vertical="healthcare"] .trust-featured-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); }
body[data-vertical="healthcare"] .trust-featured-stat { display: flex; flex-direction: column; gap: 3px; }
body[data-vertical="healthcare"] .trust-featured-stat .num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: color-mix(in oklab, var(--blue) 52%, white); }
body[data-vertical="healthcare"] .trust-featured-stat .lbl { font-size: 13.5px; color: rgba(255,255,255,0.72); }
body[data-vertical="healthcare"] .trust-card-stat { display: flex; align-items: baseline; gap: 9px; margin-top: -2px; }
body[data-vertical="healthcare"] .trust-card-stat .num { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -0.015em; color: color-mix(in oklab, var(--blue) 52%, white); flex-shrink: 0; }
body[data-vertical="healthcare"] .trust-card-stat .lbl { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.3; }

/* --- healthcare: differing rules --- */
body[data-vertical="healthcare"] .hero-pill .badge { background: linear-gradient(135deg, #FBE0EF 0%, #F6C2DF 100%); color: #8E1565; border: 1px solid color-mix(in oklab, #C2208B 32%, transparent); }
body[data-vertical="healthcare"] .trust-cards { align-items: stretch; }
body[data-vertical="healthcare"] .trust-card-quote { flex: 1; }
body[data-vertical="healthcare"] .use-case-panel { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
body[data-vertical="healthcare"] .use-case-features { gap: 16px; }
body[data-vertical="healthcare"] .feature-panel { grid-template-columns: 1.05fr 1fr; align-items: start; }

/* --- business: rules not in nonprofit --- */
body[data-vertical="business"] .trust-featured-wordmark { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: #fff; padding-right: 18px; border-right: 1px solid rgba(255,255,255,0.22); white-space: nowrap; }
body[data-vertical="business"] .trust-featured-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); }
body[data-vertical="business"] .trust-featured-stat { display: flex; flex-direction: column; gap: 3px; }
body[data-vertical="business"] .trust-featured-stat .num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: color-mix(in oklab, var(--blue) 52%, white); }
body[data-vertical="business"] .trust-featured-stat .lbl { font-size: 13.5px; color: rgba(255,255,255,0.72); }
body[data-vertical="business"] .trust-card-stat { display: flex; align-items: baseline; gap: 9px; margin-top: -2px; }
body[data-vertical="business"] .trust-card-stat .num { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -0.015em; color: color-mix(in oklab, var(--blue) 52%, white); flex-shrink: 0; }
body[data-vertical="business"] .trust-card-stat .lbl { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.3; }

/* --- business: differing rules --- */
body[data-vertical="business"] .hero-pill .badge { background: linear-gradient(135deg, #DCEFE6 0%, #BCE3CF 100%); color: #14633F; border: 1px solid color-mix(in oklab, #1F8A5B 32%, transparent); }
body[data-vertical="business"] .trust-cards { align-items: stretch; }
body[data-vertical="business"] .trust-card-quote { flex: 1; }
body[data-vertical="business"] .use-case-panel { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
body[data-vertical="business"] .use-case-features { gap: 16px; }
body[data-vertical="business"] .feature-panel { grid-template-columns: 1.05fr 1fr; align-items: start; }

/* --- nonprofit: differing rules vs home.css --- */
body[data-vertical="nonprofit"] .hero-eyebrow-new { background: #fff !important; color: #4C7EA9 !important; }
body[data-vertical="nonprofit"] .hero-eyebrow-text { color: #fff !important; }
body[data-vertical="nonprofit"] .anno-ngo-badge .ico { background: transparent !important; }

/* ============================================================
   Additions to the design handoff: things the static preview
   didn't need (a mobile menu, tab panels switched without React,
   sizes the JSX set inline).
   ============================================================ */

/* --- buttons the JSX sized inline --- */
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* --- the homepage headline's gradient and hand-drawn underline (were inline styles in the JSX) --- */
body.home-page .home-hero h1 .hero-grad {
  background-image: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 24%, #E4C2EE 58%, #BE68CD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.home-page .home-hero h1 .hero-underline { position: relative; display: inline-block; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
body.home-page .home-hero h1 .hero-underline svg { position: absolute; left: -2%; bottom: -0.42em; width: 104%; height: 0.40em; overflow: visible; }
body.home-page .home-hero h1 .hero-plain { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }

/* --- mobile nav --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: var(--tint-2); }
.nav-menu { display: contents; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    padding: 12px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(15, 30, 60, 0.35);
  }
  .nav.open .nav-menu { display: block; }
  .nav.open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav.open .nav-links a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav.open .nav-links a.active { padding-left: 12px; box-shadow: inset 3px 0 0 var(--blue); }
  .nav.open .nav-cta { margin-top: 16px; }
  .nav.open .nav-cta .btn { flex: 1; justify-content: center; }
}

/* --- tab panels (use cases, features): only the active one shows, and it re-runs its entrance animation --- */
[data-tab-panel]:not(.active) { display: none !important; }
.use-case-panel[data-tab-panel].active, .feature-panel[data-tab-panel].active { animation: panelFade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* --- messages Django may attach to a page --- */
.site-messages { padding-top: 16px; }
.site-message { padding: 12px 16px; border-radius: 10px; background: var(--tint); color: var(--blue-deep); margin-bottom: 8px; }

/* --- the browser-chrome frame around product screenshots (was inline styles in the JSX) --- */
.browser-frame {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px -8px rgba(31, 69, 112, 0.18), 0 2px 8px rgba(31, 69, 112, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
.browser-frame-bar {
  height: 32px;
  background: #F4F4F4;
  border-bottom: 1px solid #E5E5E5;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
}
.browser-frame-bar span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.browser-frame-bar span:nth-child(1) { background: #FF5F57; }
.browser-frame-bar span:nth-child(2) { background: #FFBD2E; }
.browser-frame-bar span:nth-child(3) { background: #28C840; }
.browser-frame img { width: 100%; height: auto; display: block; }
/* a screenshot's browser chrome and a phone's case are frame enough, so the panel drops its own */
body .use-case-mockup.has-frame { padding: 0; background: none; border: none; min-height: 0; display: block; box-shadow: none; }
body .use-case-mockup.has-phone { padding: 0; background: none; border: none; min-height: 0; box-shadow: none; }
.mockup-narrow { width: 75%; margin: 0 auto; }
.mockup-wide { width: 110%; margin-left: -5%; }
.mockup-medium { width: 85%; margin: 0 auto; }
@media (max-width: 980px) {
  .mockup-wide { width: 100%; margin-left: 0; }
}

/* --- the phone mockup's avatar initials --- */
.sms-avatar { text-transform: uppercase; }

/* --- the industry mark (heart, cap, briefcase, cross) --- */
.ind-dot { width: 24px; height: 24px; flex-shrink: 0; }

/* ============================================================
   Pricing page styles — scoped under .pp-page
   Mirrors actual TextIt 3-tier structure.
   ============================================================ */

.pp-page { background: var(--paper); }

/* ---------- Hero ---------- */
.pp-hero {
  position: relative;
  padding: 120px 0 50px;
  background:
    radial-gradient(ellipse 900px 600px at 92% -10%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, color-mix(in oklab, var(--plum) 16%, transparent) 0%, transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}
.pp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.pp-hero .eyebrow { margin-bottom: 16px; }
.pp-hero h1 {
  font-size: clamp(44px, 5.4vw, 68px);
  margin: 0 0 18px;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 500;
}
.pp-hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue) 0%, var(--plum) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pp-hero-lede {
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto 32px;
  text-wrap: pretty;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pp-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.pp-trust-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.pp-trust-sep { width: 1px; height: 14px; background: var(--line-strong); }

/* ---------- The single plan (no tiers) ---------- */
.pp-plan {
  padding: 50px 0 80px;
  background: transparent;
}
.pp-plan-inner { max-width: 920px; }

/* Banner: one plan, no tiers */
.pp-plan-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  font-size: 15px;
  color: var(--ink);
  background: color-mix(in oklab, var(--blue) 7%, var(--white));
  border: 1px solid color-mix(in oklab, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 12px 24px;
  margin: 0 auto 28px;
  width: max-content;
  max-width: 100%;
}
.pp-plan-banner strong { font-weight: 600; color: var(--blue-deep); }
.pp-plan-banner-mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
}

/* The plan card */
.pp-plan-card {
  background:
    radial-gradient(ellipse 700px 380px at 50% -8%, color-mix(in oklab, var(--blue) 16%, transparent) 0%, transparent 70%),
    var(--white);
  border: none;
  border-radius: 24px;
  padding: 48px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 5px color-mix(in oklab, var(--blue) 20%, transparent),
    0 44px 96px -42px rgba(73,127,206,0.92);
}
.pp-plan-head { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.pp-plan-head h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-weight: 500;
  margin: 0 0 14px;
}
.pp-plan-head p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Price — clear headline ($25/month) with overage as secondary badge */
.pp-plan-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  padding: 30px 34px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--blue) 18%, var(--white)) 0%, color-mix(in oklab, var(--plum) 8%, var(--white)) 100%);
  border: 1px solid color-mix(in oklab, var(--blue) 32%, var(--line));
  border-radius: 18px;
}
.pp-plan-price-main { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.pp-plan-price-num {
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.pp-plan-price-per { font-size: 18px; color: var(--ink-mute); font-weight: 400; }
.pp-plan-price-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  max-width: 360px;
}
.pp-plan-price-incl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.pp-plan-price-incl svg { flex-shrink: 0; color: var(--blue-deep); margin-top: 2px; }
.pp-plan-price-incl strong { font-weight: 600; }
.pp-plan-overage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed color-mix(in oklab, var(--blue) 30%, var(--line));
  padding: 7px 12px;
  border-radius: 9px;
}
.pp-plan-overage strong { color: var(--blue-deep); font-weight: 600; }
.pp-plan-overage svg { color: var(--blue); flex-shrink: 0; }

/* Features */
.pp-plan-features {
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.pp-plan-features-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  margin-bottom: 22px;
}
.pp-plan-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 36px;
}
.pp-plan-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.3;
}
.pp-plan-list li svg {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #497FCE;
  color: #fff;
  padding: 6px;
}
.pp-list-emph strong { color: var(--blue-deep); font-weight: 600; }

/* Actions */
.pp-plan-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pp-plan-actions-note {
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.pp-tier-cta { white-space: nowrap; }

/* ---------- Need more — inset footer INSIDE the plan card (not a separate plan) ---------- */
.pp-more {
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
}
.pp-more-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  font-weight: 600;
  margin-bottom: 10px;
}
.pp-more-body h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.pp-more-body p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 560px;
}
.pp-more-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.pp-more-quote {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--plum) 0%, var(--blue-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-more-quote-sub { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 12px; }

/* ---------- Generic section scaffold ---------- */
.pp-section {
  padding: 100px 0;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.pp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.pp-section-head .eyebrow { margin-bottom: 18px; }
.pp-section-head h2 {
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 18px;
  font-weight: 500;
}
.pp-section-lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ---------- Messaged Contact — compact ---------- */
.pp-mc {
  background: color-mix(in oklab, var(--blue) 3%, var(--paper));
  padding: 80px 0;
}
.pp-mc-inner-compact {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.pp-mc-head h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 14px;
  font-weight: 500;
}
.pp-mc-head .pp-section-lede { margin: 0 auto 40px; }
.pp-mc-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-mc-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
}
.pp-mc-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px -8px rgba(73,127,206,0.45);
}

/* ---------- Discount strip ---------- */
.pp-discount-strip {
  padding: 36px 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--plum) 10%, var(--paper)) 0%,
    color-mix(in oklab, var(--blue) 8%, var(--paper)) 100%);
  border-top: 1px solid color-mix(in oklab, var(--plum) 16%, var(--line));
  border-bottom: 1px solid color-mix(in oklab, var(--blue) 16%, var(--line));
}
/* Nonprofit-style banner override */
.pp-np-banner {
  background: linear-gradient(135deg, #497FCE 0%, #2F6391 100%) !important;
  border-top: none;
  border-bottom: none;
  padding: 0;
}
.pp-np-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pp-np-banner-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pp-np-banner-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in oklab, #893288 15%, #fff);
  display: grid;
  place-items: center;
}
.pp-np-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-np-banner-text strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.pp-np-banner-text span {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
}
.pp-np-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: #fff;
  color: #2F6391;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,0.25);
}
.pp-np-banner-btn:hover {
  background: #f0f5ff;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.30);
  color: #2F6391;
}
@media (max-width: 700px) {
  .pp-np-banner-inner { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .pp-np-banner-btn { width: 100%; justify-content: center; }
}
.pp-discount-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pp-discount-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--plum) 0%, var(--blue-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pp-discount-body { flex: 1; min-width: 240px; }
.pp-discount-body strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.pp-discount-body span {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */
.pp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.pp-faq-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pp-faq-item[open] {
  border-color: color-mix(in oklab, var(--blue) 35%, var(--line));
  box-shadow: 0 10px 28px -14px rgba(73,127,206,0.22);
}
.pp-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
}
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-chevron {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px -4px rgba(73,127,206,0.50);
}
.pp-faq-item:hover .pp-faq-chevron {
  background: var(--blue-deep);
  box-shadow: 0 6px 14px -4px rgba(73,127,206,0.65);
}
.pp-faq-item[open] .pp-faq-chevron {
  transform: rotate(180deg);
  background: var(--plum);
  box-shadow: 0 6px 14px -4px rgba(137,50,136,0.55);
}
.pp-faq-answer {
  padding: 0 22px 22px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pp-hero { padding: 90px 0 40px; }
  .pp-section { padding: 60px 0; }
  .pp-mc { padding: 60px 0; }
  .pp-mc-pills { grid-template-columns: 1fr; }
  .pp-faq-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .pp-faq-col { display: contents; }
  .pp-plan-card { padding: 32px 24px; }
  .pp-plan-price { gap: 22px; padding: 24px; }
  .pp-plan-list { grid-template-columns: 1fr; max-width: 360px; }
  .pp-more { grid-template-columns: 1fr; gap: 22px; }
  .pp-more-cta { flex-direction: row; align-items: baseline; gap: 10px; text-align: left; flex-wrap: wrap; }
  .pp-more-quote-sub { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .pp-hero-trust { flex-wrap: wrap; justify-content: center; border-radius: 14px; }
  .pp-discount-inner { flex-direction: column; align-items: flex-start; }
  .pp-plan-price { flex-direction: column; gap: 16px; text-align: center; }
  .pp-plan-price-meta { align-items: center; text-align: center; }
  .pp-plan-actions .btn { width: 100%; justify-content: center; }
}