/* ============================================================
   Eventio Marketing CSS — v2 (new marketing website)
   Ported from the Claude Design handoff bundle (marketing.css).
   Every selector is scoped under `.ev2` so it cannot collide with
   the legacy global stylesheet / Bootstrap on not-yet-converted
   pages. Apply class `ev2` to the root of any new-design markup.
   ============================================================ */

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2-variations"),
       url("../fonts/ClashGrotesk-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* =================== TOKENS (scoped) =================== */
.ev2 {
  --font-display: "Clash Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Brand ramps */
  --org-50: #FFDAB2;  --org-200: #FF9E33;  --org-600: #B96406;
  --pro-50: #D2E7FC;  --pro-200: #57A5F4;  --pro-600: #0D70D4;
  --diy-50: #E6E0FD;  --diy-200: #9C82F8;  --diy-600: #5B30F1;
  --vendor-50: #FCE2E8; --vendor-200: #ED6586; --vendor-600: #DA1243;

  --grey-25:  #F3F5F7;
  --grey-700: #303B5F;
  --grey-900: #09113B;

  --n-50:#fafafa; --n-100:#f4f4f5; --n-200:#e4e4e7; --n-300:#d4d4d8;
  --n-400:#a1a1aa; --n-500:#71717a; --n-600:#52525b; --n-700:#3f3f46;
  --n-800:#27272a; --n-900:#18181b; --n-950:#0a0a0a;

  --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --info:#3b82f6;

  --green: var(--success);
  --n-150: #ececee;
  --grey-400: #8A93B8;
  --org-100: #FFE9CC;
  --org-500: #FF8A0A;
  --org-700: #8B4A05;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
  --shadow-card: 0 20px 60px -20px rgba(9,17,59,0.25);

  --gradient-ai: linear-gradient(135deg, #FF9E33, #ED6586);

  --section-py: 90px;
  --type-scale: 1;

  --accent-50:  var(--diy-50);
  --accent-200: var(--diy-200);
  --accent-600: var(--diy-600);
  --accent:     var(--accent-200);

  font-family: var(--font-body);
  color: var(--n-950);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ev2 [data-mode="org"]    { --accent-50:var(--org-50);    --accent-200:var(--org-200);    --accent-600:var(--org-600);    --accent:var(--org-200); }
.ev2 [data-mode="pro"]    { --accent-50:var(--pro-50);    --accent-200:var(--pro-200);    --accent-600:var(--pro-600);    --accent:var(--pro-200); }
.ev2 [data-mode="diy"]    { --accent-50:var(--diy-50);    --accent-200:var(--diy-200);    --accent-600:var(--diy-600);    --accent:var(--diy-200); }
.ev2 [data-mode="vendor"] { --accent-50:var(--vendor-50); --accent-200:var(--vendor-200); --accent-600:var(--vendor-600); --accent:var(--vendor-200); }

.ev2, .ev2 *, .ev2 *::before, .ev2 *::after { box-sizing: border-box; }
.ev2 img, .ev2 svg { display: block; max-width: 100%; }
.ev2 a { color: inherit; text-decoration: none; }
.ev2 button { font-family: inherit; }
.ev2 h1, .ev2 h2, .ev2 h3, .ev2 h4, .ev2 h5, .ev2 h6, .ev2 p { margin: 0; }

/* =================== MARKETING TYPE =================== */
.ev2 .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--n-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ev2 .eyebrow::before {
  content: "";
  width: 14px; height: 14px;
  background-color: var(--accent-200);
  -webkit-mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  flex-shrink: 0;
  display: inline-block;
}
.ev2 .eyebrow--pro::before    { background: var(--pro-200); }
.ev2 .eyebrow--org::before    { background: var(--org-200); }
.ev2 .eyebrow--diy::before    { background: var(--diy-200); }
.ev2 .eyebrow--vendor::before { background: var(--vendor-200); }

.ev2 .h-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(72px * var(--type-scale));
  line-height: 0.98;
  letter-spacing: -2.5px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .h-hero em {
  font-style: normal;
  font-weight: 400;
  color: var(--grey-700);
}

.ev2 .h-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(48px * var(--type-scale));
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .h-section em {
  font-style: normal;
  font-weight: 400;
  color: var(--grey-700);
}

.ev2 .h-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(28px * var(--type-scale));
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--n-950);
  margin: 0;
}

.ev2 .lead {
  font-family: var(--font-body);
  font-size: calc(20px * var(--type-scale));
  line-height: 1.55;
  color: var(--n-600);
  max-width: 560px;
  margin: 0;
}

.ev2 .body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--n-600);
}

.ev2 .small {
  font-size: 13px;
  color: var(--n-500);
}

