/* StampRight marketing — enterprise-grade visual system.
   Same brand surface as the Web Bank app, but the marketing site
   leans into bigger typography, more white space, gradient backdrops,
   and the kind of layered depth that reads as "real company". */

:root {
  /* Brand palette */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7fafd;
  --surface-tint: #eef5ff;
  --ink: #0e1525;
  --ink-soft: #1f2c4d;
  --muted: #5b6b85;
  --line: #e6ecf3;
  --line-strong: #d4dde9;
  --accent: #2196F3;
  --accent-2: #1976d2;          /* deeper hover */
  --accent-soft: #e3f2fd;        /* tint backgrounds */
  --accent-ink: #ffffff;
  /* Success / "verified" accent — used sparingly on trust signals only.
     This is our DocuSign-gold equivalent: a second color that means
     "it worked, you can trust this." Never used for primary CTAs. */
  --ok: #1A8A4A;
  --ok-soft: #e8f5e9;
  --ok-line: #c8e6c9;
  --proof-bg: #081326;
  --proof-bg-2: #14213D;
  --proof-surface: rgba(255,255,255,0.08);
  --proof-line: rgba(255,255,255,0.14);
  --proof-text: #ffffff;
  --proof-muted: rgba(255,255,255,0.72);
  --proof-faint: rgba(255,255,255,0.52);
  --gradient-hero: linear-gradient(140deg, #f7fbff 0%, #eef5ff 38%, #e3f2fd 72%, #ffffff 100%);
  --gradient-cta: linear-gradient(135deg, #2196F3 0%, #1565c0 100%);
  --gradient-card-accent: linear-gradient(135deg, #2196F3 0%, #21d4fd 100%);
  /* A second gradient for creator-side touches — same blue family but with a
     warmer tilt. Subtle, so the brand still reads as one. */
  --gradient-creator: linear-gradient(135deg, #1976d2 0%, #0ea5e9 100%);
  --shadow-sm:  0 1px 2px rgba(15,21,37,0.05), 0 1px 1px rgba(15,21,37,0.03);
  --shadow:     0 8px 28px rgba(33,150,243,0.10), 0 2px 8px rgba(15,21,37,0.05);
  --shadow-lg:  0 24px 56px rgba(33,150,243,0.16), 0 8px 18px rgba(15,21,37,0.08);
  --shadow-blue:0 12px 40px rgba(33,150,243,0.30);
  --radius:     14px;
  --radius-lg:  22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 999px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.018em; line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(40px, 6.4vw, 72px); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
h4 { font-size: 15px; font-weight: 600; }
p  { color: var(--ink-soft); }
.muted { color: var(--muted); }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 13px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s, color .12s;
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-primary {
  background: var(--gradient-cta); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 44px rgba(33,150,243,0.42); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--accent); border-color: transparent; }
.btn-lg { padding: 16px 28px; font-size: 17px; }

/* ---------- Layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow    { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
section.tight { padding: 56px 0; }

/* ---------- Top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15,21,37,0.06);
}
.topnav-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 32px;
}
.topnav .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; color: var(--ink);
}
.topnav .brand img { width: 30px; height: 30px; }
.topnav nav {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(16px, 1.9vw, 26px);
  margin-left: clamp(0px, 1vw, 16px);
  min-width: 0;
}
.topnav nav a {
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.topnav nav a:hover, .topnav nav a.active { color: var(--accent); }
.topnav-cta {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.lang-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 82px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-sm);
}
.lang-switch button {
  min-width: 36px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(33,150,243,0.24);
}
.lang-switch button:focus-visible {
  outline: 2px solid rgba(33,150,243,0.55);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 88px 24px 112px;
  background: var(--gradient-hero);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(640px 320px at 15% 22%, rgba(33,150,243,0.12), transparent 60%),
    radial-gradient(520px 280px at 85% 18%, rgba(33,212,253,0.10), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
}
@media (min-width: 980px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
}
.hero-content .eyebrow { margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .grad {
  background: var(--gradient-card-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede {
  font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft);
  max-width: 600px; margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px;
}
.hero-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Hero visual — layered mock receipt card */
.hero-visual { position: relative; min-height: 460px; }
.mock-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 26px;
}
/* Fake browser URL bar inside the mock card — this is the WEDGE feature.
   The verifier link is the thing we want the eye to land on first. */
.mock-url-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: -8px -6px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ink-soft);
}
.mock-url-bar .mock-url-icon { color: var(--ok); display: inline-flex; }
.mock-url-bar .mock-url-text { flex: 1; }
.mock-url-bar .mock-url-text strong { color: var(--accent-2); font-weight: 700; }
.mock-url-bar .mock-url-share { color: var(--muted); display: inline-flex; }
.mock-card-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.mock-card-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.mock-card-brand img { width: 24px; height: 24px; }
.mock-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; background: var(--ok-soft); color: var(--ok);
  border: 1px solid var(--ok-line); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.mock-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.mock-row { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.mock-row:last-child { border-bottom: none; }
.mock-row .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.mock-row .v { font-size: 14px; color: var(--ink); font-weight: 500; }
.mock-row .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink-soft); word-break: break-all; }
.mock-card-bottom {
  margin-top: 18px; padding-top: 14px;
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--muted);
}
.mock-card-bottom .pill { padding: 4px 10px; background: var(--surface-tint); border-radius: 999px; color: var(--accent-2); font-weight: 600; font-size: 11px; }
/* Floating mini-cards */
.mock-side {
  position: absolute; right: -24px; top: 40px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow); width: 220px;
  display: flex; align-items: center; gap: 12px;
}
.mock-side .icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
}
.mock-side .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mock-side .value { font-size: 15px; font-weight: 700; color: var(--ink); }
.mock-side.bottom { top: auto; right: auto; left: -16px; bottom: 24px; }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--surface-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 36px 24px;
}
.trust-bar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.trust-bar .label {
  color: var(--muted); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.trust-bar .points {
  display: flex; gap: 28px; flex-wrap: wrap; color: var(--ink-soft); font-size: 14px; font-weight: 500;
}
.trust-bar .points span { display: inline-flex; align-items: center; gap: 8px; }
.trust-bar .points svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
  background: var(--gradient-card-accent);
}
.stat .num { font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.stat .num small { font-size: 18px; font-weight: 700; color: var(--accent); }
.stat .label { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* ---------- Section heads ---------- */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 14px; }
.section-head .sub { color: var(--ink-soft); font-size: 17px; max-width: 660px; margin: 0 auto; }

/* ---------- Pillar cards (two big ones side-by-side) ---------- */
.pillars { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar .pillar-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--gradient-card-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; box-shadow: var(--shadow-blue);
}
.pillar h3 { font-size: 26px; margin-bottom: 12px; }
.pillar p { font-size: 16px; color: var(--ink-soft); margin-bottom: 18px; }
.pillar ul { list-style: none; padding: 0; margin: 0 0 8px; }
.pillar li { padding: 7px 0 7px 28px; position: relative; color: var(--ink-soft); font-size: 15px; }
.pillar li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 16px; height: 16px; background: var(--accent-soft);
  border-radius: 50%;
}
.pillar li::after {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Feature grid (smaller cards) ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.feature {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.feature:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.feature .icon-pill {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature .icon-pill svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 8px; }
.feature p  { font-size: 14.5px; color: var(--muted); }

/* ---------- Three-step flow ---------- */
.steps {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  margin-top: 12px;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 26px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute; top: -18px; left: 26px;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--gradient-cta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; box-shadow: var(--shadow-blue);
}
.step h3 { margin: 14px 0 8px; }
.step p  { color: var(--muted); font-size: 14.5px; }

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.testimonial {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.testimonial blockquote {
  font-size: 17px; color: var(--ink-soft); line-height: 1.55;
  border: none; padding: 0; margin: 0;
}
.testimonial blockquote::before { content: "“"; font-size: 56px; color: var(--accent); line-height: 0; vertical-align: -22px; margin-right: 4px; }
.testimonial .person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.testimonial .person-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.testimonial .person-role { color: var(--muted); font-size: 12.5px; }

/* ---------- CTA banner ---------- */
.final-cta {
  padding: 92px 0 104px;
  background: #ffffff;
}
.cta-banner {
  display: grid;
  gap: 32px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,255,0.98)),
    #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(20,33,61,0.10);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(33,150,243,0.08), transparent 46%, rgba(33,150,243,0.05)),
    radial-gradient(circle, rgba(33,150,243,0.10) 1px, transparent 1px);
  background-size: auto, 30px 30px;
  pointer-events: none;
}
@media (min-width: 900px) {
  .cta-banner { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr); }
}
.cta-copy,
.cta-receipt {
  position: relative;
  z-index: 1;
}
.cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(46,179,94,0.28);
  border-radius: 999px;
  background: rgba(46,179,94,0.12);
  color: #126c3a;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cta-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,0.14);
}
.cta-banner h2 {
  color: var(--ink);
  font-size: clamp(30px, 3.8vw, 48px);
  margin-bottom: 14px;
  max-width: 720px;
}
.cta-banner p  {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 560px;
  margin-bottom: 28px;
}
.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-banner .btn { position: relative; }
.cta-banner .btn-primary {
  background: var(--gradient-cta); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-blue);
}
.cta-banner .btn-primary:hover { color: #fff; }
.cta-banner .btn-ghost { color: var(--ink); border: 1.5px solid var(--line-strong); background: #fff; }
.cta-banner .btn-ghost:hover { background: var(--surface-soft); color: var(--ink); border-color: var(--accent); }
.cta-receipt {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(20,33,61,0.10);
}
.cta-receipt-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(26,138,74,0.10);
  color: #126c3a;
  font-size: 12px;
  font-weight: 850;
}
.cta-receipt-head .mkt-live-dot {
  margin-right: 0;
  animation: none;
  box-shadow: 0 0 0 4px rgba(26,138,74,0.12);
}
.cta-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(20,33,61,0.08);
}
.cta-receipt-row span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #66758e;
}
.cta-receipt-row strong {
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}
.cta-receipt code {
  display: block;
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #eef7ff;
  color: var(--accent-2);
  border: 1px solid rgba(33,150,243,0.14);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */
footer.site {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 56px 24px 32px;
}
/* Footer: brand col + 4 nav cols (Product, Company, Legal, Resources).
   Resources is slightly wider because its label set is longest. */
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: 32px;
}
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 24px; }
}
@media (max-width: 900px) {
  /* Brand on its own row, the 4 nav cols beneath in a 2x2 */
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-inner > .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-inner > .footer-col:first-child { grid-column: auto; }
}
.footer-col h4 {
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px; font-weight: 700;
}
.footer-col a { display: block; padding: 5px 0; color: var(--ink-soft); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-col .brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
}
.footer-col .brand img { width: 28px; height: 28px; }
.foundation-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 276px);
  min-height: 50px;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(33,150,243,0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(33,150,243,0.08), rgba(34,211,238,0.05)),
    #ffffff;
  color: var(--ink);
  line-height: 1.2;
  box-shadow: var(--shadow-sm);
}
.foundation-badge:hover {
  color: var(--ink);
  border-color: rgba(33,150,243,0.34);
  box-shadow: 0 10px 28px rgba(33,150,243,0.12);
  transform: translateY(-1px);
}
.foundation-mark {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(76,176,226,0.28);
  box-shadow: inset 0 0 0 3px rgba(33,150,243,0.045);
  overflow: hidden;
}
.foundation-mark img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}
.foundation-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.foundation-copy span {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.18;
}
.foundation-copy strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.18;
}
.foundation-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.footer-bottom {
  max-width: 1180px; margin: 36px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px;
}

/* ---------- Long-form (about, faq) ---------- */
.prose { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.prose h1 { margin-bottom: 18px; }
.prose h2 { font-size: 24px; margin: 36px 0 14px; }
.prose p  { color: var(--ink-soft); margin-bottom: 16px; font-size: 16.5px; }
.prose ul { margin: 8px 0 18px 22px; color: var(--ink-soft); }
.prose li { margin: 6px 0; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan.featured {
  border-color: var(--accent); box-shadow: var(--shadow);
  position: relative;
}
.plan.featured::before {
  content: "Most popular"; position: absolute; top: -12px; right: 22px;
  background: var(--gradient-cta); color: #fff;
  padding: 5px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-blue);
}
.plan h3 { font-size: 20px; margin-bottom: 4px; }
.plan .tag { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.plan .price { font-size: 44px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan ul { list-style: none; padding: 22px 0; margin: 0 0 22px; border-top: 1px solid var(--line); }
.plan li { padding: 6px 0 6px 26px; color: var(--ink-soft); font-size: 14.5px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent-soft);
}
.plan li::after {
  content: ""; position: absolute; left: 3.5px; top: 16px;
  width: 7px; height: 3.5px;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; width: 100%; }

/* ---------- Forms (contact) ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px; max-width: 580px; margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.form-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.form-card input, .form-card textarea {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); margin-bottom: 18px;
  background: var(--surface-soft);
  transition: border-color .12s, background .12s;
}
.form-card input:focus, .form-card textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.form-card .btn-primary { width: 100%; padding: 14px; font-size: 16px; }

/* ---------- Subtle entrance reveal (CSS-only) ---------- */
.reveal {
  opacity: 0; transform: translateY(20px);
  animation: revealIn .7s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.reveal.d2 { animation-delay: .2s; }
.reveal.d3 { animation-delay: .35s; }
@keyframes revealIn { to { opacity: 1; transform: none; } }

/* ============================================================
   HERO V2 — bigger type, mesh background, animated blobs
   ============================================================ */
.hero.hero-v2 {
  padding: 96px 24px 120px;
  background: linear-gradient(180deg, #ffffff 0%, #f5fafe 60%, #ffffff 100%);
  position: relative; overflow: hidden;
}
.hero.hero-v2::before { display: none; } /* override the V1 radial */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.hero-mesh .mesh-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.55;
}
.hero-mesh .mesh-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  animation: floaty 18s ease-in-out infinite alternate;
}
.hero-mesh .blob-a {
  width: 460px; height: 460px; left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(33,150,243,0.55), rgba(33,150,243,0) 70%);
}
.hero-mesh .blob-b {
  width: 540px; height: 540px; right: -160px; top: 60px;
  background: radial-gradient(circle, rgba(33,212,253,0.45), rgba(33,212,253,0) 70%);
  animation-delay: -8s;
}
.hero-mesh .blob-c {
  width: 360px; height: 360px; left: 32%; bottom: -160px;
  background: radial-gradient(circle, rgba(94,53,177,0.30), rgba(94,53,177,0) 70%);
  animation-delay: -14s;
}
@keyframes floaty {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(20px,-20px) scale(1.05); }
  100% { transform: translate(-15px,18px) scale(0.98); }
}
.hero-v2-inner { position: relative; z-index: 1; }

