/* manual style start */
.header-logo {
    width: 144px;
}
.mt-0 {
    margin-top:0;
}
/* manual style end */

/* css/style.css */
/* PayPrompt by Osian — design system per project instructions §8 */

:root {
  --navy: #1E2A78;
  --navy-2: #232C8E;
  --indigo: #4C5BD4;
  --indigo-light: #5B6BE8;
  --ink: #1E293B;
  --muted: #64748B;
  --border: #E2E8F0;
  --border-navy: #C7CEF0;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-indigo: #EEF1FB;
  --accent: #F6CBA6;
  --accent-deep: #D97706;
  /* Category system, matched to the product UI (performance tiers), pastel register */
  --cat-blue: #6B96E4;   --cat-blue-blob: #D6E3FA;   --cat-blue-border: #E3EBFB;
  --cat-green: #7BB489;  --cat-green-blob: #D8ECDD;  --cat-green-border: #E2F1E6;
  --cat-gold: #C9A558;   --cat-gold-blob: #F1E4C3;   --cat-gold-border: #F4EAD5;
  --cat-red: #CE8482;    --cat-red-blob: #F6DCDB;    --cat-red-border: #F8E5E4;
  --cat-violet: #9B7FE0; --cat-violet-blob: #E6DFF8;--cat-violet-border: #ECE7FA;
  --chip-blue-bg: #DBEAFE;   --chip-blue: #2563EB;
  --chip-green-bg: #D1FAE5;  --chip-green: #059669;
  --chip-amber-bg: #FEF3C7;  --chip-amber: #D97706;
  --chip-violet-bg: #EDE9FE; --chip-violet: #7C3AED;
  --success: #22C55E;
  --cta: #38C63A;        /* highlight green: primary CTAs + selected headers only */
  --cta-deep: #2CA92E;
  --radius: 18px;
  --maxw: 1120px;
  --shadow-card: 0 16px 40px rgba(30, 42, 120, 0.10);
  --shadow-deep: 0 24px 64px rgba(30, 42, 120, 0.14);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--navy); font-weight: 600; line-height: 1.18; }
h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.008em; }
h3 { font-size: 20px; }

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

/* ---------- Motion primitives (CSS only) ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes idle-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}
@keyframes grow-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Scroll reveals: JS adds .reveal + .in via one IntersectionObserver, runs once.
   Reveal is a one-shot animation (not a transition) so no transition or delay
   lingers on the element afterwards, and hover states stay instant.
   Without JS (or with reduced motion) nothing is hidden. */
.reveal { opacity: 0; }
.reveal.in {
  animation: reveal-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--rd, 0s);
}
.reveal.in.no-delay { animation: none; opacity: 1; }
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Eyebrow pill ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--bg-indigo);
  border: 1px solid #DDE3F8;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--indigo-light));
  flex: none;
}

.muted { color: var(--muted); }
.lead { font-size: 19px; color: var(--muted); }

section { padding: 96px 0; position: relative; }
section.tight { padding: 56px 0; }
.soft { background: var(--bg-soft); }

/* Soft sections get a faint dot grid that fades at the edges */
.soft::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30, 42, 120, 0.07) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}
.soft > .container { position: relative; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head p { margin-top: 16px; }
.section-head h2 { position: relative; padding-bottom: 18px; }
/* four-segment underline: the product's tier bar as a brand device */
.section-head h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 72px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--navy) 0 40%,
    var(--cat-blue-blob) 40% 60%,
    var(--cat-gold-blob) 60% 80%,
    var(--cat-green-blob) 80% 100%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--cta), var(--cta-deep) 130%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(56, 198, 58, 0.30);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--cta-deep); color: #fff; box-shadow: 0 12px 28px rgba(56, 198, 58, 0.38); }
.btn-ghost { background: rgba(255,255,255,0.7); color: var(--navy); border-color: var(--border-navy); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--navy); background: #fff; box-shadow: 0 8px 20px rgba(30, 42, 120, 0.10); }
a.btn::after { content: "→"; font-weight: 700; transition: transform 0.2s ease; }
a.btn:hover::after { transform: translateX(4px); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
.logo-lockup { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.logo-lockup:hover { text-decoration: none; }
.logo-lockup .wordmark {
  font-size: 23px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--navy) 40%, var(--indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-lockup .by-osian { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > .nav-item { position: relative; }
.main-nav a.nav-link, .main-nav button.nav-link {
  display: inline-block; padding: 10px 14px;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  background: none; border: none; font-family: inherit; cursor: pointer;
  position: relative;
}
.main-nav a.nav-link::before, .main-nav button.nav-link::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a.nav-link:hover, .main-nav button.nav-link:hover { color: var(--navy); text-decoration: none; }
.main-nav a.nav-link:hover::before, .main-nav button.nav-link:hover::before { transform: scaleX(1); }
.caret { font-size: 10px; margin-left: 3px; color: var(--muted); }

.dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-deep);
  padding: 12px 0;
  animation: fade-up 0.25s ease both;
}
.nav-item.open .dropdown { display: block; }
.dropdown .group-label {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 10px 18px 4px;
}
.dropdown a {
  display: block; padding: 9px 18px;
  font-size: 15px; color: var(--ink);
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
.dropdown a:hover {
  background: var(--bg-indigo); text-decoration: none; color: var(--navy);
  border-left-color: var(--navy); padding-left: 22px;
}

.nav-cta { margin-left: 12px; }
.nav-cta .btn { padding: 10px 20px; font-size: 15px; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 26px; color: var(--navy); line-height: 1; padding: 6px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 104px 0 88px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(76, 91, 212, 0.12), transparent 62%),
    radial-gradient(820px 480px at -8% 108%, rgba(246, 203, 166, 0.22), transparent 60%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30, 42, 120, 0.08) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60% 80% at 70% 20%, #000 0%, transparent 100%);
          mask-image: radial-gradient(60% 80% at 70% 20%, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero > .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }

/* homepage hero: quieter background than the shared .hero, more room for the visual */
.hero-home {
  padding: 100px 0 96px;
  background: radial-gradient(900px 480px at 88% -14%, rgba(76, 91, 212, 0.07), transparent 62%);
}
.hero-home::before { display: none; }
.hero-home .hero-grid { grid-template-columns: 0.88fr 1.12fr; gap: 76px; }

/* hero journey: six-stage product walkthrough (tablist + stacked panes) */
.journey { position: relative; }

/* desk groups: who owns each stretch of the journey */
.journey-personas {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 10px;
}
.jp-desk {
  position: relative; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 9px;
}
.jp-desk::after {
  content: "";
  position: absolute; left: 3px; right: 3px; bottom: 0; height: 5px;
  border: 1px solid var(--border-navy); border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.journey-steps {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.journey-step {
  border: none; background: none; padding: 0; cursor: pointer;
  text-align: left; color: var(--muted);
  white-space: nowrap; min-width: 0;
}
.journey-step .jbar {
  display: block; height: 2.5px; border-radius: 999px;
  background: var(--border-navy); overflow: hidden; margin-bottom: 8px;
}
.journey-step .jbar b {
  display: block; height: 100%; width: 0; background: var(--navy);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-step.active .jbar b { width: 100%; }
.journey-step .jn {
  font-size: 10.5px; font-weight: 700; color: inherit;
  border: 1px solid var(--border-navy); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-right: 5px;
}
.journey-step .jl { font-size: 12px; font-weight: 600; }
.journey-step.active { color: var(--navy); }
.journey-step.active .jn { background: var(--navy); border-color: var(--navy); color: #fff; }
.journey-step:hover:not(.active) { color: var(--navy); }

/* schematic cursor: walks the rows, then clicks the next step */
.jcursor {
  position: absolute; top: 0; left: 0; z-index: 5;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  opacity: 0;
}
.journey.touring .jcursor { opacity: 1; }
.jcursor svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.30)); }
.jcursor::before {
  content: "";
  position: absolute; left: -7px; top: -7px; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--navy);
  opacity: 0; transform: scale(0.4);
}
.jcursor.click svg { animation: jcursor-press 0.28s ease-out; }
.jcursor.click::before { animation: jcursor-ring 0.45s ease-out; }
@keyframes jcursor-press { 40% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes jcursor-ring { 0% { opacity: 0.45; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.05); } }
.journey.manual .jcursor { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .jcursor { display: none; } }

.journey-frame { box-shadow: var(--shadow-deep); }
/* the visual leads the hero: scale the mock up alongside the larger column */
.journey-frame.product-mock { font-size: 14.5px; }
.journey .mock-titlebar { padding: 15px 20px; }
.journey .mock-titlebar .mock-name { font-size: 14.5px; }
.journey .mock-body { padding: 22px; }
.journey .mock-row { padding: 12px 14px; margin-bottom: 9px; }
.journey .mock-caption { padding: 12px 22px 18px; font-size: 12.5px; }
.journey-panes { display: grid; }
.journey-pane {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.journey-pane.active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}
/* rows inside the active pane step in one after another */
@media (prefers-reduced-motion: no-preference) {
  .journey-pane .ji { opacity: 0; transform: translateY(7px); }
  .journey-pane.active .ji {
    animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.3s + var(--d, 0s));
  }
}
.journey .v.ok { color: var(--chip-green); }
.journey .v.ok::before { content: "✓ "; font-weight: 700; }
.journey .v.down { color: var(--cat-red); }
.jdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: 0;
}
.jdot.green { background: var(--chip-green); }
.jdot.red { background: var(--cat-red); }
.jdot.gold { background: var(--chip-amber); }
.jdot.violet { background: var(--chip-violet); }
/* maker-checker state flips once per visit to the Approve stage */
.jswap { position: relative; display: inline-block; }
.jswap span { white-space: nowrap; }
.jswap .st { position: absolute; right: 0; top: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .journey-pane.active .jswap .base { animation: jswap-out 0.3s ease-out 2.4s both; }
  .journey-pane.active .jswap .st { animation: jswap-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 2.5s both; }
}
@media (prefers-reduced-motion: reduce) {
  .jswap .base { visibility: hidden; }
  .jswap .st { opacity: 1; }
}
@keyframes jswap-out { to { opacity: 0; } }
@keyframes jswap-in { to { opacity: 1; } }

.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 34px; }

/* staggered entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow      { animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
  .hero h1, .hero .hero-h { animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
  .hero .lead         { animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
  .hero .btn-row      { animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
  .hero .hero-trust   { animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.52s both; }
  .hero .hero-visual  { animation: fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
}

/* highlighted phrase in H1: the page's single accent element */
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: 4px;
  height: 0.42em; border-radius: 4px;
  background: rgba(56, 198, 58, 0.30);
  z-index: -1;
  transform-origin: left;
}
/* highlight draws itself left to right once the headline has rendered */
@media (prefers-reduced-motion: no-preference) {
  .hl::after { animation: draw-hl 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
}
@keyframes draw-hl { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.hero-trust span { font-size: 14px; color: var(--muted); font-weight: 500; }
.hero-trust span::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: 7px; }

/* layered hero visual */
.hero-visual { position: relative; }
.hero-visual .product-mock { box-shadow: var(--shadow-deep); }

/* ---------- Centered section variant ---------- */
.center-head .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.center-head .section-head h2::after { left: 50%; transform: translateX(-50%); }
.center-head .eyebrow { margin-left: auto; margin-right: auto; }

/* ---------- Certification duo (security section) ---------- */
.cert-duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 920px;
  margin: 0 auto;
}
.cert-duo .cert-card {
  flex-direction: column;
  text-align: center;
  gap: 18px;
  padding: 44px 40px 38px;
  border-radius: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cert-duo .cert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); border-color: var(--border-navy); }