.ev2 .on-dark { color: rgba(255,255,255,0.72); }
.ev2 .on-dark .h-hero,
.ev2 .on-dark .h-section,
.ev2 .on-dark .h-sub { color: #fff; }
.ev2 .on-dark .lead { color: rgba(255,255,255,0.68); }
.ev2 .on-dark .eyebrow { color: rgba(255,255,255,0.75); }

/* =================== BUTTONS =================== */
.ev2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.ev2 .btn:hover { transform: translateY(-1px); }

.ev2 .btn--primary { background: var(--grey-900); color: #fff; }
.ev2 .btn--primary:hover { background: #0c1550; box-shadow: 0 8px 24px rgba(9,17,59,0.25); }

.ev2 .btn--secondary { background: transparent; color: var(--n-950); border-color: var(--n-300); }
.ev2 .btn--secondary:hover { border-color: var(--n-950); }

.ev2 .btn--ghost { background: transparent; color: var(--n-600); }
.ev2 .btn--ghost:hover { color: var(--n-950); }

.ev2 .btn--accent { background: var(--org-200); color: #fff; box-shadow: 0 4px 16px rgba(255,158,51,0.3); }
.ev2 .btn--accent:hover { background: #ff8a0a; box-shadow: 0 8px 24px rgba(255,158,51,0.4); }

.ev2 .btn--on-dark-primary { background: #fff; color: var(--grey-900); }
.ev2 .btn--on-dark-primary:hover { background: var(--grey-25); }
.ev2 .btn--on-dark-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.2); }
.ev2 .btn--on-dark-secondary:hover { border-color: rgba(255,255,255,0.5); }

.ev2 .btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.ev2 .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* Text link with animated underline */
.ev2 .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--n-950);
  font-weight: 600;
  font-size: 14px;
  position: relative;
  padding-bottom: 3px;
  cursor: pointer;
}
.ev2 .link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--n-950);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.ev2 .link:hover::after { transform: scaleX(1); }
.ev2 .link--accent { color: var(--accent-600); }
.ev2 .link--accent::after { background: var(--accent-600); }
.ev2 .link--on-dark { color: #fff; }
.ev2 .link--on-dark::after { background: #fff; }

/* =================== LAYOUT =================== */
.ev2 .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.ev2 .container--wide { max-width: 1280px; }

.ev2 .section {
  padding: var(--section-py) 0;
}
.ev2 .section--navy {
  background: var(--grey-900);
  color: #fff;
}
.ev2 .section--alt { background: var(--grey-25); }

/* =================== TAGS / PILLS =================== */
.ev2 .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.ev2 .tag--ghost {
  background: transparent;
  border: 1px solid var(--n-200);
  color: var(--n-700);
}
.ev2 .tag--persona-pro    { background: var(--pro-50);    color: var(--pro-600); }
.ev2 .tag--persona-org    { background: var(--org-50);    color: var(--org-600); }
.ev2 .tag--persona-diy    { background: var(--diy-50);    color: var(--diy-600); }
.ev2 .tag--persona-vendor { background: var(--vendor-50); color: var(--vendor-600); }

.ev2 .badge-dot {
  display: inline-block;
  width: 14px; height: 14px;
  background-color: var(--accent-200);
  -webkit-mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
}

/* =================== CARDS =================== */
.ev2 .card-ui {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ev2 .card-float {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}

/* =================== PHOTO PLACEHOLDERS =================== */
.ev2 .photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.ev2 .photo__label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
}

.ev2 .photo--wedding {
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,220,180,0.9), transparent 65%),
    radial-gradient(60% 80% at 90% 100%, rgba(237,101,134,0.55), transparent 60%),
    linear-gradient(135deg, #7a3a4b 0%, #d4835a 55%, #f3b87a 100%);
}
.ev2 .photo--reception {
  background:
    radial-gradient(60% 80% at 20% 90%, rgba(255,180,120,0.7), transparent 60%),
    linear-gradient(160deg, #1a1230 0%, #6b2747 45%, #c46b4a 95%);
}
.ev2 .photo--corporate {
  background:
    radial-gradient(60% 70% at 80% 20%, rgba(87,165,244,0.4), transparent 60%),
    linear-gradient(140deg, #0e1a3a 0%, #2b3a6d 55%, #4a6ba8 100%);
}
.ev2 .photo--flowers {
  background:
    radial-gradient(70% 70% at 30% 30%, rgba(252,226,232,0.9), transparent 60%),
    linear-gradient(145deg, #8a3b54 0%, #d66a87 50%, #f5c4b0 100%);
}
.ev2 .photo--candlelit {
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(255,200,120,0.7), transparent 70%),
    linear-gradient(180deg, #120b26 0%, #3a1f32 60%, #6b3828 100%);
}
.ev2 .photo--outdoor {
  background:
    radial-gradient(70% 80% at 50% 80%, rgba(255,230,180,0.6), transparent 60%),
    linear-gradient(160deg, #1a2b4a 0%, #3d5a6e 50%, #b89068 100%);
}

/* =================== UTIL =================== */
.ev2 .grid { display: grid; }
.ev2 .flex { display: flex; }
.ev2 .hidden { display: none !important; }

.ev2 [data-reveal] { opacity: 1; transform: none; }

/* Eventio brand-mark "dot" — replaces the small colored circle dot pattern
   used in eyebrows, badges, and chips across the site. Inherits its color
   from inline `background-color` (or `color` via `background-color:currentColor`)
   while the brand-mark shape comes from the SVG via CSS mask. */
.ev2 .ev-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  -webkit-mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
}

/* =================== NAV =================== */
.ev2 .nav {
  /* Bootstrap (loaded globally) defines `.nav { display: flex }` for its
     own nav-pills component. Without an explicit override here, that leaks
     in and the inner ends up shrinking to its content width. Force block
     so the inner can fill the viewport up to its max-width. */
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.ev2 .nav.is-scrolled {
  border-bottom-color: var(--n-200);
  background: rgba(255,255,255,0.9);
}
.ev2 .nav__inner {
  /* Balanced layout: max-width slightly wider than the old 1280px (so the
     logo doesn't feel deeply indented on wide screens) but still centered
     so the actions on the right don't drift miles away from the nav links.
     Matches the home page section--wide container width. */
  max-width: 1584px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}
.ev2 .nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0 auto 0 20px;
  padding: 0;
}
.ev2 .nav__item { position: relative; }
.ev2 .nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--n-700);
  padding: 8px 2px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ev2 .nav__link:hover { color: var(--n-950); }
.ev2 .nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--n-950);
  transform: scaleX(0);
  transition: transform 180ms ease;
  transform-origin: left;
}
.ev2 .nav__link:hover::after { transform: scaleX(1); }
.ev2 .nav__link--current { color: var(--n-950); font-weight: 600; }
.ev2 .nav__actions { display: flex; align-items: center; gap: 12px; }

/* Features dropdown — CSS hover, no JS */
.ev2 .nav__dropdown {
  position: absolute;
  top: 100%; left: -20px;
  margin-top: 4px;
  width: 340px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(9,17,59,0.25);
  padding: 8px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.ev2 .nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ev2 .nav__dropdown-item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 120ms;
}
.ev2 .nav__dropdown-item:hover { background: var(--n-50); }

.ev2 .nav__mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  margin-left: auto;
  color: var(--n-950);
}

.ev2 .nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(9,17,59,0.98);
  color: #fff;
  padding: 20px 20px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ev2 .nav__mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev2 .nav__mobile-head img {
  height: 26px;
  width: auto;
  display: block;
}
.ev2 .nav__mobile-close {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ev2 .nav__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ev2 .nav__mobile-link {
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.2;
}
.ev2 .nav__mobile-link:last-child { border-bottom: none; }
.ev2 .nav__mobile-link:active { color: rgba(255, 255, 255, 0.7); }
.ev2 .nav__mobile-ctas {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ev2 .nav__mobile-cta {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 15px;
  padding: 0 22px;
}

/* =================== FOOTER =================== */
.ev2 .footer {
  background: var(--grey-900);
  color: rgba(255,255,255,0.65);
  padding: 96px 0 32px;
}
.ev2 .footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ev2 .footer__brand { max-width: 280px; }
.ev2 .footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 16px 0;
}
.ev2 .footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ev2 .footer__col a {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  transition: color 150ms ease;
  cursor: pointer;
}
.ev2 .footer__col a:hover { color: #fff; }
.ev2 .footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 12px;
}
.ev2 .footer__social { display: flex; gap: 18px; align-items: center; }
.ev2 .footer__social a {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 140ms ease;
}
.ev2 .footer__social a:hover { opacity: 0.7; }

/* =================== HOMEPAGE-SPECIFIC =================== */
/* Hero is a 3-area grid: `intro` (eyebrow + h1 + lead), `visual` (product
   mockup column), and `cta` (email form + trial reassurance). Desktop stacks
   intro and cta in the left column with the visual spanning both rows on the
   right. Mobile collapses to a single column in natural reading order so the
   mockup sits between the headline and the email form. */
.ev2 .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  grid-template-areas:
    "intro  visual"
    "cta    visual";
  gap: 32px 60px;
  align-items: center;
}
.ev2 .hero-grid__intro  { grid-area: intro; }
.ev2 .hero-grid__visual { grid-area: visual; }
.ev2 .hero-grid__cta    { grid-area: cta; }
.ev2 .walk-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.ev2 .walk-row--reverse .walk-text { order: 2; }
.ev2 .walk-row--reverse .walk-visual { order: 1; }

.ev2 .persona-pill:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.ev2 .persona-pill[aria-selected="true"]:hover {
  transform: translateY(-1px);
}

/* About page grids */
.ev2 .about-mission-grid { display: grid; grid-template-columns: 180px 1fr; gap: 64px; align-items: start; }
.ev2 .about-founder-grid { display: grid; grid-template-columns: 0.75fr 1fr; gap: 80px; align-items: center; }

/* Layered founder photo — main headshot (3/4 portrait) with a smaller "in
   action" event photo overlapping the bottom-right corner. Slight rotation
   on the sub-photo for an editorial scrapbook feel; both share the same
   rounded-corner / shadow language as other site photos. */
.ev2 .about-founder-stack { position: relative; width: 100%; max-width: 380px; }
.ev2 .about-founder-photo {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Soft fallback while the new headshot file is being uploaded. */
  background-color: var(--grey-100);
}
.ev2 .about-founder-subphoto {
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 46%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  border: 6px solid #fff;
  box-shadow: 0 24px 48px -16px rgba(9, 17, 59, 0.35);
  background-size: cover;
  /* Shift background content up 45% so the date overlay at the top of the
     source image is cropped out and the subject sits well below the frame. */
  background-position: center 45%;
  background-repeat: no-repeat;
  transform: rotate(-3deg);
  z-index: 2;
}

/* ========== FEATURE / PERSONA PAGES ========== */
.ev2 .eyebrow-dot {
  width: 14px; height: 14px;
  background-color: var(--accent-200);
  -webkit-mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  mask: url('/img/marketing-v2/eventio-mark.svg') center / contain no-repeat;
  flex-shrink: 0; display: inline-block;
}
.ev2 .feat-row {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.ev2 .feat-row--reverse .feat-text { order: 2; }
.ev2 .feat-row--reverse .feat-visual { order: 1; }

/* ========== ALL FEATURES PAGE ========== */
.ev2 .all-features-hero {
  background: #fff;
  color: var(--n-950);
  padding: 140px 0 80px;
  text-align: center;
  position: relative;
}
.ev2 .all-features-hero__halo {
  position: absolute;
  top: 50%; right: 0; left: auto;
  width: min(1350px, 97vw); height: auto;
  transform: translate(0, -40%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 75% 48%, #000 55%, rgba(0,0,0,0.35) 85%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 75% 48%, #000 55%, rgba(0,0,0,0.35) 85%, transparent 100%);
}
.ev2 .all-features-hero .container { position: relative; z-index: 1; }
.ev2 .pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 999px;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--n-700);
}
.ev2 .filter-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 48px auto 0; max-width: 980px;
}
.ev2 .filter-pill {
  padding: 9px 18px; border-radius: 999px;
  background: #fff;
  border: 1px solid var(--n-200);
  color: var(--n-700);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all 180ms;
  font-family: var(--font-body);
}
.ev2 .filter-pill:hover { background: var(--n-50); color: var(--n-950); border-color: var(--n-300); }
.ev2 .filter-pill.is-active {
  background: var(--grey-900); color: #fff;
  border-color: var(--grey-900);
}
.ev2 .feature-grid-section { background: transparent; padding: 40px 0 120px; position: relative; }
.ev2 .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.ev2 .feature-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 24px;
  display: flex; flex-direction: column;
  gap: 14px; min-height: 280px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms, border-color 240ms;
  border: 1px solid var(--n-200);
  box-shadow: 0 1px 2px rgba(9,17,59,0.04), 0 18px 36px -22px rgba(9,17,59,0.10);
  overflow: hidden;
  isolation: isolate;
}
.ev2 .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(9,17,59,0.05), 0 32px 56px -22px rgba(9,17,59,0.20);
}
.ev2 .feature-card__halo {
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(8px);
  pointer-events: none;
}
.ev2 .feature-card__chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; text-decoration: none;
}
.ev2 .feature-card__chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ev2 .feature-card__icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(9,17,59,0.04);
}
.ev2 .feature-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; letter-spacing: -0.4px;
  color: var(--n-950); margin: 0; line-height: 1.2;
}
.ev2 .feature-card p { color: var(--n-600); font-size: 14.5px; line-height: 1.55; margin: 0; }

