/* 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;
  --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%, #5e35b1 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; gap: 26px; margin-left: 16px; }
.topnav nav a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.topnav nav a:hover, .topnav nav a.active { color: var(--accent); }
.topnav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- 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 ---------- */
.cta-banner {
  background: var(--gradient-cta);
  border-radius: var(--radius-lg);
  padding: 64px 32px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-blue);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(400px 200px at 80% 0%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(255,255,255,0.12), transparent 60%);
  pointer-events: none;
}
.cta-banner h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; position: relative; }
.cta-banner p  { color: rgba(255,255,255,0.92); font-size: 17px; margin-bottom: 28px; position: relative; }
.cta-banner .btn { position: relative; }
.cta-banner .btn-primary {
  background: #fff; color: var(--accent-2); border-color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,0.15);
}
.cta-banner .btn-primary:hover { background: rgba(255,255,255,0.96); color: var(--accent-2); }
.cta-banner .btn-ghost { color: #fff; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; }
.cta-banner .btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

/* ---------- 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; }
.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 — clean three-step section. No phones, no code,
   no characters. Abstract iconography + short labels. Reads as
   product-marketing, not dev-tools, not blog.
   ============================================================ */
.how-clean { padding: 96px 0; background: #ffffff; }
.how-grid {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
.how-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: left;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.how-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.how-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.how-icon svg { width: 32px; height: 32px; }
.how-step {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.how-card h3 { font-size: 20px; margin-bottom: 8px; }
.how-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0; }
.how-card-featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 100%);
}
.how-card-featured .how-icon { background: var(--gradient-cta); color: #fff; box-shadow: var(--shadow-blue); }

/* ============================================================
   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 {
  padding: 56px 0;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@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(--line);
  border-bottom: 1px solid var(--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(--ink);
  line-height: 1;
}
.spec-val small {
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}
.spec-label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   PRICING TEASER — surfaces pricing on the homepage.
   Visible pricing = real business.
   ============================================================ */
.pricing-teaser { padding: 96px 0; background: #ffffff; }
.pricing-teaser-inner {
  background: linear-gradient(135deg, #f7fbff 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
}
.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: 12px;
  padding: 16px 18px;
}
.pt-plan-featured {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(33,150,243,0.15);
}
.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-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 {
  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; }

/* 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 .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 {
  padding: 36px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-band-inner {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--accent-soft);
  color: var(--accent-2); border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
}
.trust-pill svg { width: 14px; height: 14px; }

/* ---------- Mobile polish ---------- */
@media (max-width: 760px) {
  .topnav nav { display: none; }
  .topnav-cta .btn-ghost { display: none; }
  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; }
  .cta-banner { padding: 44px 24px; }
}