/* ============================================================
   HERO BIZ — replaces hero-v2 on the homepage.
   Less template-y: no floating blobs, no animation, subtle
   single-direction gradient + clean grid. Reads as infrastructure
   product, not designed marketing page.
   ============================================================ */
.hero.hero-biz {
  padding: 88px 24px 96px;
  background:
    radial-gradient(circle 700px at 88% 8%, rgba(33,150,243,0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.hero.hero-biz::before { display: none; }
/* Subtle vertical grid lines — feels like product/infra, not blog */
.hero.hero-biz::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(33,150,243,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.hero.hero-biz .hero-inner { position: relative; z-index: 1; }
.hero-h1-biz {
  font-size: clamp(40px, 5.4vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 580px;
}

/* Mock card on the business hero — tighter, more product-looking */
.mock-card-biz {
  transform: none;
  box-shadow: 0 1px 2px rgba(15,21,37,0.06), 0 16px 40px rgba(33,150,243,0.10), 0 4px 12px rgba(15,21,37,0.06);
  border: 1px solid var(--line);
}
.mock-card-biz:hover { transform: none; }
.hero-visual-v2 { min-height: 0; }

/* ============================================================
   HOW IT WORKS — dark proof pipeline. The section shows the
   actual product motion: private file -> sealed receipt -> verifier.
   ============================================================ */
.how-clean {
  position: relative;
  padding: 112px 0 116px;
  background:
    linear-gradient(180deg, var(--proof-bg) 0%, #0b1730 52%, var(--proof-bg-2) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.how-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(125,211,252,0.12) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
  pointer-events: none;
}
.how-clean::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(33,150,243,0.22), rgba(125,211,252,0.16), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(125,211,252,0.12), rgba(33,150,243,0.18), transparent) bottom / 100% 1px no-repeat;
  pointer-events: none;
}
.how-clean .container {
  position: relative;
  z-index: 1;
}
.how-clean .section-head h2 {
  color: #fff;
}
.how-head .eyebrow {
  color: #bfdbfe;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.how-head-copy {
  max-width: 660px;
  margin: 16px auto 0;
  color: rgba(255,255,255,0.72);
  font-size: 16.5px;
  line-height: 1.55;
}

/* ============================================================
   HERO STACK — headline on top, full-bleed photo below.
   Both subjects equally visible. Real StampRight UI is overlaid
   onto each phone screen in the photo using CSS perspective
   transforms, so the AI gibberish text is covered by real product.
   ============================================================ */
.hero.hero-stack {
  display: block;
  padding: 56px 0 0;
  background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%);
}
.hero.hero-stack .hero-content { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.hero-stack-head {
  padding: 0 24px;
}
.hero-stack-head .hero-actions { justify-content: center; }

/* Bottom row — full-bleed photo composition */
.hero-stack-visual {
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-photo-frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 24px;
  aspect-ratio: 4 / 3;
  max-height: 660px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow:
    0 -30px 60px rgba(20, 33, 61, 0.10),
    0 0 0 1px rgba(20, 33, 61, 0.05);
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: contrast(1.04) saturate(0.92) brightness(0.98);
}
.hero-photo-tint {
  position: absolute;
  inset: 0;
  background:
    /* Soft brand-blue diffuse, very low opacity */
    linear-gradient(180deg, rgba(27, 77, 199, 0.03) 0%, rgba(27, 77, 199, 0.0) 60%),
    /* Gentle vignette */
    radial-gradient(circle at 50% 60%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* === Photo pill — "Transfer of rights · 2 seconds ago" === */
.hero-photo-pill {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #14213D);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  z-index: 5;
}
.hero-photo-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 3px rgba(26, 138, 74, 0.22);
}

/* ===== PHONE-SCREEN OVERLAYS =====
   These divs are positioned + perspective-transformed to sit
   ON the phone screens IN the photo. Real product UI replaces
   the AI gibberish.  Coordinates calibrated for IMG_7258. */
.phone-overlay {
  position: absolute;
  width: 16%;
  aspect-ratio: 9 / 19;
  z-index: 4;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
.phone-overlay-left {
  /* Woman's phone — left side of frame, tilts slightly right */
  left: 36%;
  top: 49%;
  transform: perspective(900px) rotateY(8deg) rotateX(-3deg) rotateZ(-3deg);
  transform-origin: center center;
}
.phone-overlay-right {
  /* Man's phone — right side of frame, tilts slightly left */
  left: 52%;
  top: 49%;
  transform: perspective(900px) rotateY(-8deg) rotateX(-3deg) rotateZ(3deg);
  transform-origin: center center;
}
.po-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
  border-radius: 14% / 7%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 6% 8% 8%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  color: #14213D;
  font-size: 9px;
  /* Inner stroke + subtle reflection so it reads as glass */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.85),
    inset 0 2px 6px rgba(255,255,255,0.4),
    inset 0 -10px 14px rgba(0,0,0,0.06);
}
.po-status {
  font-size: 7.5px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 6px;
}
.po-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.po-header img { width: 12px; height: 12px; }
.po-card {
  background: #fff;
  border-radius: 8px;
  padding: 6px 7px;
  margin-bottom: 5px;
  box-shadow: 0 2px 6px rgba(20,33,61,0.10), 0 0 0 1px rgba(20,33,61,0.05);
  position: relative;
  flex: 1;
}
.po-seal {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: -8px; right: 6px;
  box-shadow: 0 2px 6px rgba(26, 138, 74, 0.45);
}
.po-seal svg { width: 11px; height: 11px; }
.po-line { margin-top: 4px; }
.po-line-row { display: flex; justify-content: space-between; }
.po-line-row > div { min-width: 0; }
.po-k {
  font-size: 5.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a93a8;
}
.po-v {
  font-size: 8.5px;
  font-weight: 700;
  color: #14213D;
}
.po-v-sm { font-size: 7.5px; font-weight: 600; color: #14213D; }
.po-v-ok { font-size: 8px; font-weight: 800; color: #1A8A4A; }
.po-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 5.5px;
  color: #8a93a8;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(20,33,61,0.08);
  word-break: break-all;
}
.po-cta {
  text-align: center;
  font-size: 7.5px;
  font-weight: 800;
  color: var(--accent, #1B4DC7);
  background: rgba(27, 77, 199, 0.10);
  border-radius: 999px;
  padding: 4px 6px;
  margin-top: 4px;
}
.po-cta-muted { background: rgba(20, 33, 61, 0.06); color: var(--ink-soft, #5b6478); }

/* Incoming-transfer card variant (right phone) */
.po-card-incoming {
  border-left: 2px solid var(--accent, #1B4DC7);
  background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%);
}
.po-section-label {
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #1B4DC7);
  margin-bottom: 4px;
}
.po-buttons { display: flex; gap: 4px; margin-top: 5px; }
.po-btn {
  flex: 1;
  font-size: 7px;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 999px;
  border: 0;
  background: #f0f3f9;
  color: #14213D;
  cursor: pointer;
}
.po-btn-primary {
  background: linear-gradient(180deg, #1B4DC7, #1545a8);
  color: #fff;
}

@media (max-width: 760px) {
  .hero.hero-stack { padding-top: 32px; }
  .hero-photo-frame { margin: 0; border-radius: 0; max-height: 480px; aspect-ratio: 4/3; }
  /* On phones, hide the overlay phone-screens — the photo alone reads fine */
  .phone-overlay { display: none; }
  .hero-photo-pill { top: 14px; font-size: 11px; padding: 6px 12px; }
}

/* ============================================================
   HERO WITH HANDOFF PHOTO — backdrop image + crisp StampRight
   phone mockup floating front-center. The mockup is the focal
   point; the photo is mood/atmosphere.
   ============================================================ */
.hero.hero-handoff {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
}
.hero-handoff .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  /* Gentle grading — keep the photo bright + warm, just nudge
     toward brand-palette so it integrates instead of jumping out. */
  filter: contrast(1.03) saturate(0.92) brightness(1.0);
  z-index: 0;
}
.hero-handoff .hero-bg-tint {
  position: absolute;
  inset: 0;
  background:
    /* Left-to-right gradient for the headline to sit on */
    linear-gradient(95deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.70) 32%, rgba(255,255,255,0.25) 58%, rgba(255,255,255,0.0) 80%),
    /* Subtle brand-blue wash overall */
    linear-gradient(180deg, rgba(27, 77, 199, 0.06) 0%, rgba(27, 77, 199, 0.0) 60%);
  z-index: 1;
}
.hero.hero-handoff .hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 640px;
}
.hero.hero-handoff .hero-content {
  position: relative;
  z-index: 3;
}
.hero.hero-handoff .hero-h1 {
  color: var(--ink, #14213D);
}
.hero.hero-handoff .hero-lede {
  color: var(--ink-soft, #5b6478);
}

/* ===  iPhone mockup device  === */
.hero-handoff-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 580px;
}
.device-phone {
  position: relative;
  width: 320px;
  height: 660px;
  background: linear-gradient(140deg, #1a1a1d 0%, #0a0a0c 100%);
  border-radius: 48px;
  padding: 12px;
  box-shadow:
    0 40px 80px rgba(20, 33, 61, 0.35),
    0 12px 24px rgba(20, 33, 61, 0.20),
    inset 0 0 0 2px rgba(255,255,255,0.06);
  transform: perspective(1200px) rotateY(-8deg) rotateX(2deg) rotateZ(-1.5deg);
  transform-origin: center center;
}
.device-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: #000;
  border-radius: 18px;
  z-index: 3;
}
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f6f9ff 0%, #e9efff 100%);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ph-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 20px 26px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #14213D);
}
.ph-icons { letter-spacing: -0.5px; opacity: 0.7; font-size: 10px; }
.ph-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 6px;
}
.ph-app-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink, #14213D);
}
.ph-app-brand img { width: 24px; height: 24px; }
.ph-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #1B4DC7, #2196F3);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(27, 77, 199, 0.3);
}
.ph-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a8;
  padding: 12px 22px 6px;
}

.ph-receipt {
  margin: 6px 16px 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(20,33,61,0.08), 0 0 0 1px rgba(20,33,61,0.04);
}
.ph-receipt-top {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20,33,61,0.06);
}
.ph-seal {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(26, 138, 74, 0.35);
}
.ph-seal svg { width: 22px; height: 22px; }
.ph-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: #e8f5e9;
  color: #1A8A4A;
  border-radius: 999px;
}
.ph-rk {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a93a8;
}
.ph-rv {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #14213D);
  margin-top: 2px;
}
.ph-rr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
}
.ph-rr .ph-rv { font-size: 12.5px; margin: 0; }
.ph-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: #8a93a8;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(20,33,61,0.06);
  word-break: break-all;
}
.ph-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.ph-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(27, 77, 199, 0.08);
  color: var(--accent, #1B4DC7);
  border-radius: 999px;
}

.ph-tabbar {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 8px 22px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(20,33,61,0.06);
}
.ph-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: #8a93a8;
  font-weight: 600;
}
.ph-tab-icon {
  font-size: 18px;
  line-height: 1;
}
.ph-tab-active { color: var(--accent, #1B4DC7); }
.ph-tab-active .ph-tab-icon {
  background: var(--accent, #1B4DC7);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(27,77,199,0.35);
}

/* Floating callouts that point at the device */
.hero-callout {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow:
    0 16px 38px rgba(20,33,61,0.16),
    0 0 0 1px rgba(20,33,61,0.04);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  z-index: 4;
}
.hero-callout-h { font-weight: 700; color: var(--ink, #14213D); font-size: 13px; }
.hero-callout-s { font-size: 11px; color: #8a93a8; margin-top: 1px; }
.hero-callout-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 4px rgba(26,138,74,0.18);
  flex-shrink: 0;
}
.hero-callout-amber-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14,165,233,0.20);
  flex-shrink: 0;
}
.hero-callout-1 {
  top: 60px;
  left: -10px;
  transform: rotate(-2deg);
}
.hero-callout-2 {
  bottom: 80px;
  right: 0px;
  transform: rotate(1.5deg);
}

@media (max-width: 900px) {
  .hero.hero-handoff .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
  }
  .hero.hero-handoff { min-height: auto; padding: 60px 0 40px; }
  .hero-handoff .hero-bg-tint {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.60) 40%, rgba(255,255,255,0.85) 100%);
  }
  .hero-handoff-visual { min-height: 480px; }
  .device-phone { width: 260px; height: 540px; transform: none; }
  .hero-callout-1 { left: -20px; top: 30px; }
  .hero-callout-2 { right: -20px; bottom: 40px; }
  .hero.hero-handoff .hero-content { margin: 0 auto; max-width: 560px; }
}

/* ============================================================
   USE-CASE PAGE V2 — clean, breathable, scannable.
   One purpose per section. Strong type hierarchy. Lots of whitespace.
   ============================================================ */

/* ============================================================
   RE2 HERO — image-free, brand-gradient + title-chain visual.
   ============================================================ */