@media (max-width: 1100px) { .ev2 .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .ev2 .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .ev2 .feat-row { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .feat-row--reverse .feat-text { order: 1; }
  .ev2 .feat-row--reverse .feat-visual { order: 2; }
  /* Persona "See it with your events" CTA card — widen on mobile by giving
     it large negative side margins to escape multiple nested padding layers
     (CardSection outer 32px + inner 32px + .container--wide 20px = 84px on
     each side). -48px claws back 96px total, leaving ~36px gutters between
     the card edge and the viewport edge for breathing room. */
  .ev2 .ctac {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 36px 20px !important;
    margin-left: -48px !important;
    margin-right: -48px !important;
  }
  /* "What you'll set up on day 1" tinted side panel (the dark/blue block on
     the right at desktop, stacked under the CTA copy at mobile). The inline
     `padding:32px` is too tight on mobile — it forces the "WHAT YOU'LL SET
     UP ON DAY 1" overline to wrap and pushes the numbered steps a long way
     in from the left edge. Shrink padding so the headline fits on one line
     and the numbers hug the left edge. */
  .ev2 .ctac > div:last-child {
    padding: 20px 18px !important;
  }
}
/* Persona switcher bar — same deep navy (--grey-900 #09113B) as the Start
   free trial buttons. The bar is sticky at top:0; on persona pages we also
   lower the main nav's sticky offset to -68px (via the :has() selector below)
   so the nav scrolls away naturally and this bar slides up to take its place. */
.ev2 .persona-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grey-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(9, 17, 59, 0.22);
}
body:has(.persona-tabs) .ev2 .nav { top: -68px; }

/* Blog filter bar — same sticky-takeover pattern as .persona-tabs but on a
   light background. The bar pins to top:0 once the user scrolls past it; the
   :has() rule below pushes the main nav off-screen so the filter row takes
   over the top instead of stacking under (and previously translucent) the
   nav. A solid white background prevents blog cards from showing through
   when content scrolls past. */
.ev2 .blog-filter-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 18px 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--n-150);
  box-shadow: 0 6px 16px -10px rgba(9, 17, 59, 0.12);
}
body:has(.blog-filter-bar) .ev2 .nav { top: -68px; }
.ev2 .persona-tabs__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.ev2 .persona-tabs__group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.ev2 .persona-tabs__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ev2 .persona-tabs__pill {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ev2 .persona-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.ev2 .persona-tabs__tab:hover { color: #fff; }
.ev2 .persona-tabs__tab.is-active {
  background: #fff;
  color: var(--grey-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.ev2 .persona-tabs__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ev2 .persona-tabs__compare {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 140ms ease;
}
.ev2 .persona-tabs__compare:hover { color: #fff; }
/* Persona tab labels — desktop shows the full label, mobile (media query
   below) swaps in the short abbreviation. */
.ev2 .persona-tabs__name--full { display: inline; }
.ev2 .persona-tabs__name--short { display: none; }

@media (max-width: 900px) {
  .ev2 .persona-tabs__compare { display: none !important; }
}

@media (max-width: 768px) {
  /* On mobile the four persona chips don't fit on one row at the standard
     pill width — make the chip pill horizontally scrollable while keeping
     the rounded-pill shape, and tighten the label. */
  .ev2 .persona-tabs__inner { padding: 12px 16px; gap: 10px; }
  .ev2 .persona-tabs__label { font-size: 10px; letter-spacing: 1.2px; }
  .ev2 .persona-tabs__pill {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none; /* Firefox */
  }
  .ev2 .persona-tabs__pill::-webkit-scrollbar { display: none; }
  .ev2 .persona-tabs__tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ========== EVENTIO MATCH PAGE ========== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes matchPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }

@media (max-width: 1024px) {
  .ev2 .match-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .match-demo-grid { grid-template-columns: 1fr !important; }
  .ev2 .why-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ev2 .ai-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .curated-grid { grid-template-columns: 1fr !important; }
  .ev2 .how-grid { grid-template-columns: 1fr 1fr !important; }
  .ev2 .testi-grid { grid-template-columns: 1fr !important; }
  .ev2 .persona-card-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ev2 .vendor-cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 768px) {
  .ev2 .match-stats { grid-template-columns: 1fr 1fr !important; }
  .ev2 .match-stats > div { border-right: none !important; }
  .ev2 .how-grid { grid-template-columns: 1fr !important; }
  .ev2 .benefit-grid { grid-template-columns: 1fr !important; }
  .ev2 .lead-stat-bar { grid-template-columns: 1fr !important; }
  .ev2 .lead-stat-bar > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 16px; }
  .ev2 .lead-stat-bar > div:last-child { border-bottom: none; }
}

/* ========== VENDORS PAGE ========== */
@media (max-width: 900px) {
  .ev2 .how3-grid { grid-template-columns: 1fr !important; }
  .ev2 .founding-grid { grid-template-columns: 1fr !important; }
}

/* ========== PRICING PAGE ========== */
@media (max-width: 1100px) {
  .ev2 .pricing-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .ev2 .ai-spot3-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ev2 .pricing-row { grid-template-columns: 1fr !important; }
}

/* ========== BLOG PAGE ========== */
.ev2 .blog-card-hover { transition: transform 200ms ease, box-shadow 200ms ease; }
.ev2 .blog-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -16px rgba(9,17,59,0.20);
}
.ev2 .blog-featured.blog-card-hover:hover {
  box-shadow: 0 24px 60px -20px rgba(9,17,59,0.25);
}
@media (max-width: 1024px) {
  .ev2 .blog-featured { grid-template-columns: 1fr !important; }
  .ev2 .blog-grid { grid-template-columns: 1fr 1fr !important; }
  .ev2 .news-grid { grid-template-columns: 1fr !important; }
  .ev2 .topics-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .ev2 .related-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .ev2 .blog-grid { grid-template-columns: 1fr !important; }
  .ev2 .topics-grid { grid-template-columns: 1fr 1fr !important; }
  .ev2 .related-grid { grid-template-columns: 1fr !important; }
}

/* ========== AUTH PAGES (sign-up / email verification) ========== */
.ev2 .auth-field-label {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--n-700); margin-bottom: 7px;
}
.ev2 .auth-input {
  width: 100%; height: 48px; padding: 0 14px;
  background: #fff; border: 1px solid var(--n-200); border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; color: var(--n-950);
  outline: none; transition: border-color 140ms, box-shadow 140ms;
}
.ev2 .auth-input--icon { padding-left: 40px; }
.ev2 .auth-input:focus { border-color: var(--n-950); box-shadow: 0 0 0 3px rgba(9,17,59,0.08); }
.ev2 .auth-input.invalid { border-color: var(--danger); }
.ev2 .validation-message { color: var(--danger); font-size: 12px; margin-top: 5px; }
.ev2 .auth-submit {
  margin-top: 24px; height: 50px; width: 100%;
  border-radius: 10px; border: none;
  background: var(--grey-900); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.1px;
  cursor: pointer; box-shadow: 0 6px 18px -8px rgba(9,17,59,0.4);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 140ms;
}
.ev2 .auth-submit:hover { background: #0c1550; }
@media (max-width: 960px) {
  .ev2 .signup-grid { grid-template-columns: 1fr !important; }
  .ev2 .signup-right { padding: 24px 24px 32px !important; }
  .ev2 .signup-right > div { max-width: 380px !important; }
}
/* Sign-up carousel — pure-CSS auto-rotation (4 slides, 6s each). */
@keyframes signupCarouselFade {
  0%, 22% { opacity: 1; }
  27%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes signupCarouselDot {
  0%, 22% { width: 26px; background: #fff; }
  27%, 95% { width: 8px; background: rgba(255,255,255,0.45); }
  100% { width: 26px; background: #fff; }
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1024px) {
  .ev2 { --section-py: 96px; }
  .ev2 .h-hero { font-size: calc(56px * var(--type-scale)); letter-spacing: -1.8px; }
  .ev2 .h-section { font-size: calc(40px * var(--type-scale)); letter-spacing: -1.2px; }
}

@media (max-width: 960px) {
  /* Mobile: single column, rebuilt areas so the product mockup lands between
     the headline (intro) and the email form (cta). Reading order top→bottom:
     intro → visual → cta. */
  .ev2 .hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "visual" "cta" !important;
    gap: 24px !important;
  }
  /* min-height kept modest on mobile — the mockup inside is scaled 0.55x
     so the unscaled layout box is much taller than the visible content;
     anything > the actual scaled height shows as dead space below the
     mockup and pushes the email form away from the visual. */
  .ev2 .hero-visual { min-height: 260px !important; }
  .ev2 .walk-row { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .walk-row--reverse .walk-text { order: 1; }
  .ev2 .walk-row--reverse .walk-visual { order: 2; }
  .ev2 .persona-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ev2 .ai-spot-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .ai-spot-card { padding: 56px 32px !important; border-radius: 24px !important; }
  .ev2 .ai-caps-grid { grid-template-columns: 1fr 1fr !important; }
  .ev2 .about-founder-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ev2 .about-mission-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 768px) {
  .ev2 { --section-py: 72px; }
  .ev2 .container { padding: 0 20px; }
  .ev2 .nav__inner { padding: 0 20px; gap: 16px; }
  .ev2 .nav__links { display: none; }
  .ev2 .nav__mobile-toggle { display: inline-flex; }
  .ev2 .nav__actions { display: none; }
  /* Make nav__inner span the full nav width so the logo (first child) sits
     flush left and the hamburger (margin-left:auto from the base rule) sits
     flush right. Without this, the inner shrinks to its content and the two
     items cluster together. */
  .ev2 .nav__inner { flex: 1; }
  .ev2 .h-hero { font-size: calc(40px * var(--type-scale)); letter-spacing: -1.2px; line-height: 1.02; }
  .ev2 .h-section { font-size: calc(32px * var(--type-scale)); letter-spacing: -0.8px; }
  .ev2 .h-sub { font-size: calc(22px * var(--type-scale)); letter-spacing: -0.3px; }
  .ev2 .lead { font-size: 17px; }
  .ev2 .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .ev2 .footer__brand { grid-column: 1 / -1; }
  .ev2 .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 640px) {
  .ev2 .hero-visual > div:first-child { transform: none !important; }
  .ev2 .hero-visual > div { position: static !important; width: 100% !important; transform: none !important; margin-top: 12px; }
  .ev2 .ai-spot-card { padding: 44px 24px !important; }
  .ev2 .ai-caps-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .ev2 .btn--lg { height: 48px; padding: 0 22px; font-size: 14px; }
}

/* ============================================================
   Legal Hub — Terms, Vendor Terms, Privacy
   ============================================================ */
.ev2 .legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 264px 1fr;
  align-items: start;
}

/* --- Sidebar --- */
.ev2 .legal-sidebar {
  position: sticky;
  top: 68px;
  align-self: start;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  border-right: 1px solid var(--n-100);
  padding: 32px 0 48px;
}
.ev2 .legal-sidebar-label {
  padding: 0 0 12px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--n-400);
}
.ev2 .legal-sidebar-label--sub { font-size: 10px; padding-bottom: 8px; }

.ev2 .legal-docnav { display: flex; flex-direction: column; }
.ev2 .legal-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-left: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--n-500);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.ev2 .legal-doc svg { flex-shrink: 0; }
.ev2 .legal-doc:hover { background: var(--n-50); color: var(--n-800); }
.ev2 .legal-doc--active,
.ev2 .legal-doc--active:hover {
  background: var(--grey-25);
  border-left-color: var(--grey-900);
  color: var(--grey-900);
  font-weight: 600;
}

.ev2 .legal-section-nav {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--n-100);
}
.ev2 .legal-section-link {
  display: block;
  padding: 6px 18px 6px 20px;
  border-left: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--n-400);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.ev2 .legal-section-link:hover {
  color: var(--grey-900);
  border-left-color: var(--pro-200);
}

/* --- Content --- */
.ev2 .legal-content { padding: 44px 56px 88px; min-width: 0; }
.ev2 .legal-header {
  max-width: 720px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--n-200);
}
.ev2 .legal-header h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--grey-900);
  margin: 0;
}
.ev2 .legal-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--n-500);
  margin: 14px 0 0;
}
.ev2 .legal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ev2 .legal-meta span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--n-400);
}