.cert-duo .cert-card img { height: 120px; }
.cert-duo .cert-card .cert-name { font-size: 22px; }
.cert-duo .cert-card .cert-sub { font-size: 15px; max-width: 340px; margin: 6px auto 0; }
@media (max-width: 700px) {
  .cert-duo { grid-template-columns: 1fr; }
}

/* ---------- Certification card (security section) ---------- */
.cert-card {
  display: flex; align-items: center; gap: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}
.cert-card img { height: 92px; width: auto; flex: none; }
.cert-card .cert-name { font-size: 19px; font-weight: 700; color: var(--navy); }
.cert-card .cert-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 600px) {
  .cert-card { padding: 18px 20px; gap: 16px; }
  .cert-card img { height: 64px; }
}

/* ---------- Product mock ---------- */
.product-mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: 13.5px;
}
.feature .product-mock {
  transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.feature > div:first-child .product-mock { transform: perspective(1400px) rotateY(5deg) rotateX(1.5deg); }
.feature .product-mock:hover { transform: perspective(1400px) rotateY(0) rotateX(0); box-shadow: var(--shadow-deep); }
.mock-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-soft), #F1F4F9);
}
.mock-titlebar .mock-name { font-weight: 600; color: var(--navy); font-size: 13.5px; }
.mock-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--chip-green-bg); color: var(--chip-green);
}
.mock-body { padding: 18px; }
.mock-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  margin-bottom: 8px; background: #fff;
}
.mock-row .k { color: var(--muted); }
.mock-row .v { font-weight: 600; color: var(--ink); text-align: right; }
.mock-row.highlight { border-color: var(--border-navy); background: #F5F7FF; }
.mock-row.highlight .v { color: var(--navy); }
.mock-bar-track { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 6px; }
.mock-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light));
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .mock-bar-fill { animation: grow-bar 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
}
.mock-caption { padding: 10px 18px 16px; font-size: 12px; color: var(--muted); }