.re2-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, #f6f8fc 0%, #eef3ff 100%);
}
/* Diffuse brand-gradient mesh behind the content */
.re2-hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(33, 150, 243, 0.18) 0%, transparent 38%),
    radial-gradient(circle at 80% 8%, rgba(27, 77, 199, 0.15) 0%, transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255, 140, 60, 0.07) 0%, transparent 45%);
  pointer-events: none;
}
/* Subtle dot grid */
.re2-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(27, 77, 199, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.re2-hero .container { position: relative; z-index: 2; }
.re2-hero-grid-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.re2-hero-h1 {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 16px 0 22px;
  color: var(--ink, #14213D);
}
.re2-hero-lede {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  max-width: 540px;
  margin: 0 0 32px;
}
.re2-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* === PROPERTY STAGE — home as centerpiece, transaction artifacts orbit === */
.re2-hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.property-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 50px 40px 60px;
}

/* The "STAMPED" seal — diagonal, top-right */
.property-seal {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A8A4A 0%, #2eb35e 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(12deg);
  box-shadow:
    0 16px 40px rgba(26, 138, 74, 0.32),
    inset 0 0 0 3px rgba(255,255,255,0.18);
  z-index: 5;
}
.property-seal-ring {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.property-seal-ring svg { width: 20px; height: 20px; }
.property-seal-text {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.2;
}

/* The main property card */
.property-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(20, 33, 61, 0.15),
    0 0 0 1px rgba(20, 33, 61, 0.04);
  position: relative;
  z-index: 1;
}
.property-illust {
  width: 100%;
  line-height: 0;
}
.property-illust svg { width: 100%; height: auto; display: block; }

.property-meta { padding: 20px 22px 22px; }
.property-addr-line {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #14213D);
  letter-spacing: -0.01em;
}
.property-addr-sub {
  font-size: 12.5px;
  color: var(--ink-soft, #5b6478);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 3px;
}
.property-stats {
  display: flex;
  gap: 24px;
  margin: 16px 0 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
  border-bottom: 1px solid rgba(20, 33, 61, 0.06);
}
.property-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #14213D);
  letter-spacing: -0.01em;
}
.property-stat-lbl {
  font-size: 11px;
  color: var(--ink-soft, #5b6478);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 1px;
}
.property-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink, #14213D);
}
.property-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 3px rgba(26, 138, 74, 0.22);
  flex-shrink: 0;
}