.ev2 .legal-body { max-width: 720px; }
.ev2 .legal-body section { margin-bottom: 40px; scroll-margin-top: 88px; }
.ev2 .legal-body h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--grey-900);
  margin: 0 0 14px;
}
.ev2 .legal-body h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-700);
  margin: 22px 0 10px;
}
.ev2 .legal-body p,
.ev2 .legal-body li {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--n-600);
}
.ev2 .legal-body p { margin: 0 0 14px; }
.ev2 .legal-body ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.ev2 .legal-body li { margin-bottom: 6px; }
.ev2 .legal-body a {
  color: var(--pro-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ev2 .legal-preamble {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--n-600);
  margin: 0 0 36px;
}

.ev2 .legal-questions {
  max-width: 720px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--n-150);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--n-500);
}
.ev2 .legal-questions a {
  color: var(--grey-900);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Mobile section nav (native <details>) --- */
.ev2 .legal-mobile-nav { display: none; }
.ev2 .legal-mobile-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-900);
  cursor: pointer;
  list-style: none;
}
.ev2 .legal-mobile-nav summary::-webkit-details-marker { display: none; }
.ev2 .legal-mobile-nav[open] summary svg { transform: rotate(180deg); }
.ev2 .legal-mobile-nav summary svg { transition: transform 150ms ease; }
.ev2 .legal-mobile-nav-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
  border-top: 1px solid var(--n-150);
}
.ev2 .legal-mobile-nav-list a {
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--n-600);
  text-decoration: none;
}
.ev2 .legal-mobile-nav-list a:hover { color: var(--grey-900); }

@media (max-width: 900px) {
  .ev2 .legal-shell { grid-template-columns: 1fr; }
  .ev2 .legal-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--n-150);
    padding: 20px;
  }
  .ev2 .legal-sidebar-label { padding-left: 4px; }
  .ev2 .legal-docnav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ev2 .legal-doc {
    border-left: none;
    border: 1px solid var(--n-200);
    border-radius: 8px;
    padding: 8px 12px;
  }
  .ev2 .legal-doc--active,
  .ev2 .legal-doc--active:hover {
    border-color: var(--grey-900);
  }
  .ev2 .legal-section-nav { display: none; }
  .ev2 .legal-content { padding: 28px 20px 64px; }
  .ev2 .legal-mobile-nav {
    display: block;
    margin-bottom: 24px;
    border: 1px solid var(--n-200);
    border-radius: 10px;
  }
  .ev2 .legal-header h1 { font-size: 27px; }
  .ev2 .legal-body h2 { font-size: 19px; }
}

@media print {
  .ev2 .legal-sidebar,
  .ev2 .legal-mobile-nav,
  .ev2 .nav,
  .ev2 .footer { display: none !important; }
  .ev2 .legal-shell { display: block; }
  .ev2 .legal-content { padding: 0; }
  .ev2 .legal-header,
  .ev2 .legal-body,
  .ev2 .legal-preamble { max-width: 100%; }
}

/* ============================================================
   Marketing forms — shared controls (Become a Partner, Contact)
   ============================================================ */
.ev2 .mform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ev2 .mform-span2 { grid-column: 1 / -1; }
.ev2 .mform-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--n-700);
  margin-bottom: 8px;
}
.ev2 .mform-req { color: var(--vendor-200); margin-left: 2px; }
.ev2 .mform-control {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--n-950);
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  box-sizing: border-box;
}
.ev2 .mform-control:focus {
  border-color: var(--vendor-200);
  box-shadow: 0 0 0 3px rgba(237,101,134,0.12);
}
.ev2 .mform-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.ev2 .mform-textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}
.ev2 .mform-hint { margin-top: 8px; font-size: 12px; color: var(--n-500); }