/* ---------- Hero flow lines: data flows in, payout comes out ---------- */
.flow-lines {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.flow-lines path {
  fill: none;
  stroke: rgba(30, 42, 120, 0.30);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
}
.flow-lines circle { fill: rgba(30, 42, 120, 0.35); }
.flow-lines .amber { fill: var(--accent-deep); }
@media (prefers-reduced-motion: no-preference) {
  .flow-lines path { stroke-dashoffset: 240; animation: draw-line 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .flow-lines path:nth-of-type(2) { animation-delay: 0.25s; }
  .flow-lines path:nth-of-type(3) { animation-delay: 0.5s; }
  .flow-lines circle { animation: fade-up 0.4s ease-out both; animation-delay: 1.1s; }
}
@keyframes draw-line { from { stroke-dashoffset: 240; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }

/* ---------- Logo bars ---------- */
.proof-bar { padding: 44px 0 60px; text-align: center; }
.proof-bar .eyebrow { margin-bottom: 26px; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.logo-row .logo-frame {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 34px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.logo-row .logo-frame:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.logo-row img { height: 42px; width: auto; }

/* marquee client wall */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  padding: 12px 0;
}
.marquee-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 30s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
.marquee-group { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.marquee-group img { height: 52px; width: auto; transition: transform 0.25s ease; }
.marquee-group img:hover { transform: scale(1.06); }

.logo-wall { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; margin-top: 8px; }
.logo-wall img { height: 30px; width: auto; filter: grayscale(1); opacity: 0.65; transition: filter 0.25s ease, opacity 0.25s ease; }
.logo-wall img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Integration source grid ---------- */
.intg-groups { display: grid; gap: 16px; margin-top: 12px; }
.intg-group {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 26px;
}
.intg-label { display: block; font-size: 16px; font-weight: 600; color: var(--navy); }
.intg-note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.intg-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.intg-tile {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 16px 11px 11px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.intg-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.intg-tile .chip { margin: 0; flex: 0 0 auto; width: 40px; height: 36px; }
/* third-party integration logos: kept at a uniform 36px mark box so logo tiles
   line up with chip tiles in the same row. .wide is for wordmarks (Oracle). */
.intg-mark {
  flex: 0 0 auto; width: 40px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.intg-mark.wide { width: 76px; }
.intg-mark img { max-width: 100%; max-height: 26px; width: auto; height: auto; }
.intg-tile:has(.intg-mark) { padding-left: 16px; }
.intg-tile-name { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.intg-tile-name small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
@media (max-width: 700px) {
  .intg-group { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
}

/* ---------- FAQ accordion (native details/summary) ---------- */
.faq { max-width: 840px; margin: 8px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 48px 24px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: 18px; font-weight: 600; color: var(--navy); line-height: 1.42; margin: 0; display: inline; }
.faq-item summary::after {
  content: ""; position: absolute; right: 10px; top: 29px;
  width: 11px; height: 11px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item.closing summary::after { transform: rotate(45deg); } /* JS collapse keeps [open] until the height lands */
.faq-item summary:hover .faq-q { color: var(--indigo); }
.faq-a { padding: 0 48px 26px 0; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.64; }
@media (prefers-reduced-motion: no-preference) {
  /* gentle: the row's height ease (main.js) carries the motion */
  .faq-item[open] .faq-a { animation: faq-reveal 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .faq-item summary { padding-right: 40px; }
  .faq-q { font-size: 16.5px; }
  .faq-a { padding-right: 8px; }
}

/* ---------- Payee split panels + shared outcomes (collections) ---------- */
.payee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.payee-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.payee-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.payee-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.payee-head .chip { margin: 0; flex: 0 0 auto; }
.payee-head h3 { margin: 0; font-size: 18px; }
.paysub { font-size: 13px; font-weight: 500; color: var(--muted); margin: 3px 0 0; }
.paylist { list-style: none; margin: 0; }
.paylist li {
  position: relative; padding-left: 34px; margin-bottom: 16px;
  font-size: 15.5px; color: var(--ink); line-height: 1.5;
}
.paylist li:last-child { margin-bottom: 0; }
.paylist li::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cat-green-blob) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BB489' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-11'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.outcome-band { margin-top: 28px; text-align: center; }
.outcome-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.outcome-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.outcome {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border-navy); border-radius: 999px;
  padding: 10px 18px 10px 15px; font-size: 15px; font-weight: 600; color: var(--navy);
}
.outcome svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cta); }
@media (max-width: 700px) {
  .payee-grid { grid-template-columns: 1fr; }
}

/* ---------- Lead magnet gate ---------- */
.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; }
.gate-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.gate-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
}
.gate-form input[type="email"]:focus { outline: 2px solid var(--border-navy); border-color: var(--border-navy); }
.gate-reveal { margin-top: 18px; font-size: 15.5px; }
.gate-reveal a { font-weight: 600; text-decoration: underline; }
@media (max-width: 600px) {
  .gate-form { flex-direction: column; }
}

/* ---------- Platform verb cards ("One engine, five layers.") ----------
   Illustration-led cards, one per loop verb from the platform hero
   (Connect / Design / Govern / Optimize / Communicate). 6-col grid:
   engine row = 3 cards (span 2), performance row = 2 cards (span 3). */
.verb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 6px; }
.verb-tag {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.verb-tag::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.verb-card {
  grid-column: span 2;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.verb-card.wide { grid-column: span 3; }
.verb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.verb-illus {
  position: relative;
  padding: 26px 28px 20px;
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
}
.verb-illus svg { width: 100%; max-width: 250px; height: auto; display: block; }
.verb-num {
  position: absolute; top: 12px; left: 16px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--navy); opacity: 0.4;
}
.verb-illus.t-gold   { background: var(--cat-gold-blob); }
.verb-illus.t-blue   { background: var(--cat-blue-blob); }
.verb-illus.t-red    { background: var(--cat-red-blob); }
.verb-illus.t-green  { background: var(--cat-green-blob); }
.verb-illus.t-violet { background: var(--cat-violet-blob); }
.verb-body { padding: 20px 24px 26px; }
.verb-who {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.verb-body h3 { margin: 7px 0 9px; font-size: 20px; }
.verb-body p { font-size: 15px; color: var(--muted); }
@media (max-width: 960px) {
  .verb-card, .verb-card.wide { grid-column: span 3; }
}
@media (max-width: 600px) {
  .verb-card, .verb-card.wide { grid-column: 1 / -1; }
  .verb-illus { min-height: 132px; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin: 15px 0 8px; font-size: 17.5px; }
.card p { font-size: 15px; color: var(--muted); }
/* divider above the card's footer link, like the caption rule in the product cards */
.card .go { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 16px; display: block; }

/* ghost index numerals: <div class="card" data-n="01"> */
.card[data-n]::after {
  content: attr(data-n);
  position: absolute; top: 6px; right: 16px;
  font-size: 62px; font-weight: 700; line-height: 1;
  color: rgba(30, 42, 120, 0.06);
  pointer-events: none;
}

.card.accent-card { border-color: var(--accent-deep); background: #FFFBF5; box-shadow: 0 8px 24px rgba(217, 119, 6, 0.10); }
.card.accent-card::before { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform: scaleX(1); }
a.card-link { display: block; }
a.card-link:hover { text-decoration: none; }
.card .go { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.card .go::after { content: " →"; display: inline-block; transition: transform 0.2s ease; }
a.card-link:hover .go::after { transform: translateX(4px); }

/* Icon treatment from the product UI: outline icon over an offset colour blob */
.chip {
  display: inline-flex; align-items: flex-start;
  width: 56px; height: 50px;
  position: relative;
  background: transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip::before {
  content: "";
  position: absolute; right: 6px; bottom: 0;
  width: 36px; height: 36px; border-radius: 50%;
  z-index: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover .chip { transform: none; }
.card:hover .chip svg { transform: scale(1.12) rotate(-4deg); }
.card:hover .chip::before { transform: scale(1.15); }
.chip svg {
  width: 32px; height: 32px;
  position: relative; z-index: 1;
  margin: 2px 0 0 2px;
  stroke-width: 1.7;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip.blue   { color: var(--cat-blue); }   .chip.blue::before   { background: var(--cat-blue-blob); }
.chip.green  { color: var(--cat-green); }  .chip.green::before  { background: var(--cat-green-blob); }
.chip.amber  { color: var(--cat-gold); }   .chip.amber::before  { background: var(--cat-gold-blob); }
.chip.red    { color: var(--cat-red); }    .chip.red::before    { background: var(--cat-red-blob); }
.chip.violet { color: var(--cat-violet); } .chip.violet::before { background: var(--cat-violet-blob); }

/* Category-tinted card borders + hover bars, driven by the chip inside */
.card:has(.chip.blue)   { border-color: var(--cat-blue-border); }
.card:has(.chip.green)  { border-color: var(--cat-green-border); }
.card:has(.chip.amber)  { border-color: var(--cat-gold-border); }
.card:has(.chip.red)    { border-color: var(--cat-red-border); }
.card:has(.chip.violet) { border-color: var(--cat-violet-border); }
.card:has(.chip.blue)::before   { background: var(--cat-blue); }
.card:has(.chip.green)::before  { background: var(--cat-green); }
.card:has(.chip.amber)::before  { background: var(--cat-gold); }
.card:has(.chip.red)::before    { background: var(--cat-red); }
.card:has(.chip.violet)::before { background: var(--cat-violet); }
.card:has(.chip.blue)[data-n]::after   { color: rgba(107, 150, 228, 0.16); }
.card:has(.chip.amber)[data-n]::after  { color: rgba(201, 165, 88, 0.18); }
.card:has(.chip.red)[data-n]::after    { color: rgba(206, 132, 130, 0.16); }
.card:has(.chip.green)[data-n]::after  { color: rgba(123, 180, 137, 0.16); }
.card:has(.chip.violet)[data-n]::after { color: rgba(155, 127, 224, 0.14); }

/* ---------- Bento feature cards (visual on top, copy below) ---------- */
.bento { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.bento .card { display: flex; flex-direction: column; }
.bento .card h3 { font-size: 19px; margin-top: 4px; }
.bento .card p { font-size: 15px; }

/* ---------- Animated product demos ----------
   Coded demos are the shipped assets: HTML + CSS keyframes only,
   no GIFs, no video, no raster exports. Tenant captures are
   reference material and never land in the repo. */
.demo {
  background: #F5F7FB;
  border: 1px solid #ECF0F7;
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
}
.demo img { border-radius: 10px; }
.demo:has(.dtoast) { padding-bottom: 58px; }

.demo .drow {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  box-shadow: 0 2px 6px rgba(30, 42, 120, 0.05);
}
.demo .drow .k { color: var(--muted); }
.demo .drow .v { font-weight: 600; color: var(--ink); }

.dtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--muted);
}
.dtag.green { background: var(--cat-green-blob); border-color: var(--cat-green-border); color: #4D7D5B; }
.dtag.blue  { background: var(--cat-blue-blob); border-color: var(--cat-blue-border); color: #4A6FB5; }
.dtag.gold  { background: var(--cat-gold-blob); border-color: var(--cat-gold-border); color: #8F7331; }

/* value edit: old value fades out, new value fades in, forever */
.swap { position: relative; display: inline-block; text-align: right; font-weight: 600; color: var(--ink); }
.swap .old { animation: swap-old 7s infinite; }
.swap .new { position: absolute; right: 0; top: 0; color: var(--navy); white-space: nowrap; animation: swap-new 7s infinite; }
@keyframes swap-old { 0%, 36% { opacity: 1; } 40%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swap-new { 0%, 42% { opacity: 0; } 46%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* confirmation toast that slides up late in the loop */
.dtoast {
  position: absolute; left: 50%; bottom: 14px;
  background: #fff; border: 1px solid var(--cat-green-border);
  color: #4D7D5B; font-weight: 600; font-size: 12.5px;
  border-radius: 999px; padding: 8px 16px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  animation: toast-cycle 7s infinite;
}
.dtoast::before { content: "✓"; margin-right: 7px; }
@keyframes toast-cycle {
  0%, 48%  { opacity: 0; transform: translate(-50%, 14px); }
  56%, 90% { opacity: 1; transform: translate(-50%, 0); }
  96%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

/* simulation (platform page): payout impact of a proposed policy version.
   Two phases crossfade on one 12s cycle: the run form (pick period and the two plans,
   click run), then the result, where bars reveal the gain and fall distribution and a
   cursor selects the total payout row. Both panels share one axis (max 13) so the two
   counts stay comparable. The form overlays the result, which sets the stage height,
   so the crossfade never reflows the card. */
.sim-stage { position: relative; }
.sim { display: flex; flex-direction: column; gap: 8px; opacity: 0; animation: sim-result-phase 12s infinite; }
/* the two phases never overlap: the form is fully gone before the result starts, so the
   swap never ghosts one layer of text over the other */
@keyframes sim-result-phase {
  0%, 21%   { opacity: 0; }
  24%, 90%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* phase 1: the run form */
.simf {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  animation: simf-phase 12s infinite;
}
@keyframes simf-phase {
  0%, 17%    { opacity: 1; }
  20.5%, 94% { opacity: 0; }
  98%, 100%  { opacity: 1; }
}
.simf-title {
  font-size: 13px; font-weight: 700; color: var(--navy);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.simf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.simf-field label { font-size: 11px; font-weight: 600; color: var(--muted); }
.simf-input {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04);
}
.simf-input.ok { border-color: #A9D9B5; }
.simf-v { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simf-chev {
  flex: none; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #9AA5B8;
}
.simf-tick {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--cat-green); position: relative;
}
.simf-tick::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 700; font-style: normal;
}
.simf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.simf-btn {
  align-self: flex-end; position: relative;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 8px 14px;
  animation: simf-press 12s infinite;
}
@keyframes simf-press {
  0%, 13%   { background: var(--navy); }
  15%, 17%  { background: #141D5C; }
  19%, 100% { background: var(--navy); }
}
/* anchored to the button's bottom-right corner: the tip lands inside the button,
   past the label, so the cursor never sits on the words */
.simf-cursor {
  position: absolute; right: -6px; bottom: -12px;
  width: 17px; height: 22px; z-index: 3; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(30, 42, 120, 0.28));
  animation: simf-cursor 12s infinite;
}
@keyframes simf-cursor {
  0%, 4%    { opacity: 0; transform: translate(26px, 62px) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  7%        { opacity: 1; transform: translate(18px, 42px) scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  12%       { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  14%       { opacity: 1; transform: translate(0, 0) scale(0.84); animation-timing-function: ease-out; }
  16%, 19%  { opacity: 1; transform: translate(0, 0) scale(1); }
  22%       { opacity: 0; transform: translate(0, 0) scale(1); }
  23%, 100% { opacity: 0; transform: translate(26px, 62px) scale(1); }
}
.sim-head, .sim-row { display: grid; grid-template-columns: 1fr 0.82fr 0.86fr 1.02fr; gap: 6px; align-items: center; }
.sim-head { padding: 0 13px; }
.sim-head span {
  font-size: 11px; font-weight: 600; color: var(--muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-head span:first-child { text-align: left; }
.sim-row {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px;
  box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04);
  animation: sim-select 12s infinite;
}
.sim-metric { color: var(--muted); white-space: nowrap; }
.sim-val, .sim-diff {
  text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sim-val { color: var(--ink); }
.sim-diff { color: var(--muted); animation: sim-diff 12s infinite; }

.sim-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 10px;
  box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04);
}
.sim-title { font-size: 11.5px; font-weight: 700; text-align: right; margin-bottom: 5px; }
.sim-title.up { color: #4D7D5B; }
.sim-title.down { color: #A85C5A; }
.sim-band { display: grid; grid-template-columns: 60px 1fr 15px; gap: 5px; align-items: center; height: 16px; }
.sim-band .lab { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sim-track { height: 9px; border-radius: 3px; background: rgba(30, 42, 120, 0.05); position: relative; overflow: hidden; }
.sim-bar {
  position: absolute; inset: 0; border-radius: 3px;
  transform: scaleX(0); transform-origin: left; opacity: 0;
  animation: sim-bar 12s infinite;
}
.sim-bar.up { background: var(--cat-green); }
.sim-bar.down { background: var(--cat-red); }
.sim-band .n {
  font-size: 11px; font-weight: 700; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; opacity: 0;
  animation: sim-count 12s infinite;
}
/* stagger the reveal down each panel; the reset staggers with it */
.sim-band:nth-of-type(2) .sim-bar, .sim-band:nth-of-type(2) .n { animation-delay: 0.07s; }
.sim-band:nth-of-type(3) .sim-bar, .sim-band:nth-of-type(3) .n { animation-delay: 0.14s; }
.sim-band:nth-of-type(4) .sim-bar, .sim-band:nth-of-type(4) .n { animation-delay: 0.21s; }
.sim-band:nth-of-type(5) .sim-bar, .sim-band:nth-of-type(5) .n { animation-delay: 0.28s; }
.sim-band:nth-of-type(6) .sim-bar, .sim-band:nth-of-type(6) .n { animation-delay: 0.35s; }
.sim-panel:nth-child(2) .sim-bar, .sim-panel:nth-child(2) .n { animation-delay: 0.18s; }
.sim-panel:nth-child(2) .sim-band:nth-of-type(3) .sim-bar, .sim-panel:nth-child(2) .sim-band:nth-of-type(3) .n { animation-delay: 0.25s; }
.sim-panel:nth-child(2) .sim-band:nth-of-type(4) .sim-bar, .sim-panel:nth-child(2) .sim-band:nth-of-type(4) .n { animation-delay: 0.32s; }
.sim-panel:nth-child(2) .sim-band:nth-of-type(5) .sim-bar, .sim-panel:nth-child(2) .sim-band:nth-of-type(5) .n { animation-delay: 0.39s; }
.sim-panel:nth-child(2) .sim-band:nth-of-type(6) .sim-bar, .sim-panel:nth-child(2) .sim-band:nth-of-type(6) .n { animation-delay: 0.46s; }

/* bars collapse only under cover of zero opacity, so the loop has no visible cut */
@keyframes sim-bar {
  0%, 21%   { transform: scaleX(0); opacity: 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  25%       { opacity: 1; }
  40%, 88%  { transform: scaleX(var(--w)); opacity: 1; }
  93%       { transform: scaleX(var(--w)); opacity: 0; }
  94%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes sim-count { 0%, 23% { opacity: 0; } 40%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
/* row and difference stay in their read state until the result has faded out,
   so the reset is never seen */
@keyframes sim-select {
  0%, 50%   { border-color: var(--border); background: #fff; box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  54%, 90%  { border-color: #9AA8EC; background: #FCFDFF; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  95%, 100% { border-color: var(--border); background: #fff; box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes sim-diff {
  0%, 52%   { color: var(--muted); }
  56%, 90%  { color: #A85C5A; }
  95%, 100% { color: var(--muted); }
}
/* parks in the row's empty gap, never over a value: selecting the row is the gesture,
   reading the difference is the point */
.sim-cursor {
  position: absolute; left: 24%; top: 50%; margin-top: -11px;
  width: 17px; height: 22px; z-index: 3; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(30, 42, 120, 0.28));
  animation: sim-cursor 12s infinite;
}
/* re-enters from the bottom right, roughly where the run button sat, so the crossfade
   reads as one continuous pointer rather than two */
@keyframes sim-cursor {
  0%, 40%   { opacity: 0; transform: translate(150px, 116px) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  44%       { opacity: 1; transform: translate(96px, 76px) scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  50%       { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  52%       { opacity: 1; transform: translate(0, 0) scale(0.84); animation-timing-function: ease-out; }
  54%       { opacity: 1; transform: translate(0, 0) scale(1); }
  84%       { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); }
  90%       { opacity: 0; transform: translate(44px, 112px) scale(1); }
  91%, 100% { opacity: 0; transform: translate(150px, 116px) scale(1); }
}
@media (max-width: 560px) {
  /* stack the panels rather than squeeze the band labels */
  .sim-panels { grid-template-columns: 1fr; }
  /* drop the baseline column rather than truncate headers: the difference
     cell still carries the comparison */
  .sim-head span:nth-child(2), .sim-row > .sim-val:nth-child(2) { display: none; }
  .sim-head, .sim-row { grid-template-columns: 0.9fr 0.85fr 1.05fr; }
  .sim-cursor { left: 32%; }
  /* the form has room to breathe once the result stacks; keep its fields full width */
  .simf-two { grid-template-columns: 1fr; }
}

/* payout run: three approval steps lighting up in sequence */
.dsteps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dstep {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 999px; padding: 9px 16px;
}
.dstep::before {
  content: "✓";
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: #fff; font-size: 10px; font-weight: 700;
}
.dstep.s1 { animation: step-on-1 6.5s infinite; } .dstep.s1::before { animation: check-on-1 6.5s infinite; }
.dstep.s2 { animation: step-on-2 6.5s infinite; } .dstep.s2::before { animation: check-on-2 6.5s infinite; }
.dstep.s3 { animation: step-on-3 6.5s infinite; } .dstep.s3::before { animation: check-on-3 6.5s infinite; }
@keyframes step-on-1 { 0%, 8%  { color: var(--muted); border-color: var(--border); } 14%, 92% { color: var(--navy); border-color: var(--border-navy); } 100% { color: var(--muted); border-color: var(--border); } }
@keyframes check-on-1 { 0%, 8%  { background: var(--border); } 14%, 92% { background: var(--success); } 100% { background: var(--border); } }
@keyframes step-on-2 { 0%, 32% { color: var(--muted); border-color: var(--border); } 38%, 92% { color: var(--navy); border-color: var(--border-navy); } 100% { color: var(--muted); border-color: var(--border); } }
@keyframes check-on-2 { 0%, 32% { background: var(--border); } 38%, 92% { background: var(--success); } 100% { background: var(--border); } }
@keyframes step-on-3 { 0%, 56% { color: var(--muted); border-color: var(--border); } 62%, 92% { color: var(--navy); border-color: var(--border-navy); } 100% { color: var(--muted); border-color: var(--border); } }
@keyframes check-on-3 { 0%, 56% { background: var(--border); } 62%, 92% { background: var(--success); } 100% { background: var(--border); } }

/* visibility: target bar fills, then a nudge pops */
.dfill-track { height: 10px; border-radius: 999px; background: #E4E9F3; overflow: hidden; }
.dfill { height: 100%; width: 82%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--indigo-light)); transform-origin: left; animation: fill-cycle 7s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes fill-cycle { 0% { transform: scaleX(0); } 22% { transform: scaleX(1); } 90% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }

/* rule grid (policy engine, platform page): payout percentage by IRR band,
   recreated from a tenant reference capture. A cursor eases in, clicks the
   last payout cell, types the edit 0.3 -> 0.31, the draft saves, then the
   loop fades back to rest. One 8s cycle drives every element. */
.rg { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.rg-head, .rg-row {
  display: grid; grid-template-columns: 0.85fr 1.15fr 1fr;
  gap: 8px; align-items: center;
}
.rg-head span {
  background: var(--cat-blue-blob); color: var(--navy);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 6px 10px; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-head span.pay { background: var(--cat-green-blob); color: #4D7D5B; }
.rg-row { padding: 4px 0; border-radius: 10px; }
.rg-row:nth-child(odd) { background: rgba(30, 42, 120, 0.035); }
.rg-cell {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; line-height: 1.35; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04);
}
.rg-row .rg-cell:nth-child(2) { color: var(--ink); font-weight: 400; }
.rg-cell.num {
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; overflow: visible;
}
.rg-edit { position: relative; animation: rg-cell-focus 8s infinite; }
.rg-new { display: inline-block; overflow: hidden; max-width: 0; animation: rg-type 8s infinite; }
.rg-caret {
  display: inline-block; width: 1.5px; height: 12px; margin-left: 1px;
  background: var(--indigo); opacity: 0;
  animation: rg-caret 8s steps(1, end) infinite;
}
.rg-cursor {
  position: absolute; left: 40px; top: 13px; width: 17px; height: 22px;
  z-index: 3; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(30, 42, 120, 0.28));
  animation: rg-cursor 8s infinite;
}
@keyframes rg-cursor {
  0%, 7%    { opacity: 0; transform: translate(-215px, 66px); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  10%       { opacity: 1; }
  15%       { transform: translate(-64px, 26px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  22%       { transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  24%       { transform: translate(0, 0) scale(0.85); animation-timing-function: ease-out; }
  26%, 46%  { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); }
  58%       { opacity: 0; transform: translate(96px, 70px) scale(1); }
  59%, 100% { opacity: 0; transform: translate(-215px, 66px); }
}
@keyframes rg-cell-focus {
  0%, 21%   { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  25%, 42%  { border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  46%, 56%  { border-color: #A9D9B5; box-shadow: 0 0 0 3px rgba(56, 198, 58, 0.12); }
  64%, 100% { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes rg-type {
  0%, 31%   { max-width: 0; opacity: 1; }
  33%, 86%  { max-width: 12px; opacity: 1; }
  92%       { max-width: 12px; opacity: 0; }
  93%       { max-width: 0; opacity: 0; }
  100%      { max-width: 0; opacity: 1; }
}
@keyframes rg-caret {
  0%, 26%   { opacity: 0; }
  27%, 29%  { opacity: 1; }
  30%, 31%  { opacity: 0; }
  32%, 35%  { opacity: 1; }
  36%, 38%  { opacity: 0; }
  39%, 42%  { opacity: 1; }
  43%, 100% { opacity: 0; }
}
.rg-tags { position: relative; display: inline-flex; }
.rg-tags .dtag { white-space: nowrap; }
.rg-tags .dtag.blue { animation: rg-tag-draft 8s infinite; }
.rg-tags .dtag.green { position: absolute; right: 0; top: 0; opacity: 0; animation: rg-tag-saved 8s infinite; }
@keyframes rg-tag-draft { 0%, 45% { opacity: 1; } 49%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes rg-tag-saved { 0%, 45% { opacity: 0; } 49%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (max-width: 560px) {
  /* product is constant (named in the title row); drop the column, keep text legible */
  .rg-head span:first-child, .rg-row .rg-cell:first-child { display: none; }
  .rg-head, .rg-row { grid-template-columns: 1.25fr 1fr; }
}

/* booster builder (collections page, ops-desk section): a booster is scoped from
   three dropdowns (product, bucket, region), then the booster grid gains that row
   cell by cell and the draft saves. Two phases on one 12s cycle; the form sits in
   flow and sets the stage height, the grid overlays it, so the swap never reflows
   the card. Reuses the simf-* form visuals and rg-* grid visuals; bst-* carries
   the timing. */
.bst-stage { position: relative; }
.bstf {
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  animation: bstf-phase 12s infinite;
}
@keyframes bstf-phase {
  0%, 40%   { opacity: 1; }
  44%, 94%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
.bstf .simf-v { position: relative; overflow: visible; }
.bst-ph, .bst-val { font-style: normal; }
.bst-ph { color: var(--muted); font-weight: 400; animation: bst-ph1 12s infinite; }
.bst-val {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--ink); font-weight: 400; opacity: 0;
  animation: bst-val1 12s infinite;
}
.bst-f2 .bst-ph { animation-name: bst-ph2; } .bst-f2 .bst-val { animation-name: bst-val2; }
.bst-f3 .bst-ph { animation-name: bst-ph3; } .bst-f3 .bst-val { animation-name: bst-val3; }
@keyframes bst-ph1  { 0%, 9%  { opacity: 1; } 11%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bst-val1 { 0%, 9%  { opacity: 0; } 11%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bst-ph2  { 0%, 17% { opacity: 1; } 19%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bst-val2 { 0%, 17% { opacity: 0; } 19%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bst-ph3  { 0%, 25% { opacity: 1; } 27%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bst-val3 { 0%, 25% { opacity: 0; } 27%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* dropdown focus rings, one field after another */
.bst-f1 { animation: bst-f1 12s infinite; }
.bst-f2 { animation: bst-f2 12s infinite; }
.bst-f3 { animation: bst-f3 12s infinite; }
@keyframes bst-f1 {
  0%, 5%    { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  8%, 13%   { border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  17%, 100% { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes bst-f2 {
  0%, 13%   { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  16%, 21%  { border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  25%, 100% { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes bst-f3 {
  0%, 21%   { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  24%, 29%  { border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  33%, 100% { border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
.bst-btn {
  align-self: flex-end; position: relative;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 8px 14px;
  animation: bst-press 12s infinite;
}
@keyframes bst-press {
  0%, 33%   { background: var(--navy); }
  35%, 37%  { background: #141D5C; }
  39%, 100% { background: var(--navy); }
}
.bst-cursor {
  position: absolute; right: -6px; bottom: -12px;
  width: 17px; height: 22px; z-index: 3; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(30, 42, 120, 0.28));
  animation: bst-cursor 12s infinite;
}
@keyframes bst-cursor {
  0%, 22%   { opacity: 0; transform: translate(26px, 62px) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  26%       { opacity: 1; transform: translate(18px, 42px) scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  32%       { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  34%       { opacity: 1; transform: translate(0, 0) scale(0.84); animation-timing-function: ease-out; }
  36%, 39%  { opacity: 1; transform: translate(0, 0) scale(1); }
  42%       { opacity: 0; transform: translate(0, 0) scale(1); }
  43%, 100% { opacity: 0; transform: translate(26px, 62px) scale(1); }
}
/* phase 2: the booster grid, overlaid on the form's footprint */
.bst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  font-size: 12.5px; opacity: 0;
  animation: bst-grid-phase 12s infinite;
}
@keyframes bst-grid-phase {
  0%, 44%   { opacity: 0; }
  48%, 92%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.bst .rg-head, .bst .rg-row { grid-template-columns: 1.2fr 0.75fr 1.05fr 0.7fr; }
/* the new row lands cell by cell, echoing the three dropdown picks, then the boost */
.bst-newrow .rg-cell { opacity: 0; }
.bst-c1 { animation: bst-c1 12s infinite; }
.bst-c2 { animation: bst-c2 12s infinite; }
.bst-c3 { animation: bst-c3 12s infinite; }
.bst-c4 { animation: bst-c4 12s infinite; }
@keyframes bst-c1 {
  0%, 52%   { opacity: 0; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  55%, 62%  { opacity: 1; border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  66%, 100% { opacity: 1; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes bst-c2 {
  0%, 58%   { opacity: 0; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  61%, 68%  { opacity: 1; border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  72%, 100% { opacity: 1; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes bst-c3 {
  0%, 64%   { opacity: 0; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  67%, 74%  { opacity: 1; border-color: #9AA8EC; box-shadow: 0 0 0 3px rgba(76, 91, 212, 0.14); }
  78%, 100% { opacity: 1; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
@keyframes bst-c4 {
  0%, 70%   { opacity: 0; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
  73%, 84%  { opacity: 1; border-color: #A9D9B5; box-shadow: 0 0 0 3px rgba(56, 198, 58, 0.12); }
  88%, 100% { opacity: 1; border-color: var(--border); box-shadow: 0 1px 3px rgba(30, 42, 120, 0.04); }
}
/* title-row tags: draft flips to saved once the row is in */
.bst-tags { position: relative; display: inline-flex; }
.bst-tags .dtag { white-space: nowrap; }
.bst-tags .dtag.blue { animation: bst-tag-draft 12s infinite; }
.bst-tags .dtag.green { position: absolute; right: 0; top: 0; opacity: 0; animation: bst-tag-saved 12s infinite; }
@keyframes bst-tag-draft { 0%, 78% { opacity: 1; } 82%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes bst-tag-saved { 0%, 78% { opacity: 0; } 82%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@media (max-width: 560px) {
  /* the form phase names the product; drop the column, keep bucket and region legible */
  .bst .rg-head span:first-child, .bst .rg-row .rg-cell:first-child { display: none; }
  .bst .rg-head, .bst .rg-row { grid-template-columns: 0.8fr 1.1fr 0.7fr; gap: 5px; }
  .bst { font-size: 11.5px; }
  .bst .rg-head span, .bst .rg-cell { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .swap .new { position: static; } .swap .old { display: none; }
  .dtoast { opacity: 1; }
  /* rule grid falls back to its static first frame: 0.3, draft */
  .rg-cursor, .rg-caret { display: none; }
  .rg-new, .rg-edit, .rg-tags .dtag { animation: none; }
  .rg-new { max-width: 0; }
  .rg-tags .dtag.green { opacity: 0; }
  /* booster builder falls back to the saved grid, its informative end state */
  .bst-cursor, .bstf { display: none; }
  .bst, .bst-newrow .rg-cell, .bst-tags .dtag { animation: none; }
  .bst { position: static; opacity: 1; }
  .bst-newrow .rg-cell { opacity: 1; }
  .bst-tags .dtag.blue { opacity: 0; }
  .bst-tags .dtag.green { opacity: 1; }
  /* simulation falls back to the read result, not the empty first frame:
     an unfilled chart, or the form that precedes it, would carry no information */
  .sim-cursor, .simf { display: none; }
  .sim, .sim-row, .sim-diff, .sim-bar, .sim-band .n { animation: none; }
  .sim { opacity: 1; }
  .sim-bar { transform: scaleX(var(--w)); opacity: 1; }
  .sim-band .n { opacity: 1; }
}

/* ---------- Hero: the performance pay cycle ----------
   Connect is the inlet, not a stage: it feeds continuously (animated dashes) while the
   four stages turn as a closed cycle. Amber marks the starting point, the one accent
   here; green marks only the stage the signal is passing through, which is what green
   means everywhere else on the site. One 12s cycle, and because the loop genuinely
   closes there is no reset to hide. */
.loop { display: flex; flex-direction: column; align-items: center; }
.loop-src { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; max-width: 300px; }
.loop-src span {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 9px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(30, 42, 120, 0.05);
}
/* isometric by default; the flat ring below takes over on narrow phones, where the
   projection cannot spread the nodes far enough apart to leave a visible track */
.loop-stage { position: relative; width: 390px; height: 475px; }
.loop-stage svg { position: absolute; inset: 0; }
.loop-iso { width: 390px; height: 475px; }
.loop-flat { display: none; width: 300px; height: 420px; }
.loop-stage > svg path { fill: none; stroke: var(--border-navy); stroke-width: 1.5; }
.loop-stage .tip { stroke-linecap: round; stroke-linejoin: round; }
/* 3D line art, not rendered illustration: each stage stands on an isometric plinth
   drawn as outline only, and the cycle runs along the ground between them. The plinths
   are filled so the ground line passes behind them rather than through them. */
.loop-stage > svg .ground { stroke: var(--border-navy); stroke-width: 1.5; }
.loop-stage > svg .plat { fill: #fff; stroke: #AEB8DF; stroke-width: 1.4; stroke-linejoin: round; }
.loop-stage > svg .chev { stroke: #94A0CE; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.loop-stage .feed { stroke-dasharray: 4 5; animation: loop-feed 1.9s linear infinite; }
@keyframes loop-feed { to { stroke-dashoffset: -18; } }
/* same card + chip treatment as the security cards: outline glyph over an offset blob */
.loop-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 9px 11px;
  box-shadow: 0 2px 10px rgba(30, 42, 120, 0.07);
}
.loop-node b { font-size: 11.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
/* the team that does the work. Business shows up twice, on Design and on Optimize,
   which is the whole reason the cycle closes rather than ending. */
.loop-node .who { font-size: 11px; font-style: normal; color: var(--muted); white-space: nowrap; }
.loop-node .chip { width: 50px; height: 44px; }
.loop-node .chip::before { width: 30px; height: 30px; right: 4px; }
.loop-node .chip svg { width: 28px; height: 28px; }
/* cards lift off the plane: deeper shadow, and z-order runs back to front so the
   nearer stage always overlaps the farther one. The slab under each card extrudes
   straight down, matching the track's extrusion, so both read on the same projection. */
.loop-node { box-shadow: 0 8px 18px rgba(30, 42, 120, 0.10); }
.loop-node.inlet { left: 195px; top: 85px;  z-index: 2; }
.loop-node.n1 { left: 195px; top: 221px; z-index: 3; }
.loop-node.n2 { left: 333px; top: 301px; z-index: 4; }
.loop-node.n4 { left: 57px;  top: 301px; z-index: 4; }
.loop-node.n3 { left: 195px; top: 381px; z-index: 5; }
/* the signal runs along the ground line, at plinth level, not through the cards */
.loop-dot {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; z-index: 6;
  border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 4px rgba(56, 198, 58, 0.16);
  offset-path: path("M195 267 L333 347 L195 427 L57 347 Z");
  offset-rotate: 0deg;
  animation: loop-dot 12s linear infinite;
}
/* each card carries its own dark tooltip, which pops next to it as the signal lands.
   Only one stage is ever live, so the four tooltips can each claim a corner of the
   stage and never collide, even though their boxes would overlap if drawn together. */
.loop-tip {
  position: absolute; z-index: 8; width: 138px; padding: 9px 11px;
  background: #151C46; color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; text-align: left;
  border-radius: 9px; box-shadow: 0 12px 26px rgba(21, 28, 70, 0.32);
  opacity: 0; pointer-events: none;
}
.loop-tip::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  background: #151C46; transform: rotate(45deg);
}
/* anchoring uses the standalone `translate` property, so `transform` is left free for
   the pop. The two compose, which keeps one set of keyframes valid at both layouts. */
/* n1 and n3 ride slightly off centre so they clear the neighbouring card by a margin
   rather than by 4px */
.n1 .loop-tip { left: calc(100% + 10px); top: 50%; translate: 0 calc(-50% - 9px); animation: loop-t1 12s infinite; }
.n1 .loop-tip::after { left: -4px; top: 50%; margin-top: -4px; }
.n2 .loop-tip { top: calc(100% + 10px); left: 50%; translate: -62% 0; animation: loop-t2 12s infinite; }
.n2 .loop-tip::after { top: -4px; left: 62%; margin-left: -4px; }
.n3 .loop-tip { right: calc(100% + 10px); top: 50%; translate: 0 calc(-50% + 9px); animation: loop-t3 12s infinite; }
.n3 .loop-tip::after { right: -4px; top: 50%; margin-top: -4px; }
.n4 .loop-tip { bottom: calc(100% + 10px); left: 50%; translate: -38% 0; animation: loop-t4 12s infinite; }
.n4 .loop-tip::after { bottom: -4px; left: 38%; margin-left: -4px; }
/* each pops outward from its own card, so the eye is pulled from card to tooltip */
@keyframes loop-t1 {
  0%, 20%   { opacity: 1; transform: translateX(0); }
  23%, 96%  { opacity: 0; transform: translateX(-7px); }
  100%      { opacity: 1; transform: translateX(0); }
}
@keyframes loop-t2 {
  0%, 23%   { opacity: 0; transform: translateY(-7px); }
  27%, 44%  { opacity: 1; transform: translateY(0); }
  47%, 100% { opacity: 0; transform: translateY(-7px); }
}
@keyframes loop-t3 {
  0%, 48%   { opacity: 0; transform: translateX(7px); }
  52%, 69%  { opacity: 1; transform: translateX(0); }
  72%, 100% { opacity: 0; transform: translateX(7px); }
}
@keyframes loop-t4 {
  0%, 73%   { opacity: 0; transform: translateY(7px); }
  77%, 93%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(7px); }
}

/* below this the projection has no room left, so the flat ring takes over */
@media (max-width: 460px) {
  .loop-stage { width: 300px; height: 500px; }
  .loop-iso { display: none; }
  .loop-flat { display: block; }
  /* the flat ring packs the cards too close for a tooltip to point anywhere without
     covering a neighbour, so all four share one slot under the ring. Only one is ever
     visible, so they can occupy the same place without ever meeting. */
  .loop-tip { width: 268px; }
  .loop-tip::after { display: none; }
  .n1 .loop-tip { left: calc(50% + 90px); right: auto; top: calc(50% + 232px); translate: -50% -50%; }
  .n2 .loop-tip { left: calc(50% - 90px); right: auto; top: calc(50% + 232px); translate: -50% -50%; }
  .n3 .loop-tip { left: calc(50% - 90px); right: auto; top: calc(50% + 87px);  translate: -50% -50%; }
  .n4 .loop-tip { left: calc(50% + 90px); right: auto; top: calc(50% + 87px); bottom: auto; translate: -50% -50%; }
  .loop-node { box-shadow: 0 2px 10px rgba(30, 42, 120, 0.07); }
  .loop-node.inlet { left: 150px; top: 76px; }
  .loop-node.n1 { left: 60px;  top: 230px; }
  .loop-node.n2 { left: 240px; top: 230px; }
  .loop-node.n3 { left: 240px; top: 375px; }
  .loop-node.n4 { left: 60px;  top: 375px; }
  .loop-dot { offset-path: path("M84 230 H216 A24 24 0 0 1 240 254 V351 A24 24 0 0 1 216 375 H84 A24 24 0 0 1 60 351 V254 A24 24 0 0 1 84 230 Z"); }
}
@keyframes loop-dot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* each stage lights as the dot reaches it; the gaps are uneven because the dot moves at
   a constant speed around a rectangle that is wider than it is tall */
.loop-node.n1 { animation: loop-n1 12s infinite; }
.loop-node.n2 { animation: loop-n2 12s infinite; }
.loop-node.n3 { animation: loop-n3 12s infinite; }
.loop-node.n4 { animation: loop-n4 12s infinite; }
/* each stage holds from the moment the signal arrives until it reaches the next one, so
   the cycle always has exactly one stage live and reads as a baton being passed */
/* the live tint stays lighter than any chip blob, so Optimize's green glyph still reads
   against it and the category colour keeps meaning identity while green means state */
/* the diamond has four equal edges, so the signal arrives on clean quarters */
@keyframes loop-n1 {
  0%, 21%   { border-color: var(--cta); background: #F5FCF5; }
  26%, 95%  { border-color: var(--border); background: #fff; }
  100%      { border-color: var(--cta); background: #F5FCF5; }
}
@keyframes loop-n2 {
  0%, 21%   { border-color: var(--border); background: #fff; }
  26%, 46%  { border-color: var(--cta); background: #F5FCF5; }
  51%, 100% { border-color: var(--border); background: #fff; }
}
@keyframes loop-n3 {
  0%, 46%   { border-color: var(--border); background: #fff; }
  51%, 71%  { border-color: var(--cta); background: #F5FCF5; }
  76%, 100% { border-color: var(--border); background: #fff; }
}
@keyframes loop-n4 {
  0%, 71%   { border-color: var(--border); background: #fff; }
  76%, 96%  { border-color: var(--cta); background: #F5FCF5; }
  100%      { border-color: var(--border); background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  /* rests on the first frame: the signal sitting at Design, nothing moving */
  .loop-stage .feed, .loop-dot, .loop-node, .loop-tip { animation: none; }
  .loop-dot { offset-distance: 0%; }
  .loop-node.n1 { border-color: var(--cta); background: #F5FCF5; }
  .n1 .loop-tip { opacity: 1; transform: none; }
}

/* ---------- Testimonial band ----------
   Slim on purpose: it separates two sections rather than becoming one. The tint plus the
   navy rule is what lifts it off the white either side, with no card and no ornament. */
/* Same Noto Sans as the rest of the site, set light and italic on a quiet card. The
   italic here is the real face, not a synthesised slant: the ital axis is loaded in the
   font link. The quote mark is oversized at very low contrast so it reads as texture
   behind the words, never as something to read. */
.tband { background: var(--bg-indigo); padding: 64px 0; }
.tband-quote {
  position: relative; overflow: hidden;
  max-width: 780px; margin: 0 auto; text-align: center;
  background: #fff; border-radius: 20px;
  padding: 58px 64px 40px;
  box-shadow: 0 22px 54px rgba(30, 42, 120, 0.10);
  font-style: italic;
}
/* soft light pooling behind the words, as in the reference */
.tband-quote::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px 300px at 50% 42%, rgba(76, 91, 212, 0.05), transparent 70%);
}
.tband-quote::before {
  content: "\201C";
  position: absolute; left: 42px; top: 26px; z-index: 0; pointer-events: none;
  font-style: normal; font-weight: 700;
  font-size: 130px; line-height: 1; color: rgba(30, 42, 120, 0.09);
}
.tband-quote blockquote {
  position: relative; z-index: 1; margin: 0; color: var(--ink);
  font-size: 24px; font-weight: 300; line-height: 1.6;
}
.tband-quote figcaption {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin-top: 30px;
}
.tband-who { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* upright, not italic: a letterspaced caps label is a name, not a phrase */
.tband-who b {
  font-style: normal; font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
}
.tband-org { font-size: 15px; color: var(--muted); }
/* icon-only, so it needs a real hit area and an aria-label on the anchor */
.tband-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--indigo); background: rgba(76, 91, 212, 0.09);
}
.tband-li:hover { color: #fff; background: var(--navy); }
.tband-li svg { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .tband { padding: 44px 0; }
  .tband-quote { padding: 44px 24px 32px; border-radius: 16px; }
  .tband-quote::before { font-size: 92px; left: 18px; top: 20px; }
  .tband-quote blockquote { font-size: 19px; line-height: 1.58; }
  .tband-org { font-size: 14px; }
}

/* ---------- Router tiles (Where it runs) ---------- */
.route .card-link { padding: 30px 28px 24px; }
.route .card-link h3 { font-size: 18.5px; position: relative; }
.route .card-link p, .route .card-link .go, .route .card-link .illus { position: relative; }

/* ---------- Stat blocks ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--navy), var(--indigo-light));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s ease;
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.stat:hover::before { transform: scaleY(1); }
.stat .num {
  font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  background: linear-gradient(120deg, var(--navy) 30%, var(--indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; /* steady width while counting up */
}
.stat .cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--muted); }
a.stat:hover { text-decoration: none; }

/* ---------- Split panel ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px; background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.panel h3 { font-size: 22px; margin-bottom: 6px; }
.panel .panel-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.panel ul { list-style: none; margin: 0 0 22px; }
.panel li { padding: 9px 0 9px 30px; position: relative; font-size: 15.5px; color: var(--ink); border-bottom: 1px solid var(--bg-soft); }
.panel li:last-child { border-bottom: none; }
.panel li::before { content: "✓"; position: absolute; left: 4px; color: var(--success); font-weight: 700; }

/* ---------- Cross/tick device ---------- */
.crosstick { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.crosstick .col { border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; background: #fff; }
.crosstick .col.no { background: var(--bg-soft); }
.crosstick .col.yes { border-color: var(--border-navy); box-shadow: var(--shadow-card); }
.crosstick h3 { margin-bottom: 16px; }
.crosstick ul { list-style: none; }
.crosstick li { padding: 10px 0 10px 32px; position: relative; font-size: 15.5px; }
.crosstick li + li { border-top: 1px dashed var(--border); }
.crosstick .no li { color: var(--muted); }
.crosstick .no li::before { content: "✕"; position: absolute; left: 4px; color: #DC2626; font-weight: 700; }
.crosstick .yes li::before { content: "✓"; position: absolute; left: 4px; color: var(--success); font-weight: 700; }

/* ---------- Feature sections (alternating) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature + .feature { margin-top: 96px; }
.feature h2 { margin-bottom: 16px; }
.feature p { margin-bottom: 14px; }
.feature .ticks { list-style: none; margin-top: 20px; }
.feature .ticks li { padding: 9px 0 9px 34px; position: relative; font-weight: 500; }
.feature .ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--chip-green-bg); color: var(--chip-green);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Pull quote: the section thesis, framed by connector lines ---------- */
.pullquote-wrap {
  display: flex; align-items: center; gap: 26px;
  margin-top: 64px;
}
.pq-line {
  flex: 1; height: 0;
  border-top: 1.5px dashed rgba(30, 42, 120, 0.30);
  position: relative;
}
.pq-line::before {
  content: "";
  position: absolute; top: -5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(30, 42, 120, 0.45);
}
.pq-line:first-child::before { left: 0; }
.pq-line:last-child::before { right: 0; }
.pullquote {
  position: relative;
  max-width: 760px;
  margin: 0;
  padding: 52px 52px 44px;
  background: #fff;
  border: 1px solid var(--border-navy);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
/* opening-quote badge sitting on the top border: the block's single accent */
.pullquote::before {
  content: "\201C";
  position: absolute; top: -28px; left: 44px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  font-size: 46px; font-weight: 700; line-height: 1.55;
  text-align: center;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.15);
}
/* faint dot grid in the far corner, fading out */
.pullquote::after {
  content: "";
  position: absolute; right: 0; bottom: 0; width: 45%; height: 70%;
  background-image: radial-gradient(rgba(30, 42, 120, 0.09) 1px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000 0%, transparent 75%);
          mask-image: radial-gradient(100% 100% at 100% 100%, #000 0%, transparent 75%);
  border-radius: 0 0 20px 0;
  pointer-events: none;
}
.pullquote blockquote {
  margin: 0;
  font-size: 25px; font-weight: 600; line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--navy);
  position: relative; z-index: 1;
}
@media (max-width: 960px) {
  .pullquote-wrap { margin-top: 48px; }
  .pq-line { display: none; }
  .pullquote { padding: 44px 28px 36px; }
  .pullquote blockquote { font-size: 21px; }
}

/* ---------- Quote / flagship block ---------- */
.flagship {
  border: 1px solid var(--border); border-radius: 20px;
  padding: 48px; background: #fff;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.flagship::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light));
}
.flagship .scope-label { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 28px 0 8px; }
.flagship p { margin-bottom: 12px; }

/* ---------- Testimonials ---------- */
.tcard { display: flex; flex-direction: column; }
.tcard .quote { font-size: 15px; color: var(--ink); line-height: 1.6; flex: 1; }
.tcard .quote::before {
  content: "\201C";
  display: block;
  font-size: 44px; font-weight: 700; line-height: 1;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.tcard .who {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border);
  margin-top: 20px; padding-top: 18px;
}
.tcard .who img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: none;
}
.tcard .who .t-name { font-weight: 600; color: var(--navy); font-size: 15px; }
.tcard .who .t-role { font-size: 13px; color: var(--muted); }

/* ---------- Carousel (testimonials) ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 8px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
}
.carousel-nav { display: flex; gap: 10px; margin-top: 18px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--border-navy);
  color: var(--navy); font-size: 18px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.carousel-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 42, 120, 0.20); }
@media (max-width: 960px) {
  .carousel-track > * { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 600px) {
  .carousel-track > * { flex-basis: 100%; }
}

/* ---------- Leadership ---------- */
.person { text-align: left; }
/* Founder photos: grayscale + multiply over a shared indigo panel gives a
   consistent studio-backdrop look across shots taken in different settings. */
.person .photo {
  height: 250px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #F2F5FC 0%, #E3E9F8 70%, #DCE3F5 100%);
  margin-bottom: 18px;
  position: relative;
}
.person .photo::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(30, 42, 120, 0.07) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
          mask-image: linear-gradient(180deg, #000, transparent 55%);
  pointer-events: none;
}
.person .photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  filter: grayscale(1) contrast(1.05) brightness(1.06);
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.person:hover .photo img { transform: scale(1.03); }

/* ---------- Careers ---------- */
.job-card h3 { margin-top: 0; font-size: 19px; }
.job-card .posted {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
}
.job-card h4 {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px;
}
.job-card ul { list-style: none; }
.job-card li {
  position: relative; padding: 6px 0 6px 22px;
  font-size: 14.5px; color: var(--ink);
}
.job-card li::before {
  content: "";
  position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cat-blue-blob); border: 1.5px solid var(--cat-blue);
  box-sizing: border-box;
}
.job-card .btn { margin-top: 18px; }
.person .avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--indigo));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(30, 42, 120, 0.25);
}
.person .role { font-size: 14px; color: var(--muted); margin: 2px 0 10px; }
.person p { font-size: 15px; }
.person a { font-size: 14.5px; font-weight: 600; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 16px 0 0 0; box-shadow: var(--shadow-card);
    margin-left: auto; margin-right:auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--bg-soft);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-navy); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); background: #fff;
  box-shadow: 0 0 0 4px rgba(30, 42, 120, 0.10);
}
textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, #171F5C, var(--navy) 45%, #3A47B8);
  border-radius: 22px;
  padding: 68px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute; right: -140px; bottom: -180px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 203, 166, 0.22), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: #C7CCEC; max-width: 640px; margin-bottom: 30px; font-size: 18px; }
.cta-band .btn-primary { background: var(--cta); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.cta-band .btn-primary:hover { background: var(--cta-deep); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); background: transparent; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: #fff; box-shadow: none; }

/* ---------- Badges ---------- */
.badge-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; }
.badge-card {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; background: #fff; max-width: 470px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.badge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.badge-card img { height: 52px; width: auto; }
.badge-card p { font-size: 14px; color: var(--muted); }

/* ---------- Blog ---------- */
.post-list { max-width: 780px; }
.post-item {
  padding: 30px 26px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; margin-bottom: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.post-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-navy); }
.post-item .tag, .article-tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--chip-blue); background: var(--chip-blue-bg);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.post-item h3 { font-size: 21px; margin-bottom: 8px; }
.post-item .dek { color: var(--muted); font-size: 15.5px; margin-bottom: 8px; }
.post-item .meta { font-size: 13.5px; color: var(--muted); }

.article { max-width: 720px; margin: 0 auto; }
.article h1 { font-size: 36px; margin-bottom: 12px; }
.article .meta { font-size: 14px; color: var(--muted); margin-bottom: 36px; }
.article p { margin-bottom: 20px; font-size: 17.5px; line-height: 1.68; }
.article h2 { font-size: 24px; margin: 36px 0 16px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 68px 0 32px; margin-top: 40px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light), var(--accent));
}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 48px; }
.footer-grid h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { font-size: 14.5px; color: var(--ink); }
.footer-grid a:hover { color: var(--navy); }
.footer-grid address { font-style: normal; font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.footer-badges { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.footer-badges .cert-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 12px 6px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.footer-badges .cert-chip img { height: 30px; width: auto; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted);
}
.footer-bottom .social a { margin-left: 16px; font-weight: 500; }

/* ---------- Phone mock: agent app with a guided zoom tour ----------
   Recreated from the live PayPrompt mobile app. The .app-screen pans and
   zooms between the regions that justify the visibility/nudges/contests copy. */
.phone {
  width: 312px;
  margin: 0 auto;
  background: #101323;
  border-radius: 42px;
  padding: 10px;
  box-shadow: var(--shadow-deep);
  position: relative;
}
.phone::after { /* dynamic island */
  content: "";
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 999px;
  background: #101323; z-index: 3;
}
.phone-viewport {
  border-radius: 34px;
  overflow: hidden;
  height: 620px;
  position: relative;
  background: #fff;
}
.app-screen {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  transform-origin: 50% 0;
}
/* One 24s cycle drives the whole tour: the payee reads earnings, the contest nudge and
   targets, taps redeem, picks a voucher, confirms. Screens are opaque and slide over one
   another, so no two layers of text ever crossfade. Nothing scales: the screens only
   translate, which keeps every label sharp. */
@media (prefers-reduced-motion: no-preference) {
  .app-screen { animation: app-tour 24s infinite; }
  .pt-stack   { animation: pt-stack 24s infinite; }
  .pt-s2      { animation: pt-s2 24s infinite; }
  .pt-s3      { animation: pt-s3 24s infinite; }
  .pt-s2-scroll { animation: pt-s2-scroll 24s infinite; }
  .pt-s3-scroll { animation: pt-s3-scroll 24s infinite; }
  .pt-scrim   { animation: pt-scrim 24s infinite; }
  .pt-sa      { animation: pt-sa 24s infinite; }
  .pt-sb      { animation: pt-sb 24s infinite; }
  .pt-tap.t1 { animation: pt-tap1 24s infinite; } .pt-tap.t1::after { animation: pt-rip1 24s infinite; }
  .pt-tap.t2 { animation: pt-tap2 24s infinite; } .pt-tap.t2::after { animation: pt-rip2 24s infinite; }
  .pt-tap.t3 { animation: pt-tap3 24s infinite; } .pt-tap.t3::after { animation: pt-rip3 24s infinite; }
  .pt-tap.t4 { animation: pt-tap4 24s infinite; } .pt-tap.t4::after { animation: pt-rip4 24s infinite; }
  .phone:hover .app-screen,
  .phone:hover .pt-stack,
  .phone:hover .pt-screen,
  .phone:hover .pt-scroll,
  .phone:hover .pt-scrim,
  .phone:hover .pt-sheet,
  .phone:hover .pt-tap,
  .phone:hover .pt-tap::after { animation-play-state: paused; }
}
@keyframes app-tour {
  0%, 3%    { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  14%, 18%  { transform: translateY(-500px); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  26%, 100% { transform: translateY(0); }
}

/* app UI, scoped to the phone */
.app-screen .app-top {
  background: linear-gradient(160deg, #46349B, #2E2470 55%, #232C8E);
  padding: 40px 16px 18px;
  color: #fff;
}
.app-status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; opacity: 0.95; padding: 0 4px 12px; }
.app-hi { display: flex; justify-content: space-between; align-items: center; font-size: 16.5px; font-weight: 600; margin-bottom: 14px; }
.app-bell { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92); position: relative; }
.app-bell::after { content: ""; position: absolute; inset: 8px; border: 1.5px solid #46349B; border-radius: 50% 50% 4px 4px; border-bottom: none; }
.earn-card {
  background: rgba(16, 19, 35, 0.35);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px;
}
.earn-row { display: flex; justify-content: space-between; align-items: flex-start; }
.earn-amt { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.earn-cap { font-size: 11.5px; opacity: 0.85; margin-top: 2px; }
.earn-badges { display: flex; gap: 6px; }
.earn-badges span {
  background: #fff; color: #1F2937;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 4px 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.earn-badges i { font-style: normal; }
.earn-badges .star { color: #D4A017; }
.earn-badges .flag { color: #46349B; }
.nudge-pill {
  margin-top: 12px;
  display: inline-block;
  background: linear-gradient(90deg, #7C3AED, #A855F7);
  font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 6px 12px;
}
.points-banner {
  margin: 12px; padding: 11px 12px;
  background: #E4F8E3; border: 1px solid #C7EBC6; border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #1F2937;
}
.points-banner b { color: #2E9E30; }
.points-banner .redeem { position: relative; font-weight: 700; color: var(--navy); border: 1.5px solid var(--navy); border-radius: 999px; padding: 4px 12px; font-size: 11px; background: #fff; }
.contest-card {
  margin: 4px 12px 14px; padding: 14px;
  border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #1E5231, #10331C 70%);
  position: relative; overflow: hidden;
}
.contest-tag {
  position: absolute; top: 0; left: 0;
  background: #F97316; color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 0 0 10px 0;
}
.contest-grid { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; margin-top: 14px; }
.contest-earn { text-align: center; }
.contest-earn .lbl { color: #F3C64C; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.contest-earn .amt { color: #F3C64C; font-size: 19px; font-weight: 700; }
.contest-earn svg { width: 54px; height: 54px; margin-top: 6px; }
.contest-body h5 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.contest-body p { font-size: 11px; line-height: 1.5; opacity: 0.9; margin: 0 0 10px; color: #fff; }
.contest-body .cta { background: #fff; color: #14351F; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 6px 12px; display: inline-block; }
.app-sec-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin: 16px 16px 8px; }
.attn-row { display: flex; gap: 10px; margin: 0 12px; }
.attn-card {
  flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; font-size: 12px; font-weight: 600; color: #1F2937;
}
.attn-card .sub { display: block; font-weight: 500; font-size: 10.5px; margin-top: 6px; }
.attn-card .sub.red { color: #DC2626; }
.attn-card .sub.amber { color: #D97706; }
.target-card {
  margin: 0 12px 10px; padding: 13px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
}
.target-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.tier { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.tier.low { background: #FEF3C7; color: #92400E; }
.tier.elite { background: #EDE9FE; color: #5B21B6; }
.target-card h6 { font-size: 13.5px; font-weight: 700; color: #1F2937; margin: 0 0 10px; line-height: 1.45; }
.target-foot { display: flex; justify-content: space-between; align-items: center; border-radius: 8px; padding: 8px 10px; font-size: 11px; font-weight: 600; }
.target-foot.bad { background: #FDECEC; color: #C0504D; }
.target-foot.good { background: #E4F8E3; color: #2E9E30; }
.target-foot .num { color: #1F2937; font-weight: 700; }
.app-footer { text-align: center; padding: 20px 0 26px; }
.app-footer .wordmark { font-size: 15px; }
.app-footer p { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; margin-top: 8px; }
.app-nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-around; align-items: center;
  background: #fff; border-top: 1px solid var(--border);
  padding: 10px 6px 14px;
}
.app-nav span { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; }
.app-nav span.on { color: var(--navy); }
/* home reads as the selected tab by being the one filled glyph, the rest are outlines */
.app-nav svg { display: block; width: 20px; height: 20px; margin: 0 auto 3px; }
.phone-caption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; }

/* ----- redemption flow: the screens stacked over the dashboard ----- */
.pt-stack { position: absolute; inset: 0; z-index: 5; }
@keyframes pt-stack {
  0%, 94%     { opacity: 1; }
  97%, 98%    { opacity: 0; }
  99%, 100%   { opacity: 1; }
}
.pt-screen {
  position: absolute; inset: 0; overflow: hidden;
  background: #F5F7FB; transform: translateX(100%);
}
.pt-s2 { z-index: 1; }
.pt-s3 { z-index: 2; }
@keyframes pt-s2 {
  0%, 30%     { transform: translateX(100%); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
  34%, 97%    { transform: translateX(0); }
  97.5%, 100% { transform: translateX(100%); }
}
@keyframes pt-s3 {
  0%, 46%     { transform: translateX(100%); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
  50%, 97%    { transform: translateX(0); }
  97.5%, 100% { transform: translateX(100%); }
}
.pt-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  background: linear-gradient(120deg, #2E2470, #46349B 62%, #5B4FBE);
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 40px 14px 13px; display: flex; align-items: center; gap: 11px;
}
.pt-back { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); position: relative; flex: none; }
.pt-back::after {
  content: ""; position: absolute; left: 10px; top: 9px; width: 7px; height: 7px;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(45deg);
}
.pt-scroll {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 92px 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
/* clears the fixed redeem button so the last term is never trapped behind it */
.pt-s3-scroll { padding-bottom: 78px; }
@keyframes pt-s2-scroll {
  0%, 38%     { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  42%, 97%    { transform: translateY(-125px); }
  97.5%, 100% { transform: translateY(0); }
}
@keyframes pt-s3-scroll {
  0%, 54%     { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  58%, 97%    { transform: translateY(-230px); }
  97.5%, 100% { transform: translateY(0); }
}
.pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pt-stat { border-radius: 12px; padding: 10px; }
.pt-stat.green { background: var(--cat-green-blob); }
.pt-stat.gold  { background: var(--cat-gold-blob); }
.pt-stat b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pt-stat span { font-size: 11px; color: var(--muted); }
.pt-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); }
.pt-tabs span { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 7px 0; }
.pt-tabs .on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.pt-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--muted); }
.pt-coupon {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(30, 42, 120, 0.05);
}
.pt-art { position: relative; height: 76px; padding: 8px; }
.pt-art svg { position: absolute; right: 12px; bottom: 8px; width: 40px; height: 40px; opacity: 0.8; }
.pt-vart svg { position: static; width: 26px; height: 26px; margin: 8px; opacity: 0.8; }
.pt-art.blue   { background: var(--cat-blue-blob); }
.pt-art.violet { background: var(--cat-violet-blob); }
.pt-art.green  { background: var(--cat-green-blob); }
.pt-art.red    { background: var(--cat-red-blob); }
.pt-pts { background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.pt-cap { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pt-vhead { display: flex; align-items: center; gap: 10px; }
.pt-vart { width: 42px; height: 42px; border-radius: 9px; flex: none; }
.pt-vart.blue { background: var(--cat-blue-blob); }
.pt-vhead b { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.pt-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px; display: flex; flex-direction: column; gap: 7px; }
.pt-box-t { font-size: 12px; font-weight: 700; color: var(--ink); }
.pt-amt { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.pt-amt span { display: block; font-size: 11px; color: var(--muted); }
.pt-amt b { font-size: 14px; font-weight: 700; color: var(--ink); }
.pt-hint { font-size: 11px; color: var(--muted); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chips span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--ink); background: #fff; }
.pt-chips .on { background: var(--cat-blue-blob); border-color: #9AA8EC; color: var(--navy); }
.pt-qty { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pt-qty .v { flex: 1; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pt-qty .b { width: 34px; text-align: center; border-left: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.pt-worth { background: var(--bg-indigo); border-radius: 8px; padding: 7px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.pt-worth .star, .pt-bal .star { color: #D4A017; font-style: normal; margin-right: 6px; }
.pt-gift { flex-direction: row; justify-content: space-between; align-items: center; }
.pt-toggle { width: 32px; height: 18px; border-radius: 999px; background: #E2E8F0; position: relative; flex: none; }
.pt-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.pt-tc { margin: 0; padding-left: 15px; }
.pt-tc li { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
/* scrolling terms fade out under the button instead of peeking past its edges */
.pt-s3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 2;
  background: linear-gradient(180deg, rgba(245, 247, 251, 0), #F5F7FB 42%);
  pointer-events: none;
}
.pt-cta {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  background: var(--navy); color: #fff; text-align: center;
  padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700;
}
.pt-scrim { position: absolute; inset: 0; z-index: 3; background: rgba(16, 19, 35, 0.45); opacity: 0; }
@keyframes pt-scrim {
  0%, 62%     { opacity: 0; }
  65%, 97%    { opacity: 1; }
  97.5%, 100% { opacity: 0; }
}
.pt-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 18px 18px 0 0; padding: 16px;
  transform: translateY(100%);
}
.pt-sa { z-index: 4; }
.pt-sb { z-index: 5; top: 92px; }
@keyframes pt-sa {
  0%, 62%     { transform: translateY(100%); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
  65%, 97%    { transform: translateY(0); }
  97.5%, 100% { transform: translateY(100%); }
}
@keyframes pt-sb {
  0%, 70%     { transform: translateY(100%); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
  73%, 97%    { transform: translateY(0); }
  97.5%, 100% { transform: translateY(100%); }
}
.pt-sheet-art { background: var(--bg-indigo); border-radius: 12px; padding: 14px; display: flex; justify-content: center; }
.pt-sheet-art svg { width: 96px; height: 66px; }
.pt-sheet-q { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: center; margin-top: 13px; line-height: 1.45; }
.pt-sheet-q b { font-weight: 700; color: var(--navy); }
.pt-sheet-s { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.45; }
.pt-cta-in { position: relative; left: auto; right: auto; bottom: auto; margin-top: 14px; }
.pt-sheet-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: var(--navy); }
.pt-x { width: 13px; height: 13px; position: relative; flex: none; }
.pt-x::before, .pt-x::after { content: ""; position: absolute; top: 6px; left: 0; width: 13px; height: 1.6px; background: var(--muted); }
.pt-x::before { transform: rotate(45deg); } .pt-x::after { transform: rotate(-45deg); }
.pt-ok { display: flex; justify-content: center; background: var(--cat-green-blob); border-radius: 12px; padding: 20px; margin-top: 14px; }
.pt-ok svg { width: 58px; height: 58px; }
.pt-ok-t { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 13px; }
.pt-ok-s { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.pt-kv { background: #F5F7FB; border-radius: 10px; padding: 10px; margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.pt-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pt-kv span { font-size: 11px; color: var(--muted); }
.pt-kv b { font-size: 11.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-bal { background: var(--cat-gold-blob); border-radius: 10px; padding: 9px 10px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink); }

/* finger tap: a touch disc plus one ripple, anchored inside whatever it taps */
.pt-tap {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(30, 42, 120, 0.24); border: 1.5px solid rgba(255, 255, 255, 0.85);
  opacity: 0; transform: scale(1.5); pointer-events: none; z-index: 30; font-style: normal;
}
.pt-tap::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--navy); opacity: 0; transform: scale(0.9); }
@keyframes pt-tap1 {
  0%, 26%     { opacity: 0; transform: scale(1.5); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  27.5%       { opacity: 1; transform: scale(1.1); animation-timing-function: ease-in; }
  28.5%       { opacity: 1; transform: scale(0.75); animation-timing-function: ease-out; }
  29.5%       { opacity: 0.85; transform: scale(1); }
  31%, 100%   { opacity: 0; transform: scale(1.5); }
}
@keyframes pt-rip1 {
  0%, 28.4%   { opacity: 0; transform: scale(0.9); }
  28.6%       { opacity: 0.55; transform: scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  31%         { opacity: 0; transform: scale(2.2); }
  31.1%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes pt-tap2 {
  0%, 42%     { opacity: 0; transform: scale(1.5); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  43.5%       { opacity: 1; transform: scale(1.1); animation-timing-function: ease-in; }
  44.5%       { opacity: 1; transform: scale(0.75); animation-timing-function: ease-out; }
  45.5%       { opacity: 0.85; transform: scale(1); }
  47%, 100%   { opacity: 0; transform: scale(1.5); }
}
@keyframes pt-rip2 {
  0%, 44.4%   { opacity: 0; transform: scale(0.9); }
  44.6%       { opacity: 0.55; transform: scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  47%         { opacity: 0; transform: scale(2.2); }
  47.1%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes pt-tap3 {
  0%, 58%     { opacity: 0; transform: scale(1.5); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  59.5%       { opacity: 1; transform: scale(1.1); animation-timing-function: ease-in; }
  60.5%       { opacity: 1; transform: scale(0.75); animation-timing-function: ease-out; }
  61.5%       { opacity: 0.85; transform: scale(1); }
  63%, 100%   { opacity: 0; transform: scale(1.5); }
}
@keyframes pt-rip3 {
  0%, 60.4%   { opacity: 0; transform: scale(0.9); }
  60.6%       { opacity: 0.55; transform: scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  63%         { opacity: 0; transform: scale(2.2); }
  63.1%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes pt-tap4 {
  0%, 65.5%   { opacity: 0; transform: scale(1.5); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  67%         { opacity: 1; transform: scale(1.1); animation-timing-function: ease-in; }
  68%         { opacity: 1; transform: scale(0.75); animation-timing-function: ease-out; }
  69%         { opacity: 0.85; transform: scale(1); }
  70.5%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pt-rip4 {
  0%, 67.9%   { opacity: 0; transform: scale(0.9); }
  68.1%       { opacity: 0.55; transform: scale(0.9); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  70.5%       { opacity: 0; transform: scale(2.2); }
  70.6%, 100% { opacity: 0; transform: scale(0.9); }
}

/* ---------- Nav polish: scrolled shadow + scroll progress ---------- */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(30, 42, 120, 0.10); }
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 200; pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light), var(--accent));
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Dark results band: the loudest moment on the page ---------- */
.dark-band { background: linear-gradient(135deg, #171F5C, var(--navy) 55%, #232C8E); position: relative; overflow: hidden; }
.dark-band .flow-wallpaper {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.dark-band .flow-wallpaper path,
.dark-band .flow-wallpaper rect,
.dark-band .flow-wallpaper circle {
  stroke: rgba(255, 255, 255, 0.08); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dark-band > .container { position: relative; }
.dark-band .eyebrow { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #C7CCEC; }
.dark-band .eyebrow::before { background: var(--accent); }
.dark-band h2 { color: #fff; }
.dark-band .section-head h2::after {
  background: linear-gradient(90deg, var(--accent) 0 40%, rgba(255,255,255,0.35) 40% 100%);
}
.dark-band .stat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.dark-band .stat:hover { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.dark-band .stat::before { background: linear-gradient(180deg, #8B97F0, var(--accent)); }
.dark-band .stat .num {
  background: linear-gradient(110deg, #C3CBFA 20%, var(--accent) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark-band .stat .cap { color: #B7BEE8; border-top-color: rgba(255, 255, 255, 0.12); }
/* huge faint outline echo of the stat's own number */
.dark-band .stat .ghost {
  position: absolute; right: -6px; bottom: -26px;
  font-size: 120px; font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none; user-select: none;
}

/* gradient hairline divider: only at the two biggest transitions */
.divider-grad { position: relative; }
.divider-grad::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--indigo-light), var(--accent));
}

/* ---------- Schematic spot illustrations ---------- */
.illus { width: 84px; height: 84px; display: block; margin-bottom: 4px; }
.illus * { vector-effect: non-scaling-stroke; }
.illus [stroke] { stroke-linecap: round; stroke-linejoin: round; }
.card .illus { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.card:hover .illus { transform: translateY(-2px); }

/* standardized corner quarter-circles, rotating tints */
.tint-corner { position: relative; }
.tint-corner::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 96px; height: 96px;
  border-radius: 0 0 0 100%;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}
.tint-corner:hover::after { transform: scale(1.12); }
.tint-corner.t-indigo::after { background: rgba(30, 42, 120, 0.07); }
.tint-corner.t-cream::after  { background: rgba(246, 203, 166, 0.22); }
.tint-corner.t-amber::after  { background: rgba(217, 119, 6, 0.08); }

/* problem-card ghost numeral warms up on hover */
.card[data-n] { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card[data-n]::after { transition: color 0.25s ease; }
.card[data-n]:hover::after { color: rgba(217, 119, 6, 0.20) !important; }

/* ---------- Contact panel: form + payout pipeline ---------- */
.contact-panel {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.contact-panel .form-side { padding: 8px 0 0 0; }
.contact-panel .pipeline-side {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  padding: 48px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.pipeline { list-style: none; margin: 0 0 28px; position: relative; }
.pipeline li {
  position: relative;
  padding: 0 0 44px 40px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.pipeline li .sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pipeline li::before {
  content: "";
  position: absolute; left: 6px; top: 22px; bottom: -2px; width: 0;
  border-left: 1.5px dashed rgba(30, 42, 120, 0.30);
}
.pipeline li:last-child::before { display: none; }
.pipeline li::after {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(30, 42, 120, 0.5);
}
.pipeline li.paid::after { background: var(--accent-deep); border-color: var(--accent-deep); }
.pipeline-side .reply-note { font-size: 13.5px; color: var(--muted); }
button.btn.sent { background: var(--success); cursor: default; }
button.btn.sent:hover { transform: none; box-shadow: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  h1, .hero .hero-h { font-size: 35px; }
  h2 { font-size: 27px; }
  section { padding: 64px 0; }
  .hero { padding: 56px 0 72px; }
  .hero-grid, .hero-home .hero-grid, .feature, .split, .crosstick { grid-template-columns: 1fr; gap: 36px; }
  .feature + .feature { margin-top: 64px; }
  .feature .product-mock, .feature > div:first-child .product-mock { transform: none; }
  .cols-3, .cols-4, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr; }
  .contact-panel { grid-template-columns: 1fr; }
  .contact-panel .pipeline-side { border-left: none; border-top: 1px solid var(--border); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 44px 30px; }
  .flagship { padding: 32px 26px; }
  .flow-lines { display: none; }

  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute; top: 74px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; padding: 12px 24px 24px;
    box-shadow: var(--shadow-deep);
  }
  .main-nav.open { display: flex; }
  .main-nav a.nav-link, .main-nav button.nav-link { display: block; width: 100%; text-align: left; padding: 12px 4px; }
  .main-nav a.nav-link::before, .main-nav button.nav-link::before { display: none; }
  .dropdown { position: static; box-shadow: none; border: none; padding: 0 0 8px 12px; min-width: 0; animation: none; }
  .nav-cta { margin: 12px 0 0; }
  .nav-cta .btn { display: flex; justify-content: center; }
}

@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4, .stat-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .form-card { padding: 26px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .logo-row { gap: 16px; }
  .logo-row .logo-frame { padding: 14px 22px; }
  .hl::after { display: none; }
  .hl { white-space: normal; }
  /* journey steps: numbers only, labels return on wider screens */
  .journey-step .jl { display: none; }
  .journey-steps { gap: 8px; }
  .journey-personas { display: none; }
}