/* Orbiting transaction artifacts — small floating cards */
.property-orbit {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 10px 13px;
  box-shadow:
    0 12px 28px rgba(20, 33, 61, 0.14),
    0 0 0 1px rgba(20, 33, 61, 0.04);
  font-size: 12px;
  z-index: 4;
  min-width: 140px;
}
.orbit-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent, #1B4DC7);
  margin-bottom: 2px;
}
.orbit-h {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #14213D);
  letter-spacing: -0.005em;
}
.orbit-s {
  font-size: 11px;
  color: var(--ink-soft, #5b6478);
  margin-top: 1px;
}
.orbit-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: var(--ink-soft, #5b6478);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
}
.property-orbit-deed {
  top: 6%;
  left: -28px;
  transform: rotate(-3deg);
}
.property-orbit-trust {
  bottom: 22%;
  right: -22px;
  transform: rotate(3deg);
}
.property-orbit-chain {
  bottom: 0;
  left: 12px;
  transform: rotate(-2deg);
}

@media (max-width: 900px) {
  .re2-hero { padding: 64px 0 80px; }
  .re2-hero-grid-content { grid-template-columns: 1fr; gap: 56px; }
  .re2-hero-h1 { font-size: clamp(36px, 8vw, 52px); }
  .property-stage { max-width: 380px; margin: 0 auto; padding: 36px 18px 50px; }
  .property-seal { width: 88px; height: 88px; top: 0; right: 0; }
  .property-orbit-deed { left: -10px; }
  .property-orbit-trust { right: -10px; }
}

/* === COMPLETE TRANSACTION STACK === */
.re2-stack { padding: 96px 0; background: #fff; }
.re2-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.re2-stack-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line, #e2e7f1);
  padding: 30px 28px 28px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.re2-stack-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent, #1B4DC7);
  box-shadow: 0 16px 36px rgba(20, 33, 61, 0.08);
}
.re2-stack-card-featured {
  background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
  border: 2px solid var(--accent, #1B4DC7);
  box-shadow: 0 18px 44px rgba(27, 77, 199, 0.14);
}
.re2-stack-flag {
  position: absolute;
  top: -12px;
  right: 22px;
  background: linear-gradient(135deg, #1B4DC7, #0ea5e9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(27, 77, 199, 0.24);
}
/* === MINI VISUAL PREVIEWS — one per stack card === */
.re2-mini {
  height: 168px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6f8fc 0%, #eef3ff 100%);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid rgba(27, 77, 199, 0.10);
}
.re2-stack-card-featured .re2-mini {
  background: linear-gradient(135deg, #14213D 0%, #1B4DC7 100%);
  border-color: rgba(27, 77, 199, 0.30);
}

/* --- 1. Legal template document --- */
.re2-mini-doc {
  width: 80%; height: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12), 0 0 0 1px rgba(20, 33, 61, 0.05);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.re2-mini-doc-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink, #14213D);
  border-bottom: 1px solid rgba(20,33,61,0.10);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.re2-mini-tag {
  background: rgba(27,77,199,0.08); color: var(--accent, #1B4DC7);
  padding: 1px 5px; border-radius: 4px; font-size: 7px;
}
.re2-mini-doc-row {
  height: 4px; background: #eef1f7; border-radius: 2px;
}
.re2-mini-doc-section {
  font-size: 7px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--accent, #1B4DC7);
  margin-top: 4px;
}
.re2-mini-doc-sig {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: auto; padding-top: 6px;
}
.re2-mini-doc-sigline {
  height: 1px; background: var(--ink, #14213D); position: relative;
}
.re2-mini-doc-sigline::after {
  content: "x"; position: absolute; left: 0; bottom: 2px;
  font-size: 8px; color: var(--ink-soft, #5b6478);
}
.re2-mini-doc-stamp {
  position: absolute;
  bottom: -6px; right: -6px;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  font-size: 7px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 4px;
  transform: rotate(-6deg);
  box-shadow: 0 4px 10px rgba(26, 138, 74, 0.30);
}

/* --- 2. Cryptographic receipt --- */
.re2-mini-receipt {
  width: 90%;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(20, 33, 61, 0.12), 0 0 0 1px rgba(20, 33, 61, 0.05);
}
.re2-mini-receipt-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.re2-mini-seal {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(26, 138, 74, 0.40);
}
.re2-mini-seal svg { width: 16px; height: 16px; }
.re2-mini-receipt-title {
  font-size: 11px; font-weight: 800; color: var(--ink, #14213D);
}
.re2-mini-receipt-sub {
  font-size: 9.5px; color: var(--ink-soft, #5b6478);
}
.re2-mini-receipt-badge {
  font-size: 10px; font-weight: 800;
  background: #e8f5e9; color: #1A8A4A;
  padding: 3px 7px; border-radius: 999px;
}
.re2-mini-receipt-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; color: var(--ink-soft, #5b6478);
  padding: 6px 0;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
  border-bottom: 1px solid rgba(20, 33, 61, 0.06);
  margin-bottom: 6px;
  word-break: break-all;
}
.re2-mini-receipt-meta-row {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--ink-soft, #5b6478); font-weight: 600;
}

/* --- 3. RON video call --- */
.re2-mini-ron {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.re2-mini-ron-main {
  position: relative;
  background: linear-gradient(135deg, #1a2a4a 0%, #0a1428 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.10);
}
.re2-mini-ron-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2196F3, #1B4DC7);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(33, 150, 243, 0.20);
}
.re2-mini-ron-avatar svg { width: 30px; height: 30px; }
.re2-mini-ron-live {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  display: flex; align-items: center; gap: 5px;
}
.re2-mini-ron-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5252;
  box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.30);
  animation: ronpulse 1.6s ease-in-out infinite;
}
@keyframes ronpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.30); }
  50% { box-shadow: 0 0 0 7px rgba(255, 82, 82, 0); }
}
.re2-mini-ron-side {
  display: flex; flex-direction: column; gap: 6px;
}
.re2-mini-ron-self {
  flex: 1;
  background: linear-gradient(135deg, #2196F3, #1545a8);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.re2-mini-ron-sig {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 4px;
  font-size: 8px; color: var(--ink-soft, #5b6478);
}
.re2-mini-ron-sig-line {
  width: 80%; height: 16px;
  background: linear-gradient(135deg, transparent 0%, transparent 30%, #1B4DC7 30%, #1B4DC7 32%, transparent 32%);
  border-bottom: 1.5px solid var(--ink, #14213D);
}

/* --- 4. Title chain (mini stacked nodes) --- */
.re2-mini-chain {
  display: flex; flex-direction: column;
  gap: 0;
  width: 88%;
}
.re2-mini-chain-node {
  background: #fff;
  border-radius: 6px;
  padding: 5px 9px;
  box-shadow: 0 3px 10px rgba(20, 33, 61, 0.08), 0 0 0 1px rgba(20, 33, 61, 0.05);
  display: flex; justify-content: space-between; align-items: center;
}
.re2-mini-chain-active {
  background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
  box-shadow: 0 6px 16px rgba(27, 77, 199, 0.18), 0 0 0 1.5px var(--accent, #1B4DC7);
}
.re2-mini-chain-name {
  font-size: 10px; font-weight: 800; color: var(--ink, #14213D);
}
.re2-mini-chain-year {
  font-size: 8px; color: var(--ink-soft, #5b6478);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.re2-mini-chain-link {
  height: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--accent, #1B4DC7);
}

/* --- 5. County-ready bundle (stacked papers) --- */
.re2-mini-bundle {
  position: relative;
  width: 75%; height: 100%;
}
.re2-mini-bundle-paper {
  position: absolute;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.10), 0 0 0 1px rgba(20, 33, 61, 0.05);
}
.re2-mini-bundle-paper-3 {
  top: 14px; left: 18px;
  right: -6px; bottom: -6px;
  transform: rotate(4deg);
}
.re2-mini-bundle-paper-2 {
  top: 8px; left: 10px;
  right: 0; bottom: 0;
  transform: rotate(-2deg);
}
.re2-mini-bundle-paper-1 {
  top: 0; left: 0; right: 6px; bottom: 6px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  z-index: 3;
}
.re2-mini-bundle-head {
  font-size: 8px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink, #14213D);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(20,33,61,0.10);
  margin-bottom: 6px;
}
.re2-mini-bundle-body {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.re2-mini-bundle-line {
  height: 3.5px; background: #eef1f7; border-radius: 2px;
}
.re2-mini-bundle-rec {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(26, 138, 74, 0.12);
  color: #1A8A4A;
  font-size: 8px; font-weight: 900;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  border: 1.5px solid #1A8A4A;
  border-radius: 3px;
  transform: rotate(-10deg);
}

/* --- 6. Vault (custody/storage) --- */
.re2-mini-vault {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.re2-mini-vault-body {
  position: relative;
  width: 110px; height: 110px;
  background: linear-gradient(135deg, #2a3759 0%, #14213D 100%);
  border-radius: 12px;
  box-shadow:
    0 8px 22px rgba(20, 33, 61, 0.35),
    inset 0 0 0 3px rgba(255,255,255,0.08),
    inset 0 -10px 20px rgba(0,0,0,0.20);
}
.re2-mini-vault-dial {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5a7e, #2a3759);
  box-shadow: 0 2px 8px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.re2-mini-vault-dial-mark {
  position: absolute;
  top: 4px;
  width: 3px; height: 8px;
  background: #1A8A4A;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(26, 138, 74, 0.7);
}
.re2-mini-vault-dial-center {
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #2a3759, #14213D);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.re2-mini-vault-handle {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 30px;
  background: linear-gradient(135deg, #4a5a7e, #2a3759);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.30);
}
.re2-mini-vault-pad {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; gap: 3px;
}
.re2-mini-vault-pad-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(26, 138, 74, 0.85);
  box-shadow: 0 0 4px rgba(26, 138, 74, 0.55);
}
.re2-mini-vault-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink, #14213D);
  box-shadow: 0 4px 10px rgba(20, 33, 61, 0.10);
}
.re2-mini-vault-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 2px rgba(26, 138, 74, 0.22);
}
.re2-stack-card h3 {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.re2-stack-card > p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0 0 14px;
}
.re2-stack-card ul {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
  padding-top: 12px;
  margin-top: auto;
}
.re2-stack-card li {
  font-size: 13px;
  color: var(--ink, #14213D);
  padding: 5px 0 5px 20px;
  position: relative;
  line-height: 1.45;
}
.re2-stack-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, #1B4DC7);
  font-weight: 800;
  font-size: 11px;
}
@media (max-width: 980px) {
  .re2-stack-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .re2-stack-grid { grid-template-columns: 1fr; }
}

/* === TWO PATHS — pros OR direct (legacy, kept for any old links) === */
.re2-paths { padding: 96px 0; background: #fff; }
.re2-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
.re2-path {
  position: relative;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line, #e2e7f1);
  padding: 32px 32px 36px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.re2-path:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20, 33, 61, 0.08);
}
.re2-path-featured {
  background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
  border: 2px solid var(--accent, #1B4DC7);
  box-shadow: 0 20px 50px rgba(27, 77, 199, 0.14);
}
.re2-path-flag {
  position: absolute;
  top: -14px;
  right: 24px;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(26, 138, 74, 0.35);
}
.re2-path-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(27, 77, 199, 0.08);
  color: var(--accent, #1B4DC7);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.re2-path-icon-wrap-featured {
  background: linear-gradient(135deg, #1B4DC7, #2196F3);
  color: #fff;
  box-shadow: 0 8px 22px rgba(27, 77, 199, 0.32);
}
.re2-path-icon-wrap svg { width: 26px; height: 26px; }
.re2-path h3 {
  font-size: 23px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.re2-path-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0 0 18px;
}
.re2-path ul {
  list-style: none;
  padding: 0; margin: 0;
}
.re2-path li {
  font-size: 14.5px;
  color: var(--ink, #14213D);
  padding: 7px 0 7px 24px;
  position: relative;
  line-height: 1.45;
}
.re2-path li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, #1B4DC7);
  font-weight: 800;
}
/* Numbered DIY steps inside the featured card */
.re2-diy-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: re2step;
}
.re2-diy-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(27, 77, 199, 0.10);
  font-size: 14.5px;
  color: var(--ink, #14213D);
  line-height: 1.45;
}
.re2-diy-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.re2-diy-steps li::before { display: none; }   /* override generic check */
.re2-diy-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B4DC7, #2196F3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  box-shadow: 0 4px 10px rgba(27, 77, 199, 0.30);
  flex-shrink: 0;
  margin-top: 2px;
}
.re2-diy-steps li strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.re2-diy-steps li span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-soft, #5b6478);
  line-height: 1.5;
}
.re2-paths-fine {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft, #5b6478);
  line-height: 1.6;
}
@media (max-width: 860px) {
  .re2-paths-grid { grid-template-columns: 1fr; }
  .re2-path-flag { right: 16px; }
}

/* === SHOWCASE — annotations left, receipt right === */
.re2-showcase {
  padding: 96px 0;
  background: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
}
.re2-showcase-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

/* Annotations (left column) */
.re2-annotations { display: flex; flex-direction: column; gap: 26px; }
.re2-annot {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
}
.re2-annot-num {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(27, 77, 199, 0.08), rgba(33, 150, 243, 0.04));
  color: var(--accent, #1B4DC7);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(27, 77, 199, 0.18);
}
.re2-annot-h {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #14213D);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.re2-annot-s {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
}

/* Receipt card (right column) */
.re2-receipt {
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px 24px;
  box-shadow:
    0 24px 60px rgba(20, 33, 61, 0.12),
    0 0 0 1px rgba(20, 33, 61, 0.04);
  position: relative;
}
.re2-receipt-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ink-soft, #5b6478);
  background: #f0f3f9;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.re2-receipt-url strong { color: var(--ink, #14213D); }
.re2-receipt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(20, 33, 61, 0.06);
}
.re2-receipt-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800;
  font-size: 15px;
}
.re2-receipt-brand img { width: 22px; height: 22px; }
.re2-receipt-badge {
  background: #e8f5e9;
  color: #1A8A4A;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.re2-receipt-block { margin-bottom: 16px; }
.re2-receipt-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}
.re2-receipt-split .re2-receipt-block { margin: 0; }
.re2-rk {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #5b6478);
  margin-bottom: 4px;
}
.re2-rv {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #14213D);
  letter-spacing: -0.005em;
}
.re2-rv-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft, #5b6478);
  margin-top: 2px;
}
.re2-rv-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  word-break: break-all;
  font-weight: 600;
}
.re2-receipt-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
  border-bottom: 1px solid rgba(20, 33, 61, 0.06);
  margin-bottom: 18px;
}
.re2-pill {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: rgba(27, 77, 199, 0.08);
  color: var(--accent, #1B4DC7);
  border-radius: 999px;
}
.re2-receipt-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(180deg, #1B4DC7, #1545a8);
  color: #fff;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14.5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 6px 18px rgba(27, 77, 199, 0.25);
}
.re2-receipt-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(27, 77, 199, 0.32);
  text-decoration: none;
  color: #fff;
}

@media (max-width: 900px) {
  .re2-showcase { padding: 64px 20px; }
  .re2-showcase-wrap { grid-template-columns: 1fr; gap: 36px; }
  .re2-annotations { order: 2; }
  .re2-receipt { order: 1; }
}

/* === GENERIC SECTION FRAME === */
.re2-section { padding: 96px 0; }
.re2-section-alt { background: #f6f7fb; }
.re2-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.re2-section-head h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 12px 0 0;
}

/* === CATEGORY GRID (6 cards, clean) === */
.re2-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.re2-cat {
  background: #fff;
  border: 1px solid var(--line, #e2e7f1);
  border-radius: 16px;
  padding: 28px 26px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.re2-cat:hover {
  border-color: var(--accent, #1B4DC7);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(27, 77, 199, 0.10);
}
.re2-cat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(27, 77, 199, 0.10);
  color: var(--accent, #1B4DC7);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.re2-cat-icon svg { width: 24px; height: 24px; }
.re2-cat h3 {
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.re2-cat p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
@media (max-width: 900px) { .re2-cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .re2-cat-grid { grid-template-columns: 1fr; } }

/* === STEPS — 3-step horizontal flow === */
.re2-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  counter-reset: step;
}
.re2-step { text-align: left; }
.re2-step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B4DC7, #2196F3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(27, 77, 199, 0.30);
}
.re2-step h3 {
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.re2-step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
@media (max-width: 800px) { .re2-steps { grid-template-columns: 1fr; gap: 36px; } }

/* === ROLES — 6 cards, simple === */
.re2-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.re2-role {
  background: #fff;
  border-radius: 14px;
  padding: 24px 24px 22px;
  border: 1px solid var(--line, #e2e7f1);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.re2-role:hover {
  border-color: var(--accent, #1B4DC7);
  transform: translateY(-3px);
}
.re2-role-tag {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent, #1B4DC7);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.re2-role p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
@media (max-width: 900px) { .re2-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .re2-roles { grid-template-columns: 1fr; } }

/* === PRICING (real-estate-specific, cleaner than generic) === */
.re2-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}
.re2-plan {
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  border: 1px solid var(--line, #e2e7f1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.re2-plan-featured {
  border: 2px solid var(--accent, #1B4DC7);
  box-shadow: 0 20px 50px rgba(27, 77, 199, 0.15);
  transform: scale(1.03);
  z-index: 1;
}
.re2-plan-pop {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1B4DC7, #1545a8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(27, 77, 199, 0.35);
}
.re2-plan-tag {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--ink-soft, #5b6478);
  margin-bottom: 8px;
}
.re2-plan-price {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--ink, #14213D);
}
.re2-plan-price small {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft, #5b6478);
}
.re2-plan-price-custom { font-size: 28px; padding-top: 10px; }
.re2-plan ul {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  flex: 1;
}
.re2-plan li {
  font-size: 14.5px;
  color: var(--ink, #14213D);
  padding: 7px 0 7px 22px;
  position: relative;
  line-height: 1.45;
}
.re2-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, #1B4DC7);
  font-weight: 800;
}
.re2-plan .btn { width: 100%; text-align: center; }
@media (max-width: 900px) {
  .re2-pricing { grid-template-columns: 1fr; max-width: 420px; }
  .re2-plan-featured { transform: none; }
}

/* === FINAL CTA === */
.re2-cta {
  padding: 96px 0;
  background: linear-gradient(180deg, #f6f7fb 0%, #fff 100%);
  text-align: center;
}
.re2-cta h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.re2-cta p {
  font-size: 17px;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
.re2-fine {
  font-size: 13px;
  color: var(--ink-soft, #5b6478);
  margin-top: 28px;
}

/* ============================================================
   USE-CASE PAGE — real-estate-specific layouts.
   ============================================================ */

/* Document-type grid (9 cards, what-you-stamp) */
.re-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.re-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line, #e2e7f1);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.re-card:hover {
  border-color: var(--accent, #1B4DC7);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(27, 77, 199, 0.08);
}
.re-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(27, 77, 199, 0.10);
  color: var(--accent, #1B4DC7);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.re-icon-wrap svg { width: 22px; height: 22px; }
.re-card h3 { font-size: 18px; margin: 0 0 10px; letter-spacing: -0.01em; }
.re-card ul {
  margin: 0; padding-left: 0; list-style: none;
  font-size: 13.5px; color: var(--ink-soft, #5b6478); line-height: 1.7;
}
.re-card li::before {
  content: "·";
  margin-right: 8px;
  color: var(--accent, #1B4DC7);
  font-weight: 800;
}
@media (max-width: 860px) {
  .re-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .re-grid { grid-template-columns: 1fr; }
}

/* Dispute scenarios — narrative-style with big numbers */
.dispute-list {
  display: flex; flex-direction: column; gap: 24px;
  max-width: 920px; margin: 0 auto;
}
.dispute-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line, #e2e7f1);
  border-radius: 14px;
  padding: 26px 28px;
  transition: border-color 0.15s ease;
}
.dispute-row:hover { border-color: var(--accent, #1B4DC7); }
.dispute-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--accent, #1B4DC7);
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 4px;
}
.dispute-body h3 {
  font-size: 21px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.dispute-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #5b6478);
  margin: 0 0 10px;
}
.dispute-fix {
  background: rgba(27, 77, 199, 0.06);
  border-left: 3px solid var(--accent, #1B4DC7);
  padding: 12px 16px !important;
  border-radius: 6px;
  color: var(--ink, #14213D) !important;
  margin-top: 14px !important;
}
@media (max-width: 700px) {
  .dispute-row { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .dispute-num { font-size: 32px; }
}

/* Role grid (12 cards, smaller) */
.role-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.role-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line, #e2e7f1);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.role-card:hover { border-color: var(--accent, #1B4DC7); transform: translateY(-2px); }
.role-card h3 {
  font-size: 15.5px;
  margin: 0 0 6px;
  color: var(--accent, #1B4DC7);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.role-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
@media (max-width: 900px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .role-grid { grid-template-columns: 1fr; } }

/* Workflow timeline */
.workflow-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.workflow-step {
  background: #fff;
  border-radius: 14px;
  padding: 26px 24px 22px;
  position: relative;
  border: 1px solid var(--line, #e2e7f1);
}
.workflow-marker {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #1B4DC7), #2196F3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(27, 77, 199, 0.3);
}
.workflow-step h3 { font-size: 18px; margin: 0 0 10px; letter-spacing: -0.01em; }
.workflow-step p { font-size: 14px; line-height: 1.6; color: var(--ink-soft, #5b6478); margin: 0; }
@media (max-width: 880px) { .workflow-line { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .workflow-line { grid-template-columns: 1fr; } }

/* Compliance grid */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.compliance-item {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2e7f1);
  border-left: 3px solid var(--accent, #1B4DC7);
}
.compliance-item h4 {
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--ink, #14213D);
  letter-spacing: -0.005em;
}
.compliance-item p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft, #5b6478);
  margin: 0;
}
@media (max-width: 900px) { .compliance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .compliance-grid { grid-template-columns: 1fr; } }

/* Integration grid */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.integration-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line, #e2e7f1);
}
.integration-card h4 { font-size: 14.5px; margin: 0 0 6px; }
.integration-card p { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #5b6478); margin: 0; }
@media (max-width: 900px) { .integration-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .integration-grid { grid-template-columns: 1fr; } }

/* ============================================================
   VERTICAL HERO — for dedicated use-case pages. Full-bleed
   photographic background with a left-aligned headline overlay.
   ============================================================ */
.vertical-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.vertical-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Cinematic duotone — photo becomes atmosphere, copy is the content. */
  filter: contrast(1.15) saturate(0.6) brightness(0.62) hue-rotate(-10deg);
}
/* Brand-blue wash layered with multiply blend */
.vertical-hero-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(27, 77, 199, 0.62) 0%, rgba(21, 69, 168, 0.32) 65%, rgba(255, 140, 60, 0.18) 100%),
    radial-gradient(circle at 20% 85%, rgba(20, 33, 61, 0.0) 0%, rgba(20, 33, 61, 0.55) 85%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Left-side darkening for legible white copy on top */
.vertical-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,15,33,0.78) 0%, rgba(8,15,33,0.48) 45%, rgba(8,15,33,0.10) 100%);
}
/* SVG film-grain overlay */
.vertical-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.vertical-hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 0;
  color: #fff;
}
.vertical-hero-overlay h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.vertical-hero-overlay .lede,
.vertical-hero-overlay .hero-lede {
  color: #fff !important;
  font-size: 18px;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  max-width: 640px;
  font-weight: 500;
}
.vertical-hero-overlay .eyebrow {
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 760px) {
  .vertical-hero { min-height: 420px; }
  .vertical-hero-overlay { padding: 60px 0; }
}

/* ============================================================
   HERO WITH PHOTO — backdrop image behind the existing hero,
   with a strong white-to-transparent gradient on the left so
   the headline + lede stay readable, and the mock card on the
   right sits elegantly over the villa scene.
   ============================================================ */
.hero.hero-with-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Kill the existing white gradient background so the photo shows through. */
  background: #fff !important;
}
/* Also kill the existing ::after grid-line overlay that sits on top of the photo. */
.hero.hero-with-photo::after { display: none !important; }
.hero.hero-with-photo::before { display: none !important; }

/* === Tighten the mock receipt card so the villa photo dominates ===
   When the photo is behind, the mock should float like a notification
   in the lower-right, not block the right half of the hero. */
.hero-with-photo .hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px 0;
}
.hero-with-photo .mock-card {
  max-width: 340px;
  padding: 18px 20px;
  transform: rotate(-1deg);
  box-shadow:
    0 1px 2px rgba(15,21,37,0.08),
    0 24px 56px rgba(15,21,37,0.18),
    0 8px 20px rgba(15,21,37,0.10);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
}
.hero-with-photo .mock-card:hover { transform: rotate(-1deg) translateY(-4px); }
.hero-with-photo .mock-url-bar { margin: -4px -2px 12px; padding: 8px 12px; font-size: 12px; }
.hero-with-photo .mock-card-top { margin-bottom: 12px; padding-bottom: 12px; }
.hero-with-photo .mock-row { padding: 8px 0; }
.hero-with-photo .mock-row .k { font-size: 10.5px; }
.hero-with-photo .mock-row .v { font-size: 13px; }
.hero-with-photo .mock-card-bottom { margin-top: 10px; padding-top: 10px; }
.hero-with-photo .mock-card-bottom .pill { font-size: 10px; padding: 3px 9px; }

@media (max-width: 880px) {
  .hero-with-photo .hero-visual {
    justify-content: center;
    padding-top: 0;
    min-height: 280px;
  }
  .hero-with-photo .mock-card { max-width: 320px; }
}
.hero-with-photo .hero-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  z-index: 0;
  /* Light grading — keeps it bright + premium, not washed out */
  filter: contrast(1.02) saturate(0.95);
}
.hero-with-photo .hero-photo-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Strong left-side white veil so the text sits on clean ground */
    linear-gradient(95deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.95) 22%,
      rgba(255,255,255,0.75) 42%,
      rgba(255,255,255,0.35) 60%,
      rgba(255,255,255,0.08) 80%,
      rgba(255,255,255,0.0) 100%),
    /* Subtle brand-blue wash over the photo half */
    linear-gradient(180deg, rgba(27, 77, 199, 0.04) 0%, rgba(27, 77, 199, 0.0) 60%);
}
.hero.hero-with-photo .hero-inner {
  position: relative;
  z-index: 2;
}
/* Mobile: stronger overall veil so text is readable on top */
@media (max-width: 880px) {
  .hero-with-photo .hero-photo-veil {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.80) 35%,
        rgba(255,255,255,0.92) 100%);
  }
  .hero-with-photo .hero-photo-bg { background-position: center 25%; }
}

/* ============================================================
   INDUSTRY CARDS V2 — Vercel/Stripe pattern. Clean line icon
   in a tinted color block, type-driven body, consistent
   structure across all 6. No bespoke art per card.
   ============================================================ */
.ind-v2 {
  position: relative;
  z-index: 0;
  margin-top: -72px;
  padding: 204px 0 108px;
  background:
    radial-gradient(720px 320px at 18% 0%, rgba(33,150,243,0.12), transparent 72%),
    linear-gradient(180deg, var(--proof-bg) 0%, var(--proof-bg-2) 48%, var(--proof-bg) 100%);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.ind-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(125,211,252,0.12) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 24px 24px;
  background-position: center 34px, center 34px, center 10px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 8%, #000 24%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 8%, #000 24%, #000 84%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.ind-v2::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  left: max(52px, calc(50% - 532px));
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(125,211,252,0.06) 8%,
    rgba(125,211,252,0.34) 20%,
    rgba(125,211,252,0.20) 48%,
    rgba(125,211,252,0.08) 76%,
    transparent 100%
  );
  box-shadow:
    280px 0 0 rgba(125,211,252,0.08),
    640px 0 0 rgba(125,211,252,0.06),
    0 0 26px rgba(33,150,243,0.18);
  pointer-events: none;
  z-index: 0;
}
.ind-v2 .container { position: relative; z-index: 1; }
.ind-v2 .section-head {
  position: relative;
}
.ind-v2 .section-head::before {
  content: "";
  position: absolute;
  left: 34px;
  top: -44px;
  width: calc(50% - 206px);
  height: 1px;
  background: linear-gradient(90deg, rgba(125,211,252,0.46), rgba(125,211,252,0.18), transparent);
  box-shadow: 0 0 22px rgba(33,150,243,0.18);
  pointer-events: none;
}
.ind-v2 .section-head::after {
  content: "";
  position: absolute;
  left: 29px;
  top: -49px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56,189,248,0.12), 0 0 26px rgba(56,189,248,0.55);
  pointer-events: none;
}
.ind-v2 .section-head h2 { color: #fff; }
.ind-v2 .section-head .eyebrow {
  color: #bfdbfe;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.ind-v2 .section-head .grad {
  background: linear-gradient(135deg, #93c5fd 0%, #38bdf8 46%, #dbeafe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ind-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}
.ind-v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 218px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.052)),
    rgba(8,19,38,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 30px 28px 28px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  transition: transform 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease, background 0.20s ease;
}
.ind-v2-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
  opacity: 0.95;
}
.ind-v2-card::after {
  content: "";
  position: absolute;
  inset: 4px -40% auto;
  height: 82px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(125,211,252,0.13) 48%, transparent 100%);
  transform: translateX(-70%) skewX(-18deg);
  opacity: 0;
  transition: transform 0.42s ease, opacity 0.24s ease;
  pointer-events: none;
}
.ind-v2-card > * {
  position: relative;
  z-index: 1;
}
/* All blue family — different shades for variation, no purples/greens. */
.ind-v2-card[data-tone="blue"]::before   { background: linear-gradient(90deg, #1B4DC7, #2196F3); }
.ind-v2-card[data-tone="amber"]::before  { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }   /* sky */
.ind-v2-card[data-tone="violet"]::before { background: linear-gradient(90deg, #1e40af, #3b82f6); }   /* royal */
.ind-v2-card[data-tone="green"]::before  { background: linear-gradient(90deg, #0891b2, #06b6d4); }   /* cyan */
.ind-v2-card[data-tone="navy"]::before   { background: linear-gradient(90deg, #14213D, #2a3759); }   /* navy */
.ind-v2-card[data-tone="rose"]::before   { background: linear-gradient(90deg, #2563eb, #60a5fa); }   /* azure */
.ind-v2-card:hover {
  transform: translateY(-5px);
  border-color: rgba(125,211,252,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.07)),
    rgba(8,19,38,0.78);
  box-shadow: 0 28px 72px rgba(0,0,0,0.34), 0 0 0 1px rgba(33,150,243,0.18);
  text-decoration: none;
}
.ind-v2-card:hover::after {
  opacity: 1;
  transform: translateX(70%) skewX(-18deg);
}
.ind-v2-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33,150,243,0.14);
  color: #93c5fd;
  border: 1px solid rgba(125,211,252,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  margin-bottom: 18px;
}
.ind-v2-icon svg { width: 22px; height: 22px; }
.ind-v2-card[data-tone="amber"]  .ind-v2-icon { background: rgba(14, 165, 233, 0.14); color: #7dd3fc; }   /* sky */
.ind-v2-card[data-tone="violet"] .ind-v2-icon { background: rgba(30, 64, 175, 0.18); color: #93c5fd; }   /* royal */
.ind-v2-card[data-tone="green"]  .ind-v2-icon { background: rgba(8, 145, 178, 0.16); color: #67e8f9; }   /* cyan */
.ind-v2-card[data-tone="navy"]   .ind-v2-icon { background: rgba(96, 165, 250, 0.12); color: #bfdbfe; }   /* navy */
.ind-v2-card[data-tone="rose"]   .ind-v2-icon { background: rgba(37, 99, 235, 0.16); color: #93c5fd; }   /* azure */
.ind-v2-card h3 {
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: #fff;
}
.ind-v2-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
@media (max-width: 1000px) { .ind-v2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ind-v2-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MARKETPLACE V2 — dignified type-driven listing cards with a
   single tone-colored accent bar. No graphics, no clip-art.
   Now on a dark navy stage for dramatic contrast against the
   white industry section above.
   ============================================================ */
.mkt-v2 {
  position: relative;
  z-index: 1;
  padding: 96px 0;
  background:
    radial-gradient(900px 600px at 80% 20%, rgba(33,150,243,0.20), transparent 60%),
    radial-gradient(800px 500px at 10% 80%, rgba(14,165,233,0.16), transparent 60%),
    radial-gradient(700px 400px at 50% 50%, rgba(125,211,252,0.08), transparent 70%),
    linear-gradient(180deg, #0a1428 0%, #14213D 50%, var(--proof-bg) 100%);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
/* Subtle dot-grid texture so the dark surface has character */
.mkt-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
  z-index: 0;
}
/* Layered bottom glow that keeps the dark surface dimensional. */
.mkt-v2::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 380px;
  background:
    linear-gradient(rgba(255,255,255,0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.034) 1px, transparent 1px),
    radial-gradient(circle, rgba(125,211,252,0.10) 1px, transparent 1px),
    radial-gradient(640px 260px at 18% 100%, rgba(33,150,243,0.22), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(8,19,38,0.42) 42%, var(--proof-bg) 100%);
  background-size: 72px 72px, 72px 72px, 24px 24px, auto, auto;
  background-position: center, center bottom, center bottom, center bottom, center;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.64) 30%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.64) 30%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
.mkt-v2 .container { position: relative; z-index: 1; }

/* Override the section-head h2 colors for the dark backdrop */
.mkt-v2 .section-head h2 { color: #fff; }
.mkt-v2 .section-head .eyebrow {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.mkt-v2 .section-head .sub { color: rgba(255,255,255,0.78); }
.mkt-v2 .section-head .sub strong { color: #fff; }
.mkt-v2 .mkt-live-dot { background: #2eb35e; box-shadow: 0 0 0 0 rgba(46,179,94,0.55); }

/* Card styling for the dark surface */
.mkt-v2 .mkt-v2-card {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 50px rgba(0,0,0,0.30);
}
.mkt-v2 .mkt-v2-card:hover {
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(33,150,243,0.30);
}
.mkt-v2 .mkt-v2-foot { color: rgba(255,255,255,0.80); }
.mkt-v2 .mkt-v2-foot-sub { color: rgba(255,255,255,0.55); }

.mkt-v2-proof-browser {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
    rgba(4,10,24,0.56);
  box-shadow: 0 34px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(18px);
}
.mkt-v2-proof-browser::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 6px rgba(56,189,248,0.12), 0 0 26px rgba(56,189,248,0.56);
  pointer-events: none;
  z-index: 3;
}
.mkt-v2-proof-browser::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -206px;
  width: 2px;
  height: 206px;
  background: linear-gradient(180deg, rgba(125,211,252,0.78) 0%, rgba(125,211,252,0.34) 48%, rgba(125,211,252,0.08) 78%, transparent 100%);
  box-shadow: 0 0 24px rgba(33,150,243,0.28);
  pointer-events: none;
  z-index: 2;
}
.mkt-v2-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
}
.mkt-v2-tab {
  appearance: none;
  min-height: 84px;
  padding: 14px 15px;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.84);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.mkt-v2-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.11);
}
.mkt-v2-tab:focus-visible {
  outline: 2px solid #67e8f9;
  outline-offset: 3px;
}
.mkt-v2-tab.is-active {
  color: var(--ink, #0e1525);
  border-color: rgba(255,255,255,0.88);
  background: linear-gradient(135deg, #ffffff 0%, #edf7ff 100%);
  box-shadow: 0 18px 36px rgba(0,0,0,0.22), 0 0 0 1px rgba(33,150,243,0.16);
}
.mkt-v2-tab-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
}
.mkt-v2-tab-title {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mkt-v2-tab-meta {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 650;
  color: rgba(255,255,255,0.58);
}
.mkt-v2-tab.is-active .mkt-v2-tab-kicker { color: var(--accent-2, #1976d2); }
.mkt-v2-tab.is-active .mkt-v2-tab-meta { color: #52627a; }

.mkt-v2-panels { min-width: 0; }
.mkt-v2-panel {
  position: relative;
  min-height: 100%;
  padding: 30px;
  display: grid;
  align-content: start;
  gap: 22px;
  overflow: hidden;
  border-radius: 14px;
  color: var(--ink, #0e1525);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(239,247,255,0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
}
.mkt-v2-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
}
.mkt-v2-panel[data-tone="amber"]::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.mkt-v2-panel[data-tone="violet"]::before { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.mkt-v2-panel[data-tone="green"]::before { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.mkt-v2-panel[data-tone="navy"]::before { background: linear-gradient(90deg, #14213D, #2a3759); }
.mkt-v2-panel[data-tone="rose"]::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.mkt-v2-panel[hidden] { display: none; }
.mkt-v2-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mkt-v2-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(26,138,74,0.10);
  color: #126c3a;
  font-size: 12px;
  font-weight: 800;
}
.mkt-v2-status .mkt-live-dot {
  margin-right: 0;
  box-shadow: 0 0 0 4px rgba(26,138,74,0.12);
  animation: none;
}
.mkt-v2-time {
  font-size: 12px;
  font-weight: 750;
  color: #68768d;
}
.mkt-v2-panel-main {
  display: grid;
  gap: 8px;
  max-width: 680px;
}
.mkt-v2-panel-main h3 {
  margin: 0;
  font-size: clamp(30px, 4.1vw, 48px);
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--ink, #0e1525);
}
.mkt-v2-panel-main p {
  max-width: 620px;
  color: #465672;
  font-size: 16px;
  line-height: 1.6;
}
.mkt-v2-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mkt-v2-proof-cell {
  min-height: 96px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid rgba(20,33,61,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.76);
}
.mkt-v2-proof-cell span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #66758e;
}
.mkt-v2-proof-cell strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink, #0e1525);
}
.mkt-v2-receipt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #081326;
  color: #fff;
}
.mkt-v2-receipt span {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fb2e8;
}
.mkt-v2-receipt code {
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #f8fbff;
  overflow-wrap: anywhere;
}
.mkt-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}
.mkt-v2-card {
  background: #fff;
  border: 1px solid var(--line, #e2e7f1);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mkt-v2-card:hover {
  transform: translateY(-3px);
  border-color: rgba(27, 77, 199, 0.30);
  box-shadow: 0 14px 32px rgba(20, 33, 61, 0.08);
}
.mkt-v2-bar {
  height: 6px;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
}
/* Blue family only — no purples / greens / amber / rose. */
.mkt-v2-card[data-tone="blue"]   .mkt-v2-bar { background: linear-gradient(90deg, #1B4DC7, #2196F3); }
.mkt-v2-card[data-tone="amber"]  .mkt-v2-bar { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.mkt-v2-card[data-tone="violet"] .mkt-v2-bar { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.mkt-v2-card[data-tone="green"]  .mkt-v2-bar { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.mkt-v2-card[data-tone="navy"]   .mkt-v2-bar { background: linear-gradient(90deg, #14213D, #2a3759); }
.mkt-v2-card[data-tone="rose"]   .mkt-v2-bar { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.mkt-v2-body { padding: 22px 24px 22px; flex: 1; display: flex; flex-direction: column; }
.mkt-v2-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #1B4DC7);
  margin-bottom: 8px;
}
.mkt-v2-card[data-tone="amber"]  .mkt-v2-cat { color: #0284c7; }
.mkt-v2-card[data-tone="violet"] .mkt-v2-cat { color: #1e40af; }
.mkt-v2-card[data-tone="green"]  .mkt-v2-cat { color: #0891b2; }
.mkt-v2-card[data-tone="navy"]   .mkt-v2-cat { color: #14213D; }
.mkt-v2-card[data-tone="rose"]   .mkt-v2-cat { color: #2563eb; }
.mkt-v2-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #14213D);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.mkt-v2-sub {
  font-size: 13.5px;
  color: var(--ink-soft, #5b6478);
  line-height: 1.45;
  margin-bottom: 16px;
}
.mkt-v2-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 33, 61, 0.08);
  margin-top: auto;
}
.mkt-v2-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #14213D);
}
.mkt-v2-badge {
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(26, 138, 74, 0.10);
  color: #1A8A4A;
  padding: 4px 10px;
  border-radius: 999px;
}
.mkt-v2-foot {
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft, #5b6478);
  margin: 40px auto 0;
  max-width: 640px;
  line-height: 1.6;
}
.mkt-v2-foot-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft, #5b6478);
  opacity: 0.85;
}

/* Live-feed pulsing dot in the marketplace eyebrow */
.mkt-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1A8A4A;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(26, 138, 74, 0.55);
  animation: mktLivePulse 1.8s infinite;
}
@keyframes mktLivePulse {
  0%   { box-shadow: 0 0 0 0   rgba(26, 138, 74, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(26, 138, 74, 0); }
  100% { box-shadow: 0 0 0 0   rgba(26, 138, 74, 0); }
}
@media (max-width: 1000px) {
  .mkt-v2-grid { grid-template-columns: 1fr 1fr; }
  .mkt-v2-proof-browser { grid-template-columns: 1fr; }
  .mkt-v2-proof-browser::before,
  .mkt-v2-proof-browser::after,
  .ind-v2 .section-head::before,
  .ind-v2 .section-head::after {
    display: none;
  }
  .mkt-v2-tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mkt-v2-tabs::-webkit-scrollbar { display: none; }
  .mkt-v2-tab { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .mkt-v2-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mkt-v2 { padding: 76px 0; }
  .mkt-v2-grid { grid-template-columns: 1fr; }
  .mkt-v2-proof-browser {
    margin-inline: -4px;
    padding: 9px;
    border-radius: 14px;
  }
  .mkt-v2-tab {
    min-height: 94px;
    padding: 13px;
  }
  .mkt-v2-panel {
    padding: 24px 18px 20px;
    border-radius: 10px;
  }
  .mkt-v2-panel-main h3 { font-size: 30px; }
  .mkt-v2-proof-grid { grid-template-columns: 1fr; }
  .mkt-v2-receipt {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================
   (legacy) INDUSTRY CARDS — six tiles, one per profession, each
   with a small visual mockup. Kept for reference only.
   ============================================================ */
.ind-section { padding: 96px 0; background: #fff; }
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.ind-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #e2e7f1);
  border-radius: 18px;
  padding: 22px 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ind-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent, #1B4DC7);
  box-shadow: 0 16px 36px rgba(20, 33, 61, 0.08);
  text-decoration: none;
}
.ind-card h3 {
  font-size: 19px;
  margin: 16px 0 6px;
  letter-spacing: -0.01em;
}
.ind-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0 0 14px;
  flex: 1;
}
.ind-cta {
  font-weight: 700;
  color: var(--accent, #1B4DC7);
  font-size: 14px;
}

.ind-mini {
  height: 150px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6f8fc 0%, #eef3ff 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(27, 77, 199, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ind-mini-stamp {
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(135deg, #1A8A4A, #2eb35e);
  color: #fff;
  font-size: 9px; font-weight: 900;
  letter-spacing: 0.10em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(26, 138, 74, 0.32);
}
.ind-mini-stamp-side {
  top: auto; right: -8px;
  bottom: 14px;
  transform: rotate(-90deg);
  transform-origin: right center;
}
.ind-mini-stamp-corner { transform: rotate(8deg); }

/* Property visual */
.ind-mini-property { width: 100%; height: 100%; position: relative; }
.ind-mini-property svg { width: 100%; height: 100%; display: block; }

/* Photography visual */
.ind-mini-photo {
  position: relative;
  width: 78%;
}
.ind-mini-photo-frame {
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 6px 16px rgba(20, 33, 61, 0.12);
  transform: rotate(-2deg);
}
.ind-mini-photo-img { border-radius: 4px; overflow: hidden; line-height: 0; }
.ind-mini-photo-img svg { width: 100%; display: block; }
.ind-mini-photo-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-family: ui-monospace, monospace;
  color: var(--ink-soft, #5b6478);
  padding: 5px 2px 0;
}
.ind-mini-photo-exif {
  background: rgba(192, 57, 43, 0.10);
  color: #c0392b;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Music visual */
.ind-mini-music {
  width: 86%;
  position: relative;
}
.ind-mini-music-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(20, 33, 61, 0.12), 0 0 0 1px rgba(20, 33, 61, 0.05);
}
.ind-mini-music-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ind-mini-music-art {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, #0ea5e9 0%, #1B4DC7 60%, #0a1428 100%);
  flex-shrink: 0;
}
.ind-mini-music-title { font-size: 12px; font-weight: 800; color: var(--ink, #14213D); }
.ind-mini-music-sub { font-size: 10px; color: var(--ink-soft, #5b6478); }
.ind-mini-music-wave {
  width: 100%;
  height: 22px;
  color: var(--accent, #1B4DC7);
}

/* Design visual */
.ind-mini-design {
  width: 78%;
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(20, 33, 61, 0.12);
  transform: rotate(-1.5deg);
}
.ind-mini-design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.ind-mini-design-sw {
  height: 24px;
  border-radius: 4px;
}
.ind-mini-design-typo {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink, #14213D);
  font-family: Georgia, serif;
  border-top: 1px solid #eef1f7;
  padding-top: 4px;
  text-align: center;
}

/* Video visual */
.ind-mini-video {
  width: 88%;
  position: relative;
}
.ind-mini-video-frame {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(20, 33, 61, 0.20);
}
.ind-mini-video-frame svg { display: block; width: 100%; }
.ind-mini-video-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 8.5px;
  font-family: ui-monospace, monospace;
  color: rgba(255,255,255,0.7);
}
.ind-mini-video-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.ind-mini-video-progress > div {
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
}

/* Writing visual */
.ind-mini-writing {
  width: 60%;
  position: relative;
}
.ind-mini-writing-page {
  background: #fff;
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.14), 0 0 0 1px rgba(20, 33, 61, 0.05);
  transform: rotate(-1.5deg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ind-mini-writing-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink, #14213D);
  margin-bottom: 4px;
  font-family: Georgia, serif;
}
.ind-mini-writing-row {
  height: 3px;
  background: #eef1f7;
  border-radius: 2px;
}

@media (max-width: 1000px) {
  .ind-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ind-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MARKETPLACE STRIP — what gets transacted on the StampRight rails.
   ============================================================ */
.mkt-section { padding: 96px 0; background: linear-gradient(180deg, #f6f7fb 0%, #fff 100%); }
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.mkt-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line, #e2e7f1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.mkt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 33, 61, 0.12);
}
.mkt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f6f7fb;
}
.mkt-thumb svg { width: 100%; height: 100%; display: block; }
.mkt-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: #1A8A4A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(20, 33, 61, 0.10);
}
.mkt-meta { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.mkt-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #1B4DC7);
  margin-bottom: 4px;
}
.mkt-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #14213D);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.mkt-sub {
  font-size: 13px;
  color: var(--ink-soft, #5b6478);
  line-height: 1.45;
  margin-bottom: 14px;
}
.mkt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
  margin-top: auto;
}
.mkt-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #14213D);
}
.mkt-status {
  font-size: 11.5px;
  font-weight: 600;
  color: #1A8A4A;
}
.mkt-foot {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft, #5b6478);
  margin: 40px auto 0;
  max-width: 600px;
}

@media (max-width: 1000px) {
  .mkt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .mkt-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   USE CASES IN THE WILD — two big photographic cards on the
   homepage. Each links to a dedicated vertical page. The image
   is the proof; the copy is the promise.
   ============================================================ */
.usecase-spot { padding: 96px 0; background: var(--surface-soft, #f6f7fb); }
.usecase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
}
.usecase-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 32px rgba(20, 33, 61, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  isolation: isolate;
}
.usecase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(27, 77, 199, 0.22);
  text-decoration: none;
}

/* === V2 CARDS — no photography. Brand-color stage + product UI. === */
.uc-card-v2 .uc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
}

/* Gradient-mesh background. Multiple radial gradients composited
   for a soft, organic, premium feel — like Stripe/Linear hero art. */
.uc-card-blue .uc-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(33, 150, 243, 0.85) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(21, 69, 168, 0.95) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(27, 77, 199, 0.7) 0%, transparent 60%),
    linear-gradient(135deg, #1B4DC7 0%, #1545a8 100%);
}
.uc-card-dark .uc-mesh-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 25%, rgba(14, 165, 233, 0.34) 0%, transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(27, 77, 199, 0.55) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(20, 33, 61, 0.0) 0%, rgba(8, 12, 22, 0.4) 80%),
    linear-gradient(135deg, #0a1428 0%, #14213D 60%, #0c1729 100%);
}
.uc-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Big number — visual anchor in each card */
.uc-bignum {
  position: absolute;
  font-size: clamp(120px, 18vw, 200px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 1;
}
.uc-card-blue .uc-bignum {
  right: 24px;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.12);
}
.uc-card-dark .uc-bignum {
  right: 30px;
  top: 18px;
  color: rgba(125, 211, 252, 0.20);
}
.uc-bignum-amber { color: rgba(125, 211, 252, 0.22); }
.uc-pct { font-size: 0.5em; vertical-align: top; }
.uc-bignum-label {
  position: absolute;
  right: 24px;
  bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  pointer-events: none;
  z-index: 2;
}
.uc-card-blue .uc-bignum-label { bottom: 0; right: 24px; transform: translateY(-180px); display: none; }
.uc-card-dark .uc-bignum-label,
.uc-bignum-label-light {
  color: rgba(191, 219, 254, 0.88);
  right: 30px;
  top: auto;
  bottom: auto;
  transform: translateY(160px);
}

/* Waveform svg for creators card */
.uc-wave {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 240px;
  height: 60px;
  opacity: 0.6;
  pointer-events: none;
}

/* === FLOATING PRODUCT-UI CARDS (the receipts) === */
.uc-receipt {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 12px;
  padding: 12px 14px;
  color: #14213D;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.usecase-card:hover .uc-receipt { transform: translateY(-3px) rotate(0deg) !important; }
.uc-receipt-dark {
  background: rgba(18, 27, 48, 0.92);
  color: #fff;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

/* Positioning + subtle rotation for layered look — REAL estate card */
.uc-receipt-1 {
  top: 22px;
  left: 22px;
  width: 75%;
  max-width: 320px;
  transform: rotate(-1.5deg);
  z-index: 4;
}
.uc-receipt-2 {
  top: 38%;
  right: 22px;
  width: 58%;
  max-width: 240px;
  transform: rotate(2deg);
  z-index: 3;
}
.uc-receipt-3 {
  bottom: 24px;
  left: 30px;
  width: 60%;
  max-width: 260px;
  transform: rotate(-1deg);
  z-index: 3;
}

/* Positioning — CREATORS card */
.uc-receipt-c1 {
  top: 28px;
  left: 22px;
  width: 78%;
  max-width: 320px;
  transform: rotate(-1.5deg);
  z-index: 4;
}
.uc-receipt-c2 {
  bottom: 28px;
  right: 22px;
  width: 56%;
  max-width: 230px;
  transform: rotate(2deg);
  z-index: 3;
}

.ur-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #5b6478;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.uc-receipt-dark .ur-head { color: #98a2b8; border-bottom-color: rgba(255,255,255,0.10); }
.ur-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 3px rgba(26, 138, 74, 0.18);
  flex-shrink: 0;
}
.ur-dot-amber {
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}
.ur-lock { font-size: 12px; }
.ur-id { letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  margin: 5px 0;
}
.ur-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #5b6478;
}
.uc-receipt-dark .ur-k { color: #98a2b8; }
.ur-v { font-weight: 600; font-size: 12.5px; }
.ur-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ur-ok { color: #1A8A4A; }
.ur-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: #5b6478;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  word-break: break-all;
}
.ur-progress {
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0 8px;
}
.ur-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.6);
}
.ur-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.ur-tag {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #cdd5e5;
}

/* === IMAGE STACK ===
   Three layers compose the image area:
     1. .usecase-img        — the raw photograph, heavily filtered
     2. .usecase-img-tone   — brand-blue duotone wash with mix-blend-mode
     3. .usecase-img-grain  — subtle SVG film grain so it doesn't read "AI clean"
   On top of those, a floating product-receipt card.
   ============================================================ */
.usecase-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0c1729;
}
.usecase-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Heavy filter chain hides AI-generated tells (overly smooth skin,
     unnaturally vivid colors, perfect lighting). Reads as editorial
     photography after this. */
  filter: contrast(1.18) saturate(0.55) brightness(0.72) hue-rotate(-12deg);
  transform: scale(1.04);
  transition: transform 0.6s ease;
}
.usecase-card:hover .usecase-img { transform: scale(1.08); }

/* Duotone-style wash. Brand blue multiplied over the photo's shadows
   with cyan signal light in the highlights. */
.usecase-img-tone {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(27, 77, 199, 0.72) 0%, rgba(21, 69, 168, 0.42) 60%, rgba(14, 165, 233, 0.18) 100%),
    radial-gradient(circle at 20% 80%, rgba(20, 33, 61, 0.0) 0%, rgba(20, 33, 61, 0.65) 80%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.usecase-img-tone-creators {
  /* Slightly different ratio for the creators image — brighter signal accents. */
  background:
    linear-gradient(135deg, rgba(27, 77, 199, 0.62) 0%, rgba(21, 69, 168, 0.35) 50%, rgba(14, 165, 233, 0.28) 100%),
    radial-gradient(circle at 75% 25%, rgba(20, 33, 61, 0.0) 0%, rgba(20, 33, 61, 0.55) 90%);
}

/* SVG film-grain texture overlay — kills the smooth/plastic AI-render
   look. About 6% opacity, blended with overlay so it adds texture
   without dimming the image. */
.usecase-img-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* === FLOATING PRODUCT CARD ===
   The actual product UI sits on top of the photo. THIS is what the
   viewer focuses on. Photo is atmosphere; receipt is content.
   ============================================================ */
.usecase-receipt {
  position: absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
  color: #14213D;
  z-index: 3;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.usecase-card:hover .usecase-receipt { transform: translateY(-6px); }
.usecase-receipt-creators {
  background: rgba(12, 23, 41, 0.86);
  color: #fff;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.ur-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #5b6478;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.usecase-receipt-creators .ur-head { color: #98a2b8; border-bottom-color: rgba(255,255,255,0.08); }
.ur-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A8A4A;
  box-shadow: 0 0 0 4px rgba(26, 138, 74, 0.15);
}
.ur-lock { font-size: 14px; }
.ur-id { letter-spacing: 0.01em; }
.ur-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin: 6px 0;
}
.ur-k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #5b6478;
}
.usecase-receipt-creators .ur-k { color: #98a2b8; }
.ur-v { font-weight: 600; font-size: 13.5px; }
.ur-ok { color: #1A8A4A; }
.ur-hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: #5b6478;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  word-break: break-all;
}
.ur-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 10px;
}
.ur-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1B4DC7, #2196F3);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.6);
}
.ur-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ur-tag {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #cdd5e5;
}

.usecase-body { padding: 28px 30px 32px; background: #fff; }
.usecase-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #1B4DC7);
  margin-bottom: 10px;
}
.usecase-body h3 {
  font-size: 26px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.usecase-body p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft, #5b6478);
  margin: 0 0 16px;
}
.usecase-cta {
  font-weight: 700;
  color: var(--accent, #1B4DC7);
  font-size: 15px;
}
@media (max-width: 860px) {
  .usecase-grid { grid-template-columns: 1fr; gap: 20px; }
  .usecase-img-wrap { aspect-ratio: 16 / 10; }
  .usecase-receipt { left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; }
  .usecase-body h3 { font-size: 22px; }
}
.how-flow-shell {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}
.how-grid {
  position: relative;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  z-index: 1;
}
@media (min-width: 880px) {
  .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-flow-shell::before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 68px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(33,150,243,0.42), rgba(125,211,252,0.36), rgba(33,150,243,0.42), transparent);
    box-shadow: 0 0 26px rgba(33,150,243,0.22);
    pointer-events: none;
    z-index: 0;
  }
}
.how-card {
  min-height: 430px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.108), rgba(255,255,255,0.052)),
    rgba(8,19,38,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 30px 28px 28px;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  box-shadow: 0 22px 58px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.how-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #1B4DC7, #38bdf8);
  opacity: 0.9;
}
.how-card::after {
  content: "";
  position: absolute;
  inset: 4px -42% auto;
  height: 96px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(125,211,252,0.14) 48%, transparent 100%);
  transform: translateX(-72%) skewX(-18deg);
  opacity: 0;
  transition: transform 0.46s ease, opacity 0.24s ease;
  pointer-events: none;
}
.how-card:hover {
  transform: translateY(-5px);
  border-color: rgba(125,211,252,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.07)),
    rgba(8,19,38,0.84);
  box-shadow: 0 30px 74px rgba(0,0,0,0.34), 0 0 0 1px rgba(33,150,243,0.18);
}
.how-card:hover::after {
  opacity: 1;
  transform: translateX(72%) skewX(-18deg);
}
.how-card > * {
  position: relative;
  z-index: 1;
}
.how-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.how-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(33,150,243,0.18), rgba(33,150,243,0.08));
  color: #93c5fd;
  border: 1px solid rgba(125,211,252,0.22);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.how-icon svg { width: 30px; height: 30px; }
.how-step-index {
  font-size: 42px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(191,219,254,0.20);
}
.how-step {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 8px;
}
.how-card h3 {
  font-size: 22px;
  margin: 0 0 10px;
  color: #fff;
}
.how-card p {
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.how-proof-rows {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.how-proof-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 12.5px;
}
.how-proof-row:last-child { border-bottom: none; }
.how-proof-row span {
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  font-size: 10.5px;
  white-space: nowrap;
}
.how-proof-row strong {
  color: #fff;
  font-weight: 700;
  text-align: right;
  min-width: 0;
}
.how-proof-row .is-verified,
.how-proof-tags .is-verified {
  color: #34d399;
}
.how-proof-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.how-proof-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(125,211,252,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  font-weight: 700;
}
.how-card-featured {
  border-color: rgba(125,211,252,0.42);
  background:
    linear-gradient(180deg, rgba(33,150,243,0.18), rgba(255,255,255,0.064)),
    rgba(8,19,38,0.82);
}
.how-card-featured .how-icon {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
@media (max-width: 600px) {
  .how-clean { padding: 82px 0 88px; }
  .how-head-copy {
    font-size: 15.5px;
    margin-top: 12px;
  }
  .how-card {
    min-height: 0;
    padding: 28px 28px 26px;
  }
  .how-step-index { font-size: 36px; }
  .how-proof-row {
    min-height: 36px;
    gap: 10px;
  }
}

/* ============================================================
   WHAT YOU CAN STAMP — universal tile grid. Plain icons + name
   + 1-line. Communicates breadth without being dev-tools-y.
   ============================================================ */
.stampable { padding: 96px 0; background: var(--surface-soft); }
.stampable-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .stampable-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stampable-grid { grid-template-columns: repeat(4, 1fr); } }
.stamp-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 20px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.stamp-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.st-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.st-icon svg { width: 20px; height: 20px; }
.st-name { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.st-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ============================================================
   (Legacy API STRIP styles below — unused now but kept in case
   we re-enable for a future /developers landing page.)
   ============================================================ */
.api-strip { padding: 96px 0; background: #ffffff; border-top: 1px solid var(--line); }
.section-head-left { text-align: left; margin-bottom: 36px; max-width: 720px; }
.section-head-left h2 { margin-bottom: 8px; }
.api-grid {
  display: grid; gap: 32px; grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) {
  .api-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; }
}

.code-window {
  background: #0e1525;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15,21,37,0.18);
  border: 1px solid #1a2848;
}
.code-window-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #142039;
  border-bottom: 1px solid #1a2848;
}
.code-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a4a6a;
}
.code-dot:nth-child(1) { background: #ff5f57; }
.code-dot:nth-child(2) { background: #ffbd2e; }
.code-dot:nth-child(3) { background: #28ca42; }
.code-title {
  margin-left: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 12px; font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.code-body {
  margin: 0; padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; line-height: 1.65;
  color: #cbd5e1;
  overflow-x: auto;
  white-space: pre;
}
.code-body .c-c   { color: #64748b; }       /* prompt $ */
.code-body .c-k   { color: #38bdf8; }       /* keywords / flags */
.code-body .c-s   { color: #475569; }       /* line continuation */
.code-body .c-q   { color: #86efac; }       /* string */
.code-body .c-key { color: #c4b5fd; }       /* json key */
.code-body .c-str { color: #86efac; }       /* json string val */
.code-body .c-num { color: #fbbf24; }       /* json number */
.code-body .c-p   { color: #cbd5e1; }       /* json punct */

.cap-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.cap-list li {
  padding: 14px 0 14px 30px;
  position: relative;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.cap-list li:last-child { border-bottom: none; }
.cap-list li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 16px; height: 1.5px;
  background: var(--accent);
}
.cap-list li strong { color: var(--ink); font-weight: 700; display: inline; }
.cap-list li code {
  background: var(--surface-soft);
  padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px; color: var(--accent-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   SPEC BAND — terse technical product specs. Replaces wordy
   trust-band. Reads like a spec sheet, not a blog tagline.
   ============================================================ */
.spec-band {
  position: relative;
  padding: 64px 0;
  background:
    linear-gradient(180deg, var(--proof-bg) 0%, var(--proof-bg-2) 52%, var(--proof-bg) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
}
.spec-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.spec-band .container {
  position: relative;
  z-index: 1;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--proof-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 24px 72px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
}
@media (min-width: 760px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .spec-grid { grid-template-columns: repeat(6, 1fr); } }
.spec-cell {
  padding: 18px 20px;
  border-right: 1px solid var(--proof-line);
  border-bottom: 1px solid var(--proof-line);
}
.spec-cell:nth-last-child(-n+3) { border-bottom: none; }
@media (min-width: 1080px) {
  .spec-cell:nth-last-child(-n+6) { border-bottom: none; }
  .spec-cell:nth-child(6n) { border-right: none; }
}
@media (min-width: 760px) and (max-width: 1079px) {
  .spec-cell:nth-child(3n) { border-right: none; }
}
@media (max-width: 759px) {
  .spec-cell:nth-child(2n) { border-right: none; }
}
.spec-val {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--proof-text);
  line-height: 1;
}
.spec-val small {
  font-size: 14px; font-weight: 600;
  color: #7dd3fc;
}
.spec-label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--proof-muted);
  font-weight: 500;
}

/* ============================================================
   PRICING TEASER — surfaces pricing on the homepage.
   Visible pricing = real business.
   ============================================================ */
.pricing-teaser {
  position: relative;
  padding: 96px 0;
  background:
    linear-gradient(180deg, #fbfdff 0%, #ffffff 18%, #ffffff 100%);
  overflow: hidden;
  isolation: isolate;
}
.pricing-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(33,150,243,0.055), transparent);
  pointer-events: none;
  z-index: 0;
}
.pricing-teaser .container {
  position: relative;
  z-index: 1;
}
.pricing-teaser-inner {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 44px;
  box-shadow: 0 18px 48px rgba(20,33,61,0.06);
  overflow: hidden;
}
.pricing-teaser-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #1B4DC7, #38bdf8, #1B4DC7);
}
.pricing-teaser-inner > * {
  position: relative;
  z-index: 1;
}
.pt-left h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 8px; }
.pt-left p  { color: var(--ink-soft); margin-bottom: 24px; }
.pt-plans {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .pt-plans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pt-plans { grid-template-columns: repeat(5, 1fr); } }
.pt-plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pt-plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(27,77,199,0.65), rgba(56,189,248,0.75));
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pt-plan:hover {
  transform: translateY(-2px);
  border-color: rgba(33,150,243,0.32);
  box-shadow: 0 14px 34px rgba(20,33,61,0.08);
}
.pt-plan:hover::before {
  opacity: 1;
}
.pt-plan-featured {
  background: linear-gradient(180deg, #0b1730 0%, #14213D 100%);
  border-color: rgba(125,211,252,0.42);
  box-shadow: 0 18px 44px rgba(20,33,61,0.20);
}
.pt-plan-featured::before { opacity: 1; }
.pt-plan-name {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.pt-plan-featured .pt-plan-name::after {
  content: " · popular";
  color: var(--ok);
}
.pt-plan-price {
  font-size: 24px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pt-plan-featured .pt-plan-name,
.pt-plan-featured .pt-plan-price,
.pt-plan-featured .pt-plan-included { color: #fff; }
.pt-plan-featured .pt-plan-price span { color: rgba(255,255,255,0.70); }
.pt-plan-price span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.pt-plan-included {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ============================================================
   HERO DARK VARIANT — opt-in via .hero-dark class
   Applied only on the homepage hero today. The rest of the
   site stays light because long-form B2B content converts
   better on white. This gives the premium first-impression
   without sacrificing readability anywhere else.
   ============================================================ */
.hero.hero-v2.hero-dark {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(33,150,243,0.20), transparent 60%),
    radial-gradient(700px 500px at 85% 110%, rgba(94,53,177,0.20), transparent 60%),
    linear-gradient(180deg, #0b1428 0%, #050a17 100%);
  color: #ffffff;
}
.hero.hero-v2.hero-dark .hero-content h1,
.hero.hero-v2.hero-dark .hero-h1 { color: #ffffff; }
.hero.hero-v2.hero-dark .hero-h1 .grad {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero.hero-v2.hero-dark .hero-lede,
.hero.hero-v2.hero-dark .lede { color: rgba(255,255,255,0.82); }
.hero.hero-v2.hero-dark .eyebrow {
  background: rgba(33,150,243,0.16);
  color: #93c5fd;
  border: 1px solid rgba(33,150,243,0.32);
}
.hero.hero-v2.hero-dark .eyebrow .eyebrow-dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.20);
}
.hero.hero-v2.hero-dark .btn-ghost-outline {
  border-color: rgba(255,255,255,0.32);
  color: rgba(255,255,255,0.95);
  background: transparent;
}
.hero.hero-v2.hero-dark .btn-ghost-outline:hover {
  border-color: rgba(255,255,255,0.65);
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}
/* Brighter, more vivid mesh blobs on dark */
.hero.hero-v2.hero-dark .hero-mesh .mesh-blob { opacity: 0.45; filter: blur(60px); }
.hero.hero-v2.hero-dark .hero-mesh .blob-a {
  background: radial-gradient(circle, rgba(33,150,243,0.75), rgba(33,150,243,0) 70%);
}
.hero.hero-v2.hero-dark .hero-mesh .blob-b {
  background: radial-gradient(circle, rgba(34,211,238,0.55), rgba(34,211,238,0) 70%);
}
.hero.hero-v2.hero-dark .hero-mesh .blob-c {
  background: radial-gradient(circle, rgba(167,139,250,0.55), rgba(167,139,250,0) 70%);
}
/* The mock receipt card stays white inside the dark hero — it IS the
   product UI we're previewing, so its surface should match the app it
   represents. The contrast against the dark background is the point. */
.hero.hero-v2.hero-dark .mock-card { box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25); }
.hero.hero-v2.hero-dark .mock-side-v2 { box-shadow: 0 24px 56px rgba(0,0,0,0.40); }

/* Topnav adapts when sitting above a dark hero — the page-level
   class .has-dark-hero on <body> flips it to translucent-dark.
   Pattern matches Stripe / Linear / Apple: lightly-tinted glass
   over the dark hero, with a WHITE-PILL primary button for
   maximum contrast (inversion rather than tone-on-tone blue).
   Transition is smooth so scroll-to-light doesn't snap. */
body.has-dark-hero .topnav,
body.has-dark-hero .topnav .brand,
body.has-dark-hero .topnav nav a,
body.has-dark-hero .topnav .btn-ghost,
body.has-dark-hero .topnav .btn-primary,
body.has-dark-hero .topnav .lang-switch,
body.has-dark-hero .topnav .lang-switch button {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.has-dark-hero .topnav {
  background: rgba(10, 17, 34, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.has-dark-hero .topnav .brand { color: #ffffff; }
body.has-dark-hero .topnav nav a { color: rgba(255,255,255,0.76); }
body.has-dark-hero .topnav nav a:hover,
body.has-dark-hero .topnav nav a.active { color: #ffffff; }
body.has-dark-hero .topnav .lang-switch {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}
body.has-dark-hero .topnav .lang-switch button {
  color: rgba(255,255,255,0.72);
}
body.has-dark-hero .topnav .lang-switch button[aria-pressed="true"] {
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}

/* Sign in: clean ghost — transparent, light text, subtle hover fill */
body.has-dark-hero .topnav .btn-ghost {
  color: rgba(255,255,255,0.88);
  background: transparent;
  border-color: transparent;
}
body.has-dark-hero .topnav .btn-ghost:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
  border-color: transparent;
}

/* Primary CTA on dark = white-pill inversion. Reads cleanly against
   dark glass without competing with the blue brand color in the hero
   art. This is THE pattern modern brands use (Stripe nav, Linear,
   Apple product pages). */
body.has-dark-hero .topnav .btn-primary {
  background: #ffffff;
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.has-dark-hero .topnav .btn-primary:hover {
  background: #ffffff;
  color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

/* Once we scroll past the dark hero, the page is light again —
   restore the original topnav + button styles. */
body.has-dark-hero.scrolled .topnav {
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(15,21,37,0.06);
}
body.has-dark-hero.scrolled .topnav .brand { color: var(--ink); }
body.has-dark-hero.scrolled .topnav nav a { color: var(--ink-soft); }
body.has-dark-hero.scrolled .topnav nav a:hover,
body.has-dark-hero.scrolled .topnav nav a.active { color: var(--accent); }
body.has-dark-hero.scrolled .topnav .btn-ghost { color: var(--ink-soft); background: transparent; }
body.has-dark-hero.scrolled .topnav .btn-ghost:hover { color: var(--accent); background: transparent; }
body.has-dark-hero.scrolled .topnav .lang-switch {
  background: rgba(255,255,255,0.72);
  border-color: var(--line-strong);
}
body.has-dark-hero.scrolled .topnav .lang-switch button {
  color: var(--muted);
}
body.has-dark-hero.scrolled .topnav .lang-switch button[aria-pressed="true"] {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(33,150,243,0.24);
}
body.has-dark-hero.scrolled .topnav .btn-primary {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
body.has-dark-hero.scrolled .topnav .btn-primary:hover {
  background: var(--gradient-cta);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 44px rgba(33,150,243,0.42);
}
.hero-h1 {
  font-size: clamp(48px, 7.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.hero-lede {
  font-size: clamp(18px, 1.7vw, 22px);
  max-width: 540px;
  margin-bottom: 36px;
}
.eyebrow-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft);
  margin-right: 4px;
}
.btn-ghost-outline {
  background: transparent; border-color: var(--line-strong); color: var(--ink);
}
.btn-ghost-outline:hover { border-color: var(--accent); color: var(--accent); }

.hero-visual-v2 { min-height: 480px; }
.mock-card-v2 { transform: rotate(-1deg); }
.mock-card-v2:hover { transform: rotate(0) translateY(-4px); transition: transform .35s ease; }
.mock-side-v2 {
  position: absolute; right: -28px; bottom: 60px;
  top: auto; left: auto;
  background: var(--surface);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  width: 230px;
  animation: floatyCard 6s ease-in-out infinite alternate;
}
.mock-side-v2 .icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ok-soft); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
@keyframes floatyCard {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* ============================================================
   INDUSTRIES STRIP — fake-logos replacement with category icons
   ============================================================ */
.industries {
  padding: 36px 24px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.industries-label {
  text-align: center; color: var(--muted); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 24px;
}
.industries-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.industry {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-soft); font-size: 15px; font-weight: 600;
  opacity: 0.7;
  transition: opacity .15s, color .15s;
}
.industry:hover { opacity: 1; color: var(--accent-2); }
.industry svg { width: 22px; height: 22px; color: var(--accent); }
@media (max-width: 760px) {
  .industries-row { justify-content: center; gap: 22px 28px; }
  .industry { font-size: 14px; }
}

/* ============================================================
   MARKETPLACE TEASE — homepage section that replaced lead-magnet.
   Two-column: pitch on the left, waitlist form on the right.
   Slightly violet-tinted to distinguish from the proof side of the
   product (blue) — different surface, same brand.
   ============================================================ */
.marketplace-tease {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--surface) 0%, #faf7ff 100%);
}
.marketplace-card {
  background:
    linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(94,53,177,0.08) 100%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  display: grid; grid-template-columns: 1fr; gap: 36px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.marketplace-card::before {
  content: ""; position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,53,177,0.20), transparent 70%);
  pointer-events: none;
}
.marketplace-card::after {
  content: ""; position: absolute; left: -80px; bottom: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,150,243,0.14), transparent 70%);
  pointer-events: none;
}
@media (min-width: 980px) {
  .marketplace-card { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
}
.marketplace-left { position: relative; z-index: 1; }
.marketplace-left h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 14px 0 18px; }
.marketplace-lede {
  color: var(--ink-soft);
  font-size: 16.5px; line-height: 1.6;
  margin-bottom: 18px;
}
.marketplace-lede strong { color: var(--ink); font-weight: 700; }

.marketplace-examples {
  display: grid; gap: 14px;
  margin-top: 24px;
}
.mp-example {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.mp-example-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  height: fit-content; margin-top: 2px;
  min-width: 60px; text-align: center;
}
.mp-tag-news    { background: rgba(192,57,43,0.10); color: #C0392B; }
.mp-tag-brand   { background: var(--accent-soft); color: var(--accent-2); }
.mp-tag-resale  { background: rgba(94,53,177,0.12); color: #5e35b1; }
.mp-example p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.mp-example p strong { color: var(--ink); font-weight: 700; }

.marketplace-right { position: relative; z-index: 1; }

/* Violet variant of the eyebrow — for the marketplace surface specifically */
.eyebrow-violet {
  background: rgba(94,53,177,0.12);
  color: #5e35b1;
}
.eyebrow-violet .eyebrow-dot {
  background: #5e35b1;
  box-shadow: 0 0 0 3px rgba(94,53,177,0.18);
}

/* ============================================================
   LEAD MAGNET — homepage email capture for the free template kit
   This is the highest-ROI marketing surface on the site. Every
   visitor who isn't ready to sign up today drops an email here.
   ============================================================ */
.lead-magnet { padding: 88px 0; background: var(--surface); }
.lead-magnet-card {
  background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  display: grid; grid-template-columns: 1fr; gap: 36px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lead-magnet-card::before {
  content: ""; position: absolute; right: -80px; bottom: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,150,243,0.16), transparent 70%);
  pointer-events: none;
}
@media (min-width: 880px) {
  .lead-magnet-card { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 56px; }
}
.lead-magnet-left h2 { font-size: clamp(28px, 3vw, 38px); margin: 14px 0; }
.lead-magnet-left p { color: var(--ink-soft); margin-bottom: 20px; font-size: 16px; }
.lead-magnet-list { list-style: none; padding: 0; margin: 0; }
.lead-magnet-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5;
}
.lead-magnet-list li svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; margin-top: 3px; }
.lead-magnet-list li strong { color: var(--ink); font-weight: 700; }

.lead-magnet-right { position: relative; }
.lead-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
}
.lead-form label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}
.lead-form input {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); margin-bottom: 14px;
  background: var(--surface-soft);
  transition: border-color .12s, background .12s;
}
.lead-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.lead-form .btn-primary { width: 100%; padding: 14px; font-size: 16px; }
.lead-form-fineprint {
  margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center;
}
.lead-form-fineprint a { color: var(--accent-2); }

/* ============================================================
   STORY SECTION — two phones, two humans, one link
   The visual narrative: this is the "how it works" hero shot.
   ============================================================ */
.story-section {
  padding: 110px 0 110px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
  position: relative; overflow: hidden;
}
/* Faint background ornament so the scene sits on something instead of empty white. */
.story-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(420px 240px at 18% 38%, rgba(33,150,243,0.10), transparent 60%),
    radial-gradient(380px 220px at 82% 62%, rgba(94,53,177,0.10), transparent 60%);
  pointer-events: none;
}
.story-section .container, .story-section .section-head { position: relative; }
.story-scene {
  display: grid; gap: 36px;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  max-width: 1120px; margin: 0 auto;
}
@media (min-width: 980px) {
  .story-scene {
    grid-template-columns: 1fr 0.8fr 1fr;
    gap: 28px;
  }
}
.story-actor {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative;
  max-width: 320px;
}
.story-tag {
  display: inline-block; padding: 5px 14px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 999px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.story-tag-violet {
  background: rgba(94,53,177,0.12); color: #5e35b1;
}
.story-phone {
  width: min(260px, 100%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.story-phone svg {
  width: 100%; height: auto;
  filter: drop-shadow(0 28px 56px rgba(15,21,37,0.22));
}
.story-sender .story-phone { transform: rotate(-2deg); }
.story-recipient .story-phone { transform: rotate(2deg); }
.story-sender .story-phone:hover,
.story-recipient .story-phone:hover { transform: rotate(0); }

.story-avatar {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--surface);
  margin-top: -8px;
  background: #fff;
}
.story-avatar svg { width: 100%; height: 100%; display: block; }
.story-label { text-align: center; font-size: 14px; line-height: 1.4; }
.story-label strong { display: block; font-weight: 700; color: var(--ink); font-size: 15.5px; }
.story-label span { color: var(--muted); font-size: 12.5px; }

/* The middle connector — arrow + URL pill + caption */
.story-link {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  padding: 12px 8px;
  max-width: 260px;
}
.story-link-arrow { width: 100%; max-width: 220px; opacity: 0.85; }
.story-link-arrow svg { width: 100%; height: auto; }
.story-link-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 12px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ink-soft);
  box-shadow: 0 12px 32px rgba(33,150,243,0.25);
}
.story-link-pill svg { color: var(--ok); }
.story-link-pill strong { color: var(--accent-2); font-weight: 700; }
.story-link-caption { color: var(--muted); font-size: 13.5px; max-width: 230px; line-height: 1.45; }

/* On smaller viewports, rotate the connector arrow to vertical */
@media (max-width: 979px) {
  .story-link { width: 100%; }
  .story-link-arrow { max-width: 110px; transform: rotate(90deg); margin: 8px 0; }
}

/* Tiny recap row beneath the scene */
.story-recap {
  margin: 56px auto 0;
  max-width: 920px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
  padding: 0 24px;
}
@media (min-width: 760px) { .story-recap { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.story-recap-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px;
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.story-recap-item strong { color: var(--accent-2); margin-right: 6px; font-weight: 800; }

/* ============================================================
   PILLARS V2 — visual split, dual audience signal
   ============================================================ */
.pillars-section { padding: 96px 0; }
.pillars-v2 { gap: 28px; }
.pillar-v2 {
  position: relative; overflow: hidden;
  padding: 40px 36px;
  background: var(--surface);
}
.pillar-v2::after {
  content: ""; position: absolute; right: -50px; top: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--accent-soft); opacity: 0.6;
  pointer-events: none;
}
.pillar-v2:nth-child(2)::after {
  background: linear-gradient(135deg, rgba(94,53,177,0.18), rgba(33,150,243,0.18));
}
.pillar-v2 > * { position: relative; }
.pillar-tag {
  display: inline-block; padding: 4px 12px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.pillar-v2:nth-child(2) .pillar-tag {
  background: rgba(94,53,177,0.12); color: #5e35b1;
}
.pillar-v2 h3 { font-size: 28px; margin-bottom: 10px; }
.pillar-v2 p { font-size: 16px; color: var(--ink-soft); margin-bottom: 22px; max-width: 380px; }
.pillar-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px;
  color: var(--accent-2);
}
.pillar-cta a:hover { color: var(--accent); }
.pillar-v2:nth-child(2) .pillar-cta a { color: #5e35b1; }

/* ============================================================
   TRUST BAND — slim row of check-pills near the bottom
   ============================================================ */
.trust-band {
  position: relative;
  padding: 40px 24px;
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.trust-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(33,150,243,0.055), transparent);
  pointer-events: none;
}
.trust-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  background: #ffffff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.trust-pill svg {
  width: 14px;
  height: 14px;
  color: #34d399;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ind-v2-card,
  .ind-v2-card::after,
  .how-card,
  .how-card::after,
  .pt-plan {
    transition: none;
  }
  .ind-v2-card:hover,
  .how-card:hover,
  .pt-plan:hover {
    transform: none;
  }
  .ind-v2-card:hover::after,
  .how-card:hover::after {
    opacity: 0;
  }
}

@media (max-width: 1160px) {
  .topnav-inner {
    gap: 18px;
  }
  .topnav nav {
    display: none;
  }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 760px) {
  .topnav-inner {
    gap: 12px;
    padding: 12px 16px;
  }
  .topnav nav { display: none; }
  .topnav-cta .btn-ghost { display: none; }
  .topnav-cta {
    gap: 8px;
  }
  .topnav-cta .btn-primary {
    max-width: 112px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .lang-switch {
    min-width: 74px;
  }
  .lang-switch button {
    min-width: 32px;
    min-height: 32px;
  }
  section { padding: 64px 0; }
  .hero { padding: 64px 24px 80px; }
  .hero.hero-v2 { padding: 64px 24px 96px; }
  .hero-visual { min-height: 380px; }
  .hero-visual-v2 { min-height: 360px; margin-top: 12px; }
  .mock-side { display: none; }     /* hide floating cards on phones */
  .mock-side-v2 { display: none; }
  .story-section { padding: 64px 0; }
  .pillars-section { padding: 64px 0; }
  .story-recap { margin-top: 36px; }
  .ind-v2 {
    margin-top: -44px;
    padding: 118px 0 72px;
  }
  .mkt-v2::after { height: 260px; }
  .final-cta { padding: 64px 0 76px; }
  .cta-banner {
    gap: 22px;
    padding: 28px 20px;
  }
  .cta-banner h2 { font-size: 30px; }
  .cta-banner p {
    font-size: 15.5px;
    margin-bottom: 22px;
  }
  .cta-actions .btn { width: 100%; }
  .cta-receipt { padding: 18px; }
}

@media (max-width: 420px) {
  .topnav .brand {
    gap: 0;
    width: 30px;
    overflow: hidden;
    white-space: nowrap;
  }
}