/* ============================================================
   Donatefy Marketing Site - Version B design system (taste build)
   Anchors: blue-600 accent, slate ink ramp, Inter Variable + opsz,
   pills interactive / 16px cards / 24px shells / 10px inputs,
   ambient ink shadows, one ink interlude per page, light theme locked.
   Companion spec: docs/DONATEFY-WEBSITE-DESIGN-SYSTEM-TASTE.md
   ============================================================ */

:root {
  --blue-600: #2563EB; --blue-700: #1D4ED8;
  --blue-tint-8: rgba(37,99,235,0.08); --blue-tint-12: rgba(37,99,235,0.12);
  --indigo-600: #4F46E5;
  --ink-900: #0F172A; --ink-700: #334155;
  --ink-600: #475569; --ink-500: #64748B; --ink-400: #94A3B8;
  --ground-0: #FFFFFF; --ground-1: #F8FAFC; --ground-2: #F1F5F9; --ground-ink: #0F172A;
  --radius-pill: 999px; --radius-card: 16px; --radius-shell: 24px; --radius-input: 10px;
  --shadow-ambient: 0 24px 80px -16px rgba(15,23,42,0.10), 0 4px 16px -4px rgba(15,23,42,0.04);
  --shadow-soft: 0 12px 40px -12px rgba(15,23,42,0.08);
  --shadow-cta: 0 12px 32px -8px rgba(37,99,235,0.35);
  --inner-highlight: inset 0 1px 1px rgba(255,255,255,0.6);
  --hairline: 1px solid rgba(15,23,42,0.07);
  --hairline-strong: 1px solid rgba(15,23,42,0.13);
  --hairline-on-ink: 1px solid rgba(255,255,255,0.12);
  --ring-shell: 0 0 0 1px rgba(15,23,42,0.05);
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
  --t-hover: 250ms var(--ease-lux);
  --container: 1200px;
  --prose-max: 620px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-optical-sizing: auto; font-feature-settings: 'cv01','ss03'; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--ground-0);
  color: var(--ink-600);
  font-size: 16px; line-height: 1.65; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

h1, h2, h3, h4 { color: var(--ink-900); }
a { color: var(--blue-600); }
img { max-width: 100%; height: auto; display: block; }

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

/* -- Type scale ------------------------------------------- */
.t-display { font-size: clamp(42px, 6.5vw, 72px); line-height: 1.03; font-weight: 560; letter-spacing: -0.028em; }
.t-h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.t-h3 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.t-h4 { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; }
.t-lead { font-size: 19px; line-height: 1.55; color: var(--ink-600); }
.t-small { font-size: 14px; color: var(--ink-500); }
.t-stat { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.eyebrow-pill {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill); padding: 5px 13px;
  background: var(--blue-tint-8); color: var(--blue-700);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}

/* -- Buttons: pill + nested arrow circle ------------------ */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 6px 6px 6px 24px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.011em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover);
}
.cta:active { transform: scale(0.98); }
.cta .arrow-cell {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-hover);
}
.cta:hover .arrow-cell { transform: translate(2px, -1px) scale(1.05); }
.cta .arrow-cell svg { width: 16px; height: 16px; }
.cta-primary { background: var(--blue-600); color: #fff; }
.cta-primary:hover { background: var(--blue-700); }
.cta-primary .arrow-cell { background: rgba(255,255,255,0.16); color: #fff; }
.cta-hero { box-shadow: var(--shadow-cta); }
.cta-secondary { background: var(--ground-0); border: var(--hairline); color: var(--ink-900); box-shadow: var(--ring-shell); }
.cta-secondary:hover { background: var(--ground-1); }
.cta-secondary .arrow-cell { background: rgba(15,23,42,0.05); color: var(--ink-900); }
.cta-compact { height: 40px; padding: 5px 5px 5px 18px; font-size: 14px; gap: 10px; }
.cta-compact .arrow-cell { width: 30px; height: 30px; }
.cta-onink { background: #fff; color: var(--ink-900); }
.cta-onink:hover { background: #E2E8F0; }
.cta-onink .arrow-cell { background: rgba(15,23,42,0.08); color: var(--ink-900); }
.link-plain { color: var(--ink-900); font-weight: 500; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(15,23,42,0.2); padding-bottom: 1px; transition: border-color var(--t-hover); }
.link-plain:hover { border-color: var(--blue-600); }

/* -- Island nav ------------------------------------------- */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 300; padding: 16px 16px 0; pointer-events: none; }
.island-nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  max-width: 1040px; margin: 0 auto; height: 60px; padding: 0 10px 0 22px;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: var(--hairline); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}
.island-nav .brand { display: inline-flex; align-items: center; margin-right: 18px; }
.island-nav .brand img { height: 26px; width: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 450; color: var(--ink-600); text-decoration: none;
  transition: color var(--t-hover), background-color var(--t-hover);
  background: none; border: none; cursor: pointer; font-family: var(--font-sans); letter-spacing: -0.011em;
}
.nav-link:hover { color: var(--ink-900); background: rgba(15,23,42,0.04); }
.nav-link svg { width: 12px; height: 12px; opacity: 0.5; }
.nav-spacer { flex: 1; }
.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: 8px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(20px);
  border: var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient);
  opacity: 0; visibility: hidden; translate: 0 -4px;
  transition: opacity 200ms var(--ease-lux), visibility 200ms, translate 200ms var(--ease-lux);
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.nav-dropdown a {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: var(--ink-600); text-decoration: none;
  transition: background-color var(--t-hover), color var(--t-hover);
}
.nav-dropdown a:hover { background: var(--blue-tint-8); color: var(--ink-900); }
.nav-dropdown .dd-label { padding: 8px 12px 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); }
.nav-burger { display: none; }

/* mobile nav */
@media (max-width: 960px) {
  .island-nav .nav-item, .island-nav .nav-signin { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(15,23,42,0.05); cursor: pointer;
  }
  .nav-burger svg { width: 18px; height: 18px; color: var(--ink-900); }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 400; padding: 96px 28px 40px;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(28px);
    display: none; overflow-y: auto;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu a { display: block; padding: 13px 0; font-size: 19px; font-weight: 500; color: var(--ink-900); text-decoration: none; border-bottom: var(--hairline); }
  .mobile-menu .mm-label { margin-top: 22px; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); }
  .mobile-close { position: fixed; top: 24px; right: 24px; z-index: 401; width: 44px; height: 44px; border-radius: 50%; border: var(--hairline); background: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; }
  .mobile-close.open { display: inline-flex; }
}

/* -- Sections --------------------------------------------- */
.section { padding: clamp(72px, 10vw, 136px) 0; }
.section-tight { padding: clamp(56px, 7vw, 96px) 0; }
.section + .section-divided { border-top: var(--hairline); }
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head .t-h2 { margin-bottom: 16px; }
.sec-head .t-lead { max-width: var(--prose-max); }
.center { text-align: center; }
.center .sec-head { margin-left: auto; margin-right: auto; }
.center .t-lead, .center .prose { margin-left: auto; margin-right: auto; }

/* -- Hero ------------------------------------------------- */
.hero { position: relative; padding: 156px 0 clamp(64px, 8vw, 104px); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 58% 52%, rgba(37,99,235,0.05), transparent 65%);
}
.hero .container { position: relative; }
.hero .t-lead { max-width: 560px; margin-top: 24px; }
.hero .cta-row { margin-top: 36px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* -- Double-bezel shells ---------------------------------- */
.shell {
  background: rgba(15,23,42,0.03);
  padding: 8px; border-radius: var(--radius-shell);
  box-shadow: var(--ring-shell), var(--shadow-ambient);
}
.shell-core {
  background: var(--ground-0); border-radius: var(--radius-card);
  border: var(--hairline); box-shadow: var(--inner-highlight);
  overflow: hidden; height: 100%;
}
.shell-flat { box-shadow: var(--ring-shell), var(--shadow-soft); }

/* -- Bento ------------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.b3 { grid-column: span 3; } .b4 { grid-column: span 4; } .b5 { grid-column: span 5; }
.b6 { grid-column: span 6; } .b7 { grid-column: span 7; } .b8 { grid-column: span 8; }
.b12 { grid-column: span 12; }
.tile-pad { padding: clamp(24px, 3vw, 34px); }
.tile-pad h3 { margin-bottom: 8px; }
.tile-pad p { font-size: 15px; color: var(--ink-600); max-width: 46ch; }
.tile-list { list-style: none; margin-top: 14px; }
.tile-list li { position: relative; padding: 6px 0 6px 26px; font-size: 14.5px; color: var(--ink-600); }
.tile-list li::before {
  content: ''; position: absolute; left: 2px; top: 12px; width: 14px; height: 14px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.tile-ink { background: var(--ground-ink); color: rgba(255,255,255,0.62); }
.tile-ink h3, .tile-ink .t-stat { color: #fff; }
.tile-ink p { color: rgba(255,255,255,0.62); }
.tile-tint { background: var(--ground-2); }

.chip-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 18px; flex: none;
  background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.chip-icon svg { width: 20px; height: 20px; }

/* -- Visual placeholder slots (internal spec, styled deliberately) -- */
.visual-slot {
  min-height: 240px; height: 100%; padding: 28px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    linear-gradient(rgba(248,250,252,0.92), rgba(248,250,252,0.92)),
    repeating-linear-gradient(45deg, rgba(15,23,42,0.05) 0 1px, transparent 1px 12px);
  color: var(--ink-500); font-size: 13.5px; line-height: 1.6; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0;
}
.visual-slot span { max-width: 52ch; }

/* -- Workflow steps --------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; counter-reset: step; }
.step { padding: 26px 24px; border-radius: var(--radius-card); border: var(--hairline); background: var(--ground-0); box-shadow: var(--ring-shell); }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
  background: var(--blue-tint-8); color: var(--blue-700); font-weight: 600; font-size: 14px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; }

/* -- Feature split rows ----------------------------------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.split .copy { grid-column: span 5; }
.split .media { grid-column: span 7; }
.split.flip .copy { order: 2; }
.split.flip .media { order: 1; }
.split .copy :is(h2, h3) { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.018em; margin: 14px 0 12px; }
.split .copy p { max-width: 46ch; }

/* -- Logo wall -------------------------------------------- */
.logo-wall { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; justify-content: center; }
.logo-wall img { height: 28px; width: auto; filter: grayscale(1); opacity: 0.65; }

/* -- Ink interlude / CTA band ----------------------------- */
.interlude { background: var(--ground-ink); color: rgba(255,255,255,0.65); border-radius: var(--radius-shell); padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); }
.interlude h2 { color: #fff; }
.interlude .t-lead { color: rgba(255,255,255,0.65); }
.interlude .eyebrow-pill { background: rgba(96,165,250,0.15); color: #93C5FD; }
.interlude a:not(.cta) { color: #93C5FD; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; }
.stat-grid .t-stat { font-size: clamp(34px, 4.5vw, 52px); }
.stat-grid .stat-label { font-size: 13.5px; margin-top: 6px; }

/* -- Tables (comparison) ---------------------------------- */
.table-wrap { border-radius: var(--radius-card); border: var(--hairline); overflow-x: auto; background: var(--ground-0); box-shadow: var(--ring-shell); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
table.cmp th { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink-900); padding: 16px 20px; border-bottom: var(--hairline-strong); background: var(--ground-1); }
table.cmp td { padding: 14px 20px; border-bottom: var(--hairline); color: var(--ink-600); vertical-align: top; }
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp td:first-child { color: var(--ink-900); font-weight: 500; }
.check-yes, .check-no { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; }
.check-yes { background: var(--blue-tint-8); }
.check-yes svg { width: 12px; height: 12px; color: var(--blue-700); }
.check-no { background: rgba(15,23,42,0.04); }
.check-no svg { width: 10px; height: 10px; color: var(--ink-400); }

/* -- FAQ accordion ---------------------------------------- */
.faq { max-width: 760px; }
.faq details { border-bottom: var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,23,42,0.05) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--t-hover);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 44px 22px 4px; font-size: 15px; color: var(--ink-600); max-width: 62ch; }

/* -- Pricing cards ---------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; height: 100%; }
.price-card .tile-pad { display: flex; flex-direction: column; height: 100%; }
.price-card .plan-name { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.price-card .plan-price { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); margin: 12px 0 2px; font-variant-numeric: tabular-nums; }
.price-card .plan-price small { font-size: 15px; font-weight: 400; color: var(--ink-500); letter-spacing: -0.011em; }
.price-card .plan-blurb { font-size: 14px; min-height: 42px; }
.price-card .tile-list { flex: 1; }
.price-card .cta { margin-top: 22px; justify-content: space-between; }

/* -- Forms (demo/contact) --------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-900); margin-bottom: 7px; }
.input, select.input, textarea.input {
  width: 100%; height: 48px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); letter-spacing: -0.011em;
  padding: 0 16px; border-radius: var(--radius-input);
  border: var(--hairline); background: var(--ground-0); box-shadow: var(--ring-shell);
  outline: none; transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
textarea.input { height: auto; min-height: 120px; padding: 13px 16px; resize: vertical; }
.input::placeholder { color: var(--ink-400); }
.input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.field .hint { font-size: 13px; color: var(--ink-500); margin-top: 6px; }

/* -- Footer ----------------------------------------------- */
footer.site-footer { border-top: var(--hairline); padding: clamp(48px, 6vw, 80px) 0 40px; background: var(--ground-1); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid .f-brand img.f-logo { height: 26px; margin-bottom: 14px; }
.footer-grid .f-brand p { font-size: 14px; max-width: 30ch; }
.footer-grid h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 14px; }
.footer-grid a { display: block; font-size: 14px; color: var(--ink-600); text-decoration: none; padding: 4px 0; transition: color var(--t-hover); }
.footer-grid a:hover { color: var(--ink-900); }
.footer-base { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: var(--hairline); font-size: 13px; color: var(--ink-500); }

/* -- Reveals ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); }
.reveal.in { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--ease-lux), transform 700ms var(--ease-lux), filter 700ms var(--ease-lux); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
  .cta .arrow-cell, .cta, .faq summary::after { transition: none; }
}

/* -- Breadcrumb-ish page header for subpages -------------- */
.page-hero { padding: 148px 0 clamp(40px, 5vw, 64px); }
.page-hero .t-display { font-size: clamp(36px, 5vw, 58px); max-width: 800px; }
.page-hero .t-lead { max-width: 620px; margin-top: 20px; }

/* -- Responsive collapse ---------------------------------- */
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr; }
  .b3,.b4,.b5,.b6,.b7,.b8,.b12 { grid-column: span 1; }
  .split { grid-template-columns: 1fr; }
  .split .copy, .split .media { grid-column: span 1; }
  .split.flip .copy { order: 1; }
  .split.flip .media { order: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 132px; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .cta-row .cta { width: 100%; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LOOP 2: Interaction layer - motion dial 5 (taste spec)
   CSS scroll-driven + IO classes; every effect collapses under
   prefers-reduced-motion. No scroll listeners anywhere.
   ============================================================ */

/* -- Nav scroll state: island compresses + deepens -- */
.nav-wrap { transition: padding 300ms var(--ease-lux); }
.nav-wrap.scrolled { padding-top: 10px; }
.nav-wrap.scrolled .island-nav {
  height: 54px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), var(--shadow-ambient);
}
.island-nav { transition: height 300ms var(--ease-lux), box-shadow 300ms var(--ease-lux), background-color 300ms var(--ease-lux); }

/* -- Hero word choreography: masked line rise + blur resolve -- */
.hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hw > span {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0.001;
  filter: blur(5px);
}
.hero-ready .hw > span {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 780ms var(--ease-lux) calc(var(--wi, 0) * 65ms),
    opacity 620ms var(--ease-lux) calc(var(--wi, 0) * 65ms),
    filter 620ms var(--ease-lux) calc(var(--wi, 0) * 65ms);
}

/* -- Upgraded reveals: rise + blur resolve, auto-staggered -- */
.reveal { opacity: 0.001; transform: translateY(26px); filter: blur(6px); }
.reveal.in {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition:
    opacity 700ms var(--ease-lux) var(--rd, 0ms),
    transform 700ms var(--ease-lux) var(--rd, 0ms),
    filter 700ms var(--ease-lux) var(--rd, 0ms);
}

/* -- Pointer spotlight on cards -- */
.spot { position: relative; }
.spot::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,0.08), transparent 65%);
  opacity: 0; transition: opacity 350ms var(--ease-lux);
}
.spot:hover::after { opacity: 1; }

/* -- Device tilt (marked elements only) -- */
.tilt { transition: transform 300ms var(--ease-lux), box-shadow 300ms var(--ease-lux); will-change: transform; }

/* -- Channel marquee (max one per page) -- */
.marquee {
  overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track { display: flex; gap: 14px; width: max-content; animation: mq-slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq-slide { to { transform: translateX(-50%); } }
.mq-chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--ground-0); border: var(--hairline); box-shadow: var(--ring-shell);
  font-size: 14px; font-weight: 500; color: var(--ink-600);
}
.mq-chip svg { width: 15px; height: 15px; color: var(--blue-600); }

/* -- Workflow tour tabs -- */
.tour { margin-top: 40px; }
.tour-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-tab {
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; letter-spacing: -0.011em;
  padding: 10px 20px; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; border: var(--hairline); color: var(--ink-600);
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.tour-tab:hover { background: var(--blue-tint-8); color: var(--ink-900); }
.tour-tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.tour-panels { position: relative; margin-top: 22px; }
.tour-panel { display: none; }
.tour-panel.active { display: block; animation: panel-in 520ms var(--ease-lux); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* -- Ecosystem flow diagram -- */
.flow-diagram { position: relative; }
.flow-diagram svg { width: 100%; height: auto; display: block; }
.fd-path { stroke: rgba(37,99,235,0.28); stroke-width: 1.5; fill: none; stroke-dasharray: 420; stroke-dashoffset: 420; }
.flow-diagram.in .fd-path { animation: fd-draw 1200ms var(--ease-lux) forwards; animation-delay: calc(var(--pi, 0) * 110ms); }
@keyframes fd-draw { to { stroke-dashoffset: 0; } }
.fd-dot { fill: var(--blue-600); opacity: 0; }
.flow-diagram.in .fd-dot { animation: fd-dot-travel 3.2s var(--ease-lux) infinite; animation-delay: calc(var(--pi, 0) * 400ms + 1200ms); }
@keyframes fd-dot-travel {
  0% { opacity: 0; offset-distance: 0%; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}
.fd-node { opacity: 0; transform: translateY(10px); }
.flow-diagram.in .fd-node { animation: fd-node-in 600ms var(--ease-lux) forwards; animation-delay: calc(var(--ni, 0) * 90ms); }
@keyframes fd-node-in { to { opacity: 1; transform: none; } }
.fd-node-box {
  fill: #fff; stroke: rgba(15,23,42,0.1); stroke-width: 1; rx: 12;
  filter: drop-shadow(0 4px 12px rgba(15,23,42,0.06));
}
.fd-node-box.fd-ink { fill: var(--ground-ink); stroke: transparent; }
.fd-node-box.fd-accent { fill: var(--blue-600); stroke: transparent; }
.fd-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: var(--ink-900); letter-spacing: -0.01em; }
.fd-label.on-dark { fill: #fff; }
.fd-sub { font-family: var(--font-sans); font-size: 10.5px; fill: var(--ink-500); }
.fd-sub.on-dark { fill: rgba(255,255,255,0.6); }

/* -- Count-up stats -- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* -- FAQ open animation -- */
.faq details[open] .faq-body { animation: faq-in 380ms var(--ease-lux); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq summary::after { transition: transform 300ms var(--ease-lux); }

/* -- Scroll progress rail (product workflow) -- */
.rail { position: relative; }
.rail::before {
  content: ''; position: absolute; left: -28px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(15,23,42,0.08); border-radius: 2px;
}
@supports (animation-timeline: view()) {
  .rail::after {
    content: ''; position: absolute; left: -28px; top: 8px; width: 2px; height: calc(100% - 16px);
    background: var(--blue-600); border-radius: 2px; transform-origin: top;
    transform: scaleY(0);
    animation: rail-fill linear both;
    animation-timeline: view();
    animation-range: entry 20% exit 60%;
  }
  @keyframes rail-fill { to { transform: scaleY(1); } }
}

/* -- Article prose -- */
.article { max-width: 720px; margin: 0 auto; padding: 8px 32px 56px; }
.article > p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--ink-600); }
.article > h2 { font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; margin: 44px 0 14px; }
.article > h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.014em; margin: 30px 0 10px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.65; color: var(--ink-600); }
.article li::marker { color: var(--blue-600); }
.article blockquote {
  margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--blue-600);
  font-size: 19px; line-height: 1.55; color: var(--ink-900); font-weight: 480;
}
.article .callout {
  display: block; margin: 26px 0; padding: 16px 20px;
  background: var(--ground-1); border: var(--hairline); border-radius: var(--radius-card);
  font-size: 15px; line-height: 1.6; color: var(--ink-600);
}
.article .callout strong { color: var(--ink-900); }
.article hr { border: none; border-top: var(--hairline); margin: 36px 0; }
.article a { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid rgba(37,99,235,0.3); }
.article a:hover { border-color: var(--blue-600); }
.article table.cmp { font-size: 14.5px; margin: 26px 0; }

/* -- Reduced motion: collapse everything -- */
@media (prefers-reduced-motion: reduce) {
  .hw > span { transform: none; opacity: 1; filter: none; transition: none; }
  .reveal, .reveal.in { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee-track { animation: none; }
  .tour-panel.active { animation: none; }
  .flow-diagram .fd-path, .flow-diagram.in .fd-path { animation: none; stroke-dashoffset: 0; }
  .flow-diagram .fd-dot, .flow-diagram.in .fd-dot { animation: none; opacity: 0; }
  .flow-diagram .fd-node, .flow-diagram.in .fd-node { animation: none; opacity: 1; transform: none; }
  .faq details[open] .faq-body { animation: none; }
  .rail::after { animation: none; transform: scaleY(1); }
  .spot::after { display: none; }
  .tilt { transition: none; }
}

@media (max-width: 768px) {
  .article { padding: 8px 24px 48px; }
  .tour-tabs { gap: 6px; }
  .tour-tab { padding: 9px 14px; font-size: 13.5px; }
}

/* ============================================================
   LOOP 3: bug fixes + animation variety pack
   ============================================================ */

/* FIX: mobile menu/close hidden by default (was unstyled on desktop) */
.mobile-menu { display: none; }
.mobile-close { display: none; }

/* -- Living aurora behind heroes (replaces static tint) -- */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero .container, .page-hero .container { position: relative; z-index: 1; }
.hero::before, .page-hero::before {
  content: ''; position: absolute; inset: -25% -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 62% 55%, rgba(37,99,235,0.07), transparent 65%),
    radial-gradient(ellipse 30% 26% at 28% 30%, rgba(79,70,229,0.05), transparent 60%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}

/* -- Section headline word choreography (scroll-triggered) -- */
.ws.ws-in .hw > span {
  transform: translateY(0); opacity: 1; filter: blur(0);
  transition:
    transform 680ms var(--ease-lux) calc(var(--wi, 0) * 45ms),
    opacity 540ms var(--ease-lux) calc(var(--wi, 0) * 45ms),
    filter 540ms var(--ease-lux) calc(var(--wi, 0) * 45ms);
}

/* -- Section keylines draw in from center -- */
.section-divided.line-draw { border-top: none; position: relative; }
.line-draw::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,0.09);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 1100ms var(--ease-lux);
}
.line-draw.line-in::before { transform: scaleX(1); }

/* -- Interlude: slow drifting light inside the ink band -- */
.interlude { position: relative; overflow: hidden; }
.interlude::after {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(ellipse 36% 30% at 72% 28%, rgba(96,165,250,0.10), transparent 60%);
  animation: aurora-drift 30s ease-in-out infinite alternate-reverse;
}
.interlude > * { position: relative; z-index: 1; }

/* -- Logo wall: wake on hover -- */
.logo-wall img { transition: filter 400ms var(--ease-lux), opacity 400ms var(--ease-lux); }
.logo-wall img:hover { filter: grayscale(0); opacity: 1; }

/* -- Primary CTA sheen sweep on hover -- */
.cta { position: relative; overflow: hidden; }
.cta-primary::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.20), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 650ms var(--ease-lux);
}
.cta-primary:hover::before { left: 115%; }

/* -- Feature icon sheen when its card is hovered -- */
.chip-icon { position: relative; overflow: hidden; }
.chip-icon::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-lux);
}
.tile-pad:hover .chip-icon::after, .copy:hover .chip-icon::after { transform: translateX(120%); }

/* -- Flow diagram: ledger breathes once paths are drawn -- */
.flow-diagram.in .fd-ink { animation: fd-breathe 3.4s ease-in-out 1.6s infinite; }
@keyframes fd-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(37,99,235,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(37,99,235,0.28)); }
}

/* -- Scroll-driven settle on hero showcases (progressive) -- */
@supports (animation-timeline: view()) {
  .settle {
    animation: settle-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
  @keyframes settle-in {
    from { transform: translateY(26px) scale(0.965); }
    to { transform: none; }
  }
}

/* -- Reduced motion: collapse loop-3 effects -- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before, .interlude::after { animation: none; }
  .cta-primary::before, .chip-icon::after { display: none; }
  .flow-diagram.in .fd-ink { animation: none; }
  .line-draw::before { transform: scaleX(1); transition: none; }
  .settle { animation: none; }
  .ws .hw > span, .ws.ws-in .hw > span { transform: none; opacity: 1; filter: none; transition: none; }
}

/* ============================================================
   LOOP 4: alive layer (motion dial 7)
   App-like page transitions, scroll depth, interactive diagram,
   self-narrating tour, page progress. Native CSS, reduced-safe.
   ============================================================ */

/* -- Cross-document view transitions: the site moves like an app -- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 240ms var(--ease-lux) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-lux) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* -- Reading progress: 2px brand line along the top -- */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 500;
    background: var(--blue-600); pointer-events: none;
    transform: scaleX(0); transform-origin: 0 50%;
    animation: page-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes page-progress { to { transform: scaleX(1); } }
}

/* -- Nav island drops in on load -- */
.nav-wrap { animation: nav-drop 700ms var(--ease-lux) 120ms both; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-14px); } }

/* -- Scroll depth: hero content recedes as you leave it -- */
@supports (animation-timeline: scroll()) {
  .hero .container, .page-hero .container {
    animation: hero-recede linear both;
    animation-timeline: scroll(root);
    animation-range: 0vh 130vh;
  }
  @keyframes hero-recede { to { transform: translateY(42px); opacity: 0.35; } }
}

/* -- Bento tiles physically respond -- */
.shell-flat { transition: transform var(--t-hover), box-shadow var(--t-hover); }
.shell-flat:hover { transform: translateY(-3px); box-shadow: var(--ring-shell), var(--shadow-ambient); }

/* -- Tour tabs: self-narrating with a progress fill -- */
.tour-tab { position: relative; overflow: hidden; }
.tour-tab .tab-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(255,255,255,0.4); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.tour[data-auto] .tour-tab[aria-selected="true"] .tab-progress { animation: tab-fill 5s linear forwards; }
@keyframes tab-fill { to { transform: scaleX(1); } }

/* -- Flow diagram becomes touchable: hover a node, light its routes -- */
.flow-diagram .fd-node { pointer-events: all; }
.flow-diagram .fd-path { transition: stroke 280ms var(--ease-lux), stroke-width 280ms var(--ease-lux); }
.flow-diagram .fd-path.lit { stroke: rgba(37,99,235,0.75); stroke-width: 2.25; }
.flow-diagram .fd-node { transition: opacity 280ms var(--ease-lux); }
.flow-diagram.dimmed .fd-node:not(.lit-node) { opacity: 0.45; }
.flow-diagram .fd-node.lit-node { opacity: 1; }

/* -- Reduced motion: the alive layer goes still -- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .nav-wrap { animation: none; }
  .hero .container, .page-hero .container { animation: none; }
  .tour[data-auto] .tour-tab[aria-selected="true"] .tab-progress { animation: none; }
  .shell-flat, .shell-flat:hover { transform: none; }
}

/* ============================================================
   LOOP 5: background material + per-page variety + partner badge
   Subtle texture zones (never everywhere), keyed off body page
   class set by site.js. Same light family, different character.
   ============================================================ */

/* Texture layer lives on hero ::after; each page family tunes it */
.hero::after, .page-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--tex-o, 0);
  background-image: radial-gradient(rgba(15,23,42,0.14) 1px, transparent 1px);
  background-size: var(--tex-size, 24px) var(--tex-size, 24px);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 8%, black 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 75% at 55% 8%, black 25%, transparent 72%);
}

/* Home: fine dot field fading from the top */
body.pg-home .hero::after { --tex-o: 0.30; --tex-size: 24px; }

/* Hardware family: denser dots + deeper aurora, engineered feel */
body.pg-hardware .page-hero::after { --tex-o: 0.38; --tex-size: 20px; }
body.pg-hardware .page-hero::before {
  background:
    radial-gradient(ellipse 46% 38% at 60% 50%, rgba(37,99,235,0.09), transparent 65%),
    radial-gradient(ellipse 30% 26% at 25% 30%, rgba(15,23,42,0.05), transparent 60%);
}

/* Product family: no dots; soft vertical wash instead */
body.pg-product .page-hero { background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 78%); }

/* Solutions family: warm-of-cool diagonal light from the left */
body.pg-solutions .page-hero::before {
  background:
    linear-gradient(160deg, rgba(37,99,235,0.05) 0%, transparent 42%),
    radial-gradient(ellipse 40% 34% at 78% 40%, rgba(79,70,229,0.05), transparent 62%);
}

/* Company pages (pricing, compare, demo, resources): corner bloom */
body.pg-company .page-hero::before {
  background: radial-gradient(ellipse 52% 60% at 92% 0%, rgba(37,99,235,0.08), transparent 62%);
}

/* Guides + legal: calm reading surface, no texture, faint page tint */
body.pg-guide { background: #FBFCFE; }
body.pg-guide .page-hero::before { background: none; animation: none; }

/* Mid-page tinted band utility (used sparingly, one per page max) */
.band-tint { background: linear-gradient(180deg, #F8FAFC, #FFFFFF); }

/* -- Footer: social row (21st id 9596 port), partner-badge trust strip, legal -- */
.f-social { display: flex; gap: 4px; margin-top: 22px; }
.f-social .f-soc {
  position: relative; width: 38px; height: 38px; border-radius: 11px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400);
  transition: color var(--t-hover), background-color var(--t-hover), transform 200ms var(--ease-lux);
}
.f-social .f-soc svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.f-social .f-soc:hover { color: var(--blue-600); background: var(--blue-tint-8); transform: translateY(-2px); }
.f-social .f-soc:active { transform: scale(0.95); }
.f-social .f-soc:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.f-social .f-soc::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); background: var(--ground-ink); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em; padding: 4px 9px; border-radius: 7px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  box-shadow: 0 8px 20px rgba(15,23,42,0.22);
  transition: opacity 180ms ease, transform 180ms var(--ease-lux);
}
.f-social .f-soc:hover::after, .f-social .f-soc:focus-visible::after { opacity: 1; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .f-social .f-soc { transition: color var(--t-hover), background-color var(--t-hover); }
  .f-social .f-soc:hover { transform: none; }
  .f-social .f-soc::after { transition: opacity 150ms ease; transform: translateX(-50%); }
}
.footer-trust { margin-top: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-trust .partner-badge { height: 26px; width: auto; opacity: 0.82; transition: opacity var(--t-hover); }
.footer-trust .partner-badge:hover { opacity: 1; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-500); text-decoration: none; font-size: 13.5px; transition: color var(--t-hover); }
.footer-legal a:hover { color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  body.pg-guide .page-hero::before { animation: none; }
}

/* -- Nav top scrim: content fades + blurs before it reaches the island -- */
.nav-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 118px;
  z-index: -1; pointer-events: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* ============================================================
   LOOP 6: split hero with in-hero product, Ramp-style bleed
   ============================================================ */
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: center; }
.hero-copy { grid-column: 1 / span 6; }
.hero-visual { grid-column: 7 / span 6; position: relative; }
.hero-copy .t-display { font-size: clamp(38px, 4.4vw, 60px); }
.hero-visual .shell {
  width: 136%; max-width: none;
  transform: perspective(1600px) rotateY(-9deg) rotateX(1.6deg);
  transform-origin: left center;
  box-shadow: var(--ring-shell), 0 40px 110px -20px rgba(15,23,42,0.16), 0 8px 24px -8px rgba(15,23,42,0.08);
  transition: transform 700ms var(--ease-lux), box-shadow 700ms var(--ease-lux);
}
.hero-visual .shell:hover {
  transform: perspective(1600px) rotateY(-5.5deg) rotateX(0.8deg);
  box-shadow: var(--ring-shell), 0 48px 130px -20px rgba(15,23,42,0.20), 0 10px 28px -8px rgba(15,23,42,0.10);
}
body.pg-home .hero { padding-top: 140px; padding-bottom: clamp(56px, 7vw, 88px); }
body.pg-home .hero::before {
  background:
    radial-gradient(ellipse 44% 40% at 74% 46%, rgba(37,99,235,0.09), transparent 64%),
    radial-gradient(ellipse 30% 26% at 22% 24%, rgba(79,70,229,0.05), transparent 60%);
}

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-copy, .hero-visual { grid-column: 1 / -1; }
  .hero-visual { margin-top: 36px; }
  .hero-visual .shell { width: 100%; transform: none; }
  .hero-visual .shell:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .shell, .hero-visual .shell:hover { transition: none; }
}

/* ============================================================
   LOOP 7: flow diagram panel + continuous energy flow
   ============================================================ */

/* Bordered instrument panel around the diagram */
.flow-shell .shell-core {
  border: 1px solid rgba(15,23,42,0.12);
  padding: clamp(20px, 3vw, 36px);
  position: relative;
}
.flow-shell .shell-core::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,0.10) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, black 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, black 20%, transparent 78%);
}
.flow-shell .flow-diagram { position: relative; }

/* Energy dashes: a bright segment streams campaign -> channel */
.fd-flow {
  stroke: rgba(37,99,235,0.55); stroke-width: 2; fill: none; stroke-linecap: round;
  stroke-dasharray: 34 386; stroke-dashoffset: 420; opacity: 0;
}
.flow-diagram.in .fd-flow {
  opacity: 1;
  animation: fd-flow-run 2.8s linear infinite;
  animation-delay: calc(var(--pi, 0) * 0.42s + 1.1s);
  transition: stroke 280ms var(--ease-lux);
}
@keyframes fd-flow-run { to { stroke-dashoffset: 0; } }
.flow-diagram .fd-flow.lit { stroke: rgba(37,99,235,0.95); animation-duration: 1.3s; }

/* Both endpoints breathe once the system is flowing */
.flow-diagram.in .fd-accent { animation: fd-breathe 3.4s ease-in-out 0.6s infinite; }

/* Channel nodes invite the hand */
.flow-diagram .fd-node-box { transition: stroke 260ms var(--ease-lux), fill 260ms var(--ease-lux); }
.flow-diagram .fd-node:hover .fd-node-box:not(.fd-ink):not(.fd-accent) { stroke: rgba(37,99,235,0.55); fill: #FBFDFF; }
.flow-diagram .fd-node { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .flow-diagram .fd-flow, .flow-diagram.in .fd-flow { animation: none; opacity: 0; }
  .flow-diagram.in .fd-accent { animation: none; }
  .flow-shell .shell-core::before { opacity: 0.2; }
}

/* ============================================================
   LOOP 8: 21st.dev component ports (vanilla, Donatefy tokens)
   1) Testimonials carousel (after ruixenui/testimonials-carousel)
   2) Interactive numbered accordion (after jatin-yadav05/interactive-accordion)
   ============================================================ */

/* -- Testimonial marquee cards -- */
.tst-row .marquee-track { gap: 18px; animation-duration: 44s; }
.tst-card {
  width: 340px; flex: none; white-space: normal;
  background: var(--ground-0); border: var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--ring-shell), var(--shadow-soft);
  padding: 22px 24px;
  transition: transform 300ms var(--ease-lux), box-shadow 300ms var(--ease-lux);
}
.tst-card:hover { transform: translateY(-4px) rotate(0.4deg); box-shadow: var(--ring-shell), var(--shadow-ambient); }
.tst-quote { font-size: 14.5px; line-height: 1.62; color: var(--ink-600); }
.tst-hl { color: var(--blue-700); font-weight: 600; }
.tst-person { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tst-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-tint-12); color: var(--blue-700);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.tst-name { font-size: 14px; font-weight: 500; color: var(--ink-900); line-height: 1.3; }
.tst-role { font-size: 12.5px; color: var(--ink-500); }

/* -- Interactive numbered accordion (replaces .faq details at runtime) -- */
.acc { max-width: 760px; }
.acc-item { position: relative; border-bottom: var(--hairline); }
.acc-btn {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 18px 4px; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); text-align: left;
}
.acc-num {
  position: relative; width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.acc-num::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ink-900);
  transform: scale(0); opacity: 0;
  transition: transform 380ms cubic-bezier(0.34, 1.4, 0.44, 1), opacity 260ms var(--ease-lux);
}
.acc-item.open .acc-num::before { transform: scale(1); opacity: 1; }
.acc-item:not(.open) .acc-btn:hover .acc-num::before { transform: scale(0.85); opacity: 0.07; }
.acc-num span { position: relative; z-index: 1; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-500); transition: color 200ms; }
.acc-item.open .acc-num span { color: #fff; }
.acc-title {
  flex: 1; font-size: 16.5px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink-600);
  transition: color 250ms var(--ease-lux), transform 250ms cubic-bezier(0.34, 1.3, 0.44, 1);
}
.acc-btn:hover .acc-title, .acc-item.open .acc-title { color: var(--ink-900); transform: translateX(4px); }
.acc-x { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-900); }
.acc-x svg { opacity: 0.4; transition: transform 350ms cubic-bezier(0.34, 1.3, 0.44, 1), opacity 200ms; }
.acc-btn:hover .acc-x svg { opacity: 1; }
.acc-item.open .acc-x svg { transform: rotate(45deg); opacity: 1; }
.acc-line {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px;
  background: var(--ink-900); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease-lux);
}
.acc-item:hover .acc-line { transform: scaleX(0.3); }
.acc-item.open .acc-line { transform: scaleX(1); }
.acc-panel { overflow: hidden; height: 0; transition: height 420ms var(--ease-lux); }
.acc-body {
  padding: 2px 44px 22px 56px; font-size: 15px; color: var(--ink-600); max-width: 62ch;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 240ms var(--ease-lux), transform 300ms var(--ease-lux);
}
.acc-item.open .acc-body { opacity: 1; transform: none; transition-delay: 90ms; }

@media (max-width: 640px) {
  .acc-body { padding-left: 4px; padding-right: 8px; }
  .tst-card { width: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .tst-card, .tst-card:hover { transform: none; transition: none; }
  .acc-num::before, .acc-title, .acc-x svg, .acc-line, .acc-panel, .acc-body { transition: none; }
  .acc-panel { height: auto; }
  .acc-item:not(.open) .acc-panel { height: 0; }
}

/* ============================================================
   LOOP 9: 21st.dev ports II (MagicUI techniques, vanilla)
   Orbiting integrations, beam map, border beam on finale CTAs
   ============================================================ */

/* -- Orbiting integrations (after magicui/orbiting-circles) -- */
.orbit-stage {
  position: relative; width: 100%; max-width: 400px; height: 380px;
  margin: 0 auto;
}
.orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbit-rings circle { fill: none; stroke: rgba(15,23,42,0.08); stroke-width: 1; }
.orbit-center {
  position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground-0); border: var(--hairline); border-radius: 50%;
  box-shadow: var(--ring-shell), var(--shadow-soft);
}
.orbit-center img { width: 40px; height: 40px; }
.orbit-item {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground-0); border: var(--hairline); border-radius: 50%;
  box-shadow: var(--ring-shell), 0 4px 12px rgba(15,23,42,0.06);
  animation: orbit calc(var(--dur, 24) * 1s) linear infinite;
  animation-delay: calc(var(--del, 0) * -1s);
}
.orbit-item.rev { animation-direction: reverse; }
.orbit-item img { width: 26px; height: 26px; object-fit: contain; }
.orbit-item.orbit-txt { width: auto; height: 34px; margin: -17px -38px; border-radius: var(--radius-pill); padding: 0 12px; }
.orbit-item.orbit-txt span { font-size: 11px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--r, 120px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r, 120px)) rotate(-360deg); }
}
.orbit-item.rev { animation-name: orbit-rev; }
@keyframes orbit-rev {
  from { transform: rotate(360deg) translateX(var(--r, 120px)) rotate(-360deg); }
  to   { transform: rotate(0deg) translateX(var(--r, 120px)) rotate(0deg); }
}
@media (max-width: 480px) { .orbit-stage { transform: scale(0.82); height: 330px; } }

/* -- Beam map nodes (integrations page; beams reuse fd-path/fd-flow) -- */
.beam-map .fd-node-chip { fill: #fff; stroke: rgba(15,23,42,0.10); stroke-width: 1; }
.beam-map .fd-flow { stroke-width: 2.25; }

/* -- Border beam on finale CTA bands (after magicui/border-beam) -- */
@property --bbang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.interlude.center { position: relative; }
.interlude.center::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-shell);
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--bbang),
    transparent 0 74%,
    rgba(96,165,250,0.85) 86%,
    rgba(37,99,235,0.9) 92%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: bb-spin 7s linear infinite;
}
@keyframes bb-spin { to { --bbang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .orbit-item { animation: none; }
  .interlude.center::before { animation: none; opacity: 0; }
}

/* ============================================================
   LOOP 10: 21st.dev ports III
   Tracing beam (after aceternity/tracing-beam, CSS scroll-driven)
   Hover-detail device cards (after isaiahbjork/hover-detail-card)
   ============================================================ */

/* -- Tracing beam: a light that walks the product story with you -- */
.trace-wrap { position: relative; view-timeline: --trace block; }
.trace-beam {
  display: none; position: absolute; top: 28px; bottom: 28px;
  left: calc(50% - 654px); width: 20px;
  pointer-events: none; container-type: size;
}
@media (min-width: 1380px) { .trace-beam { display: block; } }
.trace-beam::before {
  content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px;
  background: rgba(15,23,42,0.10);
}
.trace-fill {
  position: absolute; left: 8.5px; top: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, rgba(37,99,235,0) 0%, #2563EB 14%, #4F46E5 58%, rgba(79,70,229,0) 100%);
  border-radius: 2px; transform-origin: top; transform: scaleY(0);
}
.trace-dot {
  position: absolute; left: 3.5px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-600); border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.25), 0 0 14px rgba(37,99,235,0.5);
}
@supports (animation-timeline: view()) {
  .trace-fill { animation: trace-grow linear both; animation-timeline: --trace; animation-range: cover 8% cover 82%; }
  .trace-dot  { animation: trace-move linear both; animation-timeline: --trace; animation-range: cover 8% cover 82%; }
}
@keyframes trace-grow { to { transform: scaleY(1); } }
@keyframes trace-move { to { transform: translateY(calc(100cqh - 6px)); } }
@supports not (animation-timeline: view()) {
  .trace-fill { transform: scaleY(1); opacity: 0.3; }
  .trace-dot { display: none; }
}

/* -- Hover-detail device cards -- */
.hdc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.hdc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ground-0); border: var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--ring-shell), var(--shadow-soft);
  transition: transform 300ms var(--ease-lux), box-shadow 300ms var(--ease-lux);
}
.hdc:hover, .hdc:focus-within { transform: translateY(-4px); box-shadow: var(--ring-shell), var(--shadow-ambient); }
.hdc-media { position: relative; aspect-ratio: 4 / 3; background: var(--ground-2); }
.hdc-media .visual-slot { min-height: 0; height: 100%; font-size: 11px; line-height: 1.5; padding: 14px; }
.hdc-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  background: rgba(248,250,252,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 240ms var(--ease-lux);
}
.hdc:hover .hdc-overlay, .hdc:focus-within .hdc-overlay { opacity: 1; }
.hdc-act {
  padding: 9px 17px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transform: translateY(-16px); opacity: 0;
  transition: transform 340ms cubic-bezier(0.34, 1.3, 0.44, 1), opacity 240ms var(--ease-lux), background-color var(--t-hover);
}
.hdc:hover .hdc-act, .hdc:focus-within .hdc-act { transform: none; opacity: 1; }
.hdc:hover .hdc-act + .hdc-act, .hdc:focus-within .hdc-act + .hdc-act { transition-delay: 70ms, 70ms, 0ms; }
.hdc-act.pri { background: var(--blue-600); color: #fff; }
.hdc-act.pri:hover { background: var(--blue-700); }
.hdc-act.sec { background: rgba(255,255,255,0.95); color: var(--ink-900); border: var(--hairline); }
.hdc-act.sec:hover { background: #fff; }
.hdc-body { padding: 16px 18px 18px; }
.hdc-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hdc-pill {
  font-size: 11px; font-weight: 500; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--blue-tint-8); color: var(--blue-700);
}
.hdc-title { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); }
.hdc-sub { font-size: 13.5px; color: var(--ink-500); margin-top: 3px; }

/* Touch devices: actions rendered statically below the media */
@media (hover: none) {
  .hdc-overlay {
    position: static; opacity: 1; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    justify-content: flex-start; padding: 14px 18px 0;
  }
  .hdc-act { transform: none; opacity: 1; }
  .hdc-act.sec { background: var(--ground-1); }
}

@media (prefers-reduced-motion: reduce) {
  .trace-fill, .trace-dot { animation: none; }
  .trace-fill { transform: scaleY(1); opacity: 0.3; }
  .trace-dot { display: none; }
  .hdc, .hdc:hover { transform: none; transition: none; }
  .hdc-act { transition: none; }
}

/* -- Skip link (a11y) -- */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  background: var(--ink-900); color: #fff; font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--radius-pill); text-decoration: none;
  transform: translateY(-64px); opacity: 0; transition: transform 200ms var(--ease-lux), opacity 200ms;
}
.skip-link:focus-visible { transform: none; opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   LOOP 11: final aliveness pack
   Pointer-following border glow (after aceternity/glowing-effect),
   meteors on 404 (after magicui/meteors), living form fields,
   comparison table row life
   ============================================================ */

/* -- Border glow that follows the cursor, on every card -- */
@media (hover: hover) and (pointer: fine) {
  .shell:not(.flow-shell) > .shell-core.spot::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; padding: 1px; pointer-events: none;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
      rgba(37,99,235,0.55), rgba(79,70,229,0.20) 45%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0; transition: opacity 320ms var(--ease-lux);
  }
  .shell:not(.flow-shell) > .shell-core.spot:hover::before { opacity: 1; }
}

/* -- Meteors (404 page): quiet blue streaks across the hero -- */
.meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.meteor {
  position: absolute; top: -4px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(37,99,235,0.6); transform: rotate(215deg);
  animation: meteor 6s linear infinite;
  opacity: 0;
}
.meteor::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 64px; height: 1px;
  background: linear-gradient(90deg, rgba(37,99,235,0.45), transparent);
}
@keyframes meteor {
  0% { transform: rotate(215deg) translateX(0); opacity: 0; }
  8% { opacity: 1; }
  55% { opacity: 1; }
  70% { transform: rotate(215deg) translateX(-560px); opacity: 0; }
  100% { transform: rotate(215deg) translateX(-560px); opacity: 0; }
}
.meteor:nth-child(1) { left: 12%; animation-delay: 0s;   animation-duration: 5.2s; }
.meteor:nth-child(2) { left: 30%; animation-delay: 1.6s; animation-duration: 6.4s; }
.meteor:nth-child(3) { left: 46%; animation-delay: 0.7s; animation-duration: 4.6s; }
.meteor:nth-child(4) { left: 58%; animation-delay: 2.8s; animation-duration: 7.1s; }
.meteor:nth-child(5) { left: 71%; animation-delay: 1.1s; animation-duration: 5.7s; }
.meteor:nth-child(6) { left: 84%; animation-delay: 3.4s; animation-duration: 6.0s; }
.meteor:nth-child(7) { left: 93%; animation-delay: 2.2s; animation-duration: 4.9s; }

/* -- Living form fields (demo page) -- */
.field label { transition: color 200ms var(--ease-lux), transform 200ms var(--ease-lux); transform-origin: left; }
.field:focus-within label { color: var(--blue-700); transform: translateY(-1px); }
.input { transition: border-color var(--t-hover), box-shadow 260ms var(--ease-lux), transform 260ms var(--ease-lux); }
.input:focus { transform: translateY(-1px); }
.input:user-invalid { border-color: rgba(220,38,38,0.55); }
.field:focus-within .input:user-invalid { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

/* -- Comparison table: rows respond -- */
table.cmp tbody tr { transition: background-color var(--t-hover); }
table.cmp tbody tr:hover { background: var(--blue-tint-8); }
table.cmp tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--blue-600); }

@media (prefers-reduced-motion: reduce) {
  .shell:not(.flow-shell) > .shell-core.spot::before { display: none; }
  .meteor { animation: none; opacity: 0; }
  .input:focus { transform: none; }
}

/* -- Client logo wall: real customer marks, unified by grayscale -- */
.logo-wall.clients { gap: clamp(20px, 3vw, 40px); max-width: 980px; margin-left: auto; margin-right: auto; }
.logo-wall.clients img {
  height: 52px; width: auto; max-width: 120px; object-fit: contain;
  filter: grayscale(1); opacity: 0.6; border-radius: 6px;
  transition: filter 400ms var(--ease-lux), opacity 400ms var(--ease-lux), transform 300ms var(--ease-lux);
}
.logo-wall.clients img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
@media (max-width: 640px) { .logo-wall.clients img { height: 42px; max-width: 96px; } }

/* ============================================================
   LOOP 13: 21st.dev ports IV (MagicUI batch)
   Shiny eyebrow pills, activity ticker, scroll text-fill,
   pulsing grid on the demo hero
   ============================================================ */

/* -- Shiny announcement pills (hero eyebrows only) -- */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow-pill, .page-hero .eyebrow-pill { position: relative; overflow: hidden; }
  .hero .eyebrow-pill::after, .page-hero .eyebrow-pill::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.75) 50%, transparent 68%);
    transform: translateX(-130%);
    animation: pill-shine 5.6s var(--ease-lux) 1.4s infinite;
  }
  @keyframes pill-shine {
    0% { transform: translateX(-130%); }
    30% { transform: translateX(130%); }
    100% { transform: translateX(130%); }
  }
}

/* -- Interlude split + activity ticker (after magicui/animated-list) -- */
.int-split { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (max-width: 900px) { .int-split { grid-template-columns: 1fr; } }
.ticker-card {
  position: relative; height: 236px; overflow: hidden;
  background: rgba(255,255,255,0.06); border: var(--hairline-on-ink);
  border-radius: var(--radius-card); padding: 12px;
}
.ticker-item {
  position: absolute; left: 12px; right: 12px; top: 12px;
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 11px 13px;
  transform: translateY(calc(var(--pos, 0) * 56px)) scale(1);
  opacity: 1;
  transition: transform 480ms cubic-bezier(0.34, 1.2, 0.44, 1), opacity 380ms var(--ease-lux);
}
.ticker-item.enter { transform: translateY(0) scale(0.7); opacity: 0; transition: none; }
.ticker-item.leave { opacity: 0; }
.ticker-item .t-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(96,165,250,0.18); color: #93C5FD;
}
.ticker-item .t-ic svg { width: 15px; height: 15px; }
.ticker-item span:last-child { font-size: 13px; color: rgba(255,255,255,0.82); letter-spacing: -0.005em; line-height: 1.35; }
.ticker-note { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.4); text-align: right; }

/* -- Scroll text-fill (after magicui/text-reveal) -- */
.int-tr { view-timeline: --trv block; }
.trw { display: inline-block; }
.trw > span { display: inline-block; }
@supports (animation-timeline: view()) {
  .tr .trw > span {
    opacity: 0.22;
    animation: tr-fill linear both;
    animation-timeline: --trv;
    animation-range: cover calc(12% + (var(--wi, 0) * 26%) / var(--tw, 10)) cover calc(30% + (var(--wi, 0) * 26%) / var(--tw, 10));
  }
  @keyframes tr-fill { to { opacity: 1; } }
}

/* -- Pulsing grid (after magicui/animated-grid-pattern), demo hero -- */
.grid-pulse {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 30%, transparent 78%);
}
.grid-pulse svg { width: 100%; height: 100%; }
.gp-cell { fill: rgba(37,99,235,0.14); opacity: 0; animation: gp-flick var(--gd, 4.6s) ease-in-out var(--gy, 0s) infinite; }
@keyframes gp-flick { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow-pill::after, .page-hero .eyebrow-pill::after { animation: none; }
  .ticker-item { transition: none; }
  .tr .trw > span { animation: none; opacity: 1; }
  .gp-cell { animation: none; opacity: 0.5; }
}

/* ============================================================
   LOOP 14: the color atmosphere system (21st.dev ports V)
   PROTOCOL: UI controls stay blue-600 only. Color lives in
   ATMOSPHERE: slow animated backgrounds, gradient text accents
   (max 1 per page), particles on ink. Palette locked to the
   blue family's neighbors: cyan-400, indigo-600, violet-500.
   Low saturation on white (<=10% alpha), richer on ink (<=20%).
   Semantic colors untouched. Everything reduced-motion safe.
   ============================================================ */
:root {
  --cyan-400: #22D3EE;     /* atmosphere only */
  --violet-500: #8B5CF6;   /* atmosphere only */
}

/* -- Homepage hero: morphing tri-hue aurora (after LiquidAurora) -- */
body.pg-home .hero::before {
  background:
    radial-gradient(ellipse 42% 38% at 72% 44%, rgba(37,99,235,0.10), transparent 62%),
    radial-gradient(ellipse 34% 30% at 30% 26%, rgba(139,92,246,0.07), transparent 60%),
    radial-gradient(ellipse 30% 28% at 55% 75%, rgba(34,211,238,0.07), transparent 58%);
  animation: aurora-morph 24s ease-in-out infinite alternate;
}
@keyframes aurora-morph {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1) rotate(0.001deg); filter: hue-rotate(0deg); }
  50%  { transform: translate3d(1.5%, 2%, 0) scale(1.08); filter: hue-rotate(-14deg); }
  100% { transform: translate3d(3%, -1.5%, 0) scale(1.04); filter: hue-rotate(10deg); }
}

/* -- Per-family hero color hints -- */
body.pg-hardware .page-hero::before {
  background:
    radial-gradient(ellipse 46% 38% at 60% 50%, rgba(37,99,235,0.09), transparent 65%),
    radial-gradient(ellipse 28% 24% at 24% 28%, rgba(34,211,238,0.07), transparent 58%);
  animation: aurora-morph 26s ease-in-out infinite alternate;
}
body.pg-solutions .page-hero::before {
  background:
    linear-gradient(160deg, rgba(37,99,235,0.05) 0%, transparent 42%),
    radial-gradient(ellipse 40% 34% at 78% 40%, rgba(139,92,246,0.06), transparent 62%);
  animation: aurora-morph 28s ease-in-out infinite alternate;
}
body.pg-product .page-hero::before {
  background:
    radial-gradient(ellipse 40% 34% at 68% 45%, rgba(37,99,235,0.07), transparent 62%),
    radial-gradient(ellipse 26% 24% at 28% 30%, rgba(34,211,238,0.05), transparent 56%);
  animation: aurora-morph 27s ease-in-out infinite alternate;
}

/* -- Ink interludes: living color field (after bg-gradient-animation) -- */
.interlude::after {
  background:
    radial-gradient(ellipse 34% 42% at 74% 26%, rgba(96,165,250,0.16), transparent 58%),
    radial-gradient(ellipse 30% 36% at 22% 72%, rgba(139,92,246,0.13), transparent 56%),
    radial-gradient(ellipse 24% 28% at 55% 45%, rgba(34,211,238,0.08), transparent 52%);
  animation: ink-field 22s ease-in-out infinite alternate;
}
@keyframes ink-field {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(2%, 3%, 0) scale(1.10); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.05); }
}

/* -- Sparkles on finale bands (after aceternity/sparkles) -- */
.sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spark {
  position: absolute; bottom: -6px; border-radius: 50%;
  width: 3px; height: 3px; opacity: 0;
  animation: spark-rise var(--sd, 9s) linear var(--sy, 0s) infinite;
}
.spark.c1 { background: rgba(147,197,253,0.9); }
.spark.c2 { background: rgba(196,181,253,0.85); width: 2px; height: 2px; }
.spark.c3 { background: rgba(103,232,249,0.8); width: 2.5px; height: 2.5px; }
@keyframes spark-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.9; }
  60% { opacity: 0.5; }
  100% { transform: translateY(-340px) translateX(var(--sx, 12px)); opacity: 0; }
}

/* -- Animated gradient text (after magicui/animated-gradient-text) -- */
.grad-text {
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400), var(--violet-500), var(--blue-600));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: grad-pan 8s linear infinite;
}
@keyframes grad-pan { to { background-position: 300% 0; } }

@media (prefers-reduced-motion: reduce) {
  body.pg-home .hero::before, body.pg-hardware .page-hero::before,
  body.pg-solutions .page-hero::before, body.pg-product .page-hero::before,
  .interlude::after { animation: none; }
  .spark { animation: none; opacity: 0; }
  .grad-text { animation: none; background-position: 50% 0; }
}

/* ============================================================
   LOOP 15: real product media + carousel port (21st id 2273)
   ============================================================ */
.pcar { position: relative; }
.pcar-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: 10px;
}
.pcar-track::-webkit-scrollbar { display: none; }
.pcar-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; background: #fff; }
.pcar-slide img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.pcar-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 0 4px; }
.pcar-btn {
  width: 34px; height: 34px; border-radius: 50%; border: var(--hairline); background: var(--ground-0);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-900);
  box-shadow: var(--ring-shell); transition: background-color var(--t-hover), transform 200ms var(--ease-lux);
}
.pcar-btn:hover { background: var(--ground-1); }
.pcar-btn:active { transform: scale(0.94); }
.pcar-btn svg { width: 15px; height: 15px; }
.pcar-dots { display: flex; gap: 7px; }
.pcar-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(15,23,42,0.18); transition: background-color var(--t-hover), transform 200ms var(--ease-lux);
}
.pcar-dot.on { background: var(--blue-600); transform: scale(1.25); }

/* Real media inside slots */
.shot { display: block; width: 100%; height: auto; }
.shot-contain { max-width: 300px; margin: 0 auto; }
.hdc-media img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; }

/* ============================================================
   LOOP 16 v2: pricing page (21st.dev port: Dub-style 4-tier
   pricing section id 1511 + animated price swap id 1474)
   ============================================================ */
.container-wide { max-width: 1320px; }

.plans-section { position: relative; }
.plans-bg {
  position: absolute; inset: -40px 0 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 55%, transparent 100%);
}

/* Billing toggle: sliding-thumb pill */
.bill-switch {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 999px; border: var(--hairline); background: var(--ground-0);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.bs-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: 999px; background: var(--ink-900);
  transition: left 340ms var(--ease-lux), width 340ms var(--ease-lux);
}
.bs-btn {
  position: relative; z-index: 1; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink-500);
  padding: 9px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--t-hover);
}
.bs-btn.on { color: #fff; }
.bs-save {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 8px;
  border-radius: 999px; background: var(--blue-tint-12); color: var(--blue-600);
  transition: background-color var(--t-hover), color var(--t-hover);
}
.bs-btn.on .bs-save { background: rgba(147,197,253,0.18); color: #93C5FD; }

/* Plan grid: wide breakout, flat cards */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; position: relative; }
@media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }

.plan-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 18px; border: var(--hairline-strong); background: var(--ground-0);
  padding: 30px 28px 28px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: box-shadow var(--t-hover), transform var(--t-hover), border-color var(--t-hover);
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,0.09); }

/* Popular tier: blue ring + tint bloom (PopularBackground port) */
.plan-hot { border-color: transparent; box-shadow: 0 0 0 2px var(--blue-600), 0 14px 34px rgba(37,99,235,0.13); }
.plan-hot:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--blue-600), 0 20px 44px rgba(37,99,235,0.18); }
.plan-hot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,0.07), transparent 70%);
}
.plan-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--blue-600); padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(37,99,235,0.35); white-space: nowrap; z-index: 2;
}

/* Highlighted tier: ink card + masked grid (HighlightedBackground port) */
.plan-ink { background: var(--ground-ink); border-color: rgba(255,255,255,0.08); }
.plan-ink::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 60%, transparent 105%);
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 60%, transparent 105%);
}
.plan-ink:hover { box-shadow: 0 18px 40px rgba(15,23,42,0.35); }

.plan-name { font-size: 16px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.plan-tag { font-size: 13.5px; line-height: 1.5; color: var(--ink-500); margin-top: 5px; min-height: 40px; }
@media (min-width: 1181px) { .plan-tag { min-height: 60px; } }
.plan-price { margin: 18px 0 3px; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; min-height: 52px; }
.plan-price .pp-num { font-size: 44px; font-weight: 600; color: var(--ink-900); line-height: 1.1; }
.plan-price .pp-per { font-size: 14px; font-weight: 450; color: var(--ink-500); margin-left: 3px; }
.plan-price .pp-from { font-size: 14.5px; font-weight: 550; color: var(--ink-500); margin-right: 5px; }
.plan-sub { font-size: 12.5px; color: var(--ink-500); min-height: 18px; }
.plan-fee {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 12.5px; font-weight: 550; color: var(--ink-700);
  background: var(--ground-1); border: var(--hairline); border-radius: 9px; padding: 8px 12px;
}
.plan-fee svg { width: 14px; height: 14px; color: var(--blue-600); flex: none; }
.plan-feats { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; align-content: start; flex: 1; }
.plan-feats li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); }
.plan-feats li svg { width: 15px; height: 15px; flex: none; margin-top: 2.5px; color: var(--blue-600); }
.plan-feats li.pf-lead { font-weight: 600; color: var(--ink-900); }
.plan-feats li.pf-lead svg { visibility: hidden; }
.plan-card .cta { justify-content: space-between; width: 100%; margin-top: auto; position: relative; z-index: 1; }

/* Ink-card overrides */
.plan-ink .plan-name { color: #fff; }
.plan-ink .plan-tag, .plan-ink .plan-sub { color: #94A3B8; }
.plan-ink .plan-price .pp-num { color: #fff; }
.plan-ink .plan-price .pp-per, .plan-ink .plan-price .pp-from { color: #94A3B8; }
.plan-ink .plan-fee { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #CBD5E1; }
.plan-ink .plan-fee svg { color: #93C5FD; }
.plan-ink .plan-feats li { color: #CBD5E1; }
.plan-ink .plan-feats li svg { color: #93C5FD; }
.plan-ink .plan-feats li.pf-lead { color: #fff; }

/* Interval swap: animated price transition (NumberFlow-inspired) */
.pr-y { display: none; }
.plan-grid.annual .pr-m { display: none; }
.plan-grid.annual .pr-y { display: inline; }
@keyframes price-in {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: none; }
}
.plan-grid.swapping .plan-price .pp-num, .plan-grid.swapping .plan-sub span {
  display: inline-block; animation: price-in 380ms var(--ease-lux) both;
}
@media (prefers-reduced-motion: reduce) {
  .plan-grid.swapping .plan-price .pp-num, .plan-grid.swapping .plan-sub span { animation: none; }
  .bs-thumb { transition: none; }
  .plan-card, .plan-card:hover { transform: none; }
}

/* Hardware + add-ons */
.hw-price { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; }
.hw-price span { font-size: 13px; font-weight: 450; color: var(--ink-500); letter-spacing: 0; }
.addon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .addon-grid { grid-template-columns: 1fr; } }
.addon { border: var(--hairline); border-radius: var(--radius-card); background: var(--ground-0); padding: 16px 18px; transition: box-shadow var(--t-hover), transform var(--t-hover); }
.addon:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 22px rgba(15,23,42,0.08)); }
.addon .ad-price { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.addon .ad-name { font-size: 13px; color: var(--ink-500); margin-top: 2px; line-height: 1.45; }

/* Comparison-table row headers */
table.cmp tbody th { padding: 14px 20px; border-bottom: var(--hairline); vertical-align: top; text-align: left; color: var(--ink-900); font-weight: 500; font-size: 14.5px; background: transparent; }
table.cmp tr:last-child th { border-bottom: 0; }
table.cmp tbody tr:hover th { box-shadow: inset 2px 0 0 var(--blue-600); }

/* ============================================================
   LOOP 19: color generosity pass (owner-relaxed palette rules)
   Payment badges (21st.dev svgl marks), colored icon cycling,
   gradient keylines, tinted washes, family-tinted eyebrows
   ============================================================ */

/* Payment method badges */
.pay-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pay-row.center { justify-content: center; }
.pay-row { gap: 12px; }
.pay-badge {
  position: relative; width: 68px; height: 46px; border-radius: 11px; background: #fff;
  border: var(--hairline-strong); display: inline-flex; align-items: flex-end; justify-content: center;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  cursor: default; outline-offset: 3px;
  transform-origin: bottom center;
  transform: scale(var(--ps, 1));
  transition: transform 240ms var(--ease-lux), box-shadow var(--t-hover), border-color var(--t-hover);
  will-change: transform;
}
.pay-badge:hover, .pay-badge:focus-visible { border-color: rgba(37,99,235,0.35); box-shadow: 0 10px 24px rgba(15,23,42,0.13); z-index: 3; }
.pay-badge svg { width: 100%; height: 100%; font-family: inherit; }
/* entrance stagger */
.reveal .pay-badge { opacity: 0; translate: 0 14px; }
.reveal.in .pay-badge { opacity: 1; translate: 0 0; transition: opacity 480ms var(--ease-lux), translate 480ms var(--ease-lux), transform 240ms var(--ease-lux), box-shadow var(--t-hover), border-color var(--t-hover); }
.reveal.in .pay-badge:nth-child(1) { transition-delay: 0ms; }
.reveal.in .pay-badge:nth-child(2) { transition-delay: 45ms; }
.reveal.in .pay-badge:nth-child(3) { transition-delay: 90ms; }
.reveal.in .pay-badge:nth-child(4) { transition-delay: 135ms; }
.reveal.in .pay-badge:nth-child(5) { transition-delay: 180ms; }
.reveal.in .pay-badge:nth-child(6) { transition-delay: 225ms; }
.reveal.in .pay-badge:nth-child(7) { transition-delay: 270ms; }
.reveal.in .pay-badge:nth-child(8) { transition-delay: 315ms; }
.reveal.in .pay-badge:nth-child(9) { transition-delay: 360ms; }
/* animated tooltip (21st id 791 aceternity port): spring pop + cursor-driven tilt */
.pay-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 30;
  padding: 7px 14px 8px; border-radius: 9px; background: var(--ground-ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg)) translateY(10px) scale(0.6);
  transition: opacity 200ms ease, transform 320ms cubic-bezier(0.34, 1.8, 0.44, 1);
  box-shadow: 0 12px 28px rgba(15,23,42,0.3);
}
.pay-tip::before, .pay-tip::after {
  content: ''; position: absolute; bottom: -1px; height: 1px; z-index: 1;
}
.pay-tip::before { left: 14%; width: 44%; background: linear-gradient(90deg, transparent, #38BDF8, transparent); }
.pay-tip::after { left: 42%; width: 32%; background: linear-gradient(90deg, transparent, #10B981, transparent); }
.pay-badge:hover .pay-tip, .pay-badge:focus-visible .pay-tip {
  opacity: 1;
  transform: translateX(-50%) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg)) translateY(0) scale(1);
}
.pay-cap { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .pay-badge { transform: none !important; transition: box-shadow var(--t-hover), border-color var(--t-hover); }
  .reveal .pay-badge { opacity: 1; translate: none; }
  .pay-tip { transition: opacity 150ms ease; transform: translateX(-50%); }
  .pay-badge:hover .pay-tip { transform: translateX(-50%); }
}

/* Colored chip-icon cycling (gradient fills, white marks) */
.bento > .shell:nth-child(6n+2) .chip-icon { background: linear-gradient(135deg, #7C3AED, #8B5CF6); }
.bento > .shell:nth-child(6n+3) .chip-icon { background: linear-gradient(135deg, #0891B2, #22D3EE); }
.bento > .shell:nth-child(6n+4) .chip-icon { background: linear-gradient(135deg, #059669, #10B981); }
.bento > .shell:nth-child(6n+5) .chip-icon { background: linear-gradient(135deg, #D97706, #F59E0B); }
.bento > .shell:nth-child(6n)   .chip-icon { background: linear-gradient(135deg, #E11D48, #F43F5E); }

/* Bullet check color cycling */
.tile-list li:nth-child(3n+2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.tile-list li:nth-child(3n)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Gradient keyline over every section heading */
.sec-head .t-h2::before {
  content: ''; display: block; width: 46px; height: 4px; border-radius: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--blue-600), #22D3EE 55%, #8B5CF6);
}
.sec-head.center .t-h2::before { margin-left: auto; margin-right: auto; }

/* Marquee / chip icon color cycling */
.mq-chip:nth-child(6n+2) svg { color: #7C3AED; }
.mq-chip:nth-child(6n+3) svg { color: #0891B2; }
.mq-chip:nth-child(6n+4) svg { color: #059669; }
.mq-chip:nth-child(6n+5) svg { color: #D97706; }
.mq-chip:nth-child(6n)   svg { color: #E11D48; }

/* Count-up stats: gradient ink */
[data-countup] {
  background: linear-gradient(120deg, var(--blue-600), #7C3AED 55%, #0891B2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Tinted section washes (cycled sitewide on divided sections) */
.wash-b { background: linear-gradient(180deg, rgba(37,99,235,0.04), rgba(37,99,235,0.008) 55%, transparent); }
.wash-v { background: linear-gradient(180deg, rgba(139,92,246,0.045), rgba(139,92,246,0.008) 55%, transparent); }
.wash-c { background: linear-gradient(180deg, rgba(34,211,238,0.05), rgba(34,211,238,0.01) 55%, transparent); }
.wash-e { background: linear-gradient(180deg, rgba(16,185,129,0.04), rgba(16,185,129,0.008) 55%, transparent); }

/* Family-tinted eyebrow pills */
body.pg-hardware .eyebrow-pill { background: rgba(34,211,238,0.13); color: #0E7490; }
body.pg-solutions .eyebrow-pill { background: rgba(139,92,246,0.11); color: #6D28D9; }
body.pg-company .eyebrow-pill { background: rgba(245,158,11,0.13); color: #B45309; }
body.pg-guide .eyebrow-pill { background: rgba(16,185,129,0.11); color: #047857; }

/* Add-on price color cycling (pricing) */
.addon:nth-child(1) .ad-price { color: var(--blue-600); }
.addon:nth-child(2) .ad-price { color: #7C3AED; }
.addon:nth-child(3) .ad-price { color: #059669; }
.addon:nth-child(4) .ad-price { color: #D97706; }

/* ============================================================
   LOOP 21: lethal pass (research-driven additive upgrades)
   Kiosk simulator, one-ledger live feed, money-flow band,
   plan builder, trust pledges, mobile CTA bar, spotlight
   ============================================================ */

/* -- Kiosk giving simulator ------------------------------- */
.ksim-wrap { display: flex; flex-direction: column; align-items: center; }
.ksim {
  width: min(430px, 92vw); border-radius: 30px; background: #1E293B;
  padding: 16px 16px 12px; box-shadow: 0 30px 70px rgba(15,23,42,0.28), inset 0 1px 0 rgba(255,255,255,0.09);
}
.ksim-screen {
  position: relative; overflow: hidden; border-radius: 16px; background: #fff;
  height: 400px;
}
.ks-step {
  position: absolute; inset: 0; padding: 28px 26px; display: flex; flex-direction: column;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity 320ms var(--ease-lux), transform 320ms var(--ease-lux);
}
.ks-step.on { opacity: 1; transform: none; pointer-events: auto; }
.ks-camp {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-tint-8); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.ks-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); margin-bottom: 18px; }
.ks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ks-amt {
  border: var(--hairline-strong); border-radius: 12px; background: #fff; cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 600; color: var(--ink-900); padding: 20px 0;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-hover), background-color var(--t-hover), transform 180ms var(--ease-lux);
}
.ks-amt:hover { border-color: var(--blue-600); background: var(--blue-tint-8); }
.ks-amt:active { transform: scale(0.96); }
.ks-choice { display: grid; gap: 10px; margin-top: 4px; }
.ks-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: var(--hairline-strong); border-radius: 12px; background: #fff; cursor: pointer;
  font: inherit; text-align: left; padding: 16px 18px;
  transition: border-color var(--t-hover), background-color var(--t-hover);
}
.ks-opt:hover { border-color: var(--blue-600); background: var(--blue-tint-8); }
.ks-opt b { font-size: 15px; color: var(--ink-900); font-weight: 600; }
.ks-opt span { font-size: 12.5px; color: var(--ink-500); }
.ks-tapzone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.ks-tapring { position: relative; width: 108px; height: 108px; }
.ks-tapring::before, .ks-tapring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,99,235,0.45); animation: ks-pulse 1.8s ease-out infinite;
}
.ks-tapring::after { animation-delay: 0.9s; }
@keyframes ks-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.ks-tapcore {
  position: absolute; inset: 22px; border-radius: 50%; background: var(--blue-600);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 10px 26px rgba(37,99,235,0.4);
}
.ks-tapcore svg { width: 30px; height: 30px; }
.ks-receipt { flex: 1; display: flex; flex-direction: column; }
.ks-check {
  width: 54px; height: 54px; border-radius: 50%; background: var(--color-success, #10B981);
  background: #10B981; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
}
.ks-check svg { width: 26px; height: 26px; }
.ks-lines { margin-top: 12px; border-top: var(--hairline); }
.ks-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: var(--hairline); font-size: 13.5px; color: var(--ink-600); }
.ks-line b { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.ks-restart {
  margin-top: auto; align-self: center; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--blue-600); padding: 8px 4px;
}
.ks-restart:hover { text-decoration: underline; }
.ksim-reader { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 12px; }
.ksim-led { width: 7px; height: 7px; border-radius: 50%; background: #10B981; animation: ks-led 2.4s ease-in-out infinite; }
@keyframes ks-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.ksim-reader span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.ksim-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-500); text-align: center; }
.ks-skip { font-size: 12.5px; color: var(--ink-500); text-align: center; padding-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ks-step { transition: opacity 150ms ease; transform: none; }
  .ks-tapring::before, .ks-tapring::after, .ksim-led { animation: none; }
}

/* -- One-ledger live feed ---------------------------------- */
.llive { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .llive { grid-template-columns: 1fr; } }
.ll-channels { display: grid; gap: 12px; }
.ll-ch {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: var(--hairline-strong); border-radius: 14px; background: var(--ground-0);
  transition: border-color 300ms var(--ease-lux), box-shadow 300ms var(--ease-lux), transform 300ms var(--ease-lux);
}
.ll-ch .chip-icon { width: 34px; height: 34px; border-radius: 9px; margin: 0; }
.ll-ch .chip-icon svg { width: 17px; height: 17px; }
.ll-ch b { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.ll-ch.fire { border-color: var(--blue-600); box-shadow: 0 8px 24px rgba(37,99,235,0.16); transform: translateX(4px); }
.ll-feed {
  border: var(--hairline-strong); border-radius: var(--radius-shell); background: var(--ground-0);
  padding: 10px; box-shadow: var(--ring-shell), 0 20px 50px rgba(15,23,42,0.07);
}
.ll-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 12px; }
.ll-head b { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.ll-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #059669; }
.ll-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #10B981; animation: ks-led 2s ease-in-out infinite; }
.ll-rows { display: flex; flex-direction: column; gap: 6px; min-height: 300px; }
.ll-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--ground-1); border: var(--hairline);
  opacity: 1; transition: opacity 500ms ease, transform 500ms var(--ease-lux);
}
.ll-row.enter { animation: ll-in 560ms var(--ease-lux) both; }
@keyframes ll-in { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } }
.ll-row.exit { opacity: 0; transform: translateY(10px); }
.ll-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.ll-badge.web { background: var(--blue-tint-12); color: var(--blue-700); }
.ll-badge.kiosk { background: rgba(139,92,246,0.14); color: #6D28D9; }
.ll-badge.tap { background: rgba(34,211,238,0.16); color: #0E7490; }
.ll-badge.s700 { background: rgba(16,185,129,0.14); color: #047857; }
.ll-row .ll-who { font-size: 13.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-row .ll-who b { color: var(--ink-900); font-weight: 600; }
.ll-amt { font-size: 14.5px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ll-row.enter { animation: none; } .ll-live::before { animation: none; } }

/* -- Money-flow trust band --------------------------------- */
.mflow { position: relative; }
.mflow-grid { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr; gap: 0; align-items: center; }
.mflow-node {
  border: var(--hairline-strong); border-radius: 16px; background: var(--ground-0);
  padding: 22px 20px 20px; text-align: center; position: relative; min-width: 0;
}
.mflow-node .chip-icon { margin: 0 auto 12px; }
.mflow-node b { display: block; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.mflow-node span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }
.mflow-node.yours { box-shadow: 0 0 0 2px var(--blue-600), 0 14px 34px rgba(37,99,235,0.14); }
.mflow-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--blue-600); color: #fff; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
/* Colored flow connectors: each carries the two node colors it bridges */
.mflow-link { position: relative; width: clamp(46px, 5vw, 92px); height: 4px; }
.mflow-link::before {
  content: ''; position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(90deg, #8B5CF6, #2563EB);
}
.mflow-link.l2::before { background: linear-gradient(90deg, #2563EB, #10B981); }
.mflow-link::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #fff; border: 2px solid var(--blue-600);
  box-shadow: 0 0 12px 2px rgba(37,99,235,0.55);
  animation: mflow-dot 2.4s var(--ease-lux) infinite;
}
.mflow-link.l2::after { border-color: #10B981; box-shadow: 0 0 12px 2px rgba(16,185,129,0.5); animation-delay: 1.2s; }
@keyframes mflow-dot { 0% { left: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* Stack vertically on tablet and mobile: connectors become downward gradient lines */
@media (max-width: 880px) {
  .mflow-grid { grid-template-columns: minmax(0, 360px); justify-content: center; }
  .mflow-link { width: 4px; height: clamp(36px, 6vw, 48px); justify-self: center; }
  .mflow-link::before { background: linear-gradient(180deg, #8B5CF6, #2563EB); }
  .mflow-link.l2::before { background: linear-gradient(180deg, #2563EB, #10B981); }
  .mflow-link::after { top: 0; left: 50%; margin: -5px 0 0 -5px; animation-name: mflow-dot-v; }
}
@keyframes mflow-dot-v { 0% { top: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mflow-link::after { animation: none; opacity: 0; } }
.mflow-cap { text-align: center; margin-top: 28px; font-size: 15.5px; color: var(--ink-600); }
.mflow-cap b { color: var(--ink-900); font-weight: 600; }

/* -- Plan builder ------------------------------------------ */
.pbuild { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .pbuild { grid-template-columns: 1fr; } }
.pb-q { margin-bottom: 22px; }
.pb-q label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 10px; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip {
  border: var(--hairline-strong); border-radius: 999px; background: var(--ground-0); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink-600); padding: 9px 18px;
  transition: border-color var(--t-hover), background-color var(--t-hover), color var(--t-hover);
}
.pb-chip:hover { border-color: var(--blue-600); }
.pb-chip.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pb-card {
  border-radius: 18px; border: var(--hairline-strong); background: var(--ground-0);
  padding: 26px 26px 24px; position: sticky; top: 96px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
}
.pb-card .pb-tier { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); }
.pb-card .pb-price { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.pb-card .pb-price span { font-size: 14px; font-weight: 450; color: var(--ink-500); }
.pb-card .pb-annual { font-size: 13px; color: var(--ink-500); }
.pb-lines { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 8px; }
.pb-lines li { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-600); }
.pb-lines li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--blue-600); }
.pb-note { font-size: 12px; color: var(--ink-500); margin-top: 12px; }

/* -- Trust pledges ------------------------------------------ */
.pledges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .pledges { grid-template-columns: 1fr; } }
.pledge {
  border: var(--hairline-strong); border-radius: 18px; background: var(--ground-0); padding: 26px 24px;
  position: relative; overflow: hidden;
}
.pledge::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; }
.pledge:nth-child(1)::before { background: linear-gradient(90deg, var(--blue-600), #22D3EE); }
.pledge:nth-child(2)::before { background: linear-gradient(90deg, #7C3AED, #8B5CF6); }
.pledge:nth-child(3)::before { background: linear-gradient(90deg, #059669, #10B981); }
.pledge h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); margin-bottom: 12px; }
.pledge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pledge li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink-600); }
.pledge li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.pledge:nth-child(1) li svg { color: var(--blue-600); }
.pledge:nth-child(2) li svg { color: #7C3AED; }
.pledge:nth-child(3) li svg { color: #059669; }

/* -- Mobile sticky CTA bar ---------------------------------- */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: var(--hairline-strong); box-shadow: 0 -8px 30px rgba(15,23,42,0.08);
  transform: translateY(110%); transition: transform 380ms var(--ease-lux);
}
.mcta.show { transform: none; }
.mcta .cta { flex: 1; justify-content: center; }
@media (max-width: 820px) { .mcta { display: flex; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .mcta { transition: none; } }

/* -- Security hero spotlight beams --------------------------- */
.spot-hero { position: relative; overflow: hidden; }
.spot-hero::before, .spot-hero::after {
  content: ''; position: absolute; top: -30%; width: 46%; height: 160%; pointer-events: none;
  background: linear-gradient(195deg, rgba(37,99,235,0.10), transparent 62%);
  transform: rotate(14deg); filter: blur(2px);
}
.spot-hero::before { left: 4%; }
.spot-hero::after { right: -6%; transform: rotate(-16deg); background: linear-gradient(165deg, rgba(34,211,238,0.09), transparent 60%); }

/* ============================================================
   LOOP 25: living command-center hero (21st ports: Parallax
   Floating id 19610 + Credit Card Hero id 8258 floating-cards)
   ============================================================ */

/* Parallax scene: independent-depth layers driven by --px/--py (JS) */
[data-parallax] [data-depth] { translate: var(--px, 0) var(--py, 0); }
.hv-dash { position: relative; z-index: 1; will-change: translate; }

/* Ambient colored glow blobs behind the scene */
.hv-blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; z-index: 0; will-change: translate; }
.hv-blob-1 { width: 300px; height: 300px; top: -12%; right: 4%; background: radial-gradient(circle, rgba(124,58,237,0.20), transparent 70%); }
.hv-blob-2 { width: 260px; height: 260px; bottom: -10%; left: -6%; background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 70%); }

/* Floating channel chips (clickable, glass) */
.hv-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 15px 9px 10px; border-radius: 15px; text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: var(--hairline-strong); box-shadow: 0 12px 32px -10px rgba(15,23,42,0.20);
  will-change: translate; transition: box-shadow var(--t-hover), transform 220ms var(--ease-lux), border-color var(--t-hover);
}
.hv-chip:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -10px rgba(15,23,42,0.26); border-color: rgba(37,99,235,0.32); }
.hv-chip:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
.hv-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.hv-ic svg { width: 16px; height: 16px; }
.hv-lab b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); line-height: 1.2; letter-spacing: -0.01em; }
.hv-lab em { font-style: normal; font-size: 11px; color: var(--ink-500); }
.hv-chip.active { border-color: transparent; box-shadow: 0 0 0 2px var(--chip-c, var(--blue-600)), 0 20px 44px -10px rgba(15,23,42,0.26); }
.hv-chip.active .hv-ic { animation: hv-pulse 1.1s var(--ease-lux); }
@keyframes hv-pulse { 0% { box-shadow: 0 0 0 0 var(--chip-c); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Live "gift landed" toast on the dashboard */
.hv-toast {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 15px 10px 11px; border-radius: 13px; background: #fff;
  border: var(--hairline-strong); box-shadow: 0 16px 40px -10px rgba(15,23,42,0.24);
  opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; will-change: translate;
  transition: opacity 400ms ease, transform 460ms var(--ease-lux);
}
.hv-toast.show { opacity: 1; transform: none; }
.hv-toast .hv-check { width: 28px; height: 28px; border-radius: 8px; background: #10B981; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hv-toast .hv-check svg { width: 16px; height: 16px; }
.hv-toast b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-900); line-height: 1.2; }
.hv-toast em { font-style: normal; font-size: 11px; color: var(--ink-500); }

/* Hide the floating layer on stacked / touch layouts (keep clean dashboard) */
@media (max-width: 1023px) {
  .hv-chip, .hv-toast, .hv-blob { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] [data-depth] { translate: none; }
  .hv-chip.active .hv-ic { animation: none; }
  .hv-toast { transition: opacity 200ms ease; }
}

/* ============================================================
   LOOP 26: Connected Giving hero stage (stacked hero, four real
   channel scenes routing gifts into one ledger) + mega-menu nav
   ============================================================ */
.hero-stack .container { position: relative; z-index: 1; }
.hero-head { max-width: 800px; margin: 0 auto; text-align: center; }
.hero-head .t-display { font-size: clamp(40px, 5.2vw, 68px); letter-spacing: -0.035em; line-height: 1.03; }
.hero-head .t-lead { margin: 22px auto 0; max-width: 600px; }
.hero-head .cta-row { justify-content: center; margin-top: 32px; }

.hero-stage {
  position: relative; margin-top: clamp(40px, 5vw, 64px);
  border-radius: 28px; border: var(--hairline-strong); background: #fff;
  padding: clamp(14px, 1.8vw, 22px); box-shadow: var(--ring-shell), var(--shadow-ambient);
  overflow: hidden;
}
.hs-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(180deg, #F8FAFC, #FFFFFF 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 45%, transparent 100%);
}
.hero-stage .hv-blob { display: block; }
.hs-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr 1.18fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 520px;
}
.hs-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.hs-base { fill: none; stroke-width: 2; opacity: 0.26; }
.hs-flow { fill: none; stroke-width: 2.2; stroke-dasharray: 5 11; stroke-linecap: round; opacity: 0.3; animation: hs-dash 1.4s linear infinite; transition: opacity 400ms ease; }
.hs-flow.on { opacity: 1; }
@keyframes hs-dash { to { stroke-dashoffset: -32; } }
.hs-token { opacity: 0; transition: opacity 200ms ease; }
.hs-token.go { opacity: 1; }

.hs-scene {
  position: relative; z-index: 2; display: block; overflow: hidden; text-decoration: none;
  border-radius: 18px; border: var(--hairline-strong); background: var(--ground-1); min-height: 236px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform 260ms var(--ease-lux), box-shadow 260ms var(--ease-lux);
}
.hs-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-scene.hs-tap img { object-fit: contain; padding: 18px; background: linear-gradient(160deg, rgba(34,211,238,0.12), rgba(37,99,235,0.05)); }
.hs-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(15,23,42,0.34)); }
.hs-scene:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(15,23,42,0.24); }
.hs-scene.hs-on { box-shadow: 0 0 0 2px var(--chip-c, var(--blue-600)), 0 18px 40px -12px rgba(15,23,42,0.24); }
.hs-scene .hs-tag { position: absolute; left: 12px; bottom: 12px; top: auto; right: auto; display: inline-flex; pointer-events: none; }
.hs-online { grid-area: 1 / 1; --chip-c: #2563EB; }
.hs-kiosk  { grid-area: 1 / 3; --chip-c: #7C3AED; }
.hs-hand   { grid-area: 2 / 1; --chip-c: #059669; }
.hs-tap    { grid-area: 2 / 3; --chip-c: #0891B2; }

.hs-hub {
  grid-area: 1 / 2 / span 2 / 3; align-self: center; position: relative; z-index: 3;
  border-radius: 20px; background: #fff; border: var(--hairline-strong);
  box-shadow: 0 24px 60px -20px rgba(37,99,235,0.24), 0 2px 6px rgba(15,23,42,0.05);
  padding: 18px 16px 14px; display: flex; flex-direction: column;
}
.hs-hub.pulse { animation: hs-hubpulse 720ms var(--ease-lux); }
@keyframes hs-hubpulse {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45), 0 24px 60px -20px rgba(37,99,235,0.24); }
  100% { box-shadow: 0 0 0 16px rgba(37,99,235,0), 0 24px 60px -20px rgba(37,99,235,0.24); }
}
.hs-hub-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hs-hub-title { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.hs-hub-mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--blue-600), #7C3AED); box-shadow: 0 4px 10px rgba(37,99,235,0.35); }
.hs-rows { display: flex; flex-direction: column; gap: 6px; min-height: 216px; }
.hs-hub .ll-row { padding: 10px 12px; }
.hs-hub-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--ink-500); }
.hs-note { position: relative; z-index: 1; margin: 14px 4px 0; text-align: center; font-size: 12.5px; color: var(--ink-500); }

@media (max-width: 1023px) {
  .hero-head .t-display { font-size: clamp(34px, 8vw, 48px); }
  .hs-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; gap: 12px; }
  .hs-links { display: none; }
  .hs-hub { grid-area: 1 / 1 / 2 / 3; }
  .hs-online { grid-area: 2 / 1; } .hs-kiosk { grid-area: 2 / 2; } .hs-hand { grid-area: 3 / 1; } .hs-tap { grid-area: 3 / 2; }
  .hs-scene { min-height: 0; aspect-ratio: 4 / 3; }
  .hs-scene .hs-tag { display: inline-flex; }
  .hs-scene .hs-tag .hv-lab em { display: none; }
  .hero-stage .hv-blob { display: none; }
}
@media (max-width: 560px) {
  .hs-scene .hs-tag { padding: 6px 9px 6px 6px; gap: 7px; border-radius: 11px; }
  .hs-scene .hs-tag .hv-ic { width: 26px; height: 26px; border-radius: 7px; }
  .hs-scene .hs-tag .hv-lab b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-flow { animation: none; }
  .hs-token { display: none; }
  .hs-hub.pulse { animation: none; }
  .hs-scene, .hs-scene:hover { transform: none; }
}

/* -- Mega-menu navigation ------------------------------------- */
.nav-dropdown.nav-mega { left: -6px; transform: none; padding: 10px; min-width: 340px; }
.nav-dropdown.nav-mega.mega-cols-2 { min-width: 640px; }
.mega-grid { display: grid; gap: 2px; }
.mega-cols-2 .mega-grid { grid-template-columns: 1fr 1fr; column-gap: 6px; }
.nav-dropdown .mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; }
.mega-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--blue-tint-8); color: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-hover), color var(--t-hover), transform 220ms var(--ease-lux);
}
.mega-ic svg { width: 17px; height: 17px; }
.mega-item:hover .mega-ic { background: var(--blue-600); color: #fff; transform: translateY(-1px); }
.mega-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-900); line-height: 1.25; letter-spacing: -0.01em; }
.mega-txt em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.4; }
.nav-dropdown .mega-promo {
  margin-top: 8px; padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.09), rgba(124,58,237,0.09));
}
.nav-dropdown .mega-promo:hover { background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.14)); }
.mega-promo b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); }
.mega-promo em { display: block; font-style: normal; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.mega-promo svg { width: 16px; height: 16px; color: var(--blue-600); flex: none; }

/* -- Launch polish: designed skeletons replace spec placeholders; muted table negatives -- */
.visual-slot {
  padding: 0; min-height: 240px; position: relative; overflow: hidden; font-family: inherit;
  background: linear-gradient(160deg, #F8FAFC, #EDF2F8);
}
.visual-slot span { display: none; }
.visual-slot::before {
  content: ''; position: absolute; left: 12%; right: 30%; top: 15%; height: 10px; border-radius: 6px;
  background: rgba(15,23,42,0.09);
  box-shadow: 0 22px 0 -2px rgba(15,23,42,0.06), 0 44px 0 -3px rgba(15,23,42,0.05);
}
.visual-slot::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 52%; bottom: 13%; border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.09));
  border: 1px solid rgba(15,23,42,0.06);
}
.hdc-media .visual-slot { padding: 0; }
.cmp-no { color: var(--ink-400); font-size: 13px; }

/* ============================================================
   LOOP 27: design discipline pass (one hue per page, semantic
   color only, quieter motion stack, rhythm + typography locks)
   ============================================================ */
body { --family: #2563EB; --family-ink: #1D4ED8; --family-tint: rgba(37,99,235,0.045); }
body.pg-hardware  { --family: #0891B2; --family-ink: #0E7490; --family-tint: rgba(34,211,238,0.06); }
body.pg-solutions { --family: #7C3AED; --family-ink: #6D28D9; --family-tint: rgba(139,92,246,0.05); }
body.pg-guide     { --family: #059669; --family-ink: #047857; --family-tint: rgba(16,185,129,0.05); }

/* Section washes: one flat family tint per page instead of alternating hues */
.wash-b, .wash-v, .wash-c, .wash-e { background: var(--family-tint); }

/* Eyebrows derive from the family hue; company pages return to blue */
body.pg-hardware .eyebrow-pill, body.pg-solutions .eyebrow-pill, body.pg-guide .eyebrow-pill {
  background: color-mix(in srgb, var(--family) 11%, white); color: var(--family-ink);
}
body.pg-company .eyebrow-pill { background: var(--blue-tint-8); color: var(--blue-700); }

/* Keyline: a single solid family stroke, smaller */
.sec-head .t-h2::before { width: 34px; height: 3px; background: var(--family); margin-bottom: 16px; }

/* Positional color cycling removed: bullets, marquee icons, add-on prices are semantic again */
.tile-list li:nth-child(3n+2)::before, .tile-list li:nth-child(3n)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.mq-chip:nth-child(6n+2) svg, .mq-chip:nth-child(6n+3) svg, .mq-chip:nth-child(6n+4) svg,
.mq-chip:nth-child(6n+5) svg, .mq-chip:nth-child(6n) svg { color: var(--blue-600); }
.addon:nth-child(1) .ad-price, .addon:nth-child(2) .ad-price, .addon:nth-child(3) .ad-price, .addon:nth-child(4) .ad-price { color: var(--ink-900); }
/* Icon chips keep variety but only within the channel palette (amber and rose retired) */
.bento > .shell:nth-child(6n+5) .chip-icon { background: linear-gradient(135deg, var(--blue-600), var(--indigo-600)); }
.bento > .shell:nth-child(6n)   .chip-icon { background: linear-gradient(135deg, #0891B2, #22D3EE); }

/* Motion stack: keep lift + border glow, drop radial fill, icon sheen, grid flicker */
.spot::after { display: none; }
.chip-icon::after { display: none; }
.gp-cell { animation: none; opacity: 0.35; }
.acc-title { color: var(--ink-900); }

/* Rhythm: adjacent sections no longer stack two full paddings */
.section + .section { padding-top: clamp(28px, 4vw, 56px); }

/* Typography locks */
.t-display, .t-h2, .t-h3, .t-h4, .split .copy :is(h2, h3) { text-wrap: balance; }
@media (max-width: 560px) { .hero-head br, .hero-copy br { display: none; } }
.stat-unit { font-size: 0.34em; font-weight: 500; color: var(--ink-500); margin-left: 6px; letter-spacing: 0; }

/* Card token snap: one radius, one border weight for content cards */
.plan-card, .pb-card, .pledge { border-radius: 16px; }
.addon { border: var(--hairline-strong); border-radius: 16px; }

/* Mobile sticky bar: centered pill + quiet text link */
.mcta .cta { padding: 0 22px; height: 44px; justify-content: center; }
.mcta .mcta-link { display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 550; color: var(--ink-700); text-decoration: none; }

/* Security hero beams: outrank the page-family background resets */
body .page-hero.spot-hero::before {
  content: ''; position: absolute; top: -30%; left: 4%; width: 46%; height: 160%; pointer-events: none;
  background: linear-gradient(195deg, rgba(37,99,235,0.10), transparent 62%); transform: rotate(14deg); filter: blur(2px); animation: none; opacity: 1;
}
body .page-hero.spot-hero::after {
  content: ''; position: absolute; top: -30%; right: -6%; width: 46%; height: 160%; pointer-events: none;
  background: linear-gradient(165deg, rgba(34,211,238,0.09), transparent 60%); transform: rotate(-16deg); filter: blur(2px); opacity: 1;
}

/* ============================================================
   LOOP 28: technical pass (reveal without transition conflicts,
   hero recede scoping, a11y states, mobile fit, perf)
   ============================================================ */
/* Reveal is now a keyframe animation on opacity + translate, so it never
   competes with component hover transforms or transitions. */
.reveal { opacity: 0.001; transform: none; translate: 0 26px; filter: none; transition: none; }
.reveal.in { opacity: 1; translate: 0 0; filter: none; transition: none; animation: reveal-in 700ms var(--ease-lux) var(--rd, 0ms) both; }
@keyframes reveal-in { from { opacity: 0.001; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: none; } .reveal.in { animation: none; } }

/* Only the copy recedes on the stacked hero; the stage stays fully present */
@supports (animation-timeline: scroll()) {
  .hero-stack .container { animation: none; }
  .hero-stack .hero-head { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0vh 110vh; }
}

/* Aurora: transform only, no per-frame hue-rotate filter */
@keyframes aurora-morph {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -1.5%, 0) scale(1.04); }
}
/* Nav scrim keeps its gradient mask but drops the fixed backdrop blur */
.nav-wrap::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Sections out of view pause their infinite animations */
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* Menus open on click as well as hover */
.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; translate: 0 0; }

/* Small-phone island fit and sticky-bar clearance */
@media (max-width: 480px) {
  .island-nav .brand { margin-right: 8px; }
  .island-nav .brand img { height: 24px; max-width: 96px; }
  .island-nav .cta-compact { font-size: 13px; padding: 5px 5px 5px 14px; }
}
@media (max-width: 820px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.pg-guide { padding-bottom: 0; }
}

/* Contrast fixes for colored text */
.grad-text { background-image: linear-gradient(90deg, var(--blue-600), #0891B2, #7C3AED, var(--blue-600)); }
.bs-save { color: var(--blue-700); }
.bs-btn.on .bs-save { color: #93C5FD; }
.ll-live { color: #047857; }
.input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.32); }

/* Simulator tap zone is a real button */
button.ks-tapzone { background: none; border: 0; font: inherit; color: inherit; width: 100%; padding: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   LOOP 29: reference frames implemented (imagegen pack):
   panel-stack tour, cinematic band, solutions masonry,
   paper/ink money-flow diptych, plan icons, hero ledger polish
   ============================================================ */

/* -- Tour as a layered Product UI Panel Stack + vertical steps -- */
.tour-stack { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 48px; padding: 48px 0 0 36px; }
.tour-stack .tour-tabs { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; }
.tour-stack .tour-panels { grid-column: 1; grid-row: 1; position: relative; aspect-ratio: 4 / 3; margin-top: 0; }
.tour-stack .tour-panel {
  display: block; position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: #fff;
  border: var(--hairline-strong); box-shadow: 0 28px 64px -26px rgba(15,23,42,0.30);
  transform-origin: top left; animation: none; will-change: transform, opacity;
  transition: transform 680ms var(--ease-lux), opacity 680ms var(--ease-lux), filter 680ms var(--ease-lux);
}
.tour-stack .tour-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.tour-stack .tour-panel:nth-child(1) { transform: translate(-3%, -4%) scale(0.96); opacity: 0.62; z-index: 3; }
.tour-stack .tour-panel:nth-child(2) { transform: translate(-6%, -8%) scale(0.92); opacity: 0.46; z-index: 2; }
.tour-stack .tour-panel:nth-child(3) { transform: translate(-9%, -12%) scale(0.88); opacity: 0.32; z-index: 1; }
.tour-stack .tour-panel:nth-child(4) { transform: translate(-12%, -16%) scale(0.84); opacity: 0.22; z-index: 0; }
.tour-stack .tour-panel.active { transform: none; opacity: 1; z-index: 6; filter: none; }
.tour-stack .tour-tab {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; text-align: left;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent;
  color: var(--ink-900); font-size: inherit; position: relative; overflow: hidden;
  transition: background-color var(--t-hover), border-color var(--t-hover);
}
.tour-stack .tour-tab .step-num {
  width: 34px; height: 34px; border-radius: 50%; border: var(--hairline-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-500);
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover);
}
.tour-stack .tour-tab .step-txt b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink-900); }
.tour-stack .tour-tab .step-txt em { display: block; font-style: normal; font-size: 14px; color: var(--ink-500); margin-top: 3px; line-height: 1.45; }
.tour-stack .tour-tab:hover { background: var(--ground-1); color: var(--ink-900); }
.tour-stack .tour-tab[aria-selected="true"] { background: var(--ground-1); border-color: rgba(15,23,42,0.06); color: var(--ink-900); }
.tour-stack .tour-tab[aria-selected="true"] .step-num { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 6px 14px rgba(37,99,235,0.35); }
.tour-stack .tour-tab .tab-progress { left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0; }
.tour-stack .tour-link { margin-top: 12px; padding-left: 16px; }
@media (max-width: 900px) {
  .tour-stack { grid-template-columns: 1fr; padding: 28px 0 0 0; gap: 20px; }
  .tour-stack .tour-panels { grid-column: 1; grid-row: 1; margin-left: 8%; }
  .tour-stack .tour-tabs { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .tour-stack .tour-panel { transition: opacity 200ms ease; } }

/* -- Cinematic in-person band (bottom-left text over image) -- */
.band-photo {
  position: relative; overflow: hidden; border-radius: 28px; isolation: isolate; color: #fff;
  min-height: clamp(420px, 44vw, 600px); display: flex; align-items: flex-end;
  border: var(--hairline-strong); box-shadow: var(--ring-shell), var(--shadow-ambient);
}
.band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; z-index: 0; }
.band-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,0) 28%, rgba(15,23,42,0.64) 100%), linear-gradient(90deg, rgba(15,23,42,0.58), rgba(15,23,42,0) 58%);
}
.band-copy { position: relative; z-index: 2; padding: clamp(28px, 4vw, 56px); max-width: 660px; }
.band-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: #22D3EE; margin-bottom: 14px; }
.band-copy h2 { color: #fff; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; }
.band-copy p { color: rgba(255,255,255,0.84); font-size: 16.5px; max-width: 520px; }
.band-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,0.7); padding-bottom: 3px; transition: border-color var(--t-hover), gap var(--t-hover); }
.band-link:hover { border-color: #fff; gap: 12px; }
.band-link svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .band-photo { min-height: 520px; } .band-photo img { object-position: 68% 50%; } }

/* -- Solutions: diagonal staggered square masonry -- */
.mason-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.mason { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: 40px; align-items: start; }
.mason a { display: block; text-decoration: none; color: var(--ink-900); }
.mason a:nth-child(2) { margin-top: 52px; }
.mason a:nth-child(3) { margin-top: 104px; }
.mason a:nth-child(4) { margin-top: 156px; }
.mason-img { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: var(--hairline-strong); box-shadow: 0 12px 32px -16px rgba(15,23,42,0.28); background: var(--ground-1); }
.mason-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-lux); }
.mason a:hover .mason-img img { transform: scale(1.04); }
.mason-cap { margin-top: 12px; font-size: 16px; font-weight: 500; color: var(--ink-700); }
.mason-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 900px) {
  .mason { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mason a:nth-child(n) { margin-top: 0; }
  .mason a:nth-child(2), .mason a:nth-child(4) { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .mason a:hover .mason-img img { transform: none; } }

/* -- Money flow as a paper / ink diptych with a structural numeral -- */
.mflow-dip { display: grid; grid-template-columns: 45fr 55fr; border-radius: 28px; overflow: hidden; border: var(--hairline-strong); box-shadow: var(--ring-shell), var(--shadow-ambient); }
.mflow-left { position: relative; overflow: hidden; background: var(--ground-1); padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.mflow-one { position: absolute; left: 2%; top: -8%; font-size: clamp(280px, 32vw, 560px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; color: rgba(15,23,42,0.045); pointer-events: none; user-select: none; }
.mflow-left .t-h2, .mflow-left .t-lead, .mflow-left .mflow-cap { position: relative; }
.mflow-left .t-h2::before { display: none; }
.mflow-left .t-lead { margin-top: 14px; max-width: 460px; }
.mflow-left .mflow-cap { text-align: left; margin-top: 22px; }
.mflow-right { background: var(--ground-ink); padding: clamp(36px, 5vw, 64px) clamp(22px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.mflow-right .mflow-node { background: #fff; padding: 18px 12px 16px; }
.mflow-right .mflow-node b { font-size: 14px; }
.mflow-right .mflow-node span { font-size: 12px; }
.mflow-right .mflow-node.yours { box-shadow: 0 0 0 2px var(--blue-600), 0 18px 40px rgba(37,99,235,0.32); }
.mflow-right .mflow-link { width: clamp(28px, 3.5vw, 64px); }
.mflow-right .mflow-note { text-align: center; margin-top: 24px; font-size: 13px; color: rgba(255,255,255,0.55); }
@media (max-width: 1023px) {
  .mflow-dip { grid-template-columns: 1fr; }
  .mflow-one { left: auto; right: 3%; top: -12%; font-size: 240px; }
}

/* -- Pricing plan icons -- */
.plan-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-tint-8); color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.plan-ic svg { width: 20px; height: 20px; }
.plan-ink .plan-ic { background: rgba(255,255,255,0.08); color: #93C5FD; }

/* -- Hero ledger polish: avatars, endpoint dots, sub-caption -- */
.hs-hub .ll-row { grid-template-columns: auto auto 1fr auto; }
.ll-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--ground-2); color: var(--ink-600); font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.hs-hub-sub { font-size: 12px; color: var(--ink-500); }
.hs-end { opacity: 0.95; }
.tour-stack .tour-tab .tab-progress { background: var(--blue-600); opacity: 0.55; }

/* ============================================================
   LOOP 30: owner content pack v2 ("Website updated context")
   Image-as-canvas hero, product bento, tour v2, stats band,
   integrations loop + payment rail (ports of the owner's motion
   designs), device cards, icon feature grid, video frame,
   3D viewer, photo moments, device-page heroes
   ============================================================ */

/* -- Hero v2: owner hero scene; copy sits on the scene's open wall.
   The scene is right-anchored at ~84vw so the laptop (41% into the image)
   clears the copy column, and its left/top edges dissolve into #F9F9FC,
   the sampled wall tone of the image itself. -- */
.hero-v2 { position: relative; overflow: hidden; background: #F9F9FC; }
.hero-v2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0), #FFFFFF); pointer-events: none; z-index: 1; }
.hv2-inner { position: relative; z-index: 2; }
.hv2-copy { max-width: 520px; }
.hv2-copy .t-display { font-size: clamp(40px, 4.2vw, 58px); line-height: 1.04; }
.hv2-copy .t-lead { margin-top: 22px; max-width: 460px; }
.hv2-copy .cta-row { margin-top: 32px; }
.hv2-img { position: relative; }
.hv2-img > img { display: block; width: 100%; height: auto; }
@media (min-width: 1200px) {
  .hero-v2 { min-height: clamp(680px, 47vw, 900px); display: flex; align-items: center; }
  .hv2-inner { width: 100%; padding: 104px 0 56px; }
  .hv2-img {
    position: absolute; right: 0; bottom: 0; width: calc(84vw + 30px); aspect-ratio: 5688 / 2697;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%), linear-gradient(180deg, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 15%), linear-gradient(180deg, transparent 0, #000 14%);
    mask-composite: intersect;
  }
  .hv2-img > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
}
@media (max-width: 1199px) {
  .hv2-inner { padding: 128px 0 20px; }
  .hv2-copy { max-width: 640px; }
  .hv2-img { aspect-ratio: 16 / 10; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .hv2-img > img { height: 100%; object-fit: cover; object-position: 80% 50%; }
}

/* -- Products bento (layout in LOOP 38) -- */
.prod-card {
  position: relative; display: flex; flex-direction: column; min-height: 460px; padding: 28px 28px 0;
  border-radius: 24px; border: var(--hairline-strong); overflow: hidden; color: inherit; text-decoration: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform var(--t-hover), box-shadow var(--t-hover), border-color var(--t-hover);
}
.prod-card:hover { transform: translateY(-3px); border-color: rgba(37,99,235,0.3); box-shadow: 0 28px 60px -30px rgba(15,23,42,0.32); }
.prod-card:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
.prod-card h3 { margin-top: 18px; font-size: 21px; font-weight: 600; letter-spacing: -0.018em; color: var(--ink-900); }
.prod-card p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-500); max-width: 30ch; }
.prod-go {
  position: absolute; top: 26px; right: 26px; width: 38px; height: 38px; border-radius: 50%;
  border: var(--hairline-strong); background: #fff; color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform var(--t-hover);
}
.prod-go svg { width: 16px; height: 16px; }
.prod-card:hover .prod-go { background: var(--blue-600); border-color: var(--blue-600); color: #fff; transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .prod-card, .prod-card:hover, .prod-card:hover .prod-media img { transform: none; } }

/* -- Tour v2: steps on the left, product frames crossfade on the right -- */
.tour-v2 { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 0; }
.tour-v2 .tour-tabs { display: flex; flex-direction: column; gap: 8px; }
.tv-item { border-radius: 18px; border: 1px solid transparent; transition: background-color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover); }
.tv-item:has(.tour-tab[aria-selected="true"]) { background: #fff; border-color: rgba(15,23,42,0.08); box-shadow: 0 18px 44px -26px rgba(15,23,42,0.3); }
.tour-v2 .tour-tab {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left;
  padding: 16px 20px; border: 0; border-radius: 18px; background: transparent; color: var(--ink-900);
  font: inherit; cursor: pointer; position: relative; overflow: hidden;
}
.tour-v2 .tour-tab:hover, .tour-v2 .tour-tab[aria-selected="true"] { background: transparent; color: var(--ink-900); }
.tour-v2 .tour-tab:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.tv-num { width: 36px; height: 36px; border-radius: 50%; border: var(--hairline-strong); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover); }
.tour-tab[aria-selected="true"] .tv-num { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,0.35); }
.tv-head { display: block; }
.tv-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-600); }
.tv-title { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink-900); }
.tour-tab[aria-selected="false"] .tv-label { color: var(--ink-400); }
.tour-tab[aria-selected="false"] .tv-title { color: var(--ink-600); }
.tv-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-lux); }
.tv-body > div { overflow: hidden; padding: 0 22px 0 70px; }
.tv-body p { font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.tv-body a { display: inline-block; margin: 12px 0 20px; }
.tv-item:has(.tour-tab[aria-selected="true"]) .tv-body { grid-template-rows: 1fr; }
.tour-v2 .tour-tab .tab-progress { left: 20px; right: 20px; width: auto; bottom: 0; height: 2px; border-radius: 2px; background: var(--blue-600); }
.tour-v2 .tour-panels { position: relative; aspect-ratio: 1.38; margin-top: 0; }
.tour-v2 .tour-panel { display: block; position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(0.985); pointer-events: none; animation: none; transition: opacity 650ms var(--ease-lux), transform 750ms var(--ease-lux); }
.tour-v2 .tour-panel.active { opacity: 1; transform: none; pointer-events: auto; animation: none; }
.tour-v2 .tour-panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .tour-v2 { grid-template-columns: 1fr; }
  .tour-v2 .tour-panels { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .tour-v2 .tour-panel, .tv-body { transition: none; } }

/* -- Stats band: styles moved to LOOP 47 (dot-grid panel, odometer digits) -- */

/* -- Integrations loop (port of owner design "DonatefyIntegrationsLoop") -- */
.il-panel { border-radius: 28px; background: #F7F8FB; border: var(--hairline-strong); padding: clamp(12px, 2vw, 28px); }
.il-stage { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; aspect-ratio: 1320 / 720; }
.il-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.il-node {
  position: absolute; width: 10.3%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  border: 1px solid #E5E6EE; box-shadow: 0 8px 24px rgba(32,34,110,0.08);
  translate: -50% -50%; display: flex; align-items: center; justify-content: center; will-change: transform;
}
.il-node img { display: block; height: auto; }
.il-center {
  position: absolute; width: 15.3%; aspect-ratio: 1; border-radius: 50%; background: #fff; translate: -50% -50%;
  box-shadow: 0 10px 30px rgba(15,16,36,0.14), 0 2px 6px rgba(15,16,36,0.08);
  display: flex; align-items: center; justify-content: center; will-change: transform;
}
.il-center span { width: 89%; aspect-ratio: 1; border-radius: 50%; background: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.il-center img { width: 71%; height: auto; filter: brightness(0) invert(1); will-change: transform; }

/* -- Payment rail (port of owner design "DonatefyPaymentFlowB") -- */
.pf-panel { border-radius: 28px; background: #F7F8FB; border: var(--hairline-strong); overflow: hidden; }
.pf { position: relative; width: 100%; height: 420px; }
.pf svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-node { position: absolute; border-radius: 50%; background: #fff; translate: -50% -50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(15,16,36,0.08); will-change: transform; }
.pf-ring { position: absolute; border-radius: 50%; translate: -50% -50%; pointer-events: none; opacity: 0; }
.pf-tile { border-radius: 30%; display: flex; align-items: center; justify-content: center; }
.pf-tile svg { position: static; width: 50%; height: 50%; }
.pf-label { position: absolute; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.pf-label b { font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.pf-label span { color: var(--ink-600); }
.pf-yours { margin-top: 6px; border-radius: 999px; background: var(--blue-600); color: #fff; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.pf-receipt {
  position: absolute; border-radius: 16px; background: #fff; border: 1px solid #E5E6EE;
  box-shadow: 0 14px 34px rgba(15,16,36,0.12), 0 2px 6px rgba(15,16,36,0.06);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; will-change: transform, opacity;
}
.pf-receipt small { display: block; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-500); }
.pf-receipt strong { display: block; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pf-state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pf-state svg { position: static; width: 1em; height: 1em; }

/* -- Device cards (hardware overview) -- */
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dev-card { display: flex; flex-direction: column; border-radius: 24px; border: var(--hairline-strong); background: #fff; overflow: hidden; transition: transform var(--t-hover), box-shadow var(--t-hover), border-color var(--t-hover); }
.dev-card:hover { transform: translateY(-3px); border-color: rgba(8,145,178,0.3); box-shadow: 0 28px 60px -30px rgba(15,23,42,0.32); }
.dev-plate { position: relative; aspect-ratio: 4 / 3.3; display: flex; align-items: center; justify-content: center; padding: 26px; background: radial-gradient(110% 85% at 50% 18%, #FFFFFF 0%, #F1F4F9 64%, #E8EDF4 100%); border-bottom: var(--hairline); }
.dev-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(15,23,42,0.12)); transition: transform 800ms var(--ease-lux); }
.dev-card:hover .dev-plate img { transform: translateY(-6px) scale(1.02); }
.dev-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.dev-spec { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0E7490; }
.dev-body h3 { margin-top: 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.018em; color: var(--ink-900); }
.dev-body p { margin-top: 6px; font-size: 15px; color: var(--ink-500); }
.dev-actions { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 1023px) { .dev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dev-grid { grid-template-columns: 1fr; } }

/* -- Icon feature grid (owner icon set) -- */
.ifeat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(15,23,42,0.08); border: 1px solid rgba(15,23,42,0.08); border-radius: 24px; overflow: hidden; }
.ifeat { background: #fff; padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 32px); transition: background-color var(--t-hover); }
.ifeat:hover { background: #FBFCFE; }
.ifeat-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--blue-tint-8); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: transform var(--t-hover); }
.ifeat:hover .ifeat-ic { transform: translateY(-3px); }
.ifeat-ic img { width: 32px; height: 32px; object-fit: contain; }
.ifeat h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); }
.ifeat p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 900px) { .ifeat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ifeat-grid { grid-template-columns: 1fr; } }

/* -- Video frame -- */
.vframe { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #EEF1F8; border: var(--hairline-strong); box-shadow: var(--ring-shell), 0 44px 100px -44px rgba(15,23,42,0.38); }
.vframe video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vframe-btn {
  position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15,23,42,0.72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--t-hover), transform 180ms var(--ease-lux);
}
.vframe-btn:hover { background: rgba(15,23,42,0.88); }
.vframe-btn:active { transform: scale(0.94); }
.vframe-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vframe-btn svg { width: 18px; height: 18px; }
.vframe-btn .i-play { display: none; }
.vframe.is-paused .vframe-btn .i-play { display: block; }
.vframe.is-paused .vframe-btn .i-pause { display: none; }
.vframe-cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-500); }

/* -- 3D kiosk viewer -- */
.k3d { position: relative; aspect-ratio: 4 / 4.6; max-height: 660px; width: 100%; border-radius: 28px; overflow: hidden; border: var(--hairline-strong); background: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #F0F3F8 62%, #E4E9F1 100%); }
.k3d-poster { position: absolute; left: 10%; top: 6%; width: 80%; height: 76%; object-fit: contain; transition: opacity 700ms var(--ease-lux); }
.k3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 800ms var(--ease-lux); }
.k3d.is-live iframe { opacity: 1; }
.k3d.is-live .k3d-poster { opacity: 0; }
.k3d-hint { position: absolute; top: 16px; left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.84); border: var(--hairline); font-size: 12px; color: var(--ink-500); pointer-events: none; opacity: 0; transition: opacity 500ms; }
.k3d.is-live .k3d-hint { opacity: 1; }
.k3d.touched .k3d-hint { opacity: 0; }
.k3d-pills { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: var(--hairline-strong); box-shadow: 0 10px 28px -14px rgba(15,23,42,0.35); }
.k3d-pills button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 550; color: var(--ink-500); padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover), color var(--t-hover); }
.k3d-pills button:hover { color: var(--ink-900); }
.k3d-pills button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }
.k3d-pills button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
@media (pointer: coarse) { .k3d iframe { pointer-events: none; } .k3d-hint { display: none; } }
@media (max-width: 480px) { .k3d-pills button { padding: 7px 10px; font-size: 12px; } }

/* -- Device-page heroes -- */
.phero { padding: 136px 0 clamp(48px, 6vw, 88px); position: relative; }
.phero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero .t-display { font-size: clamp(40px, 4.8vw, 64px); margin-top: 18px; }
.phero .t-lead { margin-top: 20px; max-width: 520px; }
.phero .cta-row { margin-top: 30px; }
.model-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; border: var(--hairline-strong); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-900); box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.model-tag i { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #0891B2, #22D3EE); display: inline-block; }
.phero-stack { text-align: center; }
.phero-stack .t-lead { margin-left: auto; margin-right: auto; }
.phero-stack .cta-row { justify-content: center; }
.phero-shot { margin-top: clamp(36px, 5vw, 64px); }
.phero-shot img { display: block; width: 100%; height: auto; }
.cta-links { margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; }
.phero-stack .cta-links { justify-content: center; }
@media (max-width: 1023px) { .phero-grid { grid-template-columns: 1fr; } .phero { padding-top: 124px; } }

/* -- Bare product media: transparent cutouts sit on the page itself -- */
.media-bare img { display: block; width: 100%; height: auto; }
.media-bare.soft img { filter: drop-shadow(0 30px 38px rgba(15,23,42,0.10)); }
.spec-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.spec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: var(--hairline-strong); font-size: 14px; color: var(--ink-700); }
.spec-chip b { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* -- Photo moments (handheld) -- */
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.moment { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; }
.moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1000ms var(--ease-lux); }
.moment::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,23,42,0) 38%, rgba(15,23,42,0.82) 100%); }
.moment:hover img { transform: scale(1.04); }
.moment-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.moment-copy h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; color: #fff; }
.moment-copy p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.84); }
@media (max-width: 1023px) { .moments { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .moments { grid-template-columns: 1fr; } .moment { aspect-ratio: 4 / 3.4; } }
@media (prefers-reduced-motion: reduce) { .moment:hover img, .dev-card:hover .dev-plate img { transform: none; } }

/* -- Two-format comparison (wall vs floor) -- */
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fmt-card { border-radius: 24px; border: var(--hairline-strong); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.fmt-card.is-this { box-shadow: 0 0 0 2px var(--blue-600), 0 24px 60px -32px rgba(37,99,235,0.45); border-color: transparent; }
.fmt-plate { height: 260px; display: flex; align-items: center; justify-content: center; padding: 22px; background: radial-gradient(110% 85% at 50% 18%, #FFFFFF 0%, #F1F4F9 64%, #E8EDF4 100%); border-bottom: var(--hairline); }
.fmt-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fmt-body { padding: 24px 26px 26px; }
.fmt-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.fmt-body h3 small { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-400); margin-left: 6px; }
.fmt-body .tile-list { margin-top: 12px; }
@media (max-width: 760px) { .fmt-grid { grid-template-columns: 1fr; } }

/* -- Stripe trio: now a .fgrid strip under the payment rail (LOOP 41) -- */

/* -- Client logos v2: owner tiles (rounded white / gray / black squares).
   Shown as an even tile grid in true color with a hairline edge; the old
   grayscale+fade treatment turned light tiles into gray boxes. -- */
.logo-wall.clients { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 18px; max-width: 1040px; justify-items: center; align-items: center; }
.logo-wall.clients img {
  height: 64px; width: auto; max-width: 100%; object-fit: contain; opacity: 1; border-radius: 10px;
  filter: drop-shadow(0 0 0.6px rgba(15,23,42,0.42)) drop-shadow(0 6px 14px rgba(15,23,42,0.07));
  transition: transform var(--t-hover), filter var(--t-hover);
}
.logo-wall.clients img:hover { filter: drop-shadow(0 0 0.6px rgba(15,23,42,0.5)) drop-shadow(0 12px 22px rgba(15,23,42,0.14)); transform: translateY(-3px); }
@media (max-width: 900px) { .logo-wall.clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .logo-wall.clients { gap: 16px 12px; } .logo-wall.clients img { height: 52px; } }

/* LOOP 30b: hardware pages polish */
.dev-plate { min-height: 0; overflow: hidden; }
.dev-plate img { position: absolute; inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); max-width: none; max-height: none; object-fit: contain; }
.k3d-hint { top: 18px; left: 18px; translate: none; display: inline-flex; align-items: center; gap: 6px; }
.k3d-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.16); }
/* moments: photo on top, copy below for legibility */
.moment { aspect-ratio: auto; display: flex; flex-direction: column; color: var(--ink-900); background: #fff; border: var(--hairline-strong); border-radius: 22px; transition: transform var(--t-hover), box-shadow var(--t-hover); }
.moment img { position: relative; inset: auto; z-index: auto; height: auto; aspect-ratio: 4 / 3.4; transition: none; }
.moment::after { display: none; }
.moment:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -30px rgba(15,23,42,0.3); }
.moment:hover img { transform: none; }
.moment-copy { position: static; padding: 18px 20px 22px; }
.moment-copy h3 { color: var(--ink-900); font-size: 17px; }
.moment-copy p { color: var(--ink-500); }
@media (max-width: 560px) { .moment { aspect-ratio: auto; } .moment img { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .moment:hover { transform: none; } }
/* tile-plate: transparent product renders inside bento tiles */
.tile-plate { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(110% 85% at 50% 18%, #FFFFFF 0%, #F1F4F9 64%, #E8EDF4 100%); border-bottom: var(--hairline); }
.tile-plate img { position: absolute; inset: 22px 26px; width: calc(100% - 52px); height: calc(100% - 44px); object-fit: contain; filter: drop-shadow(0 22px 26px rgba(15,23,42,0.12)); transition: transform 800ms var(--ease-lux); }
.shell:hover .tile-plate img { transform: translateY(-4px) scale(1.015); }
.tile-plate.ink { background: radial-gradient(110% 85% at 50% 12%, #26324A 0%, #131C2E 62%, #0F172A 100%); border-bottom-color: rgba(255,255,255,0.08); }
.tile-plate.ink img { filter: drop-shadow(0 24px 30px rgba(0,0,0,0.4)); }
.pcar-slide { background: radial-gradient(110% 85% at 50% 18%, #FFFFFF 0%, #F3F5F9 70%, #ECF0F5 100%); }
.pcar-slide img { aspect-ratio: 16 / 11; padding: 20px 24px; }
@media (prefers-reduced-motion: reduce) { .shell:hover .tile-plate img { transform: none; } }
.shell:has(> .shell-core > .tile-plate) { display: flex; flex-direction: column; }
.shell-core:has(> .tile-plate) { display: flex; flex-direction: column; flex: 1 1 auto; }
.shell-core > .tile-plate { flex: 0 0 auto; }
.shell-core > .tile-plate.fill { flex: 1 0 auto; }
.shell-core:has(> .tile-plate:not(.fill)) > .tile-pad { flex: 1 1 auto; display: flex; flex-direction: column; }
.shell-core:has(> .tile-plate:not(.fill)) > .tile-pad > div:last-child:not(:first-child) { margin-top: auto !important; padding-top: 14px; }
.media-bare.rounded img { border-radius: var(--radius-shell); box-shadow: 0 40px 80px -48px rgba(15,23,42,0.35); }
@media (min-width: 641px) and (max-width: 1023px) {
  .dev-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .dev-plate { padding: 16px; }
  .dev-plate img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .dev-body { padding: 18px 18px 20px; }
  .dev-body h3 { font-size: 18px; }
  .dev-actions { gap: 12px; }
}
@media (min-width: 641px) and (max-width: 1023px) { .dev-spec { display: block; min-height: 2.9em; } }

/* LOOP 30c: channel hue per device page (kiosk violet, handheld emerald, Mobile App cyan, overview blue) */
body.dv-kiosk    { --family: #7C3AED; --family-ink: #6D28D9; --family-tint: rgba(139,92,246,0.05); --family-2: #A78BFA; }
body.dv-handheld { --family: #059669; --family-ink: #047857; --family-tint: rgba(16,185,129,0.05); --family-2: #34D399; }
body.dv-tap      { --family: #0891B2; --family-ink: #0E7490; --family-tint: rgba(34,211,238,0.06); --family-2: #22D3EE; }
body.dv-overview { --family: #2563EB; --family-ink: #1D4ED8; --family-tint: rgba(37,99,235,0.045); --family-2: #60A5FA; }
body[class*="dv-"] .eyebrow-pill { background: color-mix(in srgb, var(--family) 11%, white); color: var(--family-ink); }
.model-tag i { background: linear-gradient(135deg, var(--family, #0891B2), var(--family-2, #22D3EE)); }
.dev-card { --ch: var(--family); }
.dev-spec { color: var(--ch-ink, var(--family-ink)); }
.dev-card:hover { border-color: color-mix(in srgb, var(--ch) 32%, transparent); }
.fmt-card.is-this { box-shadow: 0 0 0 2px var(--family), 0 24px 60px -32px color-mix(in srgb, var(--family) 45%, transparent); }
.k3d-hint::before { background: var(--family); box-shadow: 0 0 0 3px color-mix(in srgb, var(--family) 16%, transparent); }
.spec-chip b { color: var(--family-ink); }
.tile-plate.tall { aspect-ratio: 1 / 0.9; }

/* acct-map: illustrative campaign-to-QuickBooks coding card (replaces three screenshot placeholders) */
.acct-map { max-width: 520px; margin: 0 auto; border-radius: 22px; background: #fff; border: var(--hairline-strong); box-shadow: 0 40px 80px -48px rgba(15,23,42,0.35), 0 1px 0 rgba(15,23,42,0.03); padding: 22px; display: grid; gap: 16px; font-size: 14px; }
.am-head { display: flex; align-items: center; gap: 12px; }
.am-head img { width: 36px; height: 36px; border-radius: 10px; }
.am-head div { display: grid; line-height: 1.25; }
.am-head b { font-weight: 600; color: var(--ink-900); font-size: 16px; }
.am-eyebrow { font-size: 12px; color: var(--ink-500); letter-spacing: 0.02em; }
.am-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(5,150,105,0.1); color: #047857; font-size: 12.5px; font-weight: 600; }
.am-status svg, .am-ok svg { width: 13px; height: 13px; }
.am-rows { display: grid; gap: 8px; }
.am-row { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 12px; }
.am-k { color: var(--ink-500); font-size: 13px; }
.am-v { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; border: var(--hairline-strong); background: #F8FAFC; color: var(--ink-900); font-weight: 500; font-variant-numeric: tabular-nums; }
.am-v svg { width: 15px; height: 15px; color: var(--ink-400); flex: none; }
.am-inherit { display: grid; gap: 8px; padding-top: 14px; border-top: var(--hairline); }
.am-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.am-ch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-700); background: color-mix(in srgb, var(--c) 9%, white); }
.am-ch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.am-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #F8FAFC, #F1F5F9); }
.am-amt { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.am-meta { color: var(--ink-500); font-size: 13px; }
.am-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #047857; font-size: 13px; font-weight: 600; }
@media (max-width: 420px) { .am-row { grid-template-columns: 1fr; gap: 4px; } .am-ok { margin-left: 0; } }
.pledges.two { grid-template-columns: repeat(2, 1fr); max-width: 880px; } @media (max-width: 900px) { .pledges.two { grid-template-columns: 1fr; } }

/* LOOP 30d: accessibility pass (audit fixes) */
@media (pointer: coarse) { .k3d-hint { display: none !important; } }
.footer-grid h2.ft-h { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 14px; line-height: 1.4; }
.mobile-menu .mm-label, .input::placeholder, .cmp-no, .tour-tab[aria-selected="false"] .tv-label, .fmt-body h3 small { color: var(--ink-500); }
b, strong { font-weight: 600; }
.f-social .f-soc { color: var(--ink-500); }
/* failsafe: if site.js never runs, reveal-gated content stays visible */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
.k3d-failed .k3d-pills, .k3d-failed .k3d-hint { display: none; }
.media-bare.fade-b img { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }

/* interlude.lite: mid-page callout on light ground, so each page has one dark closing band */
.interlude.lite { background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--family) 6%, white) 100%); border: var(--hairline-strong); color: var(--ink-600); box-shadow: 0 30px 70px -50px rgba(15,23,42,0.25); }
.interlude.lite::after, .interlude.lite::before { display: none; }
.interlude.lite h2, .interlude.lite h3 { color: var(--ink-900); }
.interlude.lite .t-lead, .interlude.lite p { color: var(--ink-600); }
.interlude.lite .eyebrow-pill { background: color-mix(in srgb, var(--family) 11%, white); color: var(--family-ink); }
.interlude.lite a:not(.cta) { color: var(--blue-600); }
.tile-plate.tall img { inset: 22px 10px auto; width: calc(100% - 20px); height: 126%; object-position: 50% 0; }
.tile-plate.tall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(232,237,244,0), #E8EDF4); pointer-events: none; }

/* LOOP 31: layout fixes from owner review (footer logo, pricing flag, hero spacing) */
/* footer logo: the img carries intrinsic width/height attributes, so width must follow height */
.footer-grid .f-brand img.f-logo { width: auto; max-width: 168px; height: 26px; object-fit: contain; }
.island-nav .brand img { width: auto; object-fit: contain; }
/* pricing: the Recommended flag sits above the card edge, so the hot card must not clip */
.plan-hot { overflow: visible; }
.plan-hot::before { border-radius: inherit; }
.plan-grid { padding-top: 14px; }
/* "Everything in X, plus:" reads as a subheading aligned with the card text, not an indented item */
.plan-feats li.pf-lead svg { display: none; }
.plan-feats li.pf-lead { font-size: 13px; letter-spacing: 0.01em; margin-bottom: 2px; }
/* page-hero: breathing room between the lead paragraph and the CTA row */
.page-hero .cta-row { margin-top: clamp(26px, 3vw, 34px); }
.page-hero .t-lead + .cta-row, .phero .t-lead + .cta-row { margin-top: clamp(26px, 3vw, 34px); }
/* hero scroll depth: fade and settle instead of sliding down, so the last line
   and the CTA never slide into the hero's clipped bottom edge */
@supports (animation-timeline: scroll()) {
  @keyframes hero-recede { to { transform: scale(0.985); opacity: 0.4; } }
  .hero .container, .page-hero .container { transform-origin: 50% 0; }
}
/* long CTA labels wrap on phones instead of overflowing the button */
.cta { max-width: 100%; }
@media (max-width: 520px) {
  .cta { white-space: normal; line-height: 1.3; text-align: left; }
  .cta .arrow-cell { flex: none; }
}
/* heading-to-copy rhythm inside the light callout grid */
.interlude .bento h3.t-h4 + p { margin-top: 8px; }
/* readable small labels: eyebrows and ledger badges */
.eyebrow-pill { font-size: 11.5px; }
.ll-badge { font-size: 11px; }
@media (max-width: 480px) { .ll-row .ll-who { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } }
/* carousel dots: 32px invisible hit area around the small visual dot */
.pcar-dot { position: relative; }
.pcar-dot::after { content: ""; position: absolute; inset: -13px -5px; }
.pcar-dots { gap: 12px; }

/* ============================================================
   LOOP 32: screenshot review of all 32 pages at 1440, 768, 390
   (37 confirmed root causes, highest severity first)
   ============================================================ */
/* section after a tinted band: restore the space an inline padding-top: 0 removed */
.section[class*="wash-"] + .section[style*="padding-top: 0"] { padding-top: clamp(56px, 7vw, 96px) !important; }

/* comparison tables on phones: pin row labels (hardware, pricing); stack compare.html's table into cards */
@media (max-width: 640px) {
  table.cmp:has(tbody th) thead th:first-child, table.cmp tbody th { position: sticky; left: 0; z-index: 1; padding-left: 16px; padding-right: 12px; box-shadow: inset -1px 0 0 rgba(15,23,42,0.10); }
  table.cmp:has(tbody th) thead th:first-child { background: var(--ground-1); }
  table.cmp tbody th { background: var(--ground-0); }
  table.cmp:not(:has(tbody th)) { min-width: 0; }
  table.cmp:not(:has(tbody th)) thead { display: none; }
  table.cmp:not(:has(tbody th)) :is(tbody, tr, td) { display: block; }
  table.cmp:not(:has(tbody th)) tr { padding: 18px 18px 16px; border-bottom: var(--hairline); }
  table.cmp:not(:has(tbody th)) tr:last-child { border-bottom: 0; }
  table.cmp:not(:has(tbody th)) td { padding: 0; border: 0; }
  table.cmp:not(:has(tbody th)) td:first-child { margin-bottom: 10px; font-weight: 600; box-shadow: none; }
  table.cmp:not(:has(tbody th)) td + td { margin-top: 10px; font-size: 14px; line-height: 1.55; }
  table.cmp:not(:has(tbody th)) td + td::before { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  table.cmp:not(:has(tbody th)) td:nth-child(2)::before { content: "The typical patchwork"; color: var(--ink-500); }
  table.cmp:not(:has(tbody th)) td:nth-child(3)::before { content: "Donatefy"; color: var(--blue-700); }
}

/* security money flow: the tag pill keeps its white label */
.mflow-node span.mflow-tag { color: #fff; font-size: 10px; line-height: 1.5; margin-top: 0; }

/* centered heroes: center the capped display heading too */
.center > .t-display { margin-left: auto; margin-right: auto; }

/* mobile-app: cap the portrait phone screenshot so it balances the copy */
.split .media-bare img[src*="card-mobile"] { max-width: 360px; margin-inline: auto; }
@media (max-width: 560px) { .split .media-bare img[src*="card-mobile"] { max-width: 280px; } }

/* headings without a t-* class fell back to browser bold 700; cap at 600 */
.split .copy :is(h2, h3), .band-copy h2 { font-weight: 600; }
.tile-pad h3:not([class]) { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; }

/* tablets: text-only card grids go two-up instead of one stretched column */
@media (min-width: 641px) and (max-width: 960px) {
  .bento:not(:has(> :not(.shell-flat))):not(:has(.tile-plate)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento:not(:has(> :not(.shell-flat))):not(:has(.tile-plate)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Discover badge: the wordmark ran under the orange disc */
.pay-badge:is([title="Discover"], [aria-label="Discover"]) svg text { font-size: 6px; letter-spacing: 0; transform: translateX(-2.5px); }

/* phones: the product flow diagram scrolls sideways instead of shrinking labels to 4px */
@media (max-width: 640px) {
  .flow-shell .shell-core:has(> .flow-diagram:not(.beam-map)) { overflow-x: auto; overscroll-behavior-x: contain; }
  .flow-shell .flow-diagram:not(.beam-map) { min-width: 640px; }
}
/* phones: the integrations beam map crops its empty side margins so the logos grow */
@media (max-width: 560px) {
  .flow-shell .shell-core:has(> .beam-map) { padding: 10px; }
  .beam-map { overflow: hidden; }
  .beam-map svg { width: 128%; max-width: none; margin: -3% -14%; }
}

/* article pages: hero and prose share one left edge */
@media (min-width: 785px) { .page-hero:has(+ .article) > .container { max-width: 720px; } }
@media (max-width: 784px) { .article.container { max-width: none; padding-left: 32px; padding-right: 32px; } }
@media (max-width: 560px) { .article.container { padding-left: 20px; padding-right: 20px; } }

/* tinted bands after a section: symmetric inner padding */
.section + .section[class*="wash-"] { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

/* online channel grid: stack the text tiles beside the tall image tile */
@media (min-width: 961px) {
  .bento:has(> .b6:first-child + .b6 + .b4) > .b6:first-child { grid-row: span 4; }
  .bento:has(> .b6:first-child + .b6 + .b4) > .b4 { grid-column: span 6; }
}


/* demo page: inline column spans must not survive the one-column collapse */
@media (max-width: 960px) { .split > .media[style*="grid-column"], .split > .copy[style*="grid-column"] { grid-column: 1 / -1 !important; } }

/* small callout headings inside split copy keep their card size */
.split .copy h3.t-h4 { font-size: 17px; line-height: 1.35; letter-spacing: -0.012em; margin-top: 0; }

/* logo wall under its heading gets normal section-head spacing */
.container:has(> .sec-head) + .container > .logo-marquee { margin-top: clamp(10px, 2vw, 22px); }

/* giving-flow head is centered inline, so center its keyline too */
#giving-flow .sec-head .t-h2::before { margin-left: auto; margin-right: auto; }

/* nonprofits globe: fill the transparent sides so it is not letterboxed */
.split .media img.shot[src$="global-reach.webp"] { background: #F0EFF2; }

/* dark closing bands on small phones: room for long CTA labels */
@media (max-width: 420px) {
  .interlude { padding-left: 20px; padding-right: 20px; }
  .interlude .cta-row .cta { padding-left: 18px; gap: 8px; }
}

/* rhythm: never stack two full section paddings around tight sections */
.section-tight + .section:not([class*="wash-"]):not([style*="padding-top"]),
.section-tight + .trace-wrap > .section:first-of-type { padding-top: clamp(28px, 4vw, 56px); }
.section:not([class*="wash-"]) + .section-tight:not([class*="wash-"]):not([style*="padding-top"]) { padding-top: 0; }

/* tablet footer: brand block spans the row instead of leaving a hole */
@media (min-width: 561px) and (max-width: 960px) { .footer-grid .f-brand { grid-column: 1 / -1; } }

/* sticky bottom bar: 16px gutter, and no 650px-wide pill on tablets */
.mcta { padding-left: 16px; padding-right: 16px; }
@media (min-width: 561px) and (max-width: 820px) { .mcta { justify-content: center; } .mcta .cta { flex: 0 1 360px; } }

/* sticky-bar clearance moves into the footer, only when the bar exists */
@media (max-width: 820px) {
  body { padding-bottom: 0; }
  body:has(> .mcta) footer.site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* no single-word last lines in article headings and centered leads */
.article > h2, .article > h3 { text-wrap: balance; }
@media (max-width: 560px) { .page-hero .t-display { text-wrap: pretty; } }
.interlude .t-lead { text-wrap: balance; }
.page-hero .t-lead { text-wrap: pretty; }

/* payment badge rows: space under checklists, no lone ACH badge */
.tile-list + .pay-row { margin-top: 18px; }
@media (max-width: 820px) { .pay-row { gap: 10px; } }
@media (max-width: 480px) { .pay-row { display: grid; grid-template-columns: repeat(3, 68px); } .pay-row.center { justify-content: center; } }

/* in-person device bento: side-by-side titles line up */
@media (min-width: 961px) { .shell-core:has(> .tile-plate.fill, > .pcar) > .tile-pad > p { min-height: 6.6em; } }

/* tablet kiosk plates: wide aspect once the bento stacks */
@media (min-width: 561px) and (max-width: 960px) { .tile-plate.tall { aspect-ratio: 16 / 10; } }

/* interlude headings: no leftover top margin from a removed eyebrow */
.interlude > h2.t-h2:first-child { margin-top: 0 !important; }

/* one marker per section head: no keyline when an eyebrow pill is present */
.sec-head .eyebrow-pill ~ .t-h2::before { display: none; }

/* wall hero: feather the forearm instead of a hard bottom cut */
.phero-shot img[src*="wall/hero"] { -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }

/* stacked device heroes: do not stack hero bottom padding on a full section top */
.phero + .section:not([style]) { padding-top: clamp(40px, 6vw, 80px); }

/* tablet device cards: room for two-line spec labels */
@media (min-width: 641px) and (max-width: 1023px) { .dev-spec { min-height: 3.3em; } }

/* Kindful card logo: show the mark, not the 7px wordmark */
.bento img[src$="Kindful.webp"] { width: 44px !important; height: 29px !important; object-fit: cover; object-position: 50% 0; }

/* security pledges: two cards fill the row */
.pledges.two { max-width: none; }

/* security money flow: equal node heights */
@media (min-width: 881px) { .mflow-right .mflow-grid { align-items: stretch; } .mflow-right .mflow-link { align-self: center; } .mflow-right .mflow-node { display: flex; flex-direction: column; align-items: center; justify-content: center; } }

/* demo form on phones: wider inputs */
@media (max-width: 560px) { .split .media .tile-pad[style*="padding: 36px"] { padding: 22px !important; } }

/* ============================================================
   LOOP 33: large screens get more room, not a magnified layout.
   The content area widens in steps and headings grow a little;
   everything else keeps its laptop proportions. The home hero
   scene is anchored to the content area with a capped size, so
   on ultrawide monitors it sits beside the headline instead of
   stretching across the whole screen.
   ============================================================ */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
  .island-nav { max-width: 1160px; }
  .t-display { font-size: clamp(42px, 4.6vw, 80px); }
  .page-hero .t-display { font-size: 64px; max-width: 880px; }
  .hv2-copy { max-width: 580px; }
  .hv2-copy .t-display { font-size: 64px; }
  .t-h2 { font-size: 48px; }
  .t-lead { font-size: 20px; }
  .sec-head { max-width: 780px; }
}
@media (min-width: 1920px) {
  :root { --container: 1400px; }
  .island-nav { max-width: 1240px; }
  .page-hero .t-display { font-size: 68px; }
  .hv2-copy { max-width: 620px; }
  .hv2-copy .t-display { font-size: 70px; }
  .hv2-copy .t-lead { max-width: 520px; }
  .t-h2 { font-size: 52px; }
  .t-lead { font-size: 21px; }
  .sec-head { max-width: 820px; }
}
@media (min-width: 2400px) {
  :root { --container: 1480px; }
  .island-nav { max-width: 1320px; }
  .hv2-copy .t-display { font-size: 74px; }
}
/* home hero on wide screens: the scene starts just inside the content area
   and may extend at most 240px past it, so it never balloons or crops */
@media (min-width: 1680px) {
  .hv2-img {
    width: auto;
    left: calc((100vw - var(--container)) / 2 + 80px);
    right: max(0px, calc((100vw - var(--container)) / 2 - 240px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%);
  }
}
/* guide publish and update dates under the lead */
.page-hero .guide-date { margin-top: 18px; color: var(--ink-500); font-size: 14px; }
/* visible breadcrumbs on nested pages (baked by scripts/build_site.py) */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; line-height: 1.4; color: var(--ink-500); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--ink-400); border-right: 1.5px solid var(--ink-400); transform: rotate(45deg); }
.crumbs a { color: var(--ink-600); text-decoration: none; transition: color var(--t-hover); }
.crumbs a:hover { color: var(--blue-600); }
.crumbs [aria-current="page"] { color: var(--ink-700); font-weight: 500; }
.phero-stack .crumbs ol { justify-content: center; }
/* further reading link under an FAQ */
.further-read { margin-top: 22px; font-size: 15px; color: var(--ink-600); }
.further-read a { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); }
.further-read a:hover { border-bottom-color: var(--blue-600); }
/* linked card headings keep heading styling */
.tile-pad h3 a { color: inherit; text-decoration: none; transition: color var(--t-hover); }
.tile-pad h3 a:hover { color: var(--blue-600); }

/* LOOP 34: official payment method logos (assets/v2/pay) inside the badge tiles */
.pay-badge { align-items: center; }
.pay-badge img { display: block; width: 100%; height: 100%; padding: 9px 10px; object-fit: contain; pointer-events: none; }
.pay-badge img[src*="samsung-pay"], .pay-badge img[src*="/ach."] { padding: 7px; }

/* ============================================================
   LOOP 35: Mobile App flow video, and the tracing beam follows
   the wider large-screen containers from LOOP 33
   ============================================================ */
/* the beam sat 54px left of a 1200px container; anchor it to the live container so it never crosses the copy */
.trace-beam { left: calc(50% - var(--container) / 2 - 54px); }

/* Mobile App hero (right column of .phero-grid): the app flow rendered on white, every edge feathered so the
   card, hand, and confetti enter and leave softly instead of meeting a hard frame */
.vframe.vframe-bare { aspect-ratio: 5 / 6; width: min(100%, 540px); margin-inline: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vframe.vframe-bare video {
  object-fit: contain; background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
/* the phone spans the middle 47% of the frame; the control sits just off its lower right corner */
.vframe.vframe-bare .vframe-btn { right: 14%; bottom: 9%; width: 40px; height: 40px; }
@media (min-width: 1600px) { .vframe.vframe-bare { width: min(100%, 580px); } }
/* the receipt still in How it works: a portrait phone capped like the earlier screenshot */
.split .media-bare img[src*="app-receipt"] { max-width: 360px; margin-inline: auto; }
@media (max-width: 560px) { .split .media-bare img[src*="app-receipt"] { max-width: 280px; } }

/* ============================================================
   LOOP 36: sharp mockups at every width. Srcset art gets measured
   sizes and larger files in the markup; these rules remove the
   render-time softening and cap the screenshots that have no larger
   source. The only Recurring Plans screenshot is 524px wide, so it
   never grows past the size that shows it 1:1 (it sits bare, LOOP 49).
   ============================================================ */
.media:has(> img.shot[src*="recurring-plans"]) { max-width: 524px; margin-inline: auto; width: 100%; }
/* finished reveals release their animation: with fill "both" Chrome keeps the layer animated,
   and images first painted mid-reveal never re-draw at full quality, so resized mockups stay soft */
.reveal.in { animation-fill-mode: backwards; }
/* the integrations loop and payment rail are scaled per frame by js/site.js only while on screen;
   a permanent will-change pinned their logos to a cached layer at a fractional offset */
.il-node, .il-center, .il-center img, .pf-node, .pf-receipt { will-change: auto; }
/* the giving site composition is a 1200px file: no wider than 600px, so it maps 1:1 on retina */
.media:has(img.shot[src*="giving-site-devices"]) { max-width: 618px; margin-inline: auto; width: 100%; }

/* ============================================================
   LOOP 37: client logos drift in one row. js/site.js repeats the set
   until it fills the row, so the loop never shows a gap at any width;
   it pauses off screen and on hover. Without
   JavaScript the logos keep the tile grid; with reduced motion they sit
   in one still row the visitor can swipe.
   ============================================================ */
.logo-marquee { position: relative; }
html.js .lm-view {
  overflow: hidden; padding: 12px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
html.js .lm-view .logo-wall.clients {
  display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(30px, 3.6vw, 52px);
  width: max-content; max-width: none; margin: 0;
}
html.js .lm-view .logo-wall.clients img { flex: none; }
.logo-marquee.lm-on .logo-wall.clients { animation: lm-drift var(--lm-dur, 60s) linear infinite; animation-play-state: paused; }
.logo-marquee.lm-on.lm-run .logo-wall.clients { animation-play-state: running; }
.logo-marquee.lm-on:hover .logo-wall.clients { animation-play-state: paused; }
@keyframes lm-drift { to { transform: translate3d(var(--lm-shift, -50%), 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  html.js .lm-view { overflow-x: auto; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   LOOP 38: product cards. The two kiosks share the first row, the
   three hand-sized devices the second, and the CRM spans the third.
   Each card puts its title on top and lets the art fill the rest:
   phones and the hand bleed off the bottom edge, the floor kiosk's
   stand runs out of frame, screens float with even margins. A faint
   wash in each channel's color sits behind the art.
   ============================================================ */
.prod-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.prod-card {
  --pc: 37, 99, 235; --art-h: clamp(250px, 23vw, 360px);
  min-height: 0; padding: 0;
  background:
    radial-gradient(120% 75% at 50% 100%, rgba(var(--pc), 0.08), rgba(var(--pc), 0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
}
.prod-card.pc-kiosk { --pc: 124, 58, 237; }
.prod-card.pc-handheld { --pc: 5, 150, 105; }
.prod-card.pc-tap { --pc: 8, 145, 178; }
.prod-card.pc-online { --pc: 37, 99, 235; }
.prod-card.p-half { grid-column: span 3; }
.prod-card.p-third { grid-column: span 2; }
.prod-card.p-full { grid-column: span 6; --art-h: clamp(320px, 34vw, 520px); }
.prod-txt { padding: 26px 78px 0 28px; }
.prod-card h3 { margin-top: 0; font-size: 20px; }
.prod-card p { margin-top: 5px; max-width: 34ch; }
.prod-media { flex: 1 0 var(--art-h); min-height: var(--art-h); margin-top: 18px; padding: 0 28px; display: flex; align-items: flex-end; justify-content: center; }
/* the art box is sized explicitly: a srcset image's natural width is its sizes slot, so auto sizing would shrink it */
.prod-media img { display: block; width: 100%; height: calc(var(--art-h) - var(--pad-b, 0px)); object-fit: contain; object-position: 50% 100%; transition: transform 800ms var(--ease-lux); }
.prod-card:hover .prod-media img { transform: translateY(-4px); }
/* floor kiosk: the art fills the card width and its stand runs out the bottom */
.prod-media.pm-floor { padding: 0 0 0 12px; overflow: hidden; align-items: flex-start; }
.prod-media.pm-floor img { height: auto; }
/* screens float with even breathing room on every side */
.prod-media.pm-float { --pad-b: 28px; align-items: center; padding: 0 28px 28px; }
.prod-media.pm-float img { object-position: 50% 50%; }
/* devices stand on the bottom edge */
.prod-media.pm-base { padding-top: 6px; }
/* the phone rises from the bottom edge and is cut by it */
.prod-media.pm-bleed { align-items: flex-start; overflow: hidden; }
.prod-media.pm-bleed img { width: min(64%, 250px); height: auto; }
@media (min-width: 1920px) { .prod-card h3 { font-size: 22px; } }
@media (max-width: 1023px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-card.p-half, .prod-card.p-third, .prod-card.p-full { grid-column: span 1; --art-h: 250px; }
}
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: 1fr; gap: 14px; }
  .prod-card.p-half, .prod-card.p-third { --art-h: clamp(220px, 64vw, 280px); }
  .prod-card.p-full { --art-h: clamp(190px, 54vw, 240px); }
  .prod-txt { padding: 22px 70px 0 22px; }
  .prod-card .prod-go { top: 20px; right: 20px; }
  .prod-media { padding: 0 22px; margin-top: 16px; }
  .prod-media.pm-float { --pad-b: 22px; padding: 0 22px 22px; }
  .prod-media.pm-bleed img { width: min(58%, 230px); }
}

/* ============================================================
   LOOP 39: two-column FAQ (after the 21st.dev Two-Column FAQ,
   with the Accordion Active Background idea). Every FAQ section
   shares one structure: .container > .sec-head + .faq. From
   1024px the heading sits in a sticky left column and the
   accordion fills the right column; below 1024px it stacks
   as before, with no sticky. The open
   question becomes a white panel with a hairline ring, a soft
   shadow and a 2px rail in the page hue (blue by default).
   The guide link each FAQ used to trail with now sits inside
   .sec-head, so it travels with the heading. The Loop 8
   accordion engine is untouched, and the no-JS details list
   gets the same open panel.
   ============================================================ */
/* rows: content sits inside the row so the open panel has room */
.faq .acc-item, .faq details { position: relative; isolation: isolate; transition: border-color 320ms var(--ease-lux); }
.faq .acc-btn { padding: 18px 20px 18px 18px; }
.faq .acc-body { padding: 2px 52px 24px 70px; }
.faq summary { padding: 20px 20px 20px 18px; }
.faq .faq-body { padding: 0 52px 22px 18px; }
/* the panel and its rail */
.faq .acc-item::before, .faq details::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: var(--radius-card); background: var(--ground-0);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08), 0 18px 44px -26px rgba(15,23,42,0.3);
  opacity: 0; transition: opacity 320ms var(--ease-lux);
}
.faq .acc-item::after, .faq details::after {
  content: ''; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 2px; pointer-events: none;
  border-radius: 2px; background: var(--family, var(--blue-600));
  opacity: 0; transform: scaleY(0.4); transform-origin: 50% 0;
  transition: opacity 260ms var(--ease-lux), transform 480ms var(--ease-lux);
}
.faq .acc-item.open::before, .faq .acc-item.open::after,
.faq details[open]::before, .faq details[open]::after { opacity: 1; }
.faq .acc-item.open::after, .faq details[open]::after { transform: none; }
/* the hairlines touching the open panel step aside (the :has rules sit
   apart so a browser without :has still clears the open row) */
.faq .acc-item.open, .faq details[open] { border-bottom-color: transparent; }
.faq .acc-item:has(+ .acc-item.open), .faq details:has(+ details[open]) { border-bottom-color: transparent; }
/* the Loop 8 ink underline rests at zero width on the open row and the
   row above it, so a row that closes has no full-width rule to retract
   and only the hover stub ever draws; it fades as it shrinks */
.faq .acc-line { transition: transform 420ms var(--ease-lux), opacity 200ms var(--ease-lux); }
.faq .acc-item.open .acc-line { opacity: 0; transform: scaleX(0); }
.faq .acc-item:has(+ .acc-item.open) .acc-line { opacity: 0; transform: scaleX(0); }
/* touch screens keep :hover after a tap, so the stub would linger on a
   row just tapped closed */
@media (hover: none) {
  .faq .acc-item:hover .acc-line { transform: scaleX(0); }
}
/* the guide link now leads the section, under the heading */
.sec-head .further-read { margin-top: 4px; max-width: 44ch; text-wrap: pretty; }

@media (min-width: 1024px) {
  .container:has(> .sec-head + .faq) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 64px; align-items: start;
  }
  .container:has(> .sec-head + .faq) > .sec-head {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 112px; max-width: 460px; margin: 0;
  }
  .container:has(> .sec-head + .faq) > .faq { grid-column: 2; grid-row: 1; max-width: none; }
  .container:has(> .sec-head + .faq) > .faq .acc { max-width: none; }
}
@media (min-width: 1600px) {
  .container:has(> .sec-head + .faq) { column-gap: 96px; }
  .container:has(> .sec-head + .faq) > .sec-head { max-width: 520px; }
}
@media (max-width: 640px) {
  .faq .acc-btn { gap: 14px; padding: 16px 14px 16px 12px; }
  .faq .acc-body { padding: 0 16px 20px 12px; }
  .faq summary { padding: 18px 14px 18px 12px; }
  .faq .faq-body { padding: 0 16px 20px 12px; }
  .faq .acc-item::after, .faq details::after { top: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq .acc-item, .faq details,
  .faq .acc-item::before, .faq details::before,
  .faq .acc-item::after, .faq details::after,
  .faq .acc-line { transition: none; }
  .faq .acc-item::after, .faq details::after { transform: none; }
}

/* ============================================================
   LOOP 40: GridBeam closing bands (port of cult-ui GridBeam,
   21st id 18024). Every ink band marked [data-gridbeam] gets a
   hairline grid drawn in CSS, so it shows without JavaScript and
   under prefers-reduced-motion. js/site.js (Loop 40) adds a canvas
   that sends soft beams along the grid dividers and snaps the grid
   to whole pixels through --gb-ox / --gb-oy. Both layers fade out
   behind the copy, so the heading and buttons keep full contrast.
   This replaces the band's drifting color field (LOOP 14 ::after);
   the border beam (LOOP 9 ::before) stays.
   ============================================================ */
.interlude[data-gridbeam] {
  --gb-cell: 64px;
  --gb-line: rgba(226,232,240,0.075);
  /* beam colors on ink: blue family first, channel hues faint (hex, strength) */
  --gb-pal: #60A5FA 0.95, #93C5FD 0.8, #3B82F6 0.95, #A78BFA 0.55, #60A5FA 0.95, #34D399 0.5, #93C5FD 0.8, #22D3EE 0.55;
  /* clear box over the copy: js/site.js measures its edges into --gb-l/r/t/b;
     the percentages are the no-JS fallback. Two feathered masks (outside the
     copy's columns, outside its rows) add up to a frame, so the grid and the
     beams live in the margins and fade out before they reach any text. */
  --gb-fx: 120px; --gb-fy: 56px;
  --gb-mask:
    linear-gradient(90deg, #000 calc(var(--gb-l, 20%) - var(--gb-fx)), transparent var(--gb-l, 20%), transparent var(--gb-r, 80%), #000 calc(var(--gb-r, 80%) + var(--gb-fx))),
    linear-gradient(180deg, #000 calc(var(--gb-t, 16%) - var(--gb-fy)), transparent var(--gb-t, 16%), transparent var(--gb-b, 84%), #000 calc(var(--gb-b, 84%) + var(--gb-fy)));
  --gb-mask-beam:
    linear-gradient(90deg, #000 calc(var(--gb-l, 20%) - 48px), transparent calc(var(--gb-l, 20%) - 4px), transparent calc(var(--gb-r, 80%) + 4px), #000 calc(var(--gb-r, 80%) + 48px)),
    linear-gradient(180deg, #000 calc(var(--gb-t, 16%) - 26px), transparent calc(var(--gb-t, 16%) - 2px), transparent calc(var(--gb-b, 84%) + 2px), #000 calc(var(--gb-b, 84%) + 26px));
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%, rgba(37,99,235,0.16), transparent 62%),
    var(--ground-ink);
}
/* left-aligned bands: the fallback clear box sits under their copy */
.interlude[data-gridbeam]:not(.center) {
  --gb-l: 4%; --gb-r: 62%;
  background:
    radial-gradient(ellipse 60% 90% at 90% 120%, rgba(37,99,235,0.16), transparent 62%),
    var(--ground-ink);
}
/* stacking inside the band: ground, grid (-1), border beam and canvas (0), copy (1) */
.interlude[data-gridbeam] { isolation: isolate; }
.interlude[data-gridbeam]::after {
  inset: 0; z-index: -1; transform: none; animation: none;
  background:
    linear-gradient(90deg, var(--gb-line) 1px, transparent 1px) var(--gb-ox, 50%) var(--gb-oy, 50%) / var(--gb-cell) var(--gb-cell),
    linear-gradient(180deg, var(--gb-line) 1px, transparent 1px) var(--gb-ox, 50%) var(--gb-oy, 50%) / var(--gb-cell) var(--gb-cell);
  -webkit-mask-image: var(--gb-mask); mask-image: var(--gb-mask);
}
.interlude[data-gridbeam] > .gb-canvas {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  -webkit-mask-image: var(--gb-mask-beam); mask-image: var(--gb-mask-beam);
}
@media (max-width: 1023px) { .interlude[data-gridbeam] { --gb-fx: 56px; --gb-fy: 40px; } }
@media (max-width: 767px) {
  .interlude[data-gridbeam] { --gb-cell: 48px; --gb-fx: 32px; --gb-fy: 32px; }
  /* phone copy runs edge to edge, so the no-JS clear box does too */
  .interlude[data-gridbeam], .interlude[data-gridbeam]:not(.center) { --gb-l: 5%; --gb-r: 95%; }
}
@media (min-width: 1600px) { .interlude[data-gridbeam] { --gb-cell: 72px; } }

/* page hue: device pages run every beam in their channel color */
body.dv-kiosk .interlude[data-gridbeam]    { --gb-pal: #A78BFA 0.95, #C4B5FD 0.8, #8B5CF6 0.95; }
body.dv-handheld .interlude[data-gridbeam] { --gb-pal: #34D399 0.9, #6EE7B7 0.75, #10B981 0.9; }
body.dv-tap .interlude[data-gridbeam]      { --gb-pal: #22D3EE 0.9, #67E8F9 0.75, #06B6D4 0.9; }
/* solutions and guide pages: blue with their family hue as the faint accent */
body.pg-solutions .interlude[data-gridbeam] { --gb-pal: #60A5FA 0.95, #93C5FD 0.8, #A78BFA 0.6, #3B82F6 0.95; }
body.pg-guide .interlude[data-gridbeam]     { --gb-pal: #60A5FA 0.95, #93C5FD 0.8, #34D399 0.55, #3B82F6 0.95; }

@media (prefers-reduced-motion: reduce) {
  .interlude[data-gridbeam] > .gb-canvas { display: none; }
}

/* ============================================================
   LOOP 41: feature grids on hairline rails (21st ports: Feature
   Grid Spotlight Cards id 26797, Feature Section with hover
   effects id 1521). One shared .fgrid treatment for every text
   feature grid: the tile bentos on 13 pages, the home Stripe
   trio, the wall-mounted kiosk grid, the faith "three questions"
   panel, and the security practice lists. Cells share 1px rails
   with a small survey crosshair at every intersection, each item
   carries an icon chip in its own hue, and a 2px rail beside the
   title grows on hover or keyboard focus. On fine pointers one
   soft light follows the cursor across the grid: it washes each
   cell in its hue and lifts the rails near it (js/site.js, Loop
   41). Without JavaScript, or with reduced motion, the grid is
   complete and still.
   ============================================================ */
/* partner logos (integrations) sit on the neutral art chip: Bloomerang's square tile gets soft corners, Kindful shows its mark without the wordmark */
.fg-ic.fg-art img[src$="/bloomerang.webp"] { width: 28px; height: 28px; border-radius: 7px; }
.fg-ic.fg-art img[src$="/kindful.webp"] { width: 34px; height: 22px; object-fit: cover; object-position: 50% 0; }
.fg-ic.fg-art img[src$="/salesforce.webp"] { width: 36px; }
/* a line icon among art chips gets a touch more size so the row reads evenly */
.fgrid:has(.fg-art) .fg-ic:not(.fg-art) svg { width: 22px; height: 22px; }
/* a grid of neutral cells (security roles) lights its rails in slate, not the page hue */
.fgrid:not(:has(> .fg-cell:not(.fc-ink, .fc-muted))) { --fg-glow: #64748B; }
/* faith "three questions" on phones: the grid runs to the lite card's edges, so the card's border frames it
   (no card inside a card). Icon beside the question, answer at full width, rails only between answers. */
@media (max-width: 600px) {
  .interlude.lite:has(> .fgrid:last-child) { --lite-px: 22px; padding-inline: var(--lite-px); padding-bottom: 0; }
  .interlude.lite > .fgrid:last-child { --fg-px: var(--lite-px); --fg-ic: 36px; --fg-gap: 14px; margin-inline: calc(-1 * var(--lite-px)); padding: 1px 0 0; }
  .interlude.lite > .fgrid:last-child > .fg-cell { align-items: center; padding-bottom: calc(var(--fg-py) + 2px); }
  .interlude.lite > .fgrid:last-child > .fg-cell::after { display: none; }
  .interlude.lite > .fgrid:last-child > .fg-cell > .fg-ic { grid-row: auto; }
  .interlude.lite > .fgrid:last-child > .fg-cell > h3 { margin-top: 0; }
  .interlude.lite > .fgrid:last-child > .fg-cell > h3::before { left: calc(-1 * (var(--fg-px) + var(--fg-ic) + var(--fg-gap))); }
  .interlude.lite > .fgrid:last-child > .fg-cell > p { grid-column: 1 / -1; margin-top: 10px; max-width: none; }
}
.fgrid {
  --fg-cols: 3;
  --fg-rail: #DFE4EB;
  --fg-px: clamp(22px, 2.3vw, 30px);
  --fg-py: clamp(24px, 2.5vw, 32px);
  --fg-ic: 42px;
  --fg-glow: var(--family, #2563EB);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--fg-cols), minmax(0, 1fr));
  gap: 1px; padding: 1px; background: var(--fg-rail);
}
.fgrid.fg-4 { --fg-cols: 4; }
.fgrid.fg-2 { --fg-cols: 2; }
/* the rails catch the light near the pointer: this layer sits under the cells and shows only in the 1px gaps */
.fgrid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--fg-glow) 60%, transparent), transparent 72%);
  opacity: 0; transition: opacity 420ms var(--ease-lux);
}
.fgrid.fg-lit::before { opacity: 1; }

.fg-cell {
  --c: var(--family, #2563EB);
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--fg-py) var(--fg-px) calc(var(--fg-py) + 4px);
  background: radial-gradient(90% 85% at 12% 0%, color-mix(in srgb, var(--c) 6%, #fff), #fff 70%);
}
.fg-cell.fc-online { --c: #2563EB; }
.fg-cell.fc-kiosk { --c: #7C3AED; }
.fg-cell.fc-handheld { --c: #059669; }
.fg-cell.fc-tap { --c: #0891B2; }
.fg-cell.fc-ink { --c: #334155; }
.fg-cell.fc-muted { --c: #64748B; }
/* the cursor light, drawn inside each cell in that cell's hue so it reads as one light crossing the grid */
.fg-cell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 10%, transparent), transparent 70%);
  opacity: 0; transition: opacity 420ms var(--ease-lux);
}
.fgrid.fg-lit .fg-cell::before { opacity: 1; }
/* survey crosshairs: each cell marks its four corners on the rails, so every intersection is marked at any column count */
.fg-cell::after {
  --fg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%239AA6B7'/%3E%3C/svg%3E");
  content: ""; position: absolute; inset: -7px; z-index: 2; pointer-events: none;
  background: var(--fg-plus) 0 0 / 13px 13px no-repeat, var(--fg-plus) 100% 0 / 13px 13px no-repeat,
    var(--fg-plus) 0 100% / 13px 13px no-repeat, var(--fg-plus) 100% 100% / 13px 13px no-repeat;
}

/* icon chip in the item's hue */
.fg-ic {
  position: relative; flex: none;
  width: var(--fg-ic); height: var(--fg-ic); border-radius: 12px; margin-bottom: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 9%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), 0 1px 2px rgba(15,23,42,0.05);
  transition: box-shadow var(--t-hover);
}
.fg-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fg-ic img { width: 30px; height: 30px; object-fit: contain; }
.fg-cell:is(:hover, :focus-within) .fg-ic {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--c) 60%, transparent);
}

/* title with the hover rail: the rail sits on the cell's left rule and grows to the title's full height */
.fg-cell h3 {
  position: relative; margin: 0;
  font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900);
  transition: translate 380ms var(--ease-lux);
}
.fg-cell h3::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--fg-px) - 1px); width: 2px; border-radius: 0 2px 2px 0;
  background: #C3CCD8; scale: 1 0.5;
  transition: scale 380ms var(--ease-lux), translate 380ms var(--ease-lux), background-color var(--t-hover);
}
.fg-cell:is(:hover, :focus-within) h3 { translate: 5px 0; }
.fg-cell:is(:hover, :focus-within) h3::before { translate: -5px 0; scale: 1 1; background: var(--c); }
.fg-cell h3 a { color: inherit; text-decoration: none; transition: color var(--t-hover); }
.fg-cell h3 a:hover { color: var(--c); }
.fg-cell p { position: relative; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-600); max-width: 46ch; text-wrap: pretty; }
.fg-cell p a:not([class]) { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); transition: border-color var(--t-hover); }
.fg-cell p a:not([class]):hover { border-bottom-color: var(--blue-600); }

/* lists inside a cell (security): checks in the cell's hue, a muted cross for what is never kept */
.fg-cell .fg-list { position: relative; list-style: none; margin: 12px 0 0; padding: 0; }
.fg-cell .fg-list li { position: relative; margin: 0; padding: 0 0 0 26px; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.fg-cell .fg-list li + li { margin-top: 10px; }
.fg-cell .fg-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fg-cell .fg-no li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.fg-cell .fg-list strong { color: var(--ink-900); font-weight: 600; }
.fgrid.fg-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.article > .fgrid { margin: 24px 0 28px; }

/* owner raster icons (wall-mounted kiosk) sit on a neutral chip so their own color reads true */
.fgrid:has(.fg-art) { --fg-ic: 52px; }
.fg-ic.fg-art { border-radius: 14px; background: linear-gradient(180deg, #fff, #F2F5FA); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05); }
.fg-ic.fg-art img { width: 32px; height: 32px; }

/* home: the Stripe trio hangs from the payment-rail panel as one strip; crosshairs mark the seam only */
.pf-stack > .pf-panel { border-bottom-width: 0; border-radius: 28px 28px 0 0; }
.fgrid.fg-seam { --fg-rail: #D7DCE4; border-radius: 0 0 28px 28px; }
.fgrid.fg-seam > .fg-cell::after { background: var(--fg-plus) 0 0 / 13px 13px no-repeat, var(--fg-plus) 100% 0 / 13px 13px no-repeat; }
.fgrid.fg-seam > .fg-cell:first-child { border-bottom-left-radius: 27px; }
.fgrid.fg-seam > .fg-cell:last-child { border-bottom-right-radius: 27px; }
/* without JavaScript the payment rail never draws, so the strip stands alone as a plain grid */
.pf-stack > .pf-panel:empty { display: none; }
.pf-stack > .pf-panel:empty + .fgrid.fg-seam { border-radius: 0; }
.pf-stack > .pf-panel:empty + .fgrid.fg-seam > .fg-cell { border-radius: 0; }
.pf-stack > .pf-panel:empty + .fgrid.fg-seam > .fg-cell::after {
  background: var(--fg-plus) 0 0 / 13px 13px no-repeat, var(--fg-plus) 100% 0 / 13px 13px no-repeat,
    var(--fg-plus) 0 100% / 13px 13px no-repeat, var(--fg-plus) 100% 100% / 13px 13px no-repeat;
}

/* entrance: the grid rises with its reveal, then the icons settle in a 60ms sibling stagger */
@media (prefers-reduced-motion: no-preference) {
  html.js :is(.fgrid.reveal.in, .reveal.in > .fgrid) .fg-ic { animation: fg-ic-in 620ms var(--ease-lux) calc(160ms + var(--fg-i, 0) * 60ms) backwards; }
}
@keyframes fg-ic-in { from { opacity: 0; scale: 0.8; } }
.fg-cell:nth-child(2) { --fg-i: 1; } .fg-cell:nth-child(3) { --fg-i: 2; } .fg-cell:nth-child(4) { --fg-i: 3; }
.fg-cell:nth-child(5) { --fg-i: 4; } .fg-cell:nth-child(6) { --fg-i: 5; } .fg-cell:nth-child(7) { --fg-i: 6; }
.fg-cell:nth-child(8) { --fg-i: 7; }

/* columns: fours, sixes and eights go two-up on tablets; trios, and every grid on phones, become rows.
   The home seam strip keeps its three columns through tablets, the way its payment-rail panel does,
   and turns into rows at 720. */
@media (max-width: 1023px) { .fgrid.fg-4 { --fg-cols: 2; } }
/* row cells: icon on the left, copy beside it; the title rail still lands on the cell's left rule */
/* (the trio guard sits in :where() so it adds no specificity: phone rules and the lite card's rules still win) */
@media (max-width: 960px) {
  .fgrid.fg-3:where(:not(.fg-seam)) { --fg-cols: 2; }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) { --fg-cols: 1; }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) > .fg-cell {
    display: grid; grid-template-columns: var(--fg-ic) minmax(0, 1fr); column-gap: var(--fg-gap, 18px); align-items: start;
  }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) > .fg-cell > .fg-ic { grid-row: 1 / span 2; margin: 0; }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) > .fg-cell > :not(.fg-ic) { grid-column: 2; }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) > .fg-cell > h3 { margin-top: calc((var(--fg-ic) - 23px) / 2); }
  .fgrid.fg-3:where(:not(.fg-seam):not(:has(> .fg-cell:nth-child(4)))) > .fg-cell > h3::before { left: calc(-1 * (var(--fg-px) + var(--fg-ic) + var(--fg-gap, 18px)) - 1px); }
}
@media (max-width: 720px) {
  .fgrid.fg-seam { --fg-cols: 1; }
  .fgrid.fg-seam > .fg-cell {
    display: grid; grid-template-columns: var(--fg-ic) minmax(0, 1fr); column-gap: var(--fg-gap, 18px); align-items: start;
  }
  .fgrid.fg-seam > .fg-cell > .fg-ic { grid-row: 1 / span 2; margin: 0; }
  .fgrid.fg-seam > .fg-cell > :not(.fg-ic) { grid-column: 2; }
  .fgrid.fg-seam > .fg-cell > h3 { margin-top: calc((var(--fg-ic) - 23px) / 2); }
  .fgrid.fg-seam > .fg-cell > h3::before { left: calc(-1 * (var(--fg-px) + var(--fg-ic) + var(--fg-gap, 18px)) - 1px); }
  .fgrid.fg-seam > .fg-cell:first-child { border-bottom-left-radius: 0; }
  .fgrid.fg-seam > .fg-cell:last-child { border-bottom-left-radius: 27px; }
}
@media (max-width: 600px) {
  .fgrid.fg-split { grid-template-columns: minmax(0, 1fr); }
  .fgrid:has(.fg-art) { --fg-ic: 46px; }
  .fgrid { --fg-px: 20px; --fg-py: 22px; --fg-ic: 40px; --fg-gap: 16px; }
  .fgrid:is(.fg-2, .fg-3, .fg-4) { --fg-cols: 1; }
  .fgrid > .fg-cell { display: grid; grid-template-columns: var(--fg-ic) minmax(0, 1fr); column-gap: var(--fg-gap); align-items: start; }
  .fgrid > .fg-cell > .fg-ic { grid-row: 1 / span 2; margin: 0; }
  .fgrid > .fg-cell > :not(.fg-ic) { grid-column: 2; }
  .fgrid > .fg-cell > h3 { margin-top: calc((var(--fg-ic) - 23px) / 2); }
  .fgrid > .fg-cell > h3::before { left: calc(-1 * (var(--fg-px) + var(--fg-ic) + var(--fg-gap)) - 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .fgrid::before, .fg-cell::before { display: none; }
  .fg-cell h3, .fg-cell h3::before, .fg-ic { transition: none; }
  .fg-cell:is(:hover, :focus-within) h3, .fg-cell:is(:hover, :focus-within) h3::before { translate: none; }
}

/* ============================================================
   LOOP 42: animated beam hubs (21st ids 919 MagicUI Animated Beam
   and 34961 Animated Beam Integration). Channel nodes sit in
   columns around a Donatefy hub; js/site.js (Loop 42) draws a
   curved beam from every node to the hub, recomputed on resize,
   and sends a gradient pulse along each one while the diagram is
   on screen. Reduced motion keeps the beams static, and without
   JavaScript the nodes and hub still read as a labelled list.
   Used on hardware, mobile-app, admin-reporting, the nonprofits
   "One campaign" split, and the solution page heroes.
   ============================================================ */

/* rows or columns, chosen by content: Loop 42 measures each
   three-column hub and keeps the columns (.bm-cols) only while they
   fit and the nearest pill on each side still sits --bm-run clear of
   the hub tile. Otherwise the columns become rows (.bm-rows) and the
   beams run vertically, so long labels never clip at in-between
   widths. Before the script runs, or without it, a container under
   480px falls back to the same rows (see "narrow containers" below). */
.bm-grid { --bm-run: 48px; }
.bm-grid.bm-rows { --bm-axis: y; grid-template-columns: minmax(0, 1fr); row-gap: 54px; }
.bm-grid.bm-rows .bm-side { flex-direction: row; justify-content: center; align-items: flex-start; gap: 6px; }
.bm-grid.bm-rows .bm-node {
  flex: 1 1 0; min-width: 0; max-width: 96px; flex-direction: column; gap: 8px;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 12px; white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.bm-grid.bm-rows .bm-ic {
  width: 44px; height: 44px; border-radius: 14px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(15,23,42,0.10));
  box-shadow: 0 0 0 calc(var(--g) * 4px) color-mix(in srgb, var(--c) 14%, transparent), 0 10px 22px -14px rgba(15,23,42,0.30);
}
.bm-grid.bm-rows .bm-ic svg, .bm-grid.bm-rows .bm-ic i { width: 20px; height: 20px; }
.bm-grid.bm-rows .bm-more { display: none; }
.bm-grid.bm-rows .bm-hub { width: 64px; height: 64px; border-radius: 20px; }

/* two-column callouts (mobile-app, admin-reporting): the diagram takes
   the larger share of the row and its pills run a touch tighter, so
   the beams keep a long, shallow run instead of short hooks */
@media (min-width: 1181px) {
  .bm-split .bm-node { gap: 9px; padding-right: 13px; font-size: 13px; }
}

.bm { container: bm / inline-size; position: relative; }
.bm-grid {
  --bm-axis: x; position: relative;
  display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between;
  align-items: center; column-gap: 36px;
}
.bm-grid.bm-one { grid-template-columns: repeat(2, max-content); column-gap: 64px; }
.bm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.bm-side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(12px, 3.2cqi, 22px); }
.bm-l { align-items: flex-start; }
.bm-r { align-items: flex-end; }
.bm-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* a node: an icon chip in its channel color plus the channel name */
.bm-node {
  --c: var(--blue-600); --g: 0;
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 6px 15px 6px 6px; border-radius: var(--radius-pill);
  background: #fff; border: var(--hairline-strong);
  box-shadow: 0 0 0 calc(var(--g) * 3.5px) color-mix(in srgb, var(--c) 14%, transparent), 0 10px 24px -16px rgba(15,23,42,0.30);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink-900); white-space: nowrap;
}
.bm-ic {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 11%, white); color: var(--c);
}
.bm-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bm-ic i {
  display: block; width: 17px; height: 17px; background: var(--c);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.bm-lead .bm-ic { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }

/* the hub: the Donatefy mark in white on a blue tile */
.bm-hub {
  --g: 0; position: relative; width: 72px; height: 72px; border-radius: 22px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(155deg, #3B82F6 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.07), 0 18px 36px -14px rgba(37,99,235,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
}
.bm-hub img { width: 58%; height: auto; filter: brightness(0) invert(1); }
.bm-hub svg { width: 46%; height: 46%; }
.bm-hub::after {
  content: ''; position: absolute; inset: -9px; border-radius: 29px; pointer-events: none;
  border: 1.5px solid rgba(37,99,235,0.42);
  opacity: var(--g); transform: scale(calc(0.92 + var(--g) * 0.1));
}
.bm-hub.bm-stripe { background: linear-gradient(155deg, #7A73FF 0%, #635BFF 60%, #5148E5 100%); box-shadow: 0 0 0 6px rgba(99,91,255,0.08), 0 18px 36px -14px rgba(99,91,255,0.55), inset 0 1px 0 rgba(255,255,255,0.28); }
.bm-hub.bm-stripe::after { border-color: rgba(99,91,255,0.45); }
.bm-hub-lb { max-width: 150px; font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; color: var(--ink-900); text-align: center; }

/* beams: a faint track in the channel color, then a gradient pulse */
.bm-track { fill: none; stroke-width: 1.5; stroke-opacity: 0.3; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.bm-grid.is-drawn .bm-track { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-lux) calc(var(--i, 0) * 70ms); }
.bm-pulse { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.bm-grid.is-still .bm-track { stroke-opacity: 0.42; transition: none; }
.bm-grid.is-still .bm-pulse { display: none; }

/* hardware: the diagram sits on a quiet instrument panel above the feature grid */
.bm-panel {
  margin-bottom: clamp(22px, 3vw, 32px); padding: clamp(28px, 4.4vw, 56px) clamp(18px, 4.6vw, 64px);
  border-radius: 28px; background: #F8FAFC; border: var(--hairline-strong); overflow: hidden;
}
.bm-panel .bm-grid { max-width: 1040px; margin-inline: auto; }
.bm-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,0.12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 10%, transparent 75%);
}

/* mid-page callouts: copy on the left, the beam diagram on the right */
.interlude.lite.bm-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 4vw, 56px); }
.bm-split .bm-copy > h2.t-h2 { margin-top: 0; }
@media (max-width: 1180px) {
  .interlude.lite.bm-split { grid-template-columns: minmax(0, 1fr); }
  .bm-split .bm { max-width: 640px; }
}

/* nonprofits: one campaign fans out to every touchpoint */
.bm-foot { display: flex; justify-content: center; margin-top: clamp(22px, 3cqi, 30px); }
.bm-foot span {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 12px;
  border-radius: var(--radius-pill); background: #fff; border: var(--hairline-strong);
  font-size: 13.5px; font-weight: 500; color: var(--ink-700); text-align: center;
}
.bm-foot svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--blue-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* solution heroes: copy and a converging hub side by side, on a faint grid */
.page-hero.bm-gridbg::after {
  opacity: 1;
  background-image: linear-gradient(rgba(15,23,42,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.055) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 48%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 72% 48%, #000 0%, transparent 70%);
}
.page-hero.bm-hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(32px, 4vw, 64px); }
.page-hero.bm-hero .t-display { font-size: clamp(36px, 4.3vw, 56px); }
.bm-arc .bm-l > .bm-node:first-child, .bm-arc .bm-l > .bm-node:last-child { margin-left: clamp(16px, 7cqi, 34px); }
.page-hero.bm-hero .bm-side { gap: 26px; }
.page-hero.bm-hero .bm-hub { width: 80px; height: 80px; border-radius: 24px; }
.page-hero.bm-hero .bm-hub::after { border-radius: 31px; }
@media (min-width: 1600px) { .page-hero.bm-hero .t-display { font-size: 60px; } }
@media (max-width: 1023px) {
  .page-hero.bm-hero .container { display: block; }
  .page-hero.bm-hero .bm { margin-top: 44px; max-width: 520px; }
}
@media (max-width: 600px) {
  .page-hero.bm-hero .bm { display: none; }
}

/* narrow containers: the columns become rows and the beams run vertically.
   This is the fallback for the first paint and for no JavaScript; once
   Loop 42 has measured a hub it sets .bm-rows (rules at the top of this
   block) or .bm-cols, and .bm-cols opts out of this fallback. */
@container bm (max-width: 479px) {
  .bm-grid:not(.bm-one):not(.bm-cols) { --bm-axis: y; grid-template-columns: minmax(0, 1fr); row-gap: 54px; }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-side { flex-direction: row; justify-content: center; align-items: flex-start; gap: 6px; }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-node {
    flex: 1 1 0; min-width: 0; max-width: 96px; flex-direction: column; gap: 8px;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: 12px; white-space: normal; text-align: center; overflow-wrap: anywhere;
  }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-ic {
    width: 44px; height: 44px; border-radius: 14px; background: #fff;
    border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(15,23,42,0.10));
    box-shadow: 0 0 0 calc(var(--g) * 4px) color-mix(in srgb, var(--c) 14%, transparent), 0 10px 22px -14px rgba(15,23,42,0.30);
  }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-ic svg, .bm-grid:not(.bm-one):not(.bm-cols) .bm-ic i { width: 20px; height: 20px; }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-more { display: none; }
  .bm-foot span { gap: 8px; border-radius: 16px; padding: 9px 12px 9px 10px; font-size: 12px; text-align: left; }
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-hub { width: 64px; height: 64px; border-radius: 20px; }
}
@container bm (max-width: 340px) {
  .bm-grid.bm-one { --bm-axis: y; grid-template-columns: minmax(0, 1fr); row-gap: 48px; justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-track, .bm-grid.is-drawn .bm-track { transition: none; }
  .bm-pulse { display: none; }
}

/* ============================================================
   LOOP 43: before and after panel (after 21st Comparison Section
   26826 and Strikethrough Replace 19274). The home "Why
   organizations switch" rows and the compare page table share one
   rounded two-column panel: a muted Before column with x chips and
   struck lines, a white With Donatefy column with blue checks, each
   pair on one row across a center rule that carries an arrow chip.
   js/site.js (Loop 43) arms the panel, then draws each strike and
   raises the paired new line as that pair scrolls in. Without
   JavaScript, or with reduced motion, the panel renders finished.
   At 760px and below each pair stacks: on the compare table the
   topic leads, then the struck line, then the answer.
   --ba-split is the Before column's share of the panel. It is half
   on wide screens and narrows on tablets so the With Donatefy column
   keeps a readable measure. --ba-was-ink keeps the struck lines
   muted but above 4.5:1 on the Before ground.
   ============================================================ */
.ba {
  --ba-px: clamp(26px, 3.2vw, 40px); --ba-py: 28px; --ba-lh: 24px;
  --ba-ico: 22px; --ba-ind: 36px; --ba-split: 50%;
  --ba-ground: color-mix(in srgb, var(--ground-2) 55%, var(--ground-1)); --ba-rule: rgba(15,23,42,0.08);
  --ba-was-ink: color-mix(in srgb, var(--ink-500) 50%, var(--ink-600)); --ba-strike: rgba(100,116,139,0.55);
  position: relative; overflow: hidden;
  border: var(--hairline-strong); border-radius: var(--radius-shell);
  background: var(--ground-0); box-shadow: var(--shadow-soft);
}
/* tablets: the Before column gives up to a tenth of the panel, easing
   back to half by about 1000px */
@media (min-width: 761px) and (max-width: 1023px) {
  .ba { --ba-split: clamp(40%, calc(40% + (100vw / var(--z, 1) - 761px) * 0.4), 50%); }
}
.ba-table { --ba-py: 22px; --ba-lh: 23px; display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
.ba-table thead, .ba-table tbody { display: block; }
.ba-head, .ba-row { position: relative; display: grid; grid-template-columns: minmax(0, var(--ba-split)) minmax(0, 1fr); }
.ba-head > *, .ba-row > * { display: block; text-align: left; vertical-align: top; }

/* column labels */
.ba-head > :not(.sr-only) { padding: 20px var(--ba-px) 16px; }
.ba-head > :nth-last-child(2) { background: var(--ba-ground); box-shadow: inset -1px 0 0 var(--ba-rule); }
.ba-tag { display: inline-flex; align-items: center; gap: calc(var(--ba-ind) - var(--ba-ico)); font-size: 11.5px; line-height: var(--ba-ico); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ba-tag::before, .ba-was::before, .ba-row > div.ba-now::before, .ba-table tbody th::before, .ba-table td.ba-now::before {
  content: ""; flex: none; width: var(--ba-ico); height: var(--ba-ico); border-radius: 50%;
  background-position: center; background-repeat: no-repeat; background-size: 10px;
}
.ba-tag-was { color: var(--ba-was-ink); }
.ba-tag-now { color: var(--blue-700); }
.ba-tag-was::before, .ba-was::before {
  background-color: rgba(15,23,42,0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.ba-tag-now::before, .ba-row > div.ba-now::before, .ba-table tbody th::before, .ba-table td.ba-now::before {
  background-color: rgba(37,99,235,0.10); background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* the table's check rides the topic here and moves to the answer on phones */
.ba-table td.ba-now::before { content: none; }

/* pairs */
.ba-row { border-top: 1px solid var(--ba-rule); }
.ba-row > * { position: relative; padding: var(--ba-py) var(--ba-px) var(--ba-py) calc(var(--ba-px) + var(--ba-ind)); }
.ba-was::before, .ba-row > div.ba-now::before, .ba-table tbody th::before, .ba-table td.ba-now::before {
  position: absolute; left: var(--ba-px); top: calc(var(--ba-top, var(--ba-py)) + (var(--ba-lh) - var(--ba-ico)) / 2);
}
.ba-was {
  z-index: 1; grid-column: 1; grid-row: 1 / span 2;
  background: var(--ba-ground); box-shadow: inset -1px 0 0 var(--ba-rule);
  font-size: 16px; line-height: var(--ba-lh); color: var(--ba-was-ink); text-wrap: pretty;
}
.ba-s {
  color: inherit; text-decoration: none;
  background: linear-gradient(var(--ba-strike), var(--ba-strike)) 0 58% / 100% 1.5px no-repeat;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
/* the arrow chip sits on the center rule, level with the first line */
.ba-was::after {
  content: ""; position: absolute; right: -13px; top: calc(var(--ba-py) + (var(--ba-lh) - 26px) / 2);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ground-0) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 4px 10px -4px rgba(15,23,42,0.18);
}
.ba-row > div.ba-now { grid-column: 2; }
.ba-now h3 { font-size: 18px; line-height: var(--ba-lh); font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); text-wrap: balance; }
.ba-now p { margin-top: 6px; max-width: 54ch; font-size: 15px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }
.ba-table .ba-was { font-size: 15px; }
.ba-table tbody th { grid-column: 2; grid-row: 1; padding-bottom: 0; font-size: 15.5px; line-height: var(--ba-lh); font-weight: 600; letter-spacing: -0.008em; color: var(--ink-900); }
.ba-table td.ba-now { grid-column: 2; grid-row: 2; padding-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }

/* the full comparison link closes the home panel as a quiet strip: both
   columns run on to the bottom edge and the link takes the next place in
   the With Donatefy rail, its arrow where the checks sit */
.ba-foot {
  position: relative; isolation: isolate; display: flex; align-items: center; min-height: 60px;
  padding: 16px var(--ba-px) 16px calc(var(--ba-split) + var(--ba-px) + var(--ba-ind));
  border-top: 1px solid var(--ba-rule);
  background: linear-gradient(90deg, var(--ba-ground) calc(var(--ba-split) - 1px), var(--ba-rule) calc(var(--ba-split) - 1px), var(--ba-rule) var(--ba-split), transparent var(--ba-split));
  color: var(--ink-900); font-size: 15px; line-height: 1.4; font-weight: 500; text-decoration: none;
  transition: color var(--t-hover);
}
.ba-foot::before, .ba-foot::after { content: ""; position: absolute; pointer-events: none; }
.ba-foot::before {
  z-index: 1; left: calc(var(--ba-split) + var(--ba-px)); top: 50%; width: var(--ba-ico); height: var(--ba-ico); margin-top: calc(var(--ba-ico) / -2); border-radius: 50%;
  background: var(--blue-tint-8) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform var(--t-hover);
}
.ba-foot::after { z-index: -1; inset: 0 0 0 var(--ba-split); background: rgba(37,99,235,0.035); opacity: 0; transition: opacity var(--t-hover); }
.ba-foot:hover { color: var(--blue-700); }
.ba-foot:hover::before { transform: translateX(3px); }
.ba-foot:hover::after { opacity: 1; }
.ba-foot:focus-visible { outline-offset: -4px; border-radius: 0 0 calc(var(--radius-shell) - 1px) calc(var(--radius-shell) - 1px); }

/* a pair answers the pointer: the new side warms */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .ba-row::before { content: ""; position: absolute; inset: 0 0 0 var(--ba-split); background: rgba(37,99,235,0.035); opacity: 0; transition: opacity var(--t-hover); pointer-events: none; }
  .ba-row:hover::before { opacity: 1; }
}

/* choreography: strike the old line, then raise its pair */
.ba-arm .ba-row:not(.ba-on) .ba-s { background-size: 0% 1.5px; }
.ba-arm .ba-row:not(.ba-on) .ba-was { color: var(--ink-700); }
.ba-arm .ba-row:not(.ba-on) .ba-was::after { opacity: 0; scale: 0.5; }
.ba-arm .ba-row:not(.ba-on) > :is(div.ba-now, th, td.ba-now) { opacity: 0; translate: 0 12px; }
.ba-arm .ba-row.ba-on .ba-s { transition: background-size 560ms var(--ease-lux) var(--ba-d, 0ms); }
.ba-arm .ba-row.ba-on .ba-was { transition: color 560ms var(--ease-lux) var(--ba-d, 0ms); }
.ba-arm .ba-row.ba-on .ba-was::after {
  transition: opacity 260ms var(--ease-lux) calc(var(--ba-d, 0ms) + 320ms), scale 520ms var(--ease-lux) calc(var(--ba-d, 0ms) + 320ms);
}
.ba-arm .ba-row.ba-on > :is(div.ba-now, th, td.ba-now) {
  transition: opacity 560ms var(--ease-lux) calc(var(--ba-d, 0ms) + 400ms), translate 760ms var(--ease-lux) calc(var(--ba-d, 0ms) + 400ms);
}
.ba-arm .ba-row.ba-on > td.ba-now { transition-delay: calc(var(--ba-d, 0ms) + 470ms); }
@media (prefers-reduced-motion: reduce) {
  .ba-arm .ba-row:not(.ba-on) .ba-s { background-size: 100% 1.5px; }
  .ba-arm .ba-row:not(.ba-on) .ba-was { color: var(--ba-was-ink); }
  .ba-arm .ba-row:not(.ba-on) .ba-was::after, .ba-arm .ba-row:not(.ba-on) > :is(div.ba-now, th, td.ba-now) { opacity: 1; scale: none; translate: none; }
  .ba-arm .ba-row *, .ba-arm .ba-row *::after { transition: none !important; }
}

@media (min-width: 1600px) {
  .ba-now h3 { font-size: 19px; }
  .ba-was, .ba-now p, .ba-table tbody th { font-size: 16px; }
  .ba-table .ba-was, .ba-table td.ba-now { font-size: 15.5px; }
}

/* phones: each pair stacks, the struck line above its new headline. On
   the compare table the topic leads as a plain label, the struck line
   follows, and the answer takes the check, so every pair reads in order */
@media (max-width: 760px) {
  .ba { --ba-px: 20px; --ba-py: 18px; --ba-lh: 23px; --ba-ind: 34px; border-radius: 20px; }
  .ba-table { --ba-py: 18px; --ba-lh: 23px; }
  .ba-head { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 16px var(--ba-px) 14px; }
  .ba-head > :not(.sr-only) { padding: 0; background: none; box-shadow: none; }
  .ba-tag { gap: 10px; }
  .ba-row { grid-template-columns: minmax(0, 1fr); }
  .ba-was { grid-row: 1; padding-bottom: calc(var(--ba-py) + 6px); box-shadow: none; font-size: 15px; }
  .ba-was::after { right: auto; top: auto; bottom: -13px; left: calc(var(--ba-px) + (var(--ba-ico) - 26px) / 2); rotate: 90deg; }
  .ba-row > div.ba-now { --ba-top: calc(var(--ba-py) + 10px); grid-column: 1; grid-row: 2; padding-top: var(--ba-top); }
  .ba-table tbody th { grid-column: 1; grid-row: 1; padding: 16px var(--ba-px) 8px; font-size: 15px; }
  .ba-table tbody th::before { content: none; }
  .ba-table .ba-was { --ba-top: 12px; grid-row: 2; padding-top: var(--ba-top); padding-bottom: calc(var(--ba-py) + 2px); }
  .ba-table td.ba-now { --ba-top: calc(var(--ba-py) + 6px); --ba-lh: 24px; grid-column: 1; grid-row: 3; padding-top: var(--ba-top); padding-bottom: 17px; }
  .ba-table td.ba-now::before { content: ""; }
  .ba-arm .ba-table .ba-row:not(.ba-on) > th { opacity: 1; translate: none; }
  .ba-now h3 { font-size: 17px; }
  .ba-foot { padding-left: calc(var(--ba-px) + var(--ba-ind)); background: none; }
  .ba-foot::before { left: var(--ba-px); }
  .ba-foot::after { left: 0; }
}

/* ============================================================
   LOOP 44: animated activity list (after 21st id 869, MagicUI
   Animated List). Small notification cards, each an icon chip, a
   title with a relative time, and one muted line, rise in one at a
   time on a spring and push the older cards down. Home Donor Portal
   split: the stack floats over the photo's lower right edge.
   Nonprofits "The hours you get back": an Admin Portal activity
   stage inside the shell. Without JS, or under reduced motion, the
   first cards stand as a still stack; js/site.js (Loop 44) adds
   .al-live and drives --pos while the list is on screen.
   ============================================================ */
/* narrow desktops (961 to 1180): the photo shrinks but the stack keeps its size, so it sits flush with the
   photo's right edge (clear of the copy) and the media column gains just enough room below it for the overhang */
@media (min-width: 961px) and (max-width: 1180px) {
  .al-float { --al-right: 0px; --al-room: max(0px, 266px - 22.4vw); }
}
/* over the art the frosted card reads about #F5F5F5, so its small grey text steps up a shade to stay above 4.5:1 */
.al-stack .al-when, .al-stack .al-ln { color: var(--ink-600); }
/* large screens: the nonprofits stack grows with its frame instead of floating small in the middle */
@media (min-width: 1600px) {
  .al-stage { --al-max: clamp(430px, 80%, 560px); }
  .al-stage .al-bar { font-size: 13.5px; margin-bottom: 18px; }
  .al-stage .al-item { gap: 14px; padding: 12px 16px 12px 12px; border-radius: 15px; }
  .al-stage .al-ic { width: 40px; height: 40px; border-radius: 11px; }
  .al-stage .al-ic svg { width: 20px; height: 20px; }
  .al-stage .al-hd b { font-size: 14.5px; }
  .al-stage .al-when { font-size: 12.5px; }
  .al-stage .al-ln { font-size: 13.5px; }
}
.al-list {
  --al-gap: 10px; --al-n: 3;
  --al-spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--al-gap);
}
@supports (transition-timing-function: linear(0, 1)) {
  /* a damped spring (ratio 0.74), sampled: about 3% overshoot, then settles */
  .al-list { --al-spring: linear(0, 0.042, 0.144, 0.275, 0.414, 0.547, 0.666, 0.767, 0.849, 0.912, 0.958, 0.991, 1.012, 1.024, 1.03, 1.032, 1.03, 1.026, 1.022, 1.018, 1.014, 1.01, 1.007, 1.004, 1.003, 1.001, 1); }
}
.al-list[data-alist="4"] { --al-n: 4; }
.al-list:not(.al-live) > li:nth-child(n + 4) { display: none; }
.al-list[data-alist="4"]:not(.al-live) > li:nth-child(4) { display: flex; }
.al-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 14px;
  background: rgba(255,255,255,0.94); border: var(--hairline);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 14px 30px -16px rgba(15,23,42,0.24);
  font-family: var(--font-sans); text-align: left;
}
.al-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,0.10); color: var(--blue-600);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.08);
}
.al-ic svg { width: 18px; height: 18px; }
.al-tx { flex: 1 1 auto; min-width: 0; }
/* one line each, so every card keeps the same height whatever its time label;
   the copy is short enough that the ellipsis only shows on the narrowest phones */
.al-hd { display: flex; align-items: baseline; gap: 6px; }
.al-hd b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 1.35; font-weight: 560; letter-spacing: -0.012em; color: var(--ink-900); }
.al-when { flex: none; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--ink-500); white-space: nowrap; }
.al-when::before { content: "\00B7"; margin-right: 6px; }
.al-ln { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink-500); }

/* live mode: every card sits in one slot column and is placed by --pos. Nothing ever moves past the
   last slot, so the list needs no clip and the card shadows fall off softly */
html.js .al-list.al-live {
  display: block; position: relative;
  height: calc(var(--al-n) * var(--al-ih, 64px) + (var(--al-n) - 1) * var(--al-gap));
}
html.js .al-list.al-live > li {
  display: flex; position: absolute; top: 0; left: 0; right: 0; height: var(--al-ih, auto);
  transform-origin: 50% 0;
  transform: translateY(calc(var(--pos, 0) * (var(--al-ih, 64px) + var(--al-gap)))) scale(1);
  transition: transform 820ms var(--al-spring), opacity 420ms var(--ease-lux);
}
html.js .al-list.al-live > li.al-off { opacity: 0; transform: translateY(0) scale(0.6); transition: none; }
/* the oldest card stays in the last slot and sinks: it shrinks toward its center and fades out quickly while
   the card above slides down over it (z-index 0), so it never shows as ghost text under the stack */
html.js .al-list.al-live > li.al-out {
  opacity: 0; transform-origin: 50% 50%;
  transform: translateY(calc(var(--pos, 0) * (var(--al-ih, 64px) + var(--al-gap)))) scale(0.92);
  transition: transform 420ms var(--ease-lux), opacity 200ms linear;
}

/* home: frosted cards float off the lower right corner of the Donor Portal donations table */
.al-float { position: relative; margin-bottom: calc(var(--al-room, 0px) + 96px); }
/* the stack's top edge sits 93% down the table art, just under the last row, and hangs below the
   art instead of covering the amounts and Download links. It overhangs the art's right edge by up to 24px,
   eased off so it stays about 42px clear of the copy */
.al-stack { position: absolute; z-index: 2; top: 93%; right: var(--al-right, clamp(-24px, 42.5px - 4.615vw, 0px)); width: min(316px, 62%); }
.al-stack .al-item {
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 18px 40px -18px rgba(15,23,42,0.34);
}
@media (max-width: 960px) {
  .al-float { margin-bottom: 150px; }
  .al-stack { top: 93%; right: 20px; bottom: auto; }
}
@media (max-width: 600px) {
  .al-float { margin-bottom: 0; }
  .al-stack { position: relative; top: auto; right: auto; bottom: auto; width: auto; margin: -12px 14px 0; }
  .al-float .al-list { --al-n: 2; }
  .al-float .al-list:not(.al-live) > li:nth-child(n + 3) { display: none; }
}

/* nonprofits: an Admin Portal activity stage on a faint dot grid */
.al-stage {
  position: relative; isolation: isolate;
  padding: clamp(22px, 3vw, 34px) clamp(16px, 3.4vw, 40px) clamp(26px, 3.6vw, 42px);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(37,99,235,0.07), rgba(37,99,235,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
}
.al-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,0.10) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 25%, transparent 78%);
}
.al-bar, .al-stage .al-list { max-width: var(--al-max, 430px); margin-inline: auto; }
.al-bar {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.3; font-weight: 550; letter-spacing: -0.005em; color: var(--ink-700);
}
.al-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-600); }
.al-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(37,99,235,0.4); opacity: 0;
  animation: al-ping 2.6s var(--ease-lux) infinite;
}
@keyframes al-ping { 0% { transform: scale(0.5); opacity: 1; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
.al-bar-r { margin-left: auto; font-weight: 450; color: var(--ink-600); }
@media (max-width: 600px) {
  .al-stage .al-list { --al-n: 3; }
  .al-stage .al-list[data-alist="4"]:not(.al-live) > li:nth-child(4) { display: none; }
}
/* small phones: a denser card keeps every title on one line */
@media (max-width: 400px) {
  .al-item { gap: 10px; padding: 9px 12px 9px 9px; }
  .al-ic { width: 32px; height: 32px; border-radius: 9px; }
  .al-ic svg { width: 16px; height: 16px; }
  .al-hd b { font-size: 13px; }
  .al-ln { font-size: 12px; }
  .al-stack { margin-inline: 10px; }
  .al-stage { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-dot::after { animation: none; }
  html.js .al-list.al-live > li { transition: none; }
}

/* ============================================================
   LOOP 45: plan comparison tables with a spotlight column
   (21st.dev port: Spotlight Pricing Comparison, id 37472).
   pricing.html "Compare plans in detail" and hardware.html
   "Choose by situation". The header row shows each name and
   price as the cards above show them and stays pinned under the
   island nav. Rows sit in labelled groups on hairlines, with no
   zebra. Cells that already read Included or Not included become
   a check or a dash (the words stay for screen readers). Only a
   column the page already marks Recommended gets the spotlight.
   Phones: no inner scroller, so the page owns every swipe. Each
   feature becomes a full-width label over one row of plan values,
   every plan stays in view, and the header row still pins under
   the nav.
   ============================================================ */
.table-wrap.cs-wrap { overflow: hidden; overflow: clip; background: var(--ground-0); }
.cs-wrap .cmp-spot { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cs-wrap .cmp-spot thead th:first-child { width: 28%; }
.cs-wrap .cmp-hw thead th:first-child { width: 22%; }
.cs-wrap .cmp-spot :is(th, td) { padding: 14px 20px; border-bottom: var(--hairline); vertical-align: middle; text-align: left; background-color: transparent; box-shadow: none; }

/* header row: name, then the price, pinned below the nav */
.cs-wrap .cmp-spot thead th {
  position: sticky; top: 72px; z-index: 3;
  padding: 22px 20px 18px; vertical-align: bottom;
  background-color: var(--ground-0); border-bottom: var(--hairline-strong);
  font-size: 14px; font-weight: 600; color: var(--ink-900);
}
.cs-wrap .cmp-spot thead tr > th { border-bottom: var(--hairline-strong); }
/* while pinned, a white sleeve above the row hides the rows scrolling under the nav */
.cs-wrap .cmp-spot thead th::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 88px; background: var(--ground-0); pointer-events: none; }
.cs-plan .cs-name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink-900); }
.cs-plan .cs-price { display: block; margin-top: 8px; line-height: 1.1; white-space: nowrap; }
.cs-plan .cs-num { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cs-plan :is(.cs-per, .cs-from) { font-size: 13px; font-weight: 450; letter-spacing: -0.005em; color: var(--ink-500); }
.cs-plan .cs-per { margin-left: 2px; }
.cs-plan .cs-flag { display: inline-block; margin-bottom: 10px; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--family-ink, var(--blue-700)); }
/* hardware: a channel dot ties each column to its device card above */
.cs-kiosk { --cs-ch: #7C3AED; }
.cs-handheld { --cs-ch: #059669; }
.cmp-hw .cs-plan .cs-name::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 9px 0 1px; border-radius: 50%; vertical-align: 2px; background: var(--cs-ch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-ch) 15%, transparent); }
.cmp-hw .cs-plan .cs-num { font-size: 24px; }

/* group rows: a quiet band with a small uppercase label. The label keeps one
   line and may run on into the empty band cells beside it on narrow tables. */
.cs-wrap .cmp-spot .cs-group > * { padding-top: 11px; padding-bottom: 11px; background-color: var(--ground-1); }
.cs-wrap .cmp-spot .cs-group th { font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }

/* body rows: hairlines only */
.cs-wrap .cmp-spot tbody th { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink-900); }
.cs-wrap .cmp-spot tbody td { line-height: 1.5; color: var(--ink-600); }
.cs-wrap .cmp-spot tbody tr:last-child > :is(th, td) { border-bottom: var(--hairline); }
.cs-wrap .cmp-spot tbody:last-child tr:last-child > :is(th, td) { border-bottom: 0; }
.cs-wrap .cmp-spot tbody tr:hover { background: transparent; }
.cs-wrap .cmp-spot tbody tr:not(.cs-group):hover > * { background-image: linear-gradient(color-mix(in srgb, var(--family, #2563EB) 3.5%, transparent), color-mix(in srgb, var(--family, #2563EB) 3.5%, transparent)); }
.cs-wrap .cmp-spot tbody tr:hover th, .cs-wrap .cmp-spot tbody tr:hover td:first-child { box-shadow: none; }

/* glyphs: a check for Included, a dash for Not included */
.cs-y, .cs-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; flex: none; }
.cs-y { background: color-mix(in srgb, var(--family, #2563EB) 11%, white); color: var(--family-ink, var(--blue-700)); }
.cs-y::before {
  content: ''; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-n::before { content: ''; width: 10px; height: 2px; border-radius: 1px; background: rgba(15,23,42,0.22); }
.cs-with { display: inline-flex; align-items: center; gap: 10px; }
.cs-with .cs-y { width: 20px; height: 20px; }
.cs-with .cs-y::before { width: 11px; height: 11px; }

/* the spotlight column: only where the page already marks a plan Recommended */
.cs-wrap .cmp-spot[data-rec="4"] tr > :nth-child(4) {
  background-color: color-mix(in srgb, var(--family, #2563EB) 4.5%, white);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent), inset -1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent);
}
.cs-wrap .cmp-spot[data-rec="4"] .cs-group > :nth-child(4) { background-color: color-mix(in srgb, var(--family, #2563EB) 5%, var(--ground-1)); }
.cs-wrap .cmp-spot[data-rec="4"] thead th.cs-rec {
  box-shadow: inset 0 2px 0 var(--family, #2563EB), inset 1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent), inset -1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent);
}
.cs-wrap .cmp-spot[data-rec="4"] tbody td:nth-child(4) { font-weight: 500; color: var(--ink-900); }
.cs-wrap .cmp-spot[data-rec="4"] td:nth-child(4) .cs-y { background: var(--family, #2563EB); color: #fff; box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--family, #2563EB) 50%, transparent); }

/* hardware detail links become pills */
.cs-wrap .cs-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px;
  border-radius: var(--radius-pill); border: var(--hairline-strong); background: var(--ground-0);
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-900); text-decoration: none;
  transition: border-color var(--t-hover), color var(--t-hover);
}
.cs-wrap .cs-link::after {
  content: ''; width: 11px; height: 11px; flex: none; background: currentColor; opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-wrap .cs-link:hover { border-color: color-mix(in srgb, var(--family, #2563EB) 45%, transparent); color: var(--family-ink, var(--blue-700)); }

@media (min-width: 1600px) {
  .cs-wrap .cmp-spot { font-size: 15px; }
  .cs-wrap .cmp-spot :is(tbody th, tbody td) { padding: 15px 24px; font-size: 15px; }
  .cs-wrap .cmp-spot thead th { padding: 24px 24px 20px; }
  .cs-wrap .cmp-spot .cs-group > * { padding-left: 24px; padding-right: 24px; }
  .cs-plan .cs-name { font-size: 15.5px; }
  .cs-plan .cs-num { font-size: 28px; }
}
@media (max-width: 1100px) {
  .cs-wrap .cmp-spot tr > :is(th, td) { padding-left: 13px; padding-right: 13px; }
  .cs-wrap .cmp-spot tr > :first-child { padding-left: 18px; }
  .cs-plan .cs-num, .cmp-hw .cs-plan .cs-num { font-size: 21px; }
  .cs-plan :is(.cs-per, .cs-from) { font-size: 12px; }
  .cs-wrap .cmp-spot:not(.cmp-hw) thead th:first-child { width: 23%; }
  /* hardware: the channel dot sits on its own line so each device name keeps one line,
     and the names share a top line even if one ever wraps */
  .cs-wrap .cmp-hw thead th { vertical-align: top; }
  .cmp-hw .cs-plan .cs-name::before { display: block; margin: 0 0 9px 1px; }
}

/* phones: no scroller inside the card, so vertical swipes always move the page.
   The table keeps its markup and roles; each row becomes a grid with the
   feature label on a full-width line above one cell per plan, so every plan
   stays in view without sideways scrolling. The header row pins under the nav
   as one block, against the page. */
@media (max-width: 720px) {
  .table-wrap.cs-wrap { overflow: hidden; overflow: clip; }
  /* plan columns are weighted to their widest unbreakable text (Community, the
     Recommended tab, $349/mo, Floor-standing), so everything fits at 360px */
  .cs-wrap .cmp-spot { --cs-tracks: minmax(0, 1.06fr) minmax(0, 0.91fr) minmax(0, 1.07fr) minmax(0, 0.96fr); display: block; width: 100%; font-size: 13px; }
  .cs-wrap .cmp-hw { --cs-tracks: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
  .cs-wrap .cmp-spot :is(thead, tbody) { display: block; }
  .cs-wrap .cmp-spot tr { display: grid; grid-template-columns: var(--cs-tracks); }
  .cs-wrap .cmp-spot tr > :is(th, td) { padding: 5px 6px 13px 8px; }
  .cs-wrap .cmp-spot tr > :is(:first-child, :nth-child(2)) { padding-left: 12px; }

  /* header row: one sticky block under the nav, with a white sleeve above it */
  .cs-wrap .cmp-spot thead { position: sticky; top: 72px; z-index: 3; }
  .cs-wrap .cmp-spot thead::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 88px; background: var(--ground-0); pointer-events: none; }
  /* names share the top line and prices share the bottom line, however either wraps */
  .cs-wrap .cmp-spot thead th { position: relative; top: auto; z-index: auto; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 13px; }
  .cs-wrap .cmp-spot[data-rec] thead th { padding-top: 34px; }
  .cs-wrap .cmp-spot thead th::before { display: none; }
  .cs-wrap .cmp-spot thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .cs-plan .cs-name { margin-bottom: 6px; font-size: 13.5px; }
  .cs-plan .cs-price { margin-top: auto; white-space: normal; }
  .cs-plan .cs-num, .cmp-hw .cs-plan .cs-num { font-size: 19px; }
  .cs-plan :is(.cs-per, .cs-from) { font-size: 11.5px; }
  .cs-plan .cs-per { margin-left: 0; }
  .cmp-hw .cs-plan .cs-per { display: block; margin: 3px 0 0; }
  /* the Recommended flag becomes a tab across the top of its column; on a
     column this narrow the tint alone marks the spotlight, without side rules */
  .cs-plan .cs-flag {
    position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 8px 0 6px;
    font-size: 10px; letter-spacing: 0.02em; text-align: center;
    background: color-mix(in srgb, var(--family, #2563EB) 9%, white);
    box-shadow: inset 0 2px 0 var(--family, #2563EB);
  }
  .cs-wrap .cmp-spot[data-rec="4"] tr > :nth-child(4), .cs-wrap .cmp-spot[data-rec="4"] thead th.cs-rec { box-shadow: none; }

  /* body rows: label line, then the plan values; the row hairline sits under the values */
  .cs-wrap .cmp-spot tbody th { position: static; grid-column: 1 / -1; padding: 13px 12px 3px; font-size: 13.5px; line-height: 1.4; background-color: transparent; box-shadow: none; }
  .cs-wrap .cmp-spot tbody tr:not(.cs-group) > th { border-bottom: 0; }
  .cs-wrap .cmp-spot .cs-group > th { padding: 10px 12px; background-color: var(--ground-1); }
  /* the empty band cells fold to nothing but stay in the table, so every row keeps its cell count */
  .cs-wrap .cmp-spot .cs-group > td { height: 0; padding: 0; border: 0; overflow: hidden; }
  .cs-wrap .cmp-spot tbody tr:not(.cs-group):hover > * { background-image: none; }
  .cs-y, .cs-n { width: 20px; height: 20px; }
  /* the spotlight runs on unbroken through the full-width label lines. The third
     column spans 49.25% to 76% of the row: (1.06 + 0.91) / 4 to 3.04 / 4. */
  .cs-wrap .cmp-spot[data-rec="4"] tbody tr:not(.cs-group) > th, .cs-wrap .cmp-spot[data-rec="4"] tbody tr.cs-group > th {
    --cs-in: color-mix(in srgb, var(--family, #2563EB) 4.5%, white);
    background-image: linear-gradient(90deg, transparent 49.25%, var(--cs-in) 49.25%, var(--cs-in) 76%, transparent 76%);
  }
  .cs-wrap .cmp-spot[data-rec="4"] tbody tr.cs-group > th { --cs-in: color-mix(in srgb, var(--family, #2563EB) 5%, var(--ground-1)); }
}
@media (max-width: 374px) {
  .cs-plan .cs-num, .cmp-hw .cs-plan .cs-num { font-size: 18px; }
}
/* below 360px the columns would crowd: the card scrolls sideways only (no
   vertical scroller), and the header row stays at the top of the table */
@media (max-width: 359px) {
  .table-wrap.cs-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .cs-wrap .cmp-spot { min-width: 344px; }
  .cs-wrap .cmp-spot thead { position: relative; top: auto; }
}
/* columns too narrow for a one-line pill: the detail links read as plain links */
@media (max-width: 880px) {
  .cs-wrap .cs-link { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--family-ink, var(--blue-700)); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--family, #2563EB) 35%, transparent); text-underline-offset: 3px; }
  .cs-wrap .cs-link::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-wrap .cs-link { transition: none; }
}

/* ============================================================
   LOOP 46: guide table of contents (21st id 18113 port). js/site.js
   builds an "On this page" list from the h2s of each article marked
   data-toc. At 1100px and up the prose keeps its 656px measure and
   moves left with the hero, and the list rides a sticky rail in the
   freed right column, where a 2px marker slides to the section being
   read. Below 1100px the list folds into a compact disclosure above
   the first paragraph. The wide layout is scoped to html.js so the
   column is reserved before the script runs; without JavaScript the
   article reads exactly as before.
   ============================================================ */
.article[data-toc] > h2 { scroll-margin-top: 104px; }
.article[data-toc] > h2:focus { outline: none; }
html.js .article[data-toc] { position: relative; }
html.js .article[data-toc],
html.js .page-hero:has(+ .article[data-toc]) > .container { --toc-w: 228px; --toc-gap: 64px; }

/* the article's own list and link styles stay off the contents */
.article .toc-list { list-style: none; margin: 0; padding: 0; }
.article .toc-list li { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.article .toc-link { display: block; color: var(--ink-500); text-decoration: none; border-bottom: 0; text-wrap: pretty; transition: color var(--t-hover); }
.article .toc-link:hover, .article .toc-link[aria-current] { color: var(--ink-900); }
.toc-num { font-variant-numeric: tabular-nums; }

/* rail: sticky beside the prose */
.toc-rail { display: none; }
@media (min-width: 1100px) {
  html.js .article[data-toc],
  html.js .page-hero:has(+ .article[data-toc]) > .container {
    max-width: calc(720px + var(--toc-gap) + var(--toc-w));
    padding-right: calc(32px + var(--toc-gap) + var(--toc-w));
  }
  .toc-rail { display: block; position: absolute; top: 12px; bottom: 56px; right: 32px; width: var(--toc-w); }
  .toc-mini { display: none; }
}
@media (min-width: 1600px) {
  html.js .article[data-toc],
  html.js .page-hero:has(+ .article[data-toc]) > .container { --toc-w: 248px; --toc-gap: 80px; }
  .toc-rail .toc-link { font-size: 14px; }
}
.toc {
  position: sticky; top: 104px; max-height: calc(100vh - 136px); overflow-y: auto;
  margin: -4px; padding: 4px; overscroll-behavior: contain; scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc-label { margin: 0 0 14px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.toc-track { position: relative; }
.toc-track::before { content: ""; position: absolute; left: 0.5px; top: 0; bottom: 0; width: 1px; background: rgba(15,23,42,0.1); }
.toc-rail .toc-link { padding: 6px 0 6px 18px; font-size: 13.5px; line-height: 1.45; }
.toc-rail .toc-num { display: none; }
.toc-marker {
  position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px;
  background: var(--blue-600); opacity: 0; pointer-events: none;
  transition: transform 560ms var(--ease-lux), height 560ms var(--ease-lux), opacity 240ms ease;
}
.toc-marker.toc-snap { transition: opacity 240ms ease; }

/* compact disclosure: below 1100px, above the first paragraph */
.toc-mini { margin: 0 0 32px; border: var(--hairline-strong); border-radius: var(--radius-card); background: var(--ground-0); }
.toc-mini > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-900); border-radius: inherit;
}
.toc-mini > summary::-webkit-details-marker { display: none; }
.toc-count { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-500); }
.toc-chev { flex: none; width: 16px; height: 16px; color: var(--ink-400); transition: transform 300ms var(--ease-lux); }
.toc-mini[open] .toc-chev { transform: rotate(180deg); }
.toc-mini nav { border-top: var(--hairline); padding: 4px 18px 8px; }
.toc-mini[open] nav { animation: toc-open 360ms var(--ease-lux); }
@keyframes toc-open { from { opacity: 0; transform: translateY(-4px); } }
.article .toc-mini .toc-link { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 10px 0; font-size: 15px; line-height: 1.45; color: var(--ink-600); }
.article .toc-mini .toc-link:hover, .article .toc-mini .toc-link[aria-current] { color: var(--ink-900); }
.article .toc-mini li + li .toc-link { border-top: var(--hairline); }
.toc-mini .toc-num { font-size: 12.5px; color: var(--ink-400); }
.toc-mini .toc-link[aria-current] .toc-num { color: var(--blue-600); }
@media (prefers-reduced-motion: reduce) {
  .toc-marker, .toc-chev { transition: none; }
  .toc-mini[open] nav { animation: none; }
}

/* ============================================================
   LOOP 47: home stats band as a dot-grid panel with odometer
   digits (port of 21st Number Flow). The four owner figures sit
   in one rounded panel over a faint 22px dot grid that fades
   toward the edges, each with a small icon chip. js/site.js
   (Loop 47) rebuilds every figure as rolling digit strips once
   the band scrolls into view; the real value stays in the DOM
   for crawlers and screen readers, and the strips are hidden
   from assistive tech. Without JavaScript, or under reduced
   motion, the plain figures show as written.
   ============================================================ */
.stat-band {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: var(--hairline-strong); border-radius: var(--radius-shell);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%);
  box-shadow: var(--inner-highlight), 0 1px 2px rgba(15,23,42,0.04), 0 30px 70px -44px rgba(15,23,42,0.22);
}
/* dot grid ground, strongest in the middle and gone at the rim */
.stat-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(circle, rgba(15,23,42,0.16) 1px, transparent 1.5px);
  background-size: 22px 22px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 0%, rgba(0,0,0,0.55) 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 0%, rgba(0,0,0,0.55) 48%, transparent 100%);
}
.stat { position: relative; padding: clamp(26px, 2.8vw, 40px) clamp(20px, 2.4vw, 34px) clamp(28px, 3vw, 42px); }
/* soft column rules that fade out before the panel edge */
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,0.13) 28%, rgba(15,23,42,0.13) 72%, rgba(15,23,42,0));
}
.stat-ic {
  --ic: var(--blue-600);
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: clamp(18px, 1.8vw, 24px);
  display: flex; align-items: center; justify-content: center; color: var(--ic);
  background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--ic) 7%, #FFFFFF));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 20%, transparent), 0 1px 2px rgba(15,23,42,0.05), 0 10px 20px -12px color-mix(in srgb, var(--ic) 55%, transparent);
}
.stat-ic svg { width: 20px; height: 20px; }
.stat-ic.ic-kiosk { --ic: #7C3AED; }
.stat-num {
  position: relative; display: block; white-space: nowrap;
  font-size: clamp(38px, 4.2vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.stat-num .sfx { color: var(--blue-600); }
.stat-label { display: block; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-500); }
@media (min-width: 1920px) { .stat-num { font-size: 64px; } }

/* odometer, built by js/site.js only when motion is allowed. Its glyphs are
   CSS generated content, so the DOM text of each figure stays exactly the
   visually hidden original (.odo-real). */
.odo { display: none; }
.odo-on .odo { display: inline-flex; align-items: flex-start; vertical-align: top; -webkit-user-select: none; user-select: none; }
.odo-on .odo-real { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odo-g { display: flex; align-items: flex-start; }
.odo-c { display: block; height: 1em; line-height: 1; }
.odo-c::before { content: attr(data-c); }
/* each digit is a window 0.15em taller than the line on both sides (and
   0.1em wider), so a rolling digit fades out instead of being cut */
.odo-d {
  position: relative; display: block; height: 1.3em; margin: -0.15em -0.1em; padding: 0 0.1em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.25em, #000 1.06em, transparent 1.3em);
  mask-image: linear-gradient(180deg, transparent 0, #000 0.25em, #000 1.06em, transparent 1.3em);
}
.odo-fix { display: block; line-height: 1.3em; visibility: hidden; }
.odo-fix::before { content: attr(data-d); }
/* two runs of 0 to 9, so every digit travels at least one full turn */
.odo-strip { position: absolute; top: 0; left: 0.1em; right: 0.1em; line-height: 1.3em; white-space: pre; transform: translateY(0); }
.odo-strip::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9'; display: block; }
.odo-go .odo-strip { transform: translateY(calc(var(--n, 0) * -5%)); transition: transform 1500ms var(--ease-lux) var(--dl, 0ms); }
/* once settled, the sizer glyph (same spot, same digit) takes over from the strip */
.odo-done .odo-strip { visibility: hidden; transition: none; }
.odo-done .odo-fix { visibility: visible; }

@media (max-width: 760px) {
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3)::after {
    content: ''; position: absolute; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,0.13) 28%, rgba(15,23,42,0.13) 72%, rgba(15,23,42,0));
  }
  .stat:nth-child(3)::after { left: 16%; right: 0; }
  .stat:nth-child(4)::after { left: 0; right: 16%; }
  .stat-band::before {
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
  }
}
@media (max-width: 480px) {
  .stat { padding: 22px 16px 24px 18px; }
  .stat-num { font-size: 34px; }
  .stat-ic { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 16px; }
  .stat-ic svg { width: 18px; height: 18px; }
  .stat-label { font-size: 14px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .odo-go .odo-strip { transition: none; }
}
/* paper always gets the plain figures, rolled or not */
@media print {
  .odo-on .odo { display: none; }
  .odo-on .odo-real { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

/* ============================================================
   LOOP 48: one desktop menu at a time. With JavaScript, js/site.js
   owns the .open class (hover intent, tap, keyboard focus) and it is
   the only thing that shows a dropdown, so a menu opened by a click
   or focus can no longer stay open under one opened by hover.
   Without JavaScript, CSS hover and focus-within still work.
   ============================================================ */
html.js .nav-item:not(.open) .nav-dropdown { opacity: 0; visibility: hidden; translate: 0 -4px; }
/* the panel is solid: its backdrop blur cannot reach the page behind the nav, so a translucent panel let hero type show through */
.nav-dropdown { background: #fff; }
/* an invisible bridge over the gap between the nav and the panel keeps the menu open while the pointer travels to it */
.nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

/* ============================================================
   LOOP 49: one card system. Owner decision: every card, panel,
   frame and control draws exactly one outline, and it looks the
   same everywhere. The line is a 1px border in --line. Elevation
   is a blurred shadow (e1 rest, e2 hover or floating, e3 showcase
   media) that never reads as a line. The double-bezel shell, the
   border plus ring pair, edge shadows and inset highlights are
   retired. A selected or recommended item swaps its border for a
   2px ring. Content inside a card brings no outline of its own:
   it is a fill, a gap or a divider. Radii: surfaces and media
   frames 24, cards 16, cells 12 (inputs keep 10, pills 999).
   This supersedes the double-bezel section of
   docs/DONATEFY-WEBSITE-DESIGN-SYSTEM-TASTE.md.
   ============================================================ */
:root {
  --line: rgba(15,23,42,0.13);          /* the one outline color (the value of --hairline-strong) */
  --line-ink: rgba(255,255,255,0.08);   /* the outline on ink surfaces */
  --divider: rgba(15,23,42,0.07);       /* inner rules only (rows, plate bottoms), never a box */
  --card-line: 1px solid var(--line);
  --radius-surface: 24px;               /* T1 surfaces and T4 media frames */
  --radius-cell: 12px;                  /* T3 cells inside a card */
  --e1: 0 12px 40px -12px rgba(15,23,42,0.08);
  --e2: 0 18px 44px -26px rgba(15,23,42,0.30);
  --e3: 0 24px 80px -16px rgba(15,23,42,0.10), 0 4px 16px -4px rgba(15,23,42,0.04);
  /* retired in one place: every border plus ring pair and every inset highlight built on these goes quiet */
  --ring-shell: 0 0 #0000;
  --inner-highlight: inset 0 0 #0000;
}

/* T1 surface: a shell is one card. The wrapper keeps its grid placement and hover lift, the core draws the only line */
.shell, .shell-flat, .flow-shell { padding: 0; background: none; box-shadow: none; border-radius: var(--radius-surface); }
.shell.shell-flat:hover { box-shadow: var(--e2); }
.shell > .shell-core { border: var(--card-line); border-radius: inherit; box-shadow: none; }
.shell > .shell-core.tile-ink { border-color: var(--line-ink); }
.shell-core .pcar-track { border-radius: 0; }
/* the pointer glow lights the card's own border band instead of drawing a second ring 1px inside it. The core
   stops being the containing block, so its glow and wash are placed on the wrapper, whose box is the core's
   border box, and the core's clip no longer cuts the glow off at the border */
@media (hover: hover) and (pointer: fine) {
  .shell:not(.flow-shell) { position: relative; isolation: isolate; }
  .shell:not(.flow-shell) > .shell-core.spot { position: static; }
  .shell:not(.flow-shell) > .shell-core.spot::after { border-radius: inherit; }
}
/* the skeleton placeholders keep their drawing, without a second box inside the frame */
.visual-slot::after { border-color: transparent; }

/* T4 media frames: one line, the media flush and clipped, showcase shadow */
.vframe:not(.vframe-bare) { border: var(--card-line); box-shadow: var(--e3); }
.band-photo, .mflow-dip { box-shadow: var(--e3); }
.band-photo, .mflow-dip, .il-panel, .bm-panel, .k3d, .moment { border-radius: var(--radius-surface); }

/* T1 panels: one line, rest elevation e1 at most */
.ll-feed, .stat-band, .interlude.lite, .pb-card { box-shadow: var(--e1); }
.acct-map { border-radius: var(--radius-card); box-shadow: var(--e1); padding: 24px; }
.acct-map .am-sync { border-radius: var(--radius-cell); }
.table-wrap { border: var(--card-line); border-radius: var(--radius-surface); }
.pf-stack > .pf-panel { border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
/* the recommended column is marked by its tint, side rules and flag; a top line would sit right under the table border */
@media (min-width: 721px) {
  .cs-wrap .cmp-spot[data-rec="4"] thead th.cs-rec { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent), inset -1px 0 0 color-mix(in srgb, var(--family, #2563EB) 16%, transparent); }
}
@media (max-width: 720px) {
  .cs-plan .cs-flag { box-shadow: none; }
}

/* feature grids. A standalone grid is the surface: rounded, clipped, its 1px rail the one line. The clip lets the
   corner cells reach the curve, so a ring drawn over the four corners only keeps the rail whole round them */
.fgrid:not(.fg-seam), .pf-stack > .pf-panel:empty + .fgrid.fg-seam { border-radius: var(--radius-surface); overflow: clip; }
.fgrid:not(.fg-seam)::after, .pf-stack > .pf-panel:empty + .fgrid.fg-seam::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--fg-rail); border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 24px 24px no-repeat, linear-gradient(#000 0 0) 100% 0 / 24px 24px no-repeat, linear-gradient(#000 0 0) 0 100% / 24px 24px no-repeat, linear-gradient(#000 0 0) 100% 100% / 24px 24px no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 24px 24px no-repeat, linear-gradient(#000 0 0) 100% 0 / 24px 24px no-repeat, linear-gradient(#000 0 0) 0 100% / 24px 24px no-repeat, linear-gradient(#000 0 0) 100% 100% / 24px 24px no-repeat;
}
/* a grid inside a card loses its outer frame and corner marks: the card's line frames it, only the inner rules remain */
.interlude.lite > .fgrid { padding: 0; border-radius: 0; overflow: visible; }
.interlude.lite > .fgrid::after, .interlude.lite > .fgrid > .fg-cell::after { display: none; }
/* with no outer rail, the title marks on the open edge would hang in the air, so a nested grid drops them */
.interlude.lite > .fgrid > .fg-cell > h3::before { display: none; }
/* its cells read as one filled block on the card's tint, on the cell radius (phones run it edge to edge) */
@media (min-width: 601px) {
  .interlude.lite > .fgrid { border-radius: var(--radius-cell); overflow: clip; }
}
/* the strip under the payment rail closes the panel on the same radius */
.fgrid.fg-seam { border-radius: 0 0 var(--radius-surface) var(--radius-surface); }
.fgrid.fg-seam > .fg-cell:first-child { border-bottom-left-radius: 23px; }
.fgrid.fg-seam > .fg-cell:last-child { border-bottom-right-radius: 23px; }
@media (max-width: 720px) {
  .fgrid.fg-seam > .fg-cell:first-child { border-bottom-left-radius: 0; }
  .fgrid.fg-seam > .fg-cell:last-child { border-bottom-left-radius: 23px; }
}

/* T3 cells inside a card: fill only, no outline. Floating cells are outlined by their shadow */
.ll-row, .al-item, .plan-card .plan-fee, .pf-receipt { border-color: transparent; }
.al-item, .al-stage .al-item { border-radius: var(--radius-cell); }
.al-stage .al-item { box-shadow: var(--e2); }
.plan-card .plan-fee { border-radius: var(--radius-cell); }

/* T2 cards */
.ll-ch, .tv-item, .tour-v2 .tour-tab { border-radius: var(--radius-card); }
.tv-item:has(.tour-tab[aria-selected="true"]) { border-color: var(--line); }
.faq .acc-item::before, .faq details::before { box-shadow: 0 0 0 1px var(--line), var(--e2); }
.article .callout { border-color: var(--line); }
/* rest on the line alone; a hover lifts on e2 and may recolor the same border */
.prod-card, .plan-card { box-shadow: none; }
.prod-card:hover, .dev-card:hover, .plan-card:hover, .addon:hover, .moment:hover { box-shadow: var(--e2); }
/* emphasis: the 2px ring replaces the border, never sits around it */
.plan-card.plan-hot, .plan-card.plan-hot:hover { box-shadow: 0 0 0 2px var(--blue-600), var(--e2); }
.mflow-node.yours { border-color: transparent; }

/* controls: one border in the line color, no ring (focus states unchanged) */
.cta-secondary, .input, select.input, textarea.input, .mq-chip, .pcar-btn { border-color: var(--line); }
/* phones: the demo form's fields keep 24px clear of the card line, so no lined box sits closer than that to another */
@media (max-width: 560px) { .split .media .tile-pad[style*="padding: 36px"] { padding: 24px !important; } }

/* beam diagrams: the pulse on a node or chip is a soft halo, not a ring around its border. The lead node's
   emphasis moves onto its own border; the hub's halo is blurred so its pulse ring is the only line */
.bm-node { box-shadow: 0 0 calc(2px + var(--g) * 14px) color-mix(in srgb, var(--c) calc(var(--g) * 32%), transparent), 0 10px 24px -16px rgba(15,23,42,0.30); }
.bm-node.bm-lead { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.bm-lead .bm-ic { box-shadow: none; }
.bm-grid.bm-rows .bm-ic { box-shadow: 0 0 calc(2px + var(--g) * 16px) color-mix(in srgb, var(--c) calc(var(--g) * 32%), transparent), 0 10px 22px -14px rgba(15,23,42,0.30); }
@container bm (max-width: 479px) {
  .bm-grid:not(.bm-one):not(.bm-cols) .bm-ic { box-shadow: 0 0 calc(2px + var(--g) * 16px) color-mix(in srgb, var(--c) calc(var(--g) * 32%), transparent), 0 10px 22px -14px rgba(15,23,42,0.30); }
}
.bm-hub { box-shadow: 0 0 18px 2px rgba(37,99,235,0.12), 0 18px 36px -14px rgba(37,99,235,0.55), inset 0 1px 0 rgba(255,255,255,0.28); }
.bm-hub.bm-stripe { box-shadow: 0 0 18px 2px rgba(99,91,255,0.13), 0 18px 36px -14px rgba(99,91,255,0.55), inset 0 1px 0 rgba(255,255,255,0.28); }
/* LOOP 49 follow-ups from the independent review */
/* the pledge accent bar sits on the border band, so across its span it recolors the one line instead of
   drawing a second line under it (it starts 24px in, so it never meets the 16px corner and needs no clip) */
.pledge { overflow: visible; }
.pledge::before { top: -1px; }
/* the scroll trace dot keeps its halo but no ring */
.trace-dot { box-shadow: 0 0 14px rgba(37,99,235,0.5); }
/* every T1 surface stays at 24 on phones too */
@media (max-width: 760px) { .ba { border-radius: var(--radius-surface); } }
/* controls and chips: one line in the one outline color */
.bill-switch { border-color: var(--line); box-shadow: none; }
.il-node { border-color: var(--line); }
/* floating cells sit on the elevation scale */
.al-stack .al-item, .pf-receipt { box-shadow: var(--e2); }
.pf-receipt { border-radius: var(--radius-cell); }
.media-bare.rounded img { box-shadow: var(--e3); }
/* panels of the same tier rest the same way: the flow diagram matches the ledger feed */
.shell.flow-shell { box-shadow: var(--e1); }
/* the payment rail seam shows only inner crosshairs, never marks past the card's outer line */
.fgrid.fg-seam > .fg-cell:first-child::after { background: var(--fg-plus) 100% 0 / 13px 13px no-repeat; }
.fgrid.fg-seam > .fg-cell:last-child::after { background: var(--fg-plus) 0 0 / 13px 13px no-repeat; }
@media (max-width: 720px) { .fgrid.fg-seam > .fg-cell::after { display: none; } }
/* activity cells separate from the stage by fill, as T3 cells should, not by a border */
.shell-core > .al-stage { background: radial-gradient(90% 70% at 50% 0%, rgba(37,99,235,0.08), rgba(37,99,235,0) 70%), linear-gradient(180deg, #F8FAFC 0%, #EEF2F8 100%); }
@media (max-width: 400px) { .shell-core > .al-stage { padding-inline: 18px; } }
/* the unframed Recurring Plans screenshot is cropped at its right and bottom: fade those edges instead of slicing rows */
.media-bare > img.shot[src*="recurring-plans"] {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 98%), linear-gradient(90deg, #000 86%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 78%, transparent 98%), linear-gradient(90deg, #000 86%, transparent 99%);
  mask-composite: intersect;
}

/* ============================================================
   LOOP 51: blog platform. Posts live in blog/ and publish at
   /blog/<slug>. scripts/build_site.py bakes the /blog card index
   (newest post as a wide lead card, the rest three to a row, on
   the double-bezel shells and the bento grid) and the three newest
   posts into a band on /resources. A post reuses the guide article
   layout: hero with meta line and a featured image that spans the
   prose and the contents rail, the article, a "Keep reading" block
   of product links, then the closing band. The footer gains a
   Resources column, so the grid holds brand plus five columns.
   ============================================================ */
@media (min-width: 961px) {
  .footer-grid { grid-template-columns: minmax(0, 1.65fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
}

/* -- post hero: featured image ------------------------------ */
/* dates and reading time never break mid-phrase on a narrow screen */
.post-meta time, .post-meta [data-read-time], .post-card-meta time { white-space: nowrap; }
.post-figure { margin: clamp(28px, 4vw, 40px) 0 0; }
.post-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-card); background: var(--ground-2);
  box-shadow: var(--ring-shell), 0 34px 70px -44px rgba(15,23,42,0.38);
}
/* with the contents rail, the image spans the prose column and the rail */
@media (min-width: 1100px) {
  html.js .page-hero:has(+ .article[data-toc]) .post-figure { margin-right: calc(-1 * (var(--toc-gap) + var(--toc-w))); }
}
@media (max-width: 560px) {
  .post-figure img { border-radius: 14px; }
}
/* numbered headings carry their own numbers, so the compact contents list drops its counter */
.article.post-body .toc-mini .toc-num { display: none; }
.article.post-body .toc-mini .toc-link { grid-template-columns: 1fr; }

/* -- post: keep reading ------------------------------------- */
.post-related { margin: 52px 0 0; padding-top: 34px; border-top: var(--hairline); }
.article .post-related-h { margin: 0 0 18px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.article .post-related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.article .post-related-list li { margin: 0; font-size: inherit; line-height: inherit; }
.article .post-related-list a {
  display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 18px 20px 19px;
  border: var(--hairline-strong); border-radius: var(--radius-card); background: var(--ground-0);
  color: inherit; text-decoration: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), transform 260ms var(--ease-lux);
}
.article .post-related-list a:hover {
  border-color: color-mix(in srgb, var(--family, #2563EB) 38%, transparent);
  box-shadow: 0 18px 40px -26px rgba(15,23,42,0.28); transform: translateY(-2px);
}
.post-related-kind { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--family-ink, var(--blue-700)); }
.post-related-list b { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; color: var(--ink-900); }
.post-related-desc { font-size: 14px; line-height: 1.5; color: var(--ink-600); }
@media (max-width: 560px) {
  .article .post-related-list { grid-template-columns: 1fr; }
}

/* -- /blog: card index -------------------------------------- */
.post-grid { gap: 24px; }
.post-card .post-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.post-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-2); border-bottom: var(--hairline); }
.post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-lux); }
.post-card:hover .post-card-media img { transform: scale(1.025); }
.post-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: clamp(22px, 2.4vw, 28px); }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; line-height: 1.4; color: var(--ink-500); }
.post-card-cat {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--blue-tint-8); color: var(--blue-700); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
}
.post-card-title { margin: 14px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; transition: color var(--t-hover); }
.post-card-link:hover .post-card-title { color: var(--blue-700); }
.post-card-excerpt { display: block; margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
/* grid cards keep an even rhythm: three lines of excerpt at most */
.post-card:not(.post-card-lead) .post-card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.post-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 500; color: var(--ink-900); }
.post-card-more svg { width: 14px; height: 14px; transition: transform var(--t-hover); }
.post-card-link:hover .post-card-more svg { transform: translate(2px, -2px); }
/* the newest post: image beside the copy once both fit. The image keeps its
   16:9 frame (cover art often carries type near its edges, so it is never
   cropped) and the copy centers against it. */
@media (min-width: 1200px) {
  .post-card-lead .post-card-link { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; }
  .post-card-lead .post-card-media { border-bottom: 0; }
  .post-card-lead .post-card-body { padding: 28px clamp(32px, 3vw, 48px); }
  .post-card-lead .post-card-title { margin-top: 16px; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.18; letter-spacing: -0.022em; }
  .post-card-lead .post-card-excerpt { margin-top: 12px; font-size: 16px; line-height: 1.6; max-width: 46ch; }
  .post-card-lead .post-card-more { margin-top: 24px; padding-top: 0; }
}
/* the hub hero sits closer to its cards than a marketing hero does */
.page-hero.blog-hero { padding-bottom: clamp(16px, 2.4vw, 32px); }
.page-hero.blog-hero + .section-tight { padding-top: clamp(20px, 2.6vw, 36px); }
.blog-more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border: var(--hairline-strong); border-radius: var(--radius-shell);
  background: linear-gradient(180deg, var(--ground-0), var(--ground-1));
}
.blog-more h2 { margin: 0 0 6px; }
.blog-more p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink-600); }

/* -- /resources: blog band ---------------------------------- */
.section-tight + .section-tight.blog-band { padding-top: 0; }
.blog-band-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 4.4vw, 56px); border: var(--hairline-strong); border-radius: var(--radius-shell);
  background: radial-gradient(120% 140% at 0% 0%, rgba(37,99,235,0.07), transparent 58%), var(--ground-0);
  box-shadow: var(--shadow-soft);
}
.blog-band-copy .t-h2 { margin: 18px 0 14px; }
.blog-band-copy .t-lead { font-size: 17px; max-width: 40ch; }
.blog-band-copy .cta-row { margin-top: 24px; }
.post-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.post-row {
  display: flex; align-items: center; gap: 18px; padding: 12px 18px 12px 12px; border-radius: 18px;
  border: var(--hairline-strong); background: var(--ground-0); color: inherit; text-decoration: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), transform 260ms var(--ease-lux);
}
.post-row:hover { border-color: rgba(37,99,235,0.28); box-shadow: 0 18px 40px -26px rgba(15,23,42,0.28); transform: translateY(-2px); }
.post-row-media { flex: none; width: 132px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ground-2); }
.post-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-row-body { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
/* the title comes first in the markup (screen readers, Markdown twin); the date line sits above it */
.post-row-meta { order: -1; font-size: 12.5px; line-height: 1.4; color: var(--ink-500); }
.post-row-title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; transition: color var(--t-hover); }
.post-row:hover .post-row-title { color: var(--blue-700); }
@media (max-width: 960px) {
  .blog-band-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .blog-band-grid { padding: 24px 18px; border-radius: 20px; }
  .post-row { gap: 14px; padding: 10px 14px 10px 10px; }
  .post-row-media { width: 96px; border-radius: 10px; }
  .post-row-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card:hover .post-card-media img, .post-card-link:hover .post-card-more svg,
  .post-row:hover, .article .post-related-list a:hover { transform: none; }
  .post-card-media img { transition: none; }
}

/* ============================================================
   LOOP 52: legal pages (privacy, terms, license-agreement). The
   three documents reuse the article measure and its "On this page"
   contents (LOOP 46, data-toc). This block adds the document
   switcher in the hero, quiet section numbers, the summary card,
   the contact card, and the related documents list at the end.
   ============================================================ */
/* the three documents share one calm hero whatever page family the URL maps to */
body:has(.legal-doc) { background: #FBFCFE; }
body .page-hero.legal-hero { background: none; }
body .page-hero.legal-hero::before { background: none; animation: none; }
body .legal-hero .eyebrow-pill { background: color-mix(in srgb, #059669 11%, white); color: #047857; }
/* like /privacy and /terms (guide family), every legal page skips the mobile sticky demo bar */
body:has(.legal-doc) > .mcta { display: none; }
@media (max-width: 820px) { body:has(.legal-doc):has(> .mcta) footer.site-footer { padding-bottom: 40px; } }
.legal-hero .legal-date { margin-top: 18px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.legal-nav a {
  display: inline-block; height: 38px; padding: 0 16px;
  border: var(--hairline-strong); border-radius: var(--radius-pill); background: var(--ground-0);
  font-size: 14px; font-weight: 500; line-height: 36px; color: var(--ink-600); text-decoration: none; white-space: nowrap;
  transition: color var(--t-hover), border-color var(--t-hover), background-color var(--t-hover);
}
.legal-nav a:hover { color: var(--ink-900); border-color: rgba(15,23,42,0.24); }
.legal-nav a[aria-current="page"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.legal-nav a:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* numbered sections: the number sits in the brand blue, run-in heads ("1.1 Organizations.") in ink */
.legal-doc > h2 { font-size: 25px; margin-top: 52px; }
.legal-doc > h2 .sec-n { color: var(--blue-600); font-variant-numeric: tabular-nums; margin-right: 0.12em; }
.legal-doc > p > strong:first-child { color: var(--ink-900); font-weight: 600; }
.legal-doc > p.legal-caps { font-size: 15px; line-height: 1.7; letter-spacing: 0.01em; color: var(--ink-700); }
/* product names (E-Fundraiser, FS-22, S700/S710) and "Section 10" links stay on one line */
.legal-doc .nw, .legal-doc > p a[href^="#"], .legal-doc > ul a[href^="#"] { white-space: nowrap; }
/* short field lists read in two columns from tablet width up */
@media (min-width: 600px) {
  .legal-doc > ul.legal-cols { columns: 2; column-gap: 40px; }
  .legal-doc > ul.legal-cols > li { break-inside: avoid; }
}

/* the headings carry their own number, so the compact contents drops its duplicate */
.legal-doc .toc-mini .toc-num { display: none; }
.article.legal-doc .toc-mini .toc-link { grid-template-columns: 1fr; }

/* summary card */
.article .legal-summary {
  margin: 30px 0 10px; padding: 20px 24px 10px; background: var(--ground-0);
  border: var(--hairline-strong); box-shadow: var(--shadow-soft);
}
.article .legal-summary > p:first-child { margin: 0 0 6px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.article .legal-summary > p:first-child strong { color: inherit; font-weight: inherit; }
.article .legal-summary ul { margin: 0; padding: 0; list-style: none; }
.article .legal-summary li { position: relative; margin: 0; padding: 11px 0 11px 30px; font-size: 15.5px; line-height: 1.55; color: var(--ink-700); }
.article .legal-summary li + li { border-top: var(--hairline); }
.article .legal-summary li::before {
  content: ""; position: absolute; left: 6px; top: 16px; width: 5px; height: 10px;
  border: solid var(--blue-600); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* contact card */
.legal-contact { margin: 6px 0 22px; padding: 20px 24px; border: var(--hairline-strong); border-radius: var(--radius-card); background: var(--ground-0); }
.legal-contact p, .legal-contact address { margin: 0; font-size: 16px; line-height: 1.65; font-style: normal; color: var(--ink-600); }
.legal-contact .legal-contact-name { margin-bottom: 4px; font-weight: 600; color: var(--ink-900); }
.legal-contact address + p { margin-top: 10px; }

/* related documents */
.legal-more { margin: 56px 0 0; padding-top: 24px; border-top: var(--hairline-strong); }
.article .legal-more-label { margin: 0 0 4px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.article .legal-more a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center;
  padding: 16px 0; border-bottom: var(--hairline); color: inherit; text-decoration: none;
}
.article .legal-more a:hover { border-color: rgba(15,23,42,0.07); }
.legal-more a b { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink-900); transition: color var(--t-hover); }
.legal-more a span { grid-column: 1; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.legal-more a::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; background: var(--ink-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-hover), background-color var(--t-hover);
}
.legal-more a:hover b { color: var(--blue-600); }
.legal-more a:hover::after { background: var(--blue-600); transform: translate(2px, -2px); }
.legal-more a:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 560px) {
  /* phones show the short names in one row; the full names stay in the accessible name */
  .legal-nav { gap: 6px; }
  .legal-nav a { position: relative; padding: 0 15px; }
  .legal-nav .ln-more { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .legal-doc > h2 { font-size: 22px; margin-top: 44px; }
  .article .legal-summary, .legal-contact { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-nav a, .legal-more a b, .legal-more a::after { transition: none; }
  .legal-more a:hover::after { transform: none; }
}

/* ============================================================
   LOOP 53: FAQ hub (/faqs). A numbered topic index under the
   hero jumps to eight topic sections. Each topic reuses the
   LOOP 39 two-column FAQ (.container > .sec-head + .faq), with
   its number above the heading in place of the keyline, a one
   line summary, the detail-page link, and a way back to the
   index. Topics sit closer together than standalone sections
   and are separated by a hairline.
   ============================================================ */
.fq-index { margin-top: clamp(36px, 4.5vw, 52px); }
.fq-index ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.fq-index li { display: flex; }
.fq-index a {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 112px;
  padding: 16px 44px 16px 18px; border: var(--hairline-strong); border-radius: var(--radius-card);
  background: rgba(255,255,255,0.78); color: var(--ink-900); text-decoration: none;
  transition: border-color var(--t-hover), background-color var(--t-hover), box-shadow var(--t-hover);
}
.fq-index a:hover { background: var(--ground-0); border-color: color-mix(in srgb, var(--blue-600) 38%, transparent); box-shadow: var(--shadow-soft); }
.fq-n { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; color: var(--blue-600); font-variant-numeric: tabular-nums; }
.fq-t { font-size: 15.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; text-wrap: balance; }
.fq-c { margin-top: auto; font-size: 13px; line-height: 1.3; color: var(--ink-500); }
.fq-go {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; padding: 6px;
  border-radius: 50%; background: rgba(15,23,42,0.05); color: var(--ink-900);
  transition: background-color var(--t-hover), color var(--t-hover), transform var(--t-hover);
}
.fq-index a:hover .fq-go { background: var(--blue-600); color: #fff; transform: translateY(2px); }

/* topics: anchored below the fixed nav, tighter rhythm, hairline between */
.fq-topic { scroll-margin-top: 64px; padding-bottom: clamp(48px, 6vw, 80px); }
.fq-hero + .fq-topic { padding-top: clamp(40px, 5vw, 64px); }
.section.fq-topic + .section.fq-topic { padding-top: clamp(48px, 6vw, 80px); border-top: var(--hairline); }
/* model names (FS-22, S700/S710) never split at the hyphen or slash */
.fq-m { white-space: nowrap; }
.fq-topic .sec-head .t-h2::before { display: none; }
.fq-step {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.08em;
  color: var(--family, var(--blue-600)); font-variant-numeric: tabular-nums;
}
.fq-step::after { content: ''; width: 34px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.45; }
.fq-sum { margin: 0 0 16px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-600); text-wrap: pretty; }
.further-read .fq-up {
  display: block; width: max-content; margin-top: 10px; font-size: 14px; color: var(--ink-500);
  border-bottom-color: rgba(15,23,42,0.18); transition: color var(--t-hover), border-color var(--t-hover);
}
.further-read .fq-up:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }
/* the first topic sits right under the index, so it needs no way back */
.fq-hero + .fq-topic .fq-up { display: none; }
.fq-close { padding-top: clamp(16px, 2vw, 24px); }
.fq-mail { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,0.6); }

@media (max-width: 1023px) {
  .fq-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fq-index a { min-height: 0; }
  .fq-topic .sec-head { margin-bottom: 24px; }
}
@media (max-width: 560px) {
  .fq-index ol { gap: 8px; }
  .fq-index a { padding: 14px; gap: 5px; }
  .fq-t { font-size: 14.5px; padding-right: 28px; }
  .fq-c { font-size: 12.5px; }
  .fq-go { top: 10px; right: 10px; width: 24px; height: 24px; padding: 5px; }
  .fq-sum { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-index a, .fq-go, .further-read .fq-up { transition: none; }
  .fq-index a:hover .fq-go { transform: none; }
}

/* ============================================================
   LOOP 50: demo booking. demo.html books through Calendly in one
   outlined card: a header (slot length, format, time zone, and the
   always-visible link to the scheduling page), an optional plan
   row (?plan= from the pricing plan builder), then the embed.
   js/site.js (Loop 50) inserts the iframe once the visitor asks
   for it (the idle state is styled in LOOP 58) and sets
   .book-frame to the page height Calendly
   reports, so the calendar never scrolls inside its frame. The
   heights below only hold space until that first report. Without
   JavaScript, or when the embed fails, the frame collapses to a
   short panel with the scheduling link.
   ============================================================ */
.book-sec { padding: clamp(20px, 3vw, 36px) 0 0; }
.book-card {
  position: relative; overflow: hidden; container-type: inline-size;
  background: var(--ground-0);
  border: var(--hairline-strong); border-radius: var(--radius-shell);
  box-shadow: var(--shadow-ambient);
}
.book-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 32px; padding: 22px clamp(20px, 3vw, 32px) 20px;
  border-bottom: var(--hairline);
  background: linear-gradient(180deg, var(--ground-1), rgba(248,250,252,0));
}
.book-title { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; }
.book-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-600); }
.book-meta li { display: inline-flex; align-items: center; gap: 7px; }
.book-meta svg { width: 16px; height: 16px; flex: none; color: var(--blue-600); }
.book-open {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 40px; padding: 0 16px 0 18px; border-radius: var(--radius-pill);
  border: var(--hairline-strong); background: var(--ground-0); box-shadow: var(--ring-shell);
  color: var(--ink-900); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: border-color var(--t-hover), color var(--t-hover), background-color var(--t-hover);
}
.book-open:hover { border-color: color-mix(in srgb, var(--blue-600) 40%, transparent); color: var(--blue-700); background: var(--ground-1); }
.book-open svg { width: 14px; height: 14px; flex: none; transition: translate var(--t-hover); }
.book-open:hover svg { translate: 2px -1px; }

/* plan builder context, filled by js/site.js only when ?plan= names a published plan */
.book-plan {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 14px;
  padding: 12px clamp(20px, 3vw, 32px); border-bottom: var(--hairline);
  background: var(--blue-tint-8); font-size: 14px; line-height: 1.5; color: var(--ink-700);
}
.book-plan[hidden] { display: none; }
.book-plan .bp-dot { width: 8px; height: 8px; flex: none; margin-top: 6.5px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-tint-12); }
.book-plan .bp-txt { flex: 1 1 240px; }
.book-plan b { color: var(--ink-900); font-weight: 600; }
.book-plan a { color: var(--blue-700); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); }
.book-plan a:hover { border-bottom-color: var(--blue-600); }

/* the embed: space held until Calendly reports its height, sized to its first page at each layout */
.book-frame { position: relative; height: 648px; scroll-margin-top: 96px; }
@container (max-width: 999px) { .book-frame { height: 520px; } }
@container (max-width: 640px) { .book-frame { height: 420px; } }
.book-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ground-0); }
.book-wait {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 40px 20px; text-align: center; background: var(--ground-0);
  transition: opacity 420ms var(--ease-lux), visibility 0s linear 420ms;
}
.book-msg { max-width: 42ch; font-size: 15px; color: var(--ink-600); }
.book-msg a { color: var(--blue-600); }
.book-skel {
  position: relative; display: block; width: min(300px, 78%); aspect-ratio: 7 / 6; padding-top: 40px;
  background: radial-gradient(circle closest-side, rgba(37,99,235,0.09) 72%, transparent 76%) 0 0 / calc(100% / 7) 20% repeat content-box;
  animation: book-pulse 1.4s var(--ease-lux) infinite alternate;
}
.book-skel::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 44%; height: 12px; border-radius: 6px; background: var(--ground-2); }
@keyframes book-pulse { from { opacity: 0.5; } to { opacity: 1; } }
/* while it loads, the header link is the way out; the panel button returns only without JavaScript or on failure */
html.js .book-card:not([data-state="failed"]) .book-cta { display: none; }
.book-card[data-state="ready"] .book-wait { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .book-frame, .book-card[data-state="failed"] .book-frame { height: auto; }
html:not(.js) .book-wait, .book-card[data-state="failed"] .book-wait { position: static; padding: clamp(40px, 6vw, 64px) 20px; }
html:not(.js) .book-skel, .book-card[data-state="failed"] .book-skel { display: none; }
/* a failed frame stays laid out at full width but out of sight, so a late answer from Calendly can still bring it back */
.book-card[data-state="failed"] iframe { position: absolute; top: 0; left: 0; height: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .book-skel { animation: none; opacity: 0.8; }
  .book-wait, .book-open, .book-open svg { transition: none; }
}

/* what the demo covers, under the card */
.book-covers { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.book-covers .split .copy .t-h4 { margin-top: 0; }
.book-list { margin-top: 16px; }
.book-tip { padding: 20px 22px; border-radius: var(--radius-card); background: var(--ground-1); border: var(--card-line); }
.book-tip h3 { margin-bottom: 6px; }
.book-tip p { font-size: 14.5px; }
.book-email { margin-top: 18px; }
@media (max-width: 560px) {
  .book-head { padding: 18px 18px 16px; }
  .book-meta { gap: 6px 16px; font-size: 13.5px; }
  .book-plan { padding: 12px 18px; }
}

/* ============================================================
   LOOP 54: processing fees and donor fee coverage on /pricing.
   #processing-fees: four rate cards (online, in person, manually
   entered, ACH), each with an icon chip in its own hue, the rate
   Stripe publishes, where it applies, and the fee on a $100 gift.
   Under them sit three unboxed notes (Stripe sets the rates, your
   own Stripe account, the platform fee is separate), the nonprofit
   rate callout, and the fine print. #fee-coverage: the 72% stat
   with its source note and a meter, three benefits, and a checkout
   card that turns fee coverage on and shows the gift arriving
   whole. One outline per card (LOOP 49): inner rows are fills and
   dividers. The checkout card and the meter play once as they
   reveal; without JavaScript or with reduced motion they rest in
   their final state.
   ============================================================ */
.pfee-section { padding-top: 0; }
.pfee-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pfee-card {
  --c: #2563EB;
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 24px 20px;
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 7%, #fff), #fff 64%);
  border: var(--card-line); border-radius: var(--radius-card);
  transition: box-shadow var(--t-hover);
}
.pfee-card.pf-person { --c: #7C3AED; }
.pfee-card.pf-manual { --c: #475569; }
.pfee-card.pf-ach { --c: #059669; }
@media (hover: hover) and (pointer: fine) { .pfee-card:hover { box-shadow: var(--e2); } }
.pfee-ic {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-cell);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c, #2563EB); background: color-mix(in srgb, var(--c, #2563EB) 11%, #fff);
}
.pfee-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pfee-name { margin-top: 18px; font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.pfee-rate, .np-rate { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.05; }
.pfee-rate { margin-top: 10px; }
.pfee-pct { font-size: clamp(34px, 3vw, 42px); font-weight: 600; letter-spacing: -0.035em; }
.pfee-fix { font-size: 18px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink-500); }
.pfee-per { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-500); }
.pfee-where { list-style: none; width: 100%; margin: 18px 0 0; padding: 0 0 20px; display: grid; gap: 9px; }
.pfee-where li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--ink-700); }
.pfee-where svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pfee-where svg circle { fill: var(--c); stroke: none; }
.pfee-ex { width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--divider); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pfee-ex span { font-size: 13px; color: var(--ink-500); }
.pfee-ex b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* the three notes: icon and text, no box */
.pfee-notes { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; }
.pfee-notes li { display: flex; align-items: flex-start; gap: 14px; }
.pn-ic { flex: none; width: 36px; height: 36px; border-radius: var(--radius-cell); display: inline-flex; align-items: center; justify-content: center; background: var(--ground-2); color: var(--ink-700); }
.pn-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pfee-notes p { font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.pfee-notes b { font-weight: 600; color: var(--ink-900); }
.pfee-notes a, .pfee-fine a { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid rgba(37,99,235,0.3); transition: border-color var(--t-hover); }
.pfee-notes a:hover, .pfee-fine a:hover { border-color: var(--blue-600); }

/* nonprofit rate: one surface, the rate side is a fill inside it */
.pfee-np {
  --c: var(--family, #2563EB);
  margin-top: 44px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start;
  padding: clamp(28px, 3.6vw, 44px);
  border: var(--card-line); border-radius: var(--radius-surface);
  background: linear-gradient(135deg, #fff 35%, color-mix(in srgb, var(--c) 6%, #fff));
}
/* sentence case on purpose: uppercase would print 501(C)(3) */
.np-kicker { margin-top: 20px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--family-ink, #1D4ED8); }
.np-title { margin: 8px 0 12px; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -0.018em; color: var(--ink-900); }
.np-text { max-width: 52ch; margin-bottom: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.np-side { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-card); background: color-mix(in srgb, var(--c) 6%, #fff); }
.np-rate .pfee-pct { font-size: clamp(38px, 3.6vw, 48px); }
.np-rate-lbl { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-500); max-width: 40ch; }
.np-req { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.np-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.np-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-700); }
.np-checks svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.np-checks small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-500); }
.pfee-fine { max-width: 900px; margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-500); }

/* donor fee coverage */
.fc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fc-copy .sec-head { margin-bottom: 30px; }
.fc-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding-bottom: 24px; border-bottom: 1px solid var(--divider); }
.fc-num { font-size: clamp(60px, 6.4vw, 84px); line-height: 0.92; font-weight: 600; letter-spacing: -0.045em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fc-num span { margin-left: 2px; font-size: 0.5em; letter-spacing: -0.02em; color: var(--family, #2563EB); }
.fc-lbl { max-width: 30ch; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--ink-900); }
.fc-meter { height: 6px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--family, #2563EB) 13%, #fff); }
.fc-meter i { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--family, #2563EB) 55%, #fff), var(--family, #2563EB)); transform-origin: 0 50%; transition: transform 1200ms var(--ease-lux) 250ms; }
.fc-src { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }
.fc-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 20px; }
.fc-points li { display: flex; align-items: flex-start; gap: 14px; }
.fcp-ic { flex: none; width: 36px; height: 36px; border-radius: var(--radius-cell); display: inline-flex; align-items: center; justify-content: center; color: var(--family, #2563EB); background: color-mix(in srgb, var(--family, #2563EB) 10%, #fff); }
.fcp-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-points h3 { font-size: 15.5px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.fc-points p { max-width: 46ch; margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--ink-600); }

/* the checkout card: one surface; rows are fills, the flow sits under a divider */
.fc-demo { margin: 0; }
.fc-panel { max-width: 470px; margin-inline: auto; padding: clamp(20px, 2.4vw, 26px); border: var(--card-line); border-radius: var(--radius-surface); background: #fff; box-shadow: var(--e3); }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fc-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.fc-type { padding: 4px 11px; border-radius: var(--radius-pill); background: var(--blue-tint-8); font-size: 12.5px; font-weight: 500; color: var(--blue-700); }
.fc-line, .fc-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: var(--radius-cell); font-size: 14.5px; }
.fc-line { background: var(--ground-1); color: var(--ink-600); }
.fc-line b { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fc-opt { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-cell); background: #ECFDF5; transition: background-color 420ms var(--ease-lux) 760ms; }
.fc-switch { position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: var(--radius-pill); background: #059669; transition: background-color 380ms var(--ease-lux) 700ms; }
.fc-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.25); transform: translateX(16px); transition: transform 380ms var(--ease-lux) 700ms; }
.fc-opt-txt b { display: block; font-size: 14px; line-height: 1.35; font-weight: 600; color: #065F46; }
.fc-opt-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #047857; }
.fc-total { margin-top: 10px; background: var(--blue-600); color: rgba(255,255,255,0.86); }
.fc-total b { display: inline-grid; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: #fff; font-variant-numeric: tabular-nums; }
.fc-total b > span { grid-area: 1 / 1; text-align: right; transition: opacity 320ms var(--ease-lux) 860ms; }
.fc-v0 { opacity: 0; }
.fc-flow { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--divider); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fc-flow li { position: relative; min-width: 0; padding: 12px 12px 13px; border-radius: var(--radius-cell); background: var(--ground-1); transition: opacity 520ms var(--ease-lux), translate 520ms var(--ease-lux); }
.fc-flow li:nth-child(1) { transition-delay: 1100ms; }
.fc-flow li:nth-child(2) { transition-delay: 1260ms; }
.fc-flow li:nth-child(3) { transition-delay: 1420ms; }
.fc-flow li + li::before {
  content: ""; position: absolute; top: 50%; left: -18px; width: 12px; height: 12px; translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fc-flow small { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-500); }
.fc-flow b { display: block; margin-top: 3px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fc-flow .fc-whole { background: #ECFDF5; }
.fc-flow .fc-whole small { color: #047857; }
.fc-flow .fc-whole b { color: #065F46; }
.fc-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 500; color: #047857; transition: opacity 400ms var(--ease-lux) 1750ms, scale 400ms var(--ease-lux) 1750ms; }
.fc-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fc-demo figcaption { max-width: 470px; margin: 14px auto 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-500); }

/* the start state, only while the reveal is pending; the transitions above carry each part to its rest */
html.js .fc-stat:not(.in) .fc-meter i { transform: scaleX(0); }
html.js .fc-demo:not(.in) .fc-switch { background: #CBD5E1; }
html.js .fc-demo:not(.in) .fc-switch i { transform: none; }
html.js .fc-demo:not(.in) .fc-opt { background: var(--ground-1); }
html.js .fc-demo:not(.in) .fc-v0 { opacity: 1; }
html.js .fc-demo:not(.in) .fc-v1 { opacity: 0; }
html.js .fc-demo:not(.in) .fc-flow li { opacity: 0; translate: 0 8px; }
html.js .fc-demo:not(.in) .fc-badge { opacity: 0; scale: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .fc-meter i, .fc-opt, .fc-switch, .fc-switch i, .fc-total b > span, .fc-flow li, .fc-badge { transition: none; }
}

@media (max-width: 1023px) {
  .pfee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfee-notes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pfee-np { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fc-split { grid-template-columns: minmax(0, 1fr); }
  .fc-copy .sec-head, .fc-stat, .fc-points { max-width: 640px; }
  /* stacked, the card lines up with the copy above it */
  .fc-panel, .fc-demo figcaption { margin-inline: 0; }
}
@media (max-width: 560px) {
  .pfee-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* phones: the icon sits beside the name, so four stacked cards stay short */
  .pfee-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 20px 20px 16px; }
  .pfee-card > :not(.pfee-ic, .pfee-name) { grid-column: 1 / -1; }
  .pfee-card .pfee-ic { width: 40px; height: 40px; }
  .pfee-name { margin-top: 0; font-size: 16px; }
  .pfee-rate { margin-top: 14px; }
  .pfee-where { margin-top: 14px; padding-bottom: 16px; }
  .pfee-ex { padding-top: 12px; }
  .pfee-np { margin-top: 36px; padding: 24px 20px 22px; }
  .np-side { padding: 20px 18px; }
  .fc-stat { column-gap: 16px; }
  .fc-panel { padding: 18px; }
  /* the flow reads as a short statement: label left, amount right */
  .fc-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fc-flow li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 14px; }
  .fc-flow li + li::before { display: none; }
  .fc-flow b { margin-top: 0; grid-column: 2; grid-row: 1; }
  .fc-flow small { font-size: 13px; }
  .fc-badge { grid-column: 1 / -1; margin-top: 4px; }
}

/* ============================================================
   LOOP 55: device spec icons. One line-icon system states the
   hardware facts (battery, cellular, Wi-Fi, contactless, chip,
   screen, mounting, receipts, portability) on every device page:
   FS-22, WM-22, the Stripe Reader S700 and S710, and the Mobile
   App. The icons use Lucide shapes on a 24px grid, stroke only,
   in one weight; the markup carries the shapes and these rules
   set fill, stroke, caps and joins. Icons are decorative
   (aria-hidden) and the label beside each one states the fact,
   so every spec still reads as text and in the Markdown twins.
   An icon chip is a fill in the page or card channel hue, never
   a lined box (LOOP 49). Forms:
     .ispec       a two-up icon strip under a hero
     .ispec-list  a vertical icon list in place of check bullets
     .ispec-tri   three specs across the foot of a device card
     .ri          an icon chip before a comparison-table row label
     .cmp-rd      the S700 and S710 table: one split row, every
                  other value merged across both readers
   Static: no motion, so nothing changes under reduced motion.
   ============================================================ */
.ispec, .ispec-list, .ispec-tri, .cmp-hw {
  --is-hue: var(--ch, var(--family, #2563EB));
  --is-ink: var(--ch-ink, var(--family-ink, #1D4ED8));
}
.is-ic svg, .ri svg, .ispec-tri svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-ic {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-cell);
  color: var(--is-ink); background: color-mix(in srgb, var(--is-hue) 10%, white);
}

/* hero strip: two up, value over label */
.ispec { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 540px; margin-top: 32px; }
.ispec > li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink-500); }
.ispec > li b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.phero-stack .ispec { margin-inline: auto; text-align: left; }

/* vertical list in copy columns and format cards */
.ispec-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.ispec-list > li { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--ink-700); }
.ispec-list .is-ic { width: 36px; height: 36px; }
.ispec-list .is-ic svg { width: 18px; height: 18px; }
.fmt-body .ispec-list { margin-top: 16px; gap: 10px; }
.fmt-body .ispec-list > li { font-size: 14.5px; }

/* card foot: three specs on inner dividers, icon over a short label */
.ispec-tri { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--divider); }
.ispec-tri > li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ink-600); }
.ispec-tri > li + li { border-left: 1px solid var(--divider); }
.ispec-tri .tri-ic { display: grid; place-items: center; height: 24px; }
.ispec-tri svg { width: 22px; height: 22px; color: var(--is-ink); }
/* in a row of device cards the strips line up: the line above them takes the spare height */
.dev-body:has(> .ispec-tri) > p { flex-grow: 1; }
.dev-body > .ispec-tri + .dev-actions { padding-top: 20px; }
.tile-ink .ispec-tri { border-top-color: var(--line-ink); }
.tile-ink .ispec-tri > li { color: rgba(255,255,255,0.72); }
.tile-ink .ispec-tri > li + li { border-left-color: var(--line-ink); }
.tile-ink .ispec-tri svg { color: #67E8F9; }

/* comparison tables: an icon chip leads each row label */
.cs-wrap .cmp-spot tbody th .rl { display: inline-flex; align-items: center; gap: 12px; }
.ri {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--is-ink); background: color-mix(in srgb, var(--is-hue) 9%, white);
}
.ri svg { width: 17px; height: 17px; }

/* S700 and S710: the one split row comes first on the channel tint, and every shared value
   reads once across both readers between two fading rules, so sameness shows at a glance */
.cs-wrap .cmp-rd thead th:first-child { width: 24%; }
.cs-wrap .cmp-rd .rd-diff > * { background-color: color-mix(in srgb, var(--family, #2563EB) 5%, white); }
.cs-wrap .cmp-rd .rd-diff > th { box-shadow: inset 3px 0 0 var(--family, #2563EB); }
.cs-wrap .cmp-rd .rd-diff td { font-weight: 500; color: var(--ink-900); }
.cs-wrap .cmp-rd .rd-diff td:nth-child(2) { color: var(--ink-500); }
.cmp-rd .rd-diff b { font-weight: 600; color: var(--family-ink, #1D4ED8); }
/* each shared value is written in both reader columns, so screen readers and the Markdown twin read it under
   each reader; on screen the first copy runs across both columns and the second stays visually hidden */
.cmp-rd { --rd-px: 20px; }
.cs-wrap .cmp-rd td.rd-same { overflow: visible; text-align: center; color: var(--ink-700); }
.cmp-rd td.rd-same > span { display: flex; align-items: center; justify-content: center; gap: 16px; width: calc(200% + 2 * var(--rd-px)); }
.cmp-rd td.rd-same > span::before, .cmp-rd td.rd-same > span::after { content: ''; flex: 1 1 0; min-width: 12px; max-width: 140px; height: 1px; }
.cmp-rd td.rd-same > span::before { background: linear-gradient(90deg, transparent, var(--line)); }
.cmp-rd td.rd-same > span::after { background: linear-gradient(90deg, var(--line), transparent); }
.rd-note { max-width: 760px; margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-500); }

@media (min-width: 1600px) { .cmp-rd { --rd-px: 24px; } }
@media (max-width: 1100px) { .cmp-rd { --rd-px: 13px; } }
@media (max-width: 720px) {
  .ispec { gap: 16px 18px; margin-top: 26px; }
  .ispec > li { gap: 10px; font-size: 13.5px; }
  .ispec > li b { font-size: 14.5px; }
  .ispec .is-ic { width: 36px; height: 36px; }
  .ri { width: 26px; height: 26px; border-radius: 8px; }
  .ri svg { width: 15px; height: 15px; }
  .cs-wrap .cmp-spot tbody th .rl { gap: 10px; }
  /* phones: a shared value sits under its label, in line with the label text */
  .cs-wrap .cmp-rd td.rd-same { grid-column: 1 / -1; padding-left: 48px; padding-right: 12px; text-align: left; }
  .cmp-rd td.rd-same > span { display: block; width: auto; }
  .cs-wrap .cmp-rd td.rd-dup { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .cmp-rd td.rd-same > span::before, .cmp-rd td.rd-same > span::after { display: none; }
  /* the accent runs down the left edge through the label line and the first value */
  .cs-wrap .cmp-rd .rd-diff > td:nth-child(2) { box-shadow: inset 3px 0 0 var(--family, #2563EB); }
}
/* three narrow device cards (tablets): the strip stands as a short list, icon beside label */
@media (min-width: 641px) and (max-width: 1023px) {
  .dev-body .ispec-tri { grid-template-columns: 1fr; gap: 10px; }
  .dev-body .ispec-tri > li { flex-direction: row; gap: 10px; padding: 0; text-align: left; }
  .dev-body .ispec-tri > li + li { border-left: 0; }
  .dev-body .ispec-tri svg { width: 20px; height: 20px; }
  /* every card stacks its two links, so the strips keep one line across the row */
  .dev-body:has(> .ispec-tri) > .dev-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 380px) {
  .ispec { grid-template-columns: 1fr; }
}

/* ============================================================
   LOOP 56: the Stripe integration page (/stripe-integration).
   Four parts, each on the LOOP 49 card system: the reader
   comparison (.rx), one surface whose two model columns differ
   only in the cellular row, over a filled grid of the specs the
   S700 and S710 share; the rate cards (.rate), one 16px card
   each with the example fee on a $100 gift as a tinted fill; the
   nonprofit pricing panel (.snp), one surface with numbered steps
   split by dividers; and the fee coverage sample checkout
   (.sfc-mock), one media frame whose cover switch slides on once
   the frame reveals. Without JavaScript, or with reduced motion,
   every part shows its finished state.
   ============================================================ */
/* reader comparison: photo beside the panel, stacked under 1024 */
.rx-wrap { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.rx-shot img { max-width: 440px; margin-inline: auto; filter: drop-shadow(0 30px 38px rgba(15,23,42,0.10)); }
.rx { border: var(--card-line); border-radius: var(--radius-surface); background: var(--ground-0); box-shadow: var(--e1); overflow: clip; }
.rx-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-model { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; align-items: flex-start; }
.rx-model + .rx-model { border-left: 1px solid var(--divider); }
.rx-plus { background: linear-gradient(180deg, rgba(5,150,105,0.07) 0%, rgba(5,150,105,0.015) 100%); }
.rx-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: rgba(15,23,42,0.05); color: var(--ink-700); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.rx-plus .rx-tag { background: rgba(5,150,105,0.12); color: #047857; }
.rx-model h3 { margin: 12px 0 18px; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.rx-net { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.rx-net li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.35; color: var(--ink-700); }
.rx-i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.045); color: var(--ink-600); }
.rx-i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rx-net .rx-no { color: var(--ink-400); }
.rx-net .rx-no .rx-i { background: rgba(15,23,42,0.025); color: var(--ink-400); }
.rx-net .rx-yes { color: var(--ink-900); font-weight: 600; }
.rx-net .rx-yes .rx-i { background: #059669; color: #fff; box-shadow: 0 8px 18px -10px rgba(5,150,105,0.8); }
.rx-note { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); max-width: 34ch; text-wrap: pretty; }
.rx-same { padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px); border-top: 1px solid var(--divider); background: #F4F7FA; }
.rx-label { margin-bottom: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.rx-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rx-specs li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 15px; border-radius: var(--radius-cell); background: var(--ground-0); font-size: 13.5px; line-height: 1.4; color: var(--ink-600); }
.rx-specs .rx-i { width: 32px; height: 32px; background: rgba(5,150,105,0.09); color: #047857; }
.rx-specs b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.rx-foot { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
#readers .further-read { margin-top: 28px; }
/* a phone number never breaks across lines */
a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 1023px) {
  .rx-wrap { grid-template-columns: minmax(0, 1fr); }
  .rx-shot img { max-width: 360px; }
}
@media (max-width: 720px) {
  .rx-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rx-models { grid-template-columns: minmax(0, 1fr); }
  .rx-model + .rx-model { border-left: 0; border-top: 1px solid var(--divider); }
  .rx-note { max-width: none; }
  .rx-shot img { max-width: 280px; }
}
@media (max-width: 380px) {
  .rx-specs li { padding: 12px; }
}

/* rate cards: four 16px cards, the example fee as a tinted fill, the note above a divider */
.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rate { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 22px; border: var(--card-line); border-radius: var(--radius-card); background: var(--ground-0); transition: box-shadow var(--t-hover); }
.rate:hover { box-shadow: var(--e2); }
.rate-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue-600); background: linear-gradient(180deg, #fff, rgba(37,99,235,0.09)); box-shadow: inset 0 0 0 1px rgba(37,99,235,0.16); }
.rate-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rate-k { margin-top: 20px; font-size: 15px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-700); }
.rate-v { margin-top: 6px; font-size: clamp(28px, 2.5vw, 34px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-cap { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-600); }
.rate-ex { margin-top: 12px; display: inline-flex; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--blue-tint-8); color: var(--blue-700); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rate-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); width: 100%; font-size: 14px; line-height: 1.55; color: var(--ink-600); text-wrap: pretty; }
.rate-src { margin-top: 20px; max-width: 86ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-500); }
.rate-src a, .snp a { color: var(--blue-600); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); }
.rate-src a:hover, .snp a:hover { border-bottom-color: var(--blue-600); }
@media (max-width: 1100px) { .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rates { grid-template-columns: minmax(0, 1fr); } }

/* nonprofit pricing: one surface, the rate on the left, three numbered steps on dividers on the right */
.snp { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px clamp(28px, 5vw, 72px); padding: clamp(26px, 3.6vw, 48px); border: var(--card-line); border-radius: var(--radius-surface); background: radial-gradient(80% 90% at 0% 0%, rgba(37,99,235,0.07), rgba(37,99,235,0) 70%), var(--ground-0); box-shadow: var(--e1); }
.snp-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-700); }
.snp-lead .t-h3 { margin-top: 12px; }
.snp-rate { margin-top: 18px; font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 560; letter-spacing: -0.035em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.snp-q { margin-top: 14px; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }
.snp-steps { list-style: none; margin: 0; padding: 0; }
.snp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
.snp-steps li:first-child { padding-top: 4px; }
.snp-steps li + li { border-top: 1px solid var(--divider); }
.snp-n { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-600); color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.snp-steps h4 { margin-top: 5px; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); }
.snp-steps p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-600); text-wrap: pretty; }
.snp-foot { grid-column: 1 / -1; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--divider); font-size: 13.5px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 860px) {
  .snp { grid-template-columns: minmax(0, 1fr); }
  .snp-steps { margin-top: 18px; }
}

/* fee coverage: the stat under the copy, then a sample checkout in one media frame */
.cover-stat { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.cover-num { flex: none; font-size: clamp(56px, 6.4vw, 80px); line-height: 0.95; font-weight: 560; letter-spacing: -0.045em; color: var(--blue-600); font-variant-numeric: tabular-nums; }
.cover-lbl { max-width: 22ch; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-900); text-wrap: balance; }
.split .copy .cover-src { margin-top: 12px; max-width: 52ch; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
#fee-coverage .tile-list { margin-top: 18px; }
.sfc-mock { max-width: 440px; margin-inline: auto; padding: 24px; border: var(--card-line); border-radius: var(--radius-surface); background: var(--ground-0); box-shadow: var(--e3); }
.sfc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sfc-k { display: block; font-size: 13px; font-weight: 500; color: var(--ink-500); }
.sfc-amt { display: block; margin-top: 4px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sfc-once { flex: none; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ground-2); font-size: 12.5px; font-weight: 500; color: var(--ink-600); }
.sfc-amts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.sfc-amts span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--radius-input); background: var(--ground-2); font-size: 14.5px; font-weight: 500; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.sfc-amts .on { background: var(--blue-600); color: #fff; }
.sfc-cover { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-cell); background: rgba(37,99,235,0.07); }
.sfc-cover b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.sfc-cover div span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-600); }
.sfc-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--blue-600); }
.sfc-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.25); translate: 16px 0; }
.sfc-lines { margin-top: 18px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.sfc-line { display: flex; justify-content: space-between; gap: 12px; }
.sfc-fee span:last-child { color: var(--blue-700); font-weight: 500; }
.sfc-total { padding-top: 12px; border-top: 1px solid var(--divider); color: var(--ink-900); font-weight: 600; }
.sfc-btn { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 18px; border-radius: var(--radius-pill); background: var(--blue-600); color: #fff; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sfc-cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-500); }
/* the donor's choice plays once as the frame reveals: the switch slides on, then the coverage line arrives */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.in .sfc-switch { animation: fc-track 520ms var(--ease-lux) 900ms backwards; }
  html.js .reveal.in .sfc-switch i { animation: fc-knob 520ms var(--ease-lux) 900ms backwards; }
  html.js .reveal.in .sfc-fee { animation: fc-line 560ms var(--ease-lux) 1250ms backwards; }
}
@keyframes fc-track { from { background: #CBD5E1; } }
@keyframes fc-knob { from { translate: 0 0; } }
@keyframes fc-line { from { opacity: 0; translate: 0 -6px; } }
@media (max-width: 960px) {
  #fee-coverage .split .copy p { max-width: 60ch; }
}
@media (max-width: 420px) {
  .sfc-mock { padding: 18px; }
  .sfc-amt { font-size: 28px; }
  .cover-stat { gap: 14px; }
}

/* ============================================================
   LOOP 57: impact map and calmer leads.
   The home page's Our impact section maps the states with Donatefy
   kiosks (California, Florida, Illinois, Indiana, Michigan,
   Minnesota, Nebraska, New Jersey, New York, Ohio, Pennsylvania,
   Texas). State shapes come from us-atlas states-albers-10m (ISC),
   converted offline to one land path, one interior border mesh, and
   one path per deployed state. The SVG is hidden from assistive
   tech; the visible list of states is the accessible version and
   the keyboard way in. js/site.js (Loop 57) fills the deployed
   states west to east once the map is on screen, and lights a state
   and its list item together on pointer, focus, or tap, with the
   state's name in a label above it. Without JavaScript, or under
   prefers-reduced-motion, the map renders filled and still.
   Leads: every lead wraps with text-wrap: pretty so no line ends on
   one lonely word, and centered leads balance their lines.
   ============================================================ */
.um {
  --um-land: #E5EBF3; --um-on: color-mix(in srgb, var(--blue-600) 36%, white); --um-hot: var(--blue-600);
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 14fr);
  grid-template-areas: "copy map" "key map";
  column-gap: clamp(40px, 5vw, 88px); row-gap: 30px; align-items: start;
}
.um-copy { grid-area: copy; align-self: end; }
.um-copy .t-h2 { margin-top: 18px; }
.um-copy .t-lead { margin-top: 16px; }
.um-key { grid-area: key; }
.um-map { grid-area: map; align-self: center; }

/* the list: plain names on quiet fills, the swatch matches the map */
.um-cap { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.um-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; margin: 12px 0 24px -10px; }
.um-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px;
  border-radius: var(--radius-cell); font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--ink-700);
  cursor: default; white-space: nowrap; transition: background-color 200ms var(--ease-lux), color 200ms var(--ease-lux);
}
.um-chip::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--um-on);
  transition: background-color 200ms var(--ease-lux), box-shadow 200ms var(--ease-lux);
}
.um-chip.is-on { background: var(--blue-tint-8); color: var(--ink-900); }
.um-chip.is-on::before { background: var(--um-hot); box-shadow: 0 0 0 3px var(--blue-tint-12); }
.um-chip:focus-visible { outline-offset: 0; }

/* the map surface: one outline, a soft blue lift toward the center */
.um-map {
  position: relative; padding: clamp(18px, 3vw, 40px) clamp(14px, 2.6vw, 36px) clamp(16px, 2.2vw, 24px);
  border: var(--card-line); border-radius: var(--radius-surface);
  background: radial-gradient(70% 60% at 55% 45%, rgba(37,99,235,0.06), transparent 70%), linear-gradient(180deg, var(--ground-0), var(--ground-1));
}
.um-stage { position: relative; }
.um-svg { display: block; width: 100%; height: auto; overflow: visible; }
.um-land { fill: var(--um-land); }
.um-mesh { fill: none; stroke: #fff; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.um-st {
  fill: var(--um-on); stroke: #fff; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer;
  transition: fill 680ms var(--ease-lux) calc(var(--i, 0) * 80ms);
}
.um-done .um-st, .um-st.is-on { transition: fill 200ms var(--ease-lux); }
.um-st.is-on { fill: var(--um-hot); }
html.js .um:not(.um-in) .um-st:not(.is-on) { fill: var(--um-land); }

/* the label: the site's ink tooltip, gliding between states */
.um-tip {
  --ax: 0px;
  position: absolute; left: 0; top: 0; z-index: 2; translate: var(--tx, 0) var(--ty, 0);
  display: flex; flex-direction: column; gap: 1px; padding: 7px 12px 8px; border-radius: 10px;
  background: var(--ground-ink); color: #fff; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 12px 28px -10px rgba(15,23,42,0.45);
  opacity: 0; transition: opacity 160ms var(--ease-lux), translate 320ms var(--ease-lux);
}
.um-tip::after {
  content: ""; position: absolute; left: calc(50% + var(--ax)); bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border-radius: 0 0 3px 0; transform: rotate(45deg);
}
.um-tip b { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.um-tip span { font-size: 12px; line-height: 1.3; font-weight: 450; color: rgba(255,255,255,0.7); }
.um-tip.is-on { opacity: 1; }
.um-tip.um-snap { transition: none; }

.um-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: clamp(10px, 1.6vw, 18px); font-size: 13px; line-height: 1.4; color: var(--ink-600); }
.um-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--um-on); }
.um-hint { margin-left: auto; color: var(--ink-500); }
.um-hint-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .um-hint-hover { display: none; }
  .um-hint-tap { display: inline; }
}

@media (min-width: 1600px) {
  .um-chip { font-size: 15.5px; }
}
/* tablets and phones: heading, then the map, then the list */
@media (max-width: 1023px) {
  .um { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map" "key"; row-gap: 28px; }
  .um-copy { max-width: 640px; }
  .um-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .um-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
  .um-chip { font-size: 14.5px; }
  .um-tip { padding: 6px 10px 7px; }
  .um-tip b { font-size: 13px; }
  .um-tip span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .um-st, .um-chip, .um-chip::before { transition: none; }
  .um-tip { transition: opacity 120ms linear; }
  html.js .um:not(.um-in) .um-st:not(.is-on) { fill: var(--um-on); }
}

/* compare: the before and after table, moved from the home page, now opens with its own heading close under the hero */
.page-hero + #why-switch { padding-top: clamp(24px, 3.4vw, 48px); }

/* leads: no lonely last word, centered leads balance, compounds stay whole */
.t-lead { text-wrap: pretty; }
.center .t-lead, .t-lead.center { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* ============================================================
   LOOP 58: privacy by default. The site sets no cookies, stores
   nothing in the browser, and contacts no third party until the
   visitor asks. This block holds the CSS side of that:
   1. Self-hosted Inter: Inter v20 from @fontsource-variable/inter
      5.3.0, SIL Open Font License 1.1 (/assets/fonts/OFL.txt).
      One variable latin file carries both axes the site needs:
      wght for the in-between weights (450, 480, 550, 560) and opsz
      for font-optical-sizing. The 300 600 range caps rendering at
      600, the house maximum. The italic file downloads only on a
      page that renders italic. Each page head preloads the normal
      file (crossorigin is required even on the same origin):
      <link rel="preload" href="/assets/fonts/inter-latin-opsz-normal.woff2" as="font" type="font/woff2" crossorigin />
   2. The demo scheduler behind a click (js/site.js Loop 50): the
      idle state, the cookie notice, and the GPC line on /demo.
   3. Contact lines (footer email and phone) and, on /privacy, the
      cookies at a glance list and the GPC status line.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-opsz-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* phone numbers never break across lines */
a[href^="tel:"] { white-space: nowrap; }

/* footer: email and phone under the tagline, quiet until hovered */
.footer-grid .f-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 18px; font-style: normal; }
.footer-grid .f-contact a { display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; }
.footer-grid .f-contact svg { width: 16px; height: 16px; flex: none; color: var(--ink-400); transition: color var(--t-hover); }
.footer-grid .f-contact a:hover svg, .footer-grid .f-contact a:focus-visible svg { color: var(--blue-600); }

/* demo: until the visitor asks, the frame is a short, still preview with one button */
.book-load { display: none; }
html.js .book-card[data-state="idle"] .book-load { display: inline-flex; }
html.js .book-card[data-state="idle"] .book-frame { height: auto; }
html.js .book-card[data-state="idle"] .book-wait { position: static; gap: 20px; padding: clamp(36px, 5vw, 56px) 20px clamp(32px, 4.5vw, 48px); }
html.js .book-card[data-state="idle"] .book-skel { width: min(232px, 64%); padding-top: 34px; animation: none; opacity: 0.72; }
.book-msg:empty { display: none; }
.book-frame:focus { outline: none; }
.book-note { max-width: 92ch; margin-top: -6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); text-wrap: balance; }
.book-note a { color: var(--blue-700); text-decoration: none; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); transition: border-color var(--t-hover); }
.book-note a:hover { border-bottom-color: var(--blue-600); }
.book-gpc { margin-top: -12px; color: var(--ink-600); }
.book-gpc[hidden] { display: none; }
/* while loading, the notice stays with the message; once the calendar is up it leaves with the panel */
.book-card[data-state="loading"] .book-note { margin-top: 0; }

/* privacy: cookies at a glance, one outlined card with divided rows */
.legal-doc > ul.ck-list { list-style: none; margin: 22px 0 26px; padding: 0; border: var(--card-line); border-radius: var(--radius-card); background: var(--ground-0); overflow: hidden; }
.legal-doc > ul.ck-list > li {
  display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "where what" "tag what";
  align-items: start; gap: 6px 24px; margin: 0; padding: 16px 20px;
}
.legal-doc > ul.ck-list > li + li { border-top: var(--hairline); }
.ck-where { grid-area: where; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.ck-what { grid-area: what; font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.ck-tag {
  grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 9px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--ground-2); color: var(--ink-700);
}
.ck-tag::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.ck-tag[data-tone="none"] { background: color-mix(in srgb, #059669 10%, white); color: #047857; }
.ck-tag[data-tone="ask"] { background: var(--blue-tint-8); color: var(--blue-700); }

/* privacy: whether this browser sends Global Privacy Control, filled by js/site.js Loop 50 */
.legal-doc > p.gpc-status {
  display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 22px; padding: 12px 16px;
  border-radius: var(--radius-cell); background: var(--ground-2);
  font-size: 15px; line-height: 1.55; color: var(--ink-700);
}
.legal-doc > p.gpc-status[hidden] { display: none; }
.gpc-status::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: calc(0.775em - 4px); border-radius: 50%; background: var(--ink-400); }
.legal-doc > p.gpc-status[data-gpc="on"] { background: color-mix(in srgb, #059669 9%, white); color: #065F46; }
.legal-doc > p.gpc-status[data-gpc="on"]::before { background: #059669; box-shadow: 0 0 0 4px color-mix(in srgb, #059669 16%, transparent); }

@media (max-width: 560px) {
  .legal-doc > ul.ck-list > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "where" "tag" "what"; gap: 6px; padding: 14px 16px; }
  .ck-what { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-grid .f-contact svg, .book-note a { transition: none; }
}

/* ============================================================
   LOOP 59: add-ons in two groups, and nine FAQ topics.
   /pricing#hardware lists its add-ons as two labelled rows of the
   same .addon cards: Device add-ons, then Integration add-ons (the
   five priced integrations on Starter). The integration row holds
   five cards: five across on desktops, three on tablets, and two
   on phones with the last card full width.
   /faqs gains a Fees and processing topic, so the topic index holds
   nine cards: three across from 640px, two below that with the odd
   last card full width.
   ============================================================ */
.addon-cap { margin: 30px 0 12px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.addon-note { max-width: 680px; margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); text-wrap: pretty; }
.addon-grid.ag-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .addon-grid.ag-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .addon-cap { margin-top: 26px; }
  .addon-grid.ag-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addon-grid.ag-5 .addon:last-child { grid-column: 1 / -1; }
}

.fq-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 639px) {
  .fq-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fq-index li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================
   LOOP 60: a compact fee coverage stat for checkout copy.
   online-fundraising.html reuses the LOOP 54 stat (.fc-stat:
   number, label, meter, source) as a small card under the
   checkout list, linking to /pricing#fee-coverage. One outline
   per card (LOOP 49): the 1px line border, no shadow. The meter
   plays once on reveal; LOOP 54 already rests it without
   JavaScript and under reduced motion.
   ============================================================ */
.fc-stat.fc-mini { max-width: 440px; margin-top: 22px; padding: 18px 20px 16px; gap: 6px 18px; border: var(--card-line); border-radius: var(--radius-card); background: var(--ground-0); }
.fc-mini .fc-num { font-size: clamp(40px, 3.6vw, 48px); }
.fc-mini .fc-lbl { max-width: 26ch; font-size: 15px; }
.fc-mini .fc-meter { margin-top: 10px; }
.fc-mini .fc-src { margin-top: 6px; font-size: 12.5px; }
.fc-mini .fc-src a { margin-left: 2px; color: var(--blue-600); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); transition: border-color var(--t-hover); }
.fc-mini .fc-src a:hover { border-bottom-color: var(--blue-600); }
.fc-mini + .pay-row { margin-top: 20px; }
@media (max-width: 560px) {
  .fc-stat.fc-mini { padding: 16px 16px 14px; column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-mini .fc-src a { transition: none; }
}

/* ============================================================
   LOOP 61: device sweep. The FS-22 "Let donors cover processing
   fees" tile carries the owner's fee-coverage share as a compact
   stat, labelled as Donatefy platform data, beside a link to the
   full LOOP 54 panel on /pricing#fee-coverage. The stat is a fill
   in the page channel hue inside the card, never a second lined
   box (LOOP 49). .t-keep holds a phrase on one line in a display
   heading ("Tap to Pay" on /mobile-app), so the capability name
   never splits; the hero word reveal keeps the span as one unit.
   Static: no motion, so nothing changes under reduced motion.
   ============================================================ */
.t-display .t-keep { white-space: nowrap; }
.tile-pad .tile-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  max-width: 440px; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-cell);
  background: color-mix(in srgb, var(--family, #2563EB) 7%, white);
}
.tile-pad .tile-stat > p { max-width: none; margin: 0; }
.tile-pad .tile-stat .ts-num {
  grid-row: 1 / span 2; font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -0.03em;
  color: var(--family-ink, #1D4ED8); font-variant-numeric: tabular-nums;
}
.tile-pad .tile-stat .ts-num span { font-size: 0.62em; margin-left: 1px; }
.tile-pad .tile-stat .ts-lbl { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink-900); text-wrap: balance; }
.tile-pad .tile-stat .ts-src { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-500); }

/* ============================================================
   LOOP 62: three device add-ons on /pricing. S710 cellular left
   the Donatefy add-on list because Stripe bills it directly; a
   note under the grid says so. Three cards sit three across, then
   stack on phones.
   ============================================================ */
.addon-grid.ag-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .addon-grid.ag-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   LOOP 63: review fixes and add-on-only integrations.
   1. Integration add-ons: six cards (Bloomerang joins, priced on
      request) sit six across, three on tablets, two on phones.
   2. Card-foot spec strips line up across a row: each label cell
      reserves two lines (24px icon + 8px gap + 2 x 1.3 lines at
      12.5px) where the strips sit side by side.
   3. Hero strip values are words, not a number column, so they
      drop tabular figures (which widened the hyphen in "One-time"
      and "Wi-Fi").
   4. Short spec labels balance so none ends on a lonely word.
   5. Footer brand column: social glyphs share the left edge of
      the contact icons (each .f-soc centres a 19px glyph in 38px).
   6. Impact map: the reduced-motion rule now outweighs the fill
      transition on .um-done .um-st and .um-st.is-on.
   ============================================================ */
.addon-grid.ag-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) { .addon-grid.ag-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .addon-grid.ag-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dev-grid .ispec-tri > li { min-height: calc(32px + 2.6em); } }
@media (min-width: 961px) { .bento .ispec-tri > li { min-height: calc(32px + 2.6em); } }
.ispec > li b { font-variant-numeric: normal; }
.ispec-tri > li, .ispec-list > li, .cmp-rd td.rd-same > span, .tile-pad h3:not([class]) { text-wrap: balance; }
.tile-pad .tile-stat .ts-src { text-wrap: pretty; }
.footer-grid .f-brand .f-social { margin-left: -9.5px; }
@media (prefers-reduced-motion: reduce) {
  .um .um-st, .um-done .um-st, .um-st.is-on { transition: none; }
}

/* ============================================================
   LOOP 64: final review polish for the Stripe and fee sections.
   1. Contrast: "No cellular" on the /stripe-integration reader
      comparison moves to ink-500 (4.76:1; its icon stays dim so
      the row still reads as absent). Small muted text on tinted
      fills (/pricing nonprofit panel, the reader spec band) steps
      to ink-600, and the checkout "Total" label goes full white.
   2. The /stripe-integration rate chips match the /pricing fee
      chips: a flat fill inside the card, no inset ring (LOOP 49).
   3. No lonely last words: fgrid cell titles, accordion questions,
      the nonprofit heading and the fee mock label balance; the fee
      notes, captions, source lines and pledge items wrap pretty.
   Static: no motion, so nothing changes under reduced motion.
   ============================================================ */
.rx-net .rx-no { color: var(--ink-500); }
.np-side .np-rate-lbl, .np-side .np-req, .np-checks small, .np-rate .pfee-fix,
.rx-same .rx-label, .rx-same .rx-foot { color: var(--ink-600); }
.fc-total { color: #fff; }
.rate-ic { background: color-mix(in srgb, var(--blue-600) 11%, #fff); box-shadow: none; }
.fg-cell > h3, .acc-title, .np-title, .fc-opt-txt b { text-wrap: balance; }
.fc-src, .fc-demo figcaption, .pfee-notes p, .pledge li > span { text-wrap: pretty; }

/* ============================================================
   LOOP 65: integration add-ons carry their logos. Each card is
   one outline (LOOP 49): the logo sits on a soft 12px fill, then
   the tool name, then the monthly price. Prices are add-ons on
   any paid plan; no plan includes an integration.
   ============================================================ */
.addon.ad-int { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "logo name" "logo price"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; }
.ad-int .ad-logo { grid-area: logo; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-cell); background: var(--ground-1, #F6F8FB); }
.ad-int .ad-logo img { width: 26px; height: 26px; object-fit: contain; }
.ad-int .ad-name { grid-area: name; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-900); align-self: end; }
.ad-int .ad-price { grid-area: price; align-self: start; font-size: 13.5px; font-weight: 500; color: var(--ink-600); }
.ad-int .ad-price span { color: var(--ink-500); font-weight: 400; }

/* ============================================================
   LOOP 66: the nonprofit discount lives inside the processing
   fees component on /pricing. A full-width band closes the rate
   card grid: icon, a one-line promise in Stripe's terms, three
   numbered step chips, and the link to Stripe. One outline, a
   soft family tint, no nested boxes (LOOP 49); the steps are
   fills. It replaces the larger two-column panel.
   ============================================================ */
.pfee-grid > .pfee-npband { grid-column: 1 / -1; }
.pfee-npband {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 14px 22px;
  padding: 18px 22px; border: var(--card-line); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--family, #2563EB) 5%, #fff);
}
.npb-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-cell); background: color-mix(in srgb, var(--family, #2563EB) 12%, #fff); color: var(--family-ink, #1D4ED8); }
.npb-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.npb-head { min-width: 0; }
.npb-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--family-ink, #1D4ED8); }
.npb-title { margin: 2px 0 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
.npb-sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-600); }
.npb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.npb-steps li { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-cell); background: #fff; font-size: 13px; line-height: 1.4; color: var(--ink-700); text-wrap: balance; }
.npb-steps b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--family, #2563EB); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.npb-link { justify-self: end; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--blue-600); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); transition: border-color var(--t-hover); }
.npb-link:hover { border-bottom-color: var(--blue-600); }
.npb-link::after { content: " \2197"; }
@media (max-width: 1199px) {
  .pfee-npband { grid-template-columns: auto minmax(0, 1fr) auto; }
  .npb-steps { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pfee-npband { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .npb-steps { grid-template-columns: minmax(0, 1fr); }
  .npb-link { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .npb-link { transition: none; } }

/* ============================================================
   LOOP 67: the plan comparison on phones, plus two balance fixes
   on /pricing. Desktop and tablet tables are unchanged.
   1. "Compare plans in detail" (.cs-plans) at 720px and below.
      The plan row pins under the island nav as one compact strip:
      four short names and prices, Growth on its tint with a 2px
      top rule. The card stops clipping its content, so nothing
      between the strip and the page can turn into a scroller and
      the pin holds in every browser; the table rounds its own
      corners with clip-path, which never creates a scroller. Each
      feature keeps its label on a full-width line and its four
      values sit centered in equal columns under the pinned names.
      Group rows are quiet divider bands. On phones the strip shows
      prices alone (the Monthly price row sits right below). The
      markup carries explicit table roles, so the grid display
      keeps its table semantics for screen readers.
   2. The nonprofit band (LOOP 66) uses named areas on a fixed 44px
      icon track, so the full-width steps row no longer widens the
      icon column into a gap on tablets. At 1200px and up the link
      sits under the promise and the three step chips get the width
      to read in two lines instead of three; on tablets the link
      sits at the end of the promise row.
   3. Integration add-ons (LOOP 65): six across, the logo tile sits on
      top, then the name on one line, then the price. Three across
      (760px to 1119px) the logo sits beside them. Logos are sized
      by shape as on /integrations (Bloomerang square, Kindful mark
      only, Salesforce wide).
   ============================================================ */
@media (max-width: 720px) {
  .table-wrap.cs-wrap.cs-plans { overflow: visible; }
  .cs-wrap.cs-plans .cmp-spot {
    --cs-tracks: repeat(4, minmax(0, 1fr));
    clip-path: inset(0 round calc(var(--radius-surface) - 1px));
  }

  /* the pinned strip: name over price, centered on each value column */
  .cs-wrap.cs-plans .cmp-spot thead th { align-items: center; text-align: center; padding: 12px 4px 11px; }
  .cs-wrap.cs-plans .cmp-spot[data-rec] thead th { padding-top: 12px; }
  .cs-plans .cs-plan .cs-flag { display: none; }
  .cs-plans .cs-plan .cs-name { margin: 0 0 5px; font-size: 12.5px; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink-700); }
  .cs-plans .cs-plan .cs-price { margin-top: auto; line-height: 1; white-space: nowrap; }
  .cs-plans .cs-plan .cs-num { font-size: 16px; letter-spacing: -0.025em; }
  .cs-plans .cs-plan :is(.cs-per, .cs-from) { font-size: 10.5px; }
  .cs-plans .cs-plan .cs-per { margin-left: 1px; }
  .cs-plans .cs-rec .cs-name { color: var(--family-ink, var(--blue-700)); }
  .cs-wrap.cs-plans .cmp-spot[data-rec="4"] thead th.cs-rec { box-shadow: inset 0 2px 0 var(--family, #2563EB); }

  /* feature rows: a full-width label, then four centered values */
  .cs-wrap.cs-plans .cmp-spot tbody tr:not(.cs-group) > th { padding: 15px 16px 5px; font-size: 14px; line-height: 1.4; text-wrap: pretty; }
  .cs-wrap.cs-plans .cmp-spot tbody tr:not(.cs-group) > td { padding: 4px 4px 15px; text-align: center; font-size: 13px; line-height: 1.4; text-wrap: balance; }

  /* group rows: a divider band with the small uppercase label */
  .cs-wrap.cs-plans .cmp-spot tbody tr.cs-group > th { padding: 11px 16px 10px; }

  /* the Growth tint runs on through the label lines; column three spans 50% to 75% */
  .cs-wrap.cs-plans .cmp-spot[data-rec="4"] tbody tr > th {
    background-image: linear-gradient(90deg, transparent 50%, var(--cs-in) 50%, var(--cs-in) 75%, transparent 75%);
  }
}
/* phones: the strip shows the price alone; the Monthly price row right below says per month */
@media (max-width: 480px) {
  .cs-plans .cs-plan .cs-per { display: none; }
}
@media (max-width: 374px) {
  .cs-plans .cs-plan .cs-name { font-size: 12px; }
  .cs-plans .cs-plan .cs-num { font-size: 15px; }
  .cs-wrap.cs-plans .cmp-spot tbody tr:not(.cs-group) > td { font-size: 12.5px; }
}
/* the narrowest phones keep the pinned strip too, without a sideways scroller */
@media (max-width: 359px) {
  .table-wrap.cs-wrap.cs-plans { overflow: visible; }
  .cs-wrap.cs-plans .cmp-spot { min-width: 0; }
  .cs-wrap.cs-plans .cmp-spot thead { position: sticky; top: 72px; }
  .cs-plans .cs-plan .cs-num { font-size: 14.5px; }
  .cs-wrap.cs-plans .cmp-spot tbody tr:not(.cs-group) > th { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
  .cs-wrap.cs-plans .cmp-spot tbody tr:not(.cs-group) > td { padding-left: 3px; padding-right: 3px; font-size: 12px; }
}

/* 2. nonprofit band: named areas, and a fixed icon track so the full-width
   steps row can never widen the icon column into a gap */
.npb-ic { grid-area: ic; }
.npb-head { grid-area: head; }
.npb-steps { grid-area: steps; }
.npb-link { grid-area: link; }
@media (min-width: 1200px) {
  .pfee-npband {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "ic head steps" "ic link steps";
    row-gap: 8px;
  }
  .npb-head { align-self: end; }
  .npb-link { align-self: start; justify-self: start; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .pfee-npband { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic head link" "steps steps steps"; }
}
/* too narrow for three chips in two lines: one chip per line */
@media (min-width: 641px) and (max-width: 719px) {
  .npb-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pfee-npband { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic head" "steps steps" "link link"; }
}
.npb-sub { text-wrap: pretty; }

/* 3. integration add-ons: logo tile, name, price */
.addon.ad-int { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "price"; row-gap: 0; align-content: start; align-items: start; padding: 16px 16px 15px; }
.ad-int .ad-logo { width: 44px; height: 44px; margin-bottom: 12px; }
.ad-int .ad-logo img { width: 28px; height: 28px; }
.ad-int .ad-logo img[src$="/bloomerang.webp"] { width: 25px; height: 25px; border-radius: 6px; }
.ad-int .ad-logo img[src$="/kindful.webp"] { width: 32px; height: 19px; object-fit: cover; object-position: 50% 0; }
.ad-int .ad-logo img[src$="/salesforce.webp"] { width: 34px; height: 24px; }
.ad-int .ad-name { align-self: start; }
.ad-int .ad-price { margin-top: 2px; }
/* six across only where every name keeps one line; three across below that */
@media (min-width: 1024px) and (max-width: 1119px) { .addon-grid.ag-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* three wide cards: the logo sits beside the name and price */
@media (min-width: 760px) and (max-width: 1119px) {
  .addon.ad-int { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "logo name" "logo price"; column-gap: 14px; align-content: center; align-items: center; }
  .ad-int .ad-logo { margin-bottom: 0; }
  .ad-int .ad-name { align-self: end; }
  .ad-int .ad-price { align-self: start; }
}
/* narrow stacked cards: a little more room for "QuickBooks Online" on one line */
@media (max-width: 759px) { .addon.ad-int { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 400px) { .ad-int .ad-name { font-size: 13.5px; } }

/* ============================================================
   LOOP 68: the mobile menu becomes a sheet. Below 961px the
   burger opens one panel: a head row with the logo and the close
   button, the four groups as accordions (one open at a time),
   Pricing as a direct row, and a foot that never scrolls away
   with Sign in, See a demo, and the phone and email. On a phone
   the sheet grows out of the island and covers the screen, its
   head row sitting exactly where the island's logo and burger
   were; on a tablet it floats at the right over a scrim. Each
   link is a small icon tile, a title, and its one-line note, the
   device tiles in their channel hue, and a Ways to give strip
   under the rows gives the four channels as tiles. LOOP 49: rows
   are split by dividers and lit by fills; nothing inside the
   sheet draws a box of its own. js/site.js owns [hidden], .open,
   the page lock, and the focus trap. The older .mobile-menu and
   .mobile-close rules no longer match anything.
   ============================================================ */
.mnav { display: none; }
@media (max-width: 960px) {
  .mnav:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 400; }
  html.mnav-lock, html.mnav-lock body { overflow: hidden; }
  /* the floating demo bar slides away and the reading line hides while the sheet is open */
  html.mnav-lock .mcta { transform: translateY(110%); }
  html.mnav-lock body::before { visibility: hidden; }

  .mnav-sheet {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: #fff; overflow: hidden;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }

  /* head: logo and close button in the island's place */
  .mnav-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    height: var(--mn-h, 60px); margin: var(--mn-t, 16px) var(--mn-r, 16px) 0 var(--mn-l, 16px); padding: 0 11px 0 23px;
  }
  .mnav-brand { display: inline-flex; align-items: center; border-radius: 8px; }
  .mnav-brand img { height: 26px; width: auto; object-fit: contain; }
  .mnav-close {
    position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,0.05); color: var(--ink-900); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color var(--t-hover);
  }
  .mnav-close::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  .mnav-close svg { width: 18px; height: 18px; }
  .mnav-close:active { background: rgba(15,23,42,0.09); }

  /* the list scrolls between the head and the foot; a hairline shows once it has scrolled */
  .mnav-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin-top: 10px; padding: 4px 16px 20px;
    border-top: 1px solid transparent; transition: border-color 200ms var(--ease-lux);
  }
  .mnav.is-scrolled .mnav-body { border-top-color: var(--divider); }
  .mnav-edge { height: 1px; margin-bottom: -1px; }

  /* top rows: the four groups and Pricing, split by dividers */
  .mnav-toggle, .mnav-direct {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 12px 0 24px;
    background: none; border: 0; border-radius: var(--radius-cell); text-align: left; text-decoration: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink-900);
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-group, .mnav-direct { border-bottom: 1px solid var(--divider); }
  .mnav-direct { border-radius: 0; }
  .mnav-chev { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ink-400); transition: transform 300ms var(--ease-lux), color 200ms; }
  .mnav-group.open .mnav-chev { transform: rotate(180deg); color: var(--blue-600); }
  .mnav-note {
    margin-left: auto; padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--blue-tint-8); color: var(--blue-700);
    font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  }
  .mnav-go { flex: none; width: 16px; height: 16px; margin: 0 1px 0 4px; color: var(--ink-400); }
  .mnav-direct[aria-current="page"] { color: var(--blue-700); }

  /* a group opens by growing its row track; closed links leave the tab order through visibility */
  .mnav-sub {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows 300ms var(--ease-lux), visibility 0s linear 300ms;
  }
  .mnav-group.open > .mnav-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease-lux), visibility 0s; }
  .mnav-list {
    min-height: 0; overflow: hidden; display: grid; gap: 2px;
    opacity: 0; transition: opacity 180ms var(--ease-lux);
  }
  /* the space under the last link lives inside the clipped list, so a closed group is exactly its row */
  .mnav-list > :last-child { margin-bottom: 14px; }
  .mnav-group.open .mnav-list { opacity: 1; transition: opacity 260ms var(--ease-lux) 60ms; }

  /* links: icon tile, title, and one-line note */
  .mnav-link, .mnav-chip { --mnav-hue: var(--blue-600); }
  .mnav-link {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px;
    min-height: 52px; margin: 0 12px; padding: 7px 12px; border-radius: var(--radius-cell); text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: background-color var(--t-hover);
  }
  .mnav-kiosk { --mnav-hue: #7C3AED; }
  .mnav-handheld { --mnav-hue: #059669; }
  .mnav-tap { --mnav-hue: #0891B2; }
  .mnav-ic {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
    background: color-mix(in srgb, var(--mnav-hue) 9%, #fff); color: var(--mnav-hue);
    transition: background-color var(--t-hover), color var(--t-hover);
  }
  .mnav-ic svg { width: 18px; height: 18px; }
  .mnav-txt { min-width: 0; }
  .mnav-txt b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.011em; color: var(--ink-900); }
  .mnav-txt em { display: block; margin-top: 1px; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--ink-500); }
  .mnav-link:active { background: var(--ground-1); }
  .mnav-link[aria-current="page"] { background: color-mix(in srgb, var(--mnav-hue) 6%, #fff); }
  .mnav-link[aria-current="page"] .mnav-ic { background: var(--mnav-hue); color: #fff; }

  /* hardware closes on the published price line, a soft fill like the desktop menu */
  .mnav-promo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 6px 12px 0; padding: 12px 14px 12px 12px; border-radius: var(--radius-cell); text-decoration: none;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.08));
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-promo b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-900); }
  .mnav-promo em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--ink-600); }
  .mnav-promo svg { flex: none; width: 16px; height: 16px; color: var(--blue-600); }

  /* ways to give: the four channels as hue tiles under the list, a soft fill as wide as the rows, no outline */
  .mnav-ways { margin: 16px 0 0; padding: 14px 8px 8px; border-radius: var(--radius-card); background: var(--ground-1); }
  .mnav-k { margin: 0 0 6px 16px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
  .mnav-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .mnav-chip {
    display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 8px 2px 10px;
    border-radius: var(--radius-cell); text-align: center; text-decoration: none;
    font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-700);
    -webkit-tap-highlight-color: transparent; transition: background-color var(--t-hover);
  }
  .mnav-chip .mnav-ic { width: 44px; height: 44px; border-radius: var(--radius-cell); }
  .mnav-chip .mnav-ic svg { width: 20px; height: 20px; }
  .mnav-chip:active { background: #fff; }
  .mnav-chip[aria-current="page"] { color: var(--ink-900); }
  .mnav-chip[aria-current="page"] .mnav-ic { background: var(--mnav-hue); color: #fff; }

  /* foot: never scrolls away */
  .mnav-foot {
    flex: none; padding: 12px 16px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--divider); background: #fff;
  }
  .mnav-ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
  .mnav-ctas .cta { width: 100%; height: 48px; }
  .mnav-ctas .cta-secondary { justify-content: center; padding: 0 16px; }
  .mnav-ctas .cta-primary { justify-content: space-between; padding-left: 22px; }
  .mnav-contact { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; margin-top: 2px; }
  .mnav-contact a {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    font-size: 13px; color: var(--ink-500); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mnav-contact svg { flex: none; width: 15px; height: 15px; color: var(--ink-400); }

  /* the rows sit inside a scroller, so focus rings draw inward and are never clipped */
  .mnav-toggle:focus-visible, .mnav-direct:focus-visible, .mnav-link:focus-visible, .mnav-promo:focus-visible, .mnav-chip:focus-visible { outline-offset: -2px; }

  /* motion: the sheet grows from the island's pill to the full screen; the list and foot fade in behind it */
  .mnav-sheet {
    clip-path: inset(var(--mn-t, 16px) var(--mn-r, 16px) calc(100% - var(--mn-t, 16px) - var(--mn-h, 60px)) var(--mn-l, 16px) round calc(var(--mn-h, 60px) / 2));
    transition: clip-path 260ms var(--ease-lux);
  }
  .mnav.open .mnav-sheet { clip-path: inset(0px 0px 0px 0px round 0px); transition-duration: 380ms; }
  .mnav-body, .mnav-foot { opacity: 0; transition: opacity 140ms var(--ease-lux); }
  .mnav.open .mnav-foot { opacity: 1; transition: opacity 280ms var(--ease-lux) 90ms; }
  .mnav.open .mnav-body { opacity: 1; transition: opacity 280ms var(--ease-lux) 90ms, border-color 200ms var(--ease-lux); }
}
@media (max-width: 480px) {
  .mnav-brand img { height: 24px; max-width: 96px; }
}
/* narrow phones: each note still fits one line */
@media (max-width: 389px) {
  .mnav-link { column-gap: 10px; }
  .mnav-txt em { font-size: 12px; }
  .mnav-ways { padding-left: 4px; padding-right: 4px; }
  .mnav-chip { font-size: 12px; }
}
@media (max-width: 339px) {
  .mnav-txt em { display: none; }
  .mnav-link { min-height: 48px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 960px) {
  .mnav-close:hover { background: rgba(15,23,42,0.09); }
  .mnav-toggle:hover, .mnav-direct:hover, .mnav-link:hover { background: var(--ground-1); }
  .mnav-chip:hover { background: #fff; }
  .mnav-link:hover .mnav-ic, .mnav-chip:hover .mnav-ic { background: var(--mnav-hue); color: #fff; }
  .mnav-contact a:hover { color: var(--ink-900); }
}

/* tablets: a floating side sheet over a scrim, sliding in from the right */
@media (min-width: 600px) and (max-width: 960px) {
  .mnav:not([hidden]) { background: rgba(15,23,42,0); transition: background-color 300ms var(--ease-lux); }
  .mnav.open { background: rgba(15,23,42,0.28); }
  .mnav-sheet, .mnav.open .mnav-sheet {
    inset: 12px 12px 12px auto; width: 400px; border-radius: var(--radius-surface); box-shadow: var(--e3);
    clip-path: none;
  }
  .mnav-sheet { opacity: 0; transform: translateX(24px); transition: transform 260ms var(--ease-lux), opacity 200ms var(--ease-lux); }
  .mnav.open .mnav-sheet { opacity: 1; transform: none; transition: transform 380ms var(--ease-lux), opacity 240ms var(--ease-lux); }
  .mnav-head { height: 60px; margin: 10px 16px 0; padding: 0 12px 0 24px; }
  .mnav-body { margin-top: 6px; }
  .mnav-foot { padding-bottom: 6px; border-radius: 0 0 var(--radius-surface) var(--radius-surface); }
}

@media (prefers-reduced-motion: reduce) {
  .mnav:not([hidden]), .mnav-sheet, .mnav.open .mnav-sheet, .mnav-body, .mnav-foot, .mnav.open .mnav-body, .mnav.open .mnav-foot,
  .mnav-sub, .mnav-group.open > .mnav-sub, .mnav-list, .mnav-group.open .mnav-list, .mnav-chev, .mnav-link, .mnav-chip, .mnav-ic { transition: none; }
  .mnav-sheet, .mnav.open .mnav-sheet { clip-path: none; transform: none; }
}

/* ============================================================
   LOOP 69: balanced heads. A text-only page hero centers its
   stack (crumbs, eyebrow, title, lead, actions) on one axis with
   balanced lines and measured widths, so a wide screen no longer
   leaves the right half empty. Heroes with art or a layout of
   their own keep it: the solutions heroes with beam art
   (.bm-hero), the legal pages, the blog hub, the FAQ hub, posts,
   and guides, whose title shares the article's left edge.
   A split section head (.sec-head.hs) puts the heading on the
   left and its short lead on the right, bottoms aligned, so a
   heading and a sentence read as one band over the visual they
   introduce. Its second child is the lead, or a .hs-side holding
   the lead and a link. Below 961px it stacks like any .sec-head.
   /compare#fit: three compact fit cards, one outline each
   (LOOP 49); the channel chips are fills and the note sits under
   a divider.
   ============================================================ */
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) > .container { text-align: center; }
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) .t-display { max-width: 16em; margin-inline: auto; text-wrap: balance; }
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) .t-lead { max-width: 36em; margin-inline: auto; text-wrap: balance; }
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) :is(.crumbs ol, .cta-row) { justify-content: center; }
/* centered crumbs that wrap on a phone end the first line on a chevron instead of starting the next with one */
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) .crumbs li + li::before { content: none; }
.page-hero:not(.bm-hero, .legal-hero, .blog-hero, .fq-hero, .post-hero):not(:has(+ .article)) .crumbs li:not(:last-child)::after {
  content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--ink-400); border-right: 1.5px solid var(--ink-400); transform: rotate(45deg);
}

/* split section head */
.sec-head.hs .t-h2 { text-wrap: balance; }
.sec-head.hs .t-lead { text-wrap: pretty; }
@media (min-width: 961px) {
  .sec-head.hs {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 112px); align-items: end;
  }
  .sec-head.hs > .t-h2 { margin-bottom: 0; }
  .sec-head.hs .t-lead { max-width: 32em; text-wrap: balance; }
}

/* plan fit cards */
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fit-card {
  --c: #2563EB;
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 26px 22px;
  border: var(--card-line); border-radius: var(--radius-card);
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 7%, #fff), #fff 64%);
  transition: box-shadow var(--t-hover);
}
.fit-card.fit-person { --c: #7C3AED; }
.fit-card.fit-multi { --c: #334155; }
@media (hover: hover) and (pointer: fine) { .fit-card:hover { box-shadow: var(--e2); } }
.fit-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.fit-ch > span {
  --k: #2563EB;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-cell);
  color: var(--k); background: color-mix(in srgb, var(--k) 11%, #fff);
}
.fit-ch .k-kiosk { --k: #7C3AED; }
.fit-ch .k-handheld { --k: #059669; }
.fit-ch .k-tap { --k: #0891B2; }
.fit-ch .k-sites { --k: #334155; }
.fit-ch svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fit-name { margin-top: 20px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900); }
.fit-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; margin-top: 10px; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.05; }
.fit-price b { font-size: clamp(32px, 2.8vw, 40px); font-weight: 600; letter-spacing: -0.035em; }
.fit-price small { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-500); }
.fit-plan { margin-top: 8px; padding-bottom: 20px; font-size: 13.5px; line-height: 1.45; color: var(--ink-500); }
.fit-note { width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--divider); font-size: 14px; line-height: 1.5; color: var(--ink-700); text-wrap: pretty; }
.fit-more { margin-top: 28px; text-align: center; }
/* side by side, the cards share their rows, so prices and dividers line up whatever wraps */
@media (min-width: 961px) {
  .fit-grid { row-gap: 0; }
  .fit-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; justify-items: start; align-content: start; }
  .fit-note { margin-top: 0; }
}
/* one card per row: the price moves to the right of the title, the note stays under the divider */
@media (max-width: 960px) {
  .fit-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .fit-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ch price" "name price" "plan plan" "note note";
    align-items: end; column-gap: 16px; padding: 22px 24px 18px;
  }
  .fit-ch { grid-area: ch; align-self: start; }
  .fit-name { grid-area: name; margin-top: 16px; }
  .fit-price { grid-area: price; justify-content: flex-end; margin-top: 0; }
  .fit-plan { grid-area: plan; margin-top: 4px; padding-bottom: 16px; }
  .fit-note { grid-area: note; }
}
@media (max-width: 560px) {
  .fit-card { padding: 20px 20px 16px; }
  .fit-ch > span { width: 36px; height: 36px; }
  .fit-name { margin-top: 16px; }
  .fit-price { margin-top: 8px; }
  .fit-price b { font-size: 32px; }
  .fit-plan { margin-top: 6px; padding-bottom: 16px; }
  .fit-note { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .fit-card { transition: none; } }

/* ============================================================
   LOOP 70: callout visuals. Three text-only .interlude.lite
   callouts (recurring giving on /online-fundraising, the Donor
   Portal on /product, boards and grants on
   /solutions-human-services) left the right half of a large
   tinted card empty. One shared split, .co-split, pairs the copy
   with a calm visual the way .bm-split does on /admin-reporting
   and /mobile-app, and stacks copy first below 1024px. The
   visual is a bare self-framed screenshot (.co-shot) or an
   illustrative HTML mock (.co-card). A mock floats on the
   callout's tint, so its one outline is its shadow (LOOP 49);
   everything inside it is a fill or a divider. Bars and the plan
   track settle in once on reveal, and simply rest in place under
   reduced motion or without JS.
   ============================================================ */
.interlude.lite.co-split {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center; gap: clamp(32px, 4vw, 64px);
}
.interlude.lite.co-split.co-shot { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.co-split .co-copy > h2.t-h2 { margin-top: 0; text-wrap: balance; }
.co-vis { container: co / inline-size; display: flex; justify-content: center; min-width: 0; }

/* the mock card: one shadow, fills and dividers inside */
.co-card {
  width: 100%; max-width: 460px; display: grid; gap: 20px; padding: 26px;
  border-radius: var(--radius-card); background: #fff; box-shadow: var(--e3);
  font-size: 14px; line-height: 1.4; color: var(--ink-700); text-align: left;
}
.co-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-cell);
  background: color-mix(in srgb, var(--family, #2563EB) 11%, #fff); color: var(--family-ink, #1D4ED8);
}
.co-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.co-ttl { display: grid; min-width: 0; line-height: 1.3; }
.co-ttl small { font-size: 12.5px; color: var(--ink-500); }
.co-ttl b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.co-tag {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: var(--radius-pill); background: var(--ground-2); color: var(--ink-600);
  font-size: 12px; font-weight: 600; line-height: 1.2;
}
.co-tag.co-ok { background: rgba(5,150,105,0.1); color: #047857; }
.co-tag.co-ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.co-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.co-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-cell);
  background: var(--ground-1); font-size: 13.5px; font-weight: 500; color: var(--ink-700);
}
.co-foot svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--family-ink, #1D4ED8); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co-foot .co-go { margin-left: auto; stroke: var(--ink-400); }

/* recurring plan: amount and next charge, then the monthly track */
.cp-amt { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--divider); }
.cp-val { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--ink-500); white-space: nowrap; }
.cp-val b { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cp-next { display: grid; justify-items: end; line-height: 1.3; text-align: right; }
.cp-next small { font-size: 12.5px; color: var(--ink-500); }
.cp-next b { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.cp-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 2px 0; }
.cp-track > span { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-500); }
.cp-track > span + span::before {
  content: ''; position: absolute; top: 11px; right: calc(50% + 16px); width: calc(100% - 32px); height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--family, #2563EB) 40%, #fff);
}
.cp-track > .cp-due::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--family, #2563EB) 40%, #fff) 0 4px, transparent 4px 8px); }
.cp-track i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--family, #2563EB); }
.cp-track i svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cp-track .cp-due { color: var(--family-ink, #1D4ED8); font-weight: 600; }
.cp-track .cp-due i { background: #fff; box-shadow: inset 0 0 0 2px var(--family, #2563EB); }
.cp-track .cp-due i::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--family, #2563EB); }

/* board report: a channel split, program bars, settlement notes */
.cr-block { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--divider); }
.cr-stack { display: flex; gap: 3px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; }
.cr-stack i { flex: var(--w) 1 0; min-width: 0; background: var(--c); }
.cr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-600); }
.cr-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cr-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink-700); }
.cr-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-row i { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--ground-2); overflow: hidden; }
.cr-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--family, #2563EB) 30%, var(--ink-700)); }
.cr-foot { flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.cr-foot span { display: inline-flex; align-items: center; gap: 8px; }

/* large screens: the card keeps filling its column as --container steps up */
@media (min-width: 1600px) { .co-card { max-width: 520px; padding: 30px; gap: 22px; } }

/* narrow cards (phones): tighter padding, program names above their bars */
@container co (max-width: 360px) {
  .co-card { padding: 18px; gap: 16px; }
  .co-head { gap: 10px; }
  .co-ic { width: 36px; height: 36px; }
  .co-ic svg { width: 20px; height: 20px; }
  .co-ttl b { font-size: 15px; }
  .co-tag { padding: 4px 9px; }
  .cp-val b { font-size: 34px; }
  .cr-legend { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 22px; }
  .cr-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cr-foot { justify-content: flex-start; }
}
/* the smallest phones: titles and the portal link stay on one line */
@container co (max-width: 300px) {
  .co-tag.co-ok::before, .co-foot .co-go { display: none; }
  .co-foot { padding-inline: 12px; font-size: 13px; }
}

/* tablets and phones: copy first, the visual under it */
@media (max-width: 1023px) {
  .interlude.lite.co-split, .interlude.lite.co-split.co-shot { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .co-vis { justify-content: flex-start; }
  .co-card { max-width: 540px; }
  .co-shot .co-vis { max-width: 640px; }
}
/* phones: leads run past the six lines balance handles, so they wrap pretty (no lone last word) */
@media (max-width: 560px) { .co-split .co-copy > .t-lead { text-wrap: pretty; } }
/* phones: the screenshot zooms in on its right-hand columns (type, status, amount, receipt) so the
   text stays legible; the cut edges fade out instead of ending on a hard line */
@media (max-width: 560px) {
  .co-shot .co-vis {
    overflow: hidden; aspect-ratio: 1.15;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px), linear-gradient(180deg, #000 70%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 40px), linear-gradient(180deg, #000 70%, transparent);
    mask-composite: intersect;
  }
  .co-shot .co-vis > img { flex: none; align-self: flex-start; width: 215.5%; max-width: none; margin: -10.2% 0 0 -115.5%; filter: none; }
}

/* motion: the bars grow and the plan track steps in once, after the card reveals */
@media (prefers-reduced-motion: no-preference) {
  .co-split .cr-stack, .co-split .cr-row i::after { transform-origin: left center; transition: transform 1100ms var(--ease-lux) 280ms; }
  .co-split .cr-row i::after { transition-delay: calc(420ms + var(--i, 0) * 90ms); }
  .co-split .cp-track > span { transition: opacity 600ms var(--ease-lux), transform 600ms var(--ease-lux); transition-delay: 300ms; }
  .co-split .cp-track > span:nth-child(2) { transition-delay: 400ms; }
  .co-split .cp-track > span:nth-child(3) { transition-delay: 500ms; }
  .co-split .cp-track > span:nth-child(4) { transition-delay: 600ms; }
  html.js .co-split.reveal:not(.in) .cr-stack, html.js .co-split.reveal:not(.in) .cr-row i::after { transform: scaleX(0); }
  html.js .co-split.reveal:not(.in) .cp-track > span { opacity: 0; transform: translateY(6px); }
}

/* ============================================================
   LOOP 71: review fixes for the balance and mobile batch.
   1. Short screens (a phone turned sideways): the menu's fixed
      head and foot shrink so the list keeps most of the height;
      the contact row hides (the footer carries phone and email).
      The floating sheet's inset and head tighten only from 600px
      wide, so the phone sheet still grows from the island.
   2. Tablet menu sheet hugs its content and caps at the viewport.
   3. Kiosks chip lights on both kiosk pages (aria-current="true").
   4. Solutions heroes on phones: the beam art hides below 601px,
      so the text centers like every other text-only hero.
   5. Nonprofit band on phones lines up with the rate cards: the
      same 20px inset, icon top-aligned, 14px icon gap.
   6. Processing fee note links stay on one line.
   ============================================================ */
@media (max-width: 960px) and (max-height: 500px) {
  .mnav-contact { display: none; }
  .mnav-foot { padding-top: 10px; padding-bottom: 10px; }
  .mnav-ctas .cta { height: 44px; }
}
@media (min-width: 600px) and (max-width: 960px) and (max-height: 500px) {
  .mnav-sheet, .mnav.open .mnav-sheet { inset: 8px 8px 8px auto; }
  .mnav-head { height: 48px; margin-top: 6px; }
  .mnav-body { margin-top: 4px; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .mnav-sheet, .mnav.open .mnav-sheet { bottom: auto; max-height: calc(100% - 24px); }
}
@media (max-width: 960px) {
  .mnav-chip[aria-current="true"] { color: var(--ink-900); }
  .mnav-chip[aria-current="true"] .mnav-ic { background: var(--mnav-hue); color: #fff; }
}
@media (max-width: 600px) {
  .page-hero.bm-hero .bm-hero-copy { text-align: center; }
  .page-hero.bm-hero .bm-hero-copy :is(.t-display, .t-lead) { margin-inline: auto; text-wrap: balance; }
  .page-hero.bm-hero .cta-row { justify-content: center; }
}
@media (max-width: 640px) {
  .pfee-npband { padding: 20px; column-gap: 14px; }
  .npb-ic { align-self: start; }
  .npb-steps li { padding-inline: 10px; }
}
.pfee-notes a { white-space: nowrap; }

/* ============================================================
   LOOP 72: App Store and Google Play badges. Official artwork
   only, never recolored, rotated, or animated (Apple and Google
   badge rules). The App Store badge comes first, both badges
   share one height (Google Play must be the same size or larger,
   and its artwork is wider), and every badge keeps clear space
   of at least a quarter of its height. Apple allows one App
   Store badge per layout, so the footer pair hides on any page
   that already shows the hero pair (/mobile-app).
   ============================================================ */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.store-badges a { display: block; flex: none; line-height: 0; border-radius: 9px; }
.store-badges a:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
.store-badges img { display: block; width: auto; height: 100%; }
.store-badges .sb-apple, .store-badges .sb-google { height: 40px; }
.sb-hero { margin-top: 18px; padding: 2px 0; }
.sb-hero .sb-apple, .sb-hero .sb-google { height: 48px; }
.sb-foot { margin-top: 20px; }
.footer-grid .store-badges a { padding: 0; }
body:has(.sb-hero) .sb-foot { display: none; }
.footer-tm { margin: 14px 0 0; max-width: 820px; font-size: 11.5px; line-height: 1.55; color: var(--ink-500); text-wrap: pretty; }
@media (max-width: 600px) {
  .sb-hero { justify-content: flex-start; }
  .sb-hero .sb-apple, .sb-hero .sb-google { height: 44px; }
}

/* ============================================================
   LOOP 73: three Stripe rate cards. The manually entered card
   rate came off /pricing and /stripe-integration, so both rate
   grids run three across from 761px up (no lone card on its own
   row on tablets) and stack below that.
   ============================================================ */
.pfee-grid, .rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 761px) and (max-width: 1100px) {
  .pfee-grid, .rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pfee-grid, .rates { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   LOOP 74: buttons on phones. Full-width buttons centered their
   label with the arrow pinned to the far edge, which read like a
   form field; now the label and arrow sit together in the middle,
   the primary gets a 52px tap height, and stacked pairs sit 10px
   apart. Plan cards, the menu sheet and the sticky bar follow the
   same pattern. The island's demo pill drops its arrow to stay
   light, and fades out once the sticky bottom bar is showing, so
   the screen never carries two pinned "See a demo" buttons.
   Desktop is unchanged.
   ============================================================ */
@media (max-width: 560px) {
  .cta-row { gap: 10px; }
  .cta-row .cta, .plan-card .cta, .price-card .cta {
    width: 100%; justify-content: center; gap: 10px;
    padding: 6px 8px 6px 22px; text-align: center;
  }
  .cta-row .cta-primary { height: 52px; }
  .cta-row .cta .arrow-cell, .plan-card .cta .arrow-cell { width: 32px; height: 32px; }
  .mnav-ctas .cta-primary { justify-content: center; gap: 10px; padding-left: 18px; }
  .island-nav .cta-compact { height: 36px; padding: 0 15px; gap: 0; }
  .island-nav .cta-compact .arrow-cell { display: none; }
}
@media (max-width: 820px) {
  .mcta .cta { gap: 10px; padding: 0 6px 0 20px; }
  .mcta .cta .arrow-cell { width: 32px; height: 32px; }
  .island-nav .cta-compact { transition: opacity 240ms var(--ease-lux), visibility 240ms; }
  body:has(> .mcta.show) .island-nav .cta-compact { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .island-nav .cta-compact { transition: none; }
}