.ev2 .mform-checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.ev2 .mform-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--n-800);
  line-height: 1.5;
}
.ev2 .mform-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--vendor-200);
  flex-shrink: 0;
  cursor: pointer;
}

.ev2 .mform-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ev2 .mform-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ev2 .mform-pill label {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--n-200);
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--n-800);
  cursor: pointer;
  transition: all 120ms;
}
.ev2 .mform-pill input:checked + label {
  border-color: var(--vendor-200);
  background: rgba(237,101,134,0.08);
  color: var(--vendor-600);
}

/* ============================================================
   Become a Partner page
   ============================================================ */
.ev2 .bp-hero { padding: 80px 0 32px; background: #fff; }
.ev2 .bp-hero .container { max-width: 720px; text-align: center; }
.ev2 .bp-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--n-700);
  margin-bottom: 28px;
}
.ev2 .bp-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vendor-200); }
.ev2 .bp-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -1.8px;
  color: var(--n-950);
  margin: 0;
  text-wrap: balance;
}
.ev2 .bp-hero-title em { font-style: normal; font-weight: 400; color: var(--grey-700); }
.ev2 .bp-hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--n-500);
  max-width: 540px;
  margin: 24px auto 0;
}

.ev2 .bp-form-section { padding: 40px 0 140px; background: #fff; }
.ev2 .bp-form-section .container { max-width: 880px; }
.ev2 .bp-card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 18px;
  padding: 48px clamp(24px, 5vw, 56px);
  box-shadow: var(--shadow-sm);
}
.ev2 .bp-section { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.ev2 .bp-section:not(:first-of-type) { margin-top: 40px; }
.ev2 .bp-section-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--vendor-200);
  letter-spacing: 0.6px;
}
.ev2 .bp-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--n-950);
}
.ev2 .bp-section-line { flex: 1; height: 1px; background: var(--n-150); }

.ev2 .bp-form-footer {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--n-150);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ev2 .bp-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ev2 .bp-submit-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--n-500);
  max-width: 420px;
  line-height: 1.5;
}
.ev2 .bp-submit-note a { color: var(--vendor-600); text-decoration: underline; }
.ev2 .bp-submit {
  background: var(--vendor-200);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ev2 .bp-submit:hover:not(:disabled) { background: var(--vendor-600); }
.ev2 .bp-submit:disabled { opacity: 0.6; cursor: default; }

.ev2 .bp-success-wrap { padding: 96px 0 140px; background: #fff; }
.ev2 .bp-success-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--grey-25);
  border: 1px solid var(--n-150);
  border-radius: 18px;
  padding: 64px 32px;
}
.ev2 .bp-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.ev2 .bp-success-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .bp-success-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--n-600);
  margin: 16px auto 0;
  max-width: 460px;
}
.ev2 .bp-success-actions { margin-top: 28px; }

@media (max-width: 640px) {
  .ev2 .mform-grid { grid-template-columns: 1fr; }
  .ev2 .mform-checkgrid { grid-template-columns: 1fr; }
  .ev2 .bp-card { padding: 32px 20px; }
  .ev2 .bp-submit-row { flex-direction: column; align-items: stretch; }
  .ev2 .bp-submit { justify-content: center; }
}

/* ============================================================
   Contact page (General inquiry + Email verification tabs)
   ============================================================ */
.ev2 .contact-hero { padding: 80px 0 32px; background: #fff; }
.ev2 .contact-hero .container { max-width: 720px; text-align: center; }
.ev2 .contact-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -1.8px;
  color: var(--n-950);
  margin: 0;
  text-wrap: balance;
}
.ev2 .contact-hero-title em { font-style: normal; font-weight: 400; color: var(--grey-700); }
.ev2 .contact-hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--n-500);
  max-width: 560px;
  margin: 22px auto 0;
}

.ev2 .contact-body { padding: 40px 0 110px; background: #fff; }
.ev2 .contact-body .container { max-width: 720px; }

.ev2 .contact-tablist {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--n-100);
  border-radius: 14px;
  margin-bottom: 24px;
}
.ev2 .contact-tab {
  flex: 1;
  padding: 14px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 140ms, box-shadow 140ms;
  font-family: var(--font-body);
}
.ev2 .contact-tab--on {
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(9,17,59,0.18), 0 0 0 1px var(--n-200);
}
.ev2 .contact-tab-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-700);
  letter-spacing: -0.1px;
  margin-bottom: 2px;
}
.ev2 .contact-tab--on .contact-tab-label { color: var(--n-950); }
.ev2 .contact-tab-sub { display: block; font-size: 12px; color: var(--n-500); }

.ev2 .contact-card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 18px;
  padding: 44px clamp(24px, 5vw, 52px);
  box-shadow: 0 24px 48px -24px rgba(9,17,59,0.18), 0 4px 12px -4px rgba(9,17,59,0.06);
}
.ev2 .contact-card-footer {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--n-150);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ev2 .contact-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ev2 .contact-submit-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--n-500);
  max-width: 380px;
  line-height: 1.5;
}
.ev2 .contact-submit-note a {
  color: var(--n-800);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ev2 .contact-submit { display: inline-flex; align-items: center; gap: 8px; }
.ev2 .contact-submit:disabled { opacity: 0.6; cursor: default; }

/* general-inquiry success card */
.ev2 .contact-success {
  background: var(--grey-25);
  border: 1px solid var(--n-150);
  border-radius: 18px;
  padding: 64px 32px;
  text-align: center;
}
.ev2 .contact-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.ev2 .contact-success-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .contact-success-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--n-600);
  margin: 16px auto 0;
  max-width: 460px;
}
.ev2 .contact-success-actions { margin-top: 28px; }

/* verification tab */
.ev2 .contact-verify-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ev2 .contact-verify-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--n-100);
  color: var(--n-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev2 .contact-verify-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: 4px;
}
.ev2 .contact-verify-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .contact-verify-intro {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--n-600);
  margin: 0 0 24px;
  max-width: 560px;
}
.ev2 .contact-verify-done {
  padding: 20px 22px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ev2 .contact-verify-done-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16,185,129,0.18);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev2 .contact-verify-done-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--n-950);
  margin-bottom: 4px;
}
.ev2 .contact-verify-done-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--n-600);
}
.ev2 .contact-verify-done-text strong { color: var(--n-900); }

@media (max-width: 640px) {
  .ev2 .contact-tablist { flex-direction: column; }
  .ev2 .contact-card { padding: 32px 20px; }
  .ev2 .contact-submit-row { flex-direction: column; align-items: stretch; }
  .ev2 .contact-submit { justify-content: center; }
}

/* ============================================================
   Error page (404 / 500 / maintenance)
   ============================================================ */
.ev2 .error-hero {
  padding: 64px 0 96px;
  background: #fff;
  border-bottom: 1px solid var(--n-150);
}
.ev2 .error-eyebrow-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.ev2 .error-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--n-700);
}
.ev2 .error-numeral {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 16px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(160px, 24vw, 320px);
  line-height: 0.9;
  letter-spacing: -10px;
  color: var(--n-950);
  user-select: none;
}
.ev2 .error-numeral-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.78em;
  height: 0.78em;
  position: relative;
  margin: 0 0.02em;
}
.ev2 .error-numeral-center svg { width: 100%; height: 100%; display: block; }
.ev2 .error-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  color: var(--n-950);
  margin: 40px auto 0;
  max-width: 760px;
  text-align: center;
  text-wrap: balance;
}
.ev2 .error-headline em {
  font-style: normal;
  font-weight: 400;
  color: var(--grey-700);
}
.ev2 .error-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--n-500);
  max-width: 580px;
  margin: 20px auto 0;
  text-align: center;
  text-wrap: pretty;
}
.ev2 .error-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
  flex-wrap: wrap;
}
.ev2 .error-ctas .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ev2 .error-ref {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--n-400);
  letter-spacing: 0.2px;
}
.ev2 .error-ref code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--n-600);
  background: var(--grey-25);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11.5px;
  word-break: break-all;
}

.ev2 .error-destinations { padding: 80px 0 96px; background: #fff; }
.ev2 .error-dest-head { text-align: center; margin-bottom: 40px; }
.ev2 .error-dest-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--n-950);
  margin: 8px 0 0;
}
.ev2 .error-dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ev2 .error-dest-card {
  display: block;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  position: relative;
}
.ev2 .error-dest-card:hover { transform: translateY(-2px); }
.ev2 .error-dest-card[data-persona="pro"]:hover {
  border-color: var(--pro-200);
  box-shadow: 0 12px 30px -12px rgba(87,165,244,0.35);
}
.ev2 .error-dest-card[data-persona="org"]:hover {
  border-color: var(--org-200);
  box-shadow: 0 12px 30px -12px rgba(255,158,51,0.35);
}
.ev2 .error-dest-card[data-persona="diy"]:hover {
  border-color: var(--diy-200);
  box-shadow: 0 12px 30px -12px rgba(156,130,248,0.35);
}
.ev2 .error-dest-card[data-persona="vendor"]:hover {
  border-color: var(--vendor-200);
  box-shadow: 0 12px 30px -12px rgba(237,101,134,0.35);
}
.ev2 .error-dest-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ev2 .error-dest-tag > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ev2 .error-dest-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.4px;
  color: var(--n-950);
  line-height: 1.2;
  margin-bottom: 6px;
}
.ev2 .error-dest-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--n-500);
}
.ev2 .error-dest-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n-400);
}

@media (max-width: 900px) {
  .ev2 .error-dest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ev2 .error-dest-grid { grid-template-columns: 1fr; }
  .ev2 .error-numeral { letter-spacing: -4px; }
}

/* ============================================================
   Blog article — inline links, lists, FAQ section
   ============================================================ */
.ev2 .blog-article-body a {
  color: var(--pro-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ev2 .blog-article-body a:hover {
  color: var(--grey-900);
}

.ev2 .blog-article-body .article-list {
  margin: 0 0 20px;
}
.ev2 .blog-article-body .article-list ul,
.ev2 .blog-article-body .article-list ol {
  margin: 0;
  padding-left: 24px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--n-700);
}
.ev2 .blog-article-body .article-list li {
  margin-bottom: 10px;
}
.ev2 .blog-article-body .article-list li strong {
  color: var(--n-950);
  font-weight: 700;
}

/* Italic photo captions inline in the body. */
.ev2 .blog-article-body p em {
  color: var(--n-500);
  font-style: italic;
}

/* FAQ section at the bottom of articles. */
.ev2 .blog-faq {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--n-200);
}
.ev2 .blog-faq-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--n-950);
  margin: 0 0 24px;
}
.ev2 .blog-faq-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ev2 .blog-faq-item {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--n-150);
}
.ev2 .blog-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ev2 .blog-faq-q {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.35;
  color: var(--n-950);
  margin: 0 0 8px;
}
.ev2 .blog-faq-a {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--n-600);
  margin: 0;
}

/* ============================================================
   Contact page v2 — browser-tab style + per-tab hero
   ============================================================ */
.ev2 .contact-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--n-700);
  margin-bottom: 24px;
}

.ev2 .contact-form-section {
  padding: 40px 0 100px;
  background: #fff;
}

/* browser-tab style — only the active tab "merges" into the panel below */
.ev2 .contact-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}
.ev2 .contact-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 16px;
  background: var(--grey-25);
  border: 1px solid var(--n-200);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--n-600);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.ev2 .contact-tab:hover { color: var(--n-800); }
.ev2 .contact-tab.is-active {
  background: #fff;
  color: var(--n-950);
  border-bottom-color: #fff;
  transform: translateY(1px);
}

.ev2 .contact-panel {
  background: #fff;
  border: 1px solid var(--n-200);
  border-top-left-radius: 0;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  padding: 44px clamp(24px, 5vw, 52px);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.ev2 .contact-panel-footer {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--n-150);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* support tab — auto-attached environment readout */
.ev2 .env-card {
  background: var(--grey-25);
  border: 1px solid var(--n-150);
  border-radius: 12px;
  padding: 16px 18px;
}
.ev2 .env-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: 10px;
}
.ev2 .env-card-note {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--n-400);
  text-transform: none;
}
.ev2 .env-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ev2 .env-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--n-500);
  margin-bottom: 2px;
}
.ev2 .env-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--n-950);
  letter-spacing: -0.1px;
}

/* shared success panel for all three Contact tabs */
.ev2 .contact-success-v2 {
  background: var(--grey-25);
  border: 1px solid var(--n-150);
  border-radius: 18px;
  padding: 64px 32px;
  text-align: center;
}
.ev2 .contact-success-v2-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.ev2 .contact-success-v2-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--n-950);
  margin: 0;
}
.ev2 .contact-success-v2-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--n-600);
  margin: 16px auto 0;
  max-width: 460px;
}

/* FAQs / Email callout band at the bottom of /contact */
.ev2 .contact-callout { background: var(--grey-25); padding: 100px 0 140px; }
.ev2 .contact-callout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.ev2 .contact-callout-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--n-950);
  margin: 0;
  text-wrap: balance;
}
.ev2 .contact-callout-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--grey-700);
}
.ev2 .contact-callout-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--n-600);
  margin: 20px 0 0;
  max-width: 52ch;
}
.ev2 .contact-callout-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.ev2 .contact-callout-card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.ev2 .contact-callout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--n-700);
}
.ev2 .contact-callout-card-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--n-500);
}
.ev2 .contact-callout-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.ev2 .contact-callout-task.has-border {
  border-bottom: 1px solid var(--n-100);
}
.ev2 .contact-callout-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--n-300);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev2 .contact-callout-check.is-done {
  border: none;
  background: #10b981;
}
.ev2 .contact-callout-task-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--n-900);
}
.ev2 .contact-callout-task-label.is-done {
  color: var(--n-400);
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .ev2 .contact-callout-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .ev2 .contact-tabs { flex-wrap: wrap; gap: 2px; padding: 0 8px; }
  .ev2 .contact-tab { padding: 12px 16px 14px; font-size: 13px; }
  .ev2 .env-grid { grid-template-columns: 1fr; }
  .ev2 .contact-panel { padding: 32px 20px; }
  .ev2 .contact-callout { padding: 72px 0 100px; }
  .ev2 .contact-callout-title { font-size: 30px; letter-spacing: -0.8px; }
}

/* ============================================================
   FAQs page — search hero, sticky chip bar, topic groups, accordion
   ============================================================ */
.ev2 .faqs-chipbar {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--n-150);
}
.ev2 .faqs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  background: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--n-700);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ev2 .faqs-chip:hover {
  background: var(--grey-25);
  color: var(--n-950);
}
.ev2 .faqs-chip.is-active {
  background: var(--n-950);
  border-color: var(--n-950);
  color: #fff;
}
.ev2 .faqs-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--n-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--n-700);
}
.ev2 .faqs-chip.is-active .faqs-chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ev2 .faqs-topic-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grey-25);
  border: 1px solid var(--n-150);
  color: var(--n-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev2 .faqs-group {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--n-150);
  border-radius: 16px;
  overflow: hidden;
}
.ev2 .faqs-row + .faqs-row { border-top: 1px solid var(--n-150); }
.ev2 .faqs-row-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 120ms;
}
.ev2 .faqs-row-trigger:hover { background: var(--grey-25); }
.ev2 .faqs-row-q {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--n-950);
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.ev2 .faqs-row-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grey-25);
  border: 1px solid var(--n-200);
  color: var(--n-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.ev2 .faqs-row-toggle.is-open {
  background: var(--n-950);
  border-color: var(--n-950);
  color: #fff;
}
.ev2 .faqs-row-body {
  padding: 0 28px 24px;
  margin-top: -4px;
}
.ev2 .faqs-row-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--n-700);
  margin: 0;
}
.ev2 .faqs-row-body p a {
  color: var(--n-950);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "Still stuck?" dark band — reused by Help Center too */
.ev2 .faqs-stuck {
  background: var(--n-950);
  color: #fff;
  padding: 96px 0;
}
.ev2 .faqs-stuck-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
}
.ev2 .faqs-stuck-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 20px;
}
.ev2 .faqs-stuck-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 0;
  text-wrap: balance;
}
.ev2 .faqs-stuck-title em {
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}
.ev2 .faqs-stuck-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
  margin: 20px 0 0;
  max-width: 56ch;
}
.ev2 .faqs-stuck-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 28px;
}
.ev2 .faqs-stuck-stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}
.ev2 .faqs-stuck-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.1;
}
.ev2 .faqs-stuck-stat-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

/* on-dark variants of the standard buttons used inside .faqs-stuck */
.ev2 .btn--on-dark-primary {
  background: #fff;
  color: var(--n-950);
  border: 1px solid #fff;
}
.ev2 .btn--on-dark-primary:hover { background: var(--grey-25); border-color: var(--grey-25); }
.ev2 .btn--on-dark-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.ev2 .btn--on-dark-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
  .ev2 .faqs-stuck-grid { grid-template-columns: 1fr; gap: 32px; }
  .ev2 .faqs-chipbar { top: 56px; }
}
@media (max-width: 640px) {
  .ev2 .faqs-row-trigger { padding: 18px 20px; gap: 16px; }
  .ev2 .faqs-row-q { font-size: 16px; }
  .ev2 .faqs-row-body { padding: 0 20px 22px; }
  .ev2 .faqs-stuck { padding: 72px 0; }
}

/* ============================================================
   Help Center (/support) — search-first hero, category grid, popular
   ============================================================ */
.ev2 .support-hero {
  background: #fff;
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--n-150);
}
.ev2 .support-search-wrap {
  position: relative;
  margin: 40px auto 0;
  max-width: 620px;
}
.ev2 .support-search-input {
  width: 100%;
  height: 64px;
  padding: 0 24px 0 56px;
  background: var(--grey-25);
  border: 1px solid var(--n-200);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--n-950);
  outline: none;
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.ev2 .support-search-input::placeholder { color: var(--n-500); }
.ev2 .support-search-input:focus {
  background: #fff;
  border-color: var(--n-300);
  box-shadow: 0 0 0 4px rgba(9, 17, 59, 0.06);
}
.ev2 .support-pop-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--grey-25);
  border: 1px solid var(--n-200);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--n-700);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ev2 .support-pop-chip:hover {
  background: #fff;
  border-color: var(--n-300);
  color: var(--n-950);
}

.ev2 .support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ev2 .support-card {
  position: relative;
  display: block;
  padding: 28px 24px 22px;
  background: #fff;
  border: 1px solid var(--n-150);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.ev2 .support-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(9, 17, 59, 0.22);
  border-color: var(--n-200);
}
.ev2 .support-card-strip {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  display: block;
}
.ev2 .support-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev2 .support-card-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--n-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ev2 .support-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--n-700);
}
.ev2 .support-card-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--n-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.ev2 .support-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ev2 .support-pop-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 18px;
  background: #fff;
  border: 1px solid var(--n-150);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.ev2 .support-pop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(9, 17, 59, 0.2);
  border-color: var(--n-200);
}
.ev2 .support-pop-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ev2 .support-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--n-500);
}

@media (max-width: 900px) {
  .ev2 .support-grid { grid-template-columns: repeat(2, 1fr); }
  .ev2 .support-popular-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ev2 .support-grid { grid-template-columns: 1fr; }
  .ev2 .support-popular-grid { grid-template-columns: 1fr; }
  .ev2 .support-hero { padding: 64px 0 40px; }
}

/* ============================================================
   Mobile responsive overrides (≤768px)
   Many marketing pages set their grids and hero typography via
   inline styles. Class CSS can't override inline styles without
   !important — these rules collapse multi-column grids to one
   column and scale down oversized inline headings on mobile.
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent horizontal scroll caused by decorative absolute-positioned
     elements (radial-gradient overlays, oversized hero brand marks, etc.)
     that intentionally extend beyond the section edges on desktop. */
  html, body { overflow-x: hidden; }

  /* Generic image safety: never exceed container, preserve aspect ratio. */
  .ev2 img { max-width: 100%; height: auto; }

  /* Inline-styled images that opt out of max-width on desktop — re-cap. */
  .ev2 [style*="max-width:none"] { max-width: 100% !important; }

  /* Hide the oversized decorative hero brand mark on mobile — it's
     aria-hidden and purely visual chrome. */
  .ev2 .hero-visual > img[aria-hidden] { display: none !important; }

  /* Multi-column grids → single column with sane gap */
  .ev2 .hero-grid,
  .ev2 .ai-spot-grid,
  .ev2 .ai-spot3-grid,
  .ev2 .news-grid,
  .ev2 .blog-grid,
  .ev2 .topics-grid,
  .ev2 .signup-grid,
  .ev2 .match-hero-grid,
  .ev2 .match-stats,
  .ev2 .match-demo-grid,
  .ev2 .how-grid,
  .ev2 .why-grid,
  .ev2 .benefit-grid,
  .ev2 .ai-grid,
  .ev2 .persona-card-grid,
  .ev2 .curated-grid,
  .ev2 .lead-stat-bar,
  .ev2 .vendor-cta-grid,
  .ev2 .testi-grid,
  .ev2 .how3-grid,
  .ev2 .walk-row,
  .ev2 .founding-grid,
  .ev2 .pricing-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Inline-styled headings — shrink to fit a 375px viewport.
     The attribute substring selector matches the page's inline
     `font-size:NNpx` declarations (no space — see the source). */
  .ev2 [style*="font-size:64px"] {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    letter-spacing: -1px !important;
    line-height: 1.05 !important;
  }
  .ev2 [style*="font-size:60px"] {
    font-size: clamp(30px, 8vw, 42px) !important;
    letter-spacing: -1px !important;
    line-height: 1.05 !important;
  }
  .ev2 [style*="font-size:48px"] {
    font-size: clamp(28px, 7vw, 36px) !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
  }
  .ev2 [style*="font-size:44px"] {
    font-size: clamp(26px, 6.5vw, 34px) !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
  }
  .ev2 [style*="font-size:40px"] {
    font-size: clamp(24px, 6vw, 32px) !important;
    letter-spacing: -0.6px !important;
    line-height: 1.15 !important;
  }
  .ev2 [style*="font-size:36px"] {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    letter-spacing: -0.5px !important;
  }
  /* Several page heroes use `clamp(48px, …)` for the h1 — the 48px lower
     bound is still too big at 375px. Drop the floor below 768px. */
  .ev2 [style*="clamp(48px"],
  .ev2 [style*="clamp(50px"],
  .ev2 [style*="clamp(56px"],
  .ev2 [style*="clamp(60px"] {
    font-size: clamp(30px, 8vw, 44px) !important;
    letter-spacing: -1px !important;
    line-height: 1.05 !important;
  }

  /* SignUp: hide the right-column carousel below 768px so the form fills
     the viewport, and tighten the form's huge desktop padding. */
  .ev2 .signup-grid > :nth-child(2) { display: none !important; }
  .ev2 .signup-grid > :first-child { padding: 72px 20px 48px !important; }

  /* SignUp header "Already have an account? Log in" — on mobile this text
     sits to the right of the eventio logo and overflows into it. Cap the
     width and right-align so it wraps cleanly onto two lines instead of
     squishing against the logo. */
  .ev2 .signup-top-link {
    max-width: 140px;
    text-align: right;
    line-height: 1.4;
  }

  /* Match: the vendor CTA card sets `padding:64px 56px` inline — far too
     much for mobile. Override the inline padding via attribute selector. */
  .ev2 .vendor-cta-grid { padding: 36px 24px !important; }

  /* Match: the lead-stat-bar sets `padding:28px 40px` inline — tighten. */
  .ev2 .lead-stat-bar { padding: 20px !important; }

  /* PersonaStory: the inline `padding:110px 0` on each story section is too
     much vertical space on mobile. */
  .ev2 section[style*="padding:110px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* PersonaStory big numeral (`<div style="font-size:64px">01</div>`) — the
     attribute selector above already covers it, but keep alignment tight. */

  /* Vendors page hero uses `padding:96px 0` inline. */
  .ev2 [style*="padding:96px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Pricing "Are you a vendor?" strip — stack icon + text + CTA vertically
     so the CTA sits at the bottom of the card instead of overflowing the side. */
  .ev2 .pricing-vendor-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .ev2 .pricing-vendor-strip__cta {
    align-self: stretch;
    justify-content: center;
    padding: 12px 16px !important;
  }

  /* Hero subtext + email form — both have desktop max-widths (560 / 460)
     that overflow the 375px viewport on mobile. Force them to fit. */
  .ev2 .lead { max-width: 100% !important; font-size: 15.5px !important; }
  .ev2 .hero-form {
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .ev2 .hero-form input { width: 100%; padding: 12px 14px !important; }
  .ev2 .hero-form .btn { width: 100%; justify-content: center; }

  /* Persona switcher: condensed pill — all four personas fit inside one pill
     at 375px, no horizontal scroll. The full labels are swapped for short
     ones (Pro / Org / DIY / Vendor) defined in PersonaTabs.razor. */
  .ev2 .persona-tabs__inner { padding: 10px 14px; gap: 8px; flex-direction: column; }
  .ev2 .persona-tabs__group { gap: 10px; flex-wrap: nowrap; width: 100%; justify-content: center; }
  .ev2 .persona-tabs__label { display: none; }
  .ev2 .persona-tabs__pill {
    overflow-x: visible;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
  }
  .ev2 .persona-tabs__tab {
    padding: 7px 10px;
    font-size: 12px;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .ev2 .persona-tabs__name--full { display: none; }
  .ev2 .persona-tabs__name--short { display: inline; white-space: nowrap; }

  /* Platform mockups inside .hero-visual, .feat-visual, .walk-visual are
     800-1000px+ wide by design — too wide for 375px mobile. Scale them down
     to fit. The wrapper gets `width:175%` so the mockup has room to render
     at near-full intricacy, and `transform:scale(0.55)` shrinks it back into
     the visible area. */
  .ev2 .hero-visual,
  .ev2 .feat-visual,
  .ev2 .walk-visual {
    min-height: auto !important;
    overflow: hidden;
    border-radius: 16px;
  }
  /* Hero mockup's unscaled layout box is much taller than the visible scaled
     content (transform: scale(0.55) leaves the box at full unscaled height
     while only painting 55% of it). Cap the hero-visual height on mobile so
     the email form sits right under the visible mockup instead of after a
     huge empty void inside the box. */
  .ev2 .hero-visual { max-height: 240px; }
  .ev2 .hero-visual > div:not([aria-hidden]),
  .ev2 .feat-visual > div:not([aria-hidden]),
  .ev2 .walk-visual > div:not(.photo) {
    transform: scale(0.55) !important;
    transform-origin: top left;
    width: 182% !important;
    margin-bottom: -45%;
  }
  /* Decorative absolute-positioned floating cards over a mockup — hide on mobile
     to avoid cluttered scaled-down composition. */
  .ev2 .hero-visual > div[style*="position:absolute"][style*="top:-"],
  .ev2 .hero-visual > div[style*="position:absolute"][style*="bottom:-"],
  .ev2 .feat-visual > div[style*="position:absolute"][style*="top:-"],
  .ev2 .feat-visual > div[style*="position:absolute"][style*="bottom:-"] {
    display: none !important;
  }
  /* Decorative gradient `.photo` placeholders layered BEHIND a mockup in
     the home page "walk-row" sections — at 507px wide they overflow on
     mobile and add no information once the mockup is also visible. Hide
     them. (Real photo backgrounds use `.walk-photo` instead — those stay
     visible on mobile, just sized down to fit.) */
  .ev2 .walk-visual > .photo {
    display: none !important;
  }
  .ev2 .walk-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    margin-bottom: -8px;
  }
  /* Vendors "verified" mockup carries an inline `margin-top:40px` (desktop
     spacing to drop it below the florist photo's overlapping corner). On
     mobile the photo and mockup stack vertically, so that gap plus the
     unscaled wrapper's natural padded height reads as ~90px of dead space.
     Pull the mockup up tight against the photo. */
  .ev2 .walk-visual > div[style*="margin-top:40px"] {
    margin-top: -150px !important;
  }

  /* Editorial image placeholders (.photo) — they default to aspect-ratio:4/5
     which at 375px wide produces a 469px-tall block. Cap to a friendlier
     mobile height and switch to 4/3 so the placeholder takes about 250px. */
  .ev2 .photo {
    aspect-ratio: 4 / 3 !important;
    max-height: 260px;
  }

  /* BlogCard placeholder height — desktop `min-height:360px` (inline) is too
     tall on mobile. Shrink to ~200px. */
  .ev2 [class*="photo"][style*="min-height:360px"] { min-height: 200px !important; }
  .ev2 [style*="min-height:360px"] { min-height: 200px !important; }

  /* Match.razor section with `min-height:540px` — shrink. */
  .ev2 [style*="min-height:540px"] { min-height: 280px !important; }
  /* Match.razor mock with `min-height:500px` (MockEventSource). */
  .ev2 [style*="min-height:500px"] { min-height: 280px !important; }
  /* Match.razor mock with `min-height:440px` (MockPersonaDashboard inner). */
  .ev2 [style*="min-height:440px"] { min-height: auto !important; }
  /* Vendors.razor hero-visual `min-height:720px` outer + `height:720px` inner. */
  .ev2 [style*="min-height:720px"] { min-height: 320px !important; }
  .ev2 [style*="height:720px"] { height: 280px !important; min-height: 0 !important; }

  /* About.razor placeholder blocks that use `aspect-ratio:3 / 4` produce a
     ~500px-tall block on mobile. Reduce to 4/3 — EXCEPT the real founder
     portrait (handled separately below). */
  .ev2 [style*="aspect-ratio:3 / 4"]:not(.about-founder-photo),
  .ev2 [style*="aspect-ratio:3/4"]:not(.about-founder-photo) {
    aspect-ratio: 4 / 3 !important;
    max-height: 280px;
  }
  /* Layered founder photo: cap the stack width, center it, and shrink the
     sub-photo offset so it stays on-screen at 375px. */
  .ev2 .about-founder-stack {
    max-width: 260px;
    margin: 0 auto;
  }
  .ev2 .about-founder-subphoto {
    bottom: -16px;
    right: -16px;
    width: 42%;
    border-width: 4px;
  }

  /* Pricing compare table — pin the "Feature" first column to the left edge
     of the horizontal-scroll container so it stays visible while the user
     swipes through the plan columns. */
  .ev2 .pricing-cmp-row {
    /* Narrower Feature column for mobile (was 2fr 1fr×5) so plan content has
       room. Feature ≈ 110px, each plan ≈ 95px. */
    grid-template-columns: 110px repeat(5, 95px) !important;
  }
  .ev2 .pricing-cmp-row > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Explicit opaque background — must fully cover the row's vertical
       space so content from other cells (which can wrap to 2+ lines and
       make the row taller) doesn't bleed through. */
    background: #fff;
    /* Force the sticky cell to fill the full row height (overrides the row's
       inline `align-items:center` which would otherwise size the cell to
       just its own content). Vertically center the text via flexbox. */
    align-self: stretch;
    display: flex;
    align-items: center;
    box-shadow: 2px 0 4px -2px rgba(9, 17, 59, 0.12), 1px 0 0 var(--n-150);
    padding-right: 12px;
    /* Allow feature labels to wrap to 2 lines on mobile. */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
  }
  .ev2 .pricing-cmp-row--header > :first-child { background: #F3F5F7; }
  /* Visual scroll hint */
  .ev2 .pricing-cmp-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* Vendors page — Reverse rows put mock on left, text on right (desktop
     design). On mobile after grid collapses to 1fr that means mock-first.
     Force text-first by targeting the div that contains the heading and
     giving it `order: -1` so it always renders first. */
  .ev2 .walk-row > div:has(h3) { order: -1; }

  /* Vendors "Refer & earn" 3-step row — stack vertically on mobile so the
     icons + labels don't run off-screen. */
  .ev2 .refer-steps {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .ev2 .refer-step-divider {
    display: none !important;
  }

  /* Reduce vertical section padding everywhere on mobile so sections don't
     feel spread apart. Targets all the inline `padding:120px 0` / `padding:
     140px 0` / `padding:88px 0` / `padding:96px 0` chunks across pages. */
  .ev2 section[style*="padding:120px 0"],
  .ev2 section[style*="padding:96px 0"],
  .ev2 section[style*="padding:90px 0"],
  .ev2 section[style*="padding:88px 0"],
  .ev2 section[style*="padding:88px 40px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Home persona switcher (PersonaSwitcher) — the grid collapses to 1fr at
     ≤960px, but the MockPersonaDashboard child has intrinsic width ~460px
     which forces the column wider than the viewport. Constrain children +
     scale the mockup so it fits, and reduce the inline 32px h3 to mobile size. */
  .ev2 .persona-grid > div { min-width: 0 !important; }
  .ev2 .persona-grid h3[style*="calc(32px"] {
    font-size: clamp(22px, 6vw, 28px) !important;
    letter-spacing: -0.4px !important;
  }
  .ev2 .persona-grid > div:last-child {
    overflow: hidden;
    border-radius: 16px;
  }
  .ev2 .persona-grid > div:last-child > * {
    transform: scale(0.55) !important;
    transform-origin: top left;
    width: 182% !important;
    margin-bottom: -45%;
  }
  /* The persona pill in the switcher has long labels (Professional Planner,
     In-House Team) that wrap awkwardly. Tighten padding so all four fit. */
  .ev2 .persona-pill {
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  /* StoryStrip on persona pages — by default it uses
     `grid-template-columns: repeat(N, 1fr)` (N == #stories ≈ 8). At 375px
     that crams everything to ~40px each + horizontal overflow. Switch to a
     2-column grid so every story chip stacks visibly. */
  .ev2 .story-strip-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
  }
  .ev2 .story-strip-grid > a {
    padding: 10px 14px !important;
    border-left: none !important;
    border-top: 1px solid var(--n-100);
  }
  .ev2 .story-strip-grid > a:nth-child(odd) {
    border-right: 1px solid var(--n-100);
  }
  .ev2 .story-strip-section { padding: 32px 0 !important; }
}