/* =============================================
   Net Hub — Events Builder
   Base system lifted from mynethub.com/style.css so this site is
   visually continuous with the main brochure site. Everything below
   the "NEW COMPONENTS" rule is specific to Events Builder.
   ============================================= */

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

:root {
  --red:       #E8274B;
  --red-dark:  #C01F3C;
  --red-light: #FDEAEE;
  --red-line:  #f5b8c4;
  --text:      #0F0F12;
  --text-sub:  #6B6B7A;
  --border:    #E8E8F0;
  --bg:        #F5F5F7;
  --white:     #FFFFFF;
  --nav-h:     60px;

  /* accents used only to tell the three event types apart */
  --amber:       #F59E0B;
  --amber-light: #FEF3C7;
  --amber-line:  #FDE68A;
  --amber-dark:  #92400E;
  --green:       #1A9C5B;
  --green-light: #E6F7F0;
  --green-dark:  #0E6E3E;
  --indigo:      #4F46E5;
  --indigo-light:#EEF0FF;
  --indigo-dark: #3730A3;
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ── Utility ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  border: none;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(232,39,75,0.30);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(232,39,75,0.42); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-ghost {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-ghost:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

.btn-dark { background: var(--text); color: var(--white); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(245,245,247,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-name  {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
/* the mark is the two-figure glyph from the Net Hub logo, brand red */
.logo-svg { width: 22px; height: auto; display: block; color: var(--red); flex-shrink: 0; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a, .nav-links .dropdown-toggle {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.nav-links a:hover, .nav-links .dropdown-toggle:hover { color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--red); font-weight: 600; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: 5px; }
.dropdown-toggle::after { content: '\25BE'; font-size: 10px; color: var(--text-sub); }

/* Invisible bridge so the mouse can reach the menu without losing hover */
.dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
  background: transparent;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 101;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.dropdown-menu a:hover { background: var(--red-light); color: var(--red); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-login {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.btn-login:hover { border-color: var(--red); color: var(--red); }
.nav-actions .btn-primary { padding: 8px 18px; font-size: 13px; }

/* ── PAGE HERO (dark) ── */
.page-hero {
  background: var(--text);
  color: var(--white);
  padding: 130px 24px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 760px; height: 540px;
  background: radial-gradient(ellipse, rgba(232,39,75,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,39,75,0.14);
  color: #FF7C93;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(232,39,75,0.35);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.82); }
}

.page-hero h1 {
  color: var(--white);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -1.6px;
  margin: 0 auto 18px;
  line-height: 1.1;
  max-width: 860px;
}
.page-hero h1 span { color: #FF6683; }

.page-hero .hero-sub {
  color: rgba(255,255,255,0.66);
  font-size: clamp(14px, 2vw, 17px);
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Product shot inside the dark hero. Lifted with a real offset shadow, and the
   top edge catches the ring glow so it reads as sitting in the scene. */
.hero-stage {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 54px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
.hero-stage .hero-peek { grid-column: 1 / -1; }

.hero-peek {
  position: relative;
  z-index: 1;
  max-width: 830px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.4);
}
.hero-peek img { display: block; width: 100%; height: auto; }
.hero-peek figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(15,15,18,0.82);
  color: rgba(255,255,255,0.85);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Two panels from the demos, drifting either side of the room plan. Built as
   real markup rather than cropped screenshots: at 244px a crop of the product
   UI is unreadable, and the numbers here are the ones the demos actually
   render (78 covers, Grace's table of six at 2 of 6). */
.hero-float {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 22px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  padding: 15px 16px 14px;
  color: var(--text);
  /* stacked, they keep panel proportions instead of stretching to half the page */
  width: 100%;
  max-width: 360px;
  justify-self: center;
}
.hf-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
}
.hf-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 5px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hf-title span {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--red-dark);
  background: var(--red-light);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.hf-foot {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.hf-foot strong { color: var(--text); font-weight: 700; }

/* covers */
.hf-bars { list-style: none; display: grid; gap: 9px; }
.hf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hf-label {
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-label em { color: var(--text-sub); font-style: normal; }
.hf-n {
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hf-bar {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}
.hf-bar i {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red) 0%, #FF6683 100%);
}

/* purchaser guest list */
.hf-seats { list-style: none; display: grid; gap: 9px; }
.hf-seats li { display: flex; align-items: center; gap: 9px; }
.hf-av {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700;
  background: var(--red-light);
  color: var(--red-dark);
}
/* an unfilled seat is a dashed outline, the same cue the demo uses */
.hf-av.is-empty {
  background: transparent;
  border: 1px dashed var(--red-line);
  color: var(--text-sub);
}
.hf-who {
  min-width: 0;
  font-size: 11.5px; font-weight: 600;
  display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-seats li:not(.is-done) .hf-who { color: var(--text-sub); font-weight: 500; }
.hf-who em {
  font-style: normal; font-weight: 500;
  font-size: 10px; color: var(--text-sub);
}
.hf-prog {
  height: 5px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}
.hf-prog i {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red) 0%, #FF6683 100%);
}

/* Float only when there is genuinely room beside an 830px plan. The offsets are
   measured from the plan's own edge, not the stage, so the overlap stays 60px
   at every width instead of creeping inwards as the viewport narrows. */
@media (min-width: 1280px) {
  .hero-stage { display: block; }
  .hero-float {
    position: absolute;
    /* the plan carries z-index 1, so the panels need to be told to sit on top */
    z-index: 2;
    width: 244px;
    max-width: none;
    animation: hf-drift 9s ease-in-out infinite;
    will-change: transform;
  }
  /* 44px of overlap: enough to read as layered, shallow enough to stay in the
     plan's own margin. Any deeper and it clips the room-layout header. */
  .hero-float.is-covers {
    top: 84px;
    right: calc(50% + 371px);
    animation-delay: -1.4s;
  }
  .hero-float.is-table {
    bottom: 34px;
    left: calc(50% + 371px);
    animation-name: hf-drift-b;
    animation-duration: 11s;
    animation-delay: -4.2s;
  }
}
@keyframes hf-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.2deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(-0.3deg); }
}
@keyframes hf-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1.2deg); }
  50%      { transform: translate3d(0, -13px, 0) rotate(0.3deg); }
}

/* Ring backdrop for the dark hero — pure CSS, no imagery */
.hero-rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232,39,75,0.16);
  animation: ring-spin linear infinite, ring-pulse ease-in-out infinite;
}
.hero-ring:nth-child(1) { width: 460px;  height: 460px;  animation-duration: 42s, 4.8s;  animation-delay: 0s, -2.5s; }
.hero-ring:nth-child(2) { width: 660px;  height: 660px;  animation-duration: 56s, 6.2s;  animation-delay: 0s, -0.8s; animation-direction: reverse, normal; }
.hero-ring:nth-child(3) { width: 880px;  height: 880px;  animation-duration: 72s, 7.5s;  animation-delay: 0s, -3.2s; }
.hero-ring:nth-child(4) { width: 1120px; height: 1120px; animation-duration: 90s, 9.0s;  animation-delay: 0s, -5.0s; animation-direction: reverse, normal; }
.hero-ring:nth-child(5) { width: 1400px; height: 1400px; animation-duration: 110s, 11s;  animation-delay: 0s, -7.0s; }
@keyframes ring-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ring-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
  flex-wrap: wrap;
}
.trust-sep { color: var(--border); font-size: 18px; line-height: 1; }

/* ── SECTION LAYOUT ── */
.section { padding: 100px 24px; }
.section-tight { padding: 72px 24px; }
.section-white {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.section-title {
  text-align: center;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -1.3px;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.14;
}
.section-title span { color: var(--red); }

.section-sub {
  text-align: center;
  font-size: clamp(14px, 1.8vw, 17px);
  color: var(--text-sub);
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.75;
}

/* ── ICON TILE (inline SVG, replaces emoji) ── */
.icon-tile {
  width: 46px; height: 46px;
  background: var(--red-light);
  color: var(--red-dark);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile.amber  { background: var(--amber-light);  color: var(--amber-dark); }
.icon-tile.green  { background: var(--green-light);  color: var(--green-dark); }
.icon-tile.indigo { background: var(--indigo-light); color: var(--indigo-dark); }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile.lg svg { width: 27px; height: 27px; }

/* ── FEATURE GRID ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); }
.feature-card .icon-tile { margin-bottom: 18px; }
.feature-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.3px; }
.feature-card p  { font-size: 13.5px; color: var(--text-sub); line-height: 1.72; }

.section-white .feature-card { background: var(--bg); }

/* ── FEATURE DETAIL ROWS ── */
.feature-detail {
  scroll-margin-top: 84px;
  display: flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 0.18s;
}
.feature-detail:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.07); }
.feature-detail-accent { width: 6px; flex-shrink: 0; background: var(--red); }
.feature-detail-accent.amber  { background: var(--amber); }
.feature-detail-accent.green  { background: var(--green); }
.feature-detail-accent.indigo { background: var(--indigo); }
.feature-detail-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 36px 44px;
  flex: 1;
}
.feature-detail-body { flex: 1; min-width: 0; }
.feature-detail-body h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-bottom: 10px;
}
.feature-detail-body .detail-desc {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.75;
  margin-bottom: 20px;
}

/* ── TICKED LISTS ── */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 32px;
}
.tick-list.one-col { grid-template-columns: 1fr; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.tick-list li::before {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--red-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C01F3C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── USE-CASE CARDS (the three event types) ── */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.usecase-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  /* resting lift, so the card sits on the page rather than in it */
  box-shadow: 0 2px 4px rgba(20,20,30,0.04), 0 10px 24px rgba(20,20,30,0.05);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 10px rgba(20,20,30,0.05), 0 20px 44px rgba(20,20,30,0.11);
  border-color: var(--red-line);
}
.usecase-visual {
  height: 168px;
  /* never var(--bg): that is the section colour, and the panel vanished into it */
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}
/* each vertical tints its own panel, which separates the card from the page
   and colour-codes the three destinations */
.usecase-card.is-gala      .usecase-visual { background: #F4F5FF; }
.usecase-card.is-recurring .usecase-visual { background: #FFFAEF; }
.usecase-card.is-sports    .usecase-visual { background: #F1FAF5; }
.usecase-visual svg { width: 100%; height: 100%; }
.usecase-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.usecase-kicker {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11px;              /* 11px floor: uppercase micro-labels are still functional text */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 14px;
  background: var(--red-light);
  color: var(--red-dark);
  border: 1px solid var(--red-line);
}
.usecase-kicker.amber  { background: var(--amber-light);  color: var(--amber-dark);  border-color: var(--amber-line); }
.usecase-kicker.green  { background: var(--green-light);  color: var(--green-dark);  border-color: #BFE6D2; }
.usecase-kicker.indigo { background: var(--indigo-light); color: var(--indigo-dark); border-color: #D3D6FA; }
.usecase-body h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
  line-height: 1.2;
}
.usecase-body > p { font-size: 13.5px; color: var(--text-sub); line-height: 1.72; margin-bottom: 20px; }
.usecase-body .tick-list { margin-bottom: 24px; }
/* the whole card is the link, so the label is a span reading as its affordance */
.usecase-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  padding-top: 18px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.usecase-card:hover .usecase-link { color: var(--red-dark); }
.usecase-link svg { width: 15px; height: 15px; transition: transform 0.15s; }
.usecase-card:hover .usecase-link svg { transform: translateX(3px); }

/* ── ALTERNATING SPLIT (text + SVG visual) ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--white);
  scroll-margin-top: 84px;
}
.split-visual {
  background: var(--bg);
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-right: 1px solid var(--border);
}
.split-visual svg { width: 100%; height: auto; max-height: 340px; }
/* a real product capture fills the panel edge to edge; anchored top-left
   because UI screenshots read from that corner */
.split-visual.is-shot { padding: 0; align-items: stretch; }
.split-visual.is-shot img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: left top;
  display: block;
}
.split-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.split-body .icon-tile { margin-bottom: 20px; }
.split-body h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.7px;
  margin-bottom: 12px;
  line-height: 1.15;
}
.split-body .detail-desc { font-size: 14.5px; color: var(--text-sub); line-height: 1.75; margin-bottom: 26px; }
.split-more { margin-top: 22px; }
.split-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.split-more a::after {
  content: '';
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8274B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.15s;
}
.split-more a:hover::after { transform: translateX(3px); }
.split.reverse .split-visual { order: 2; border-right: none; border-left: 1px solid var(--border); }
.split.reverse .split-body   { order: 1; }

/* ── STEP CARDS ── */
.step-cards { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 0 auto; }
.step-card {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.section-white .step-card { background: var(--bg); }
.step-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); }
.step-card .accent { width: 6px; flex-shrink: 0; background: var(--red); }
.step-card .accent.amber  { background: var(--amber); }
.step-card .accent.green  { background: var(--green); }
.step-card .accent.indigo { background: var(--indigo); }
.step-card-inner { display: flex; align-items: flex-start; gap: 20px; padding: 24px 26px; flex: 1; }
.step-body { flex: 1; min-width: 0; }
.step-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.step-num { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.06em; text-transform: uppercase; }
.step-header h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.3px; }
.step-body p { font-size: 13.5px; color: var(--text-sub); line-height: 1.75; }

/* ── STAT STRIP ── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}
.stat-cell { background: var(--white); padding: 26px 24px; }
.section-white .stat-cell { background: var(--bg); }
.stat-value {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 5px;
}
.stat-label { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.section-white .testimonial-card { background: var(--bg); }
.testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); }
.testimonial-card blockquote {
  font-size: 13.5px;
  color: var(--text-sub);
  font-style: italic;
  line-height: 1.75;
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--red);
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
/* Same 40px circle whether it holds a photo or the initials fallback, so a
   card without a portrait still lines up with the ones that have one. */
.author-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red-light);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
img.author-avatar { object-fit: cover; border: 1px solid var(--border); }
.author-name { font-weight: 700; font-size: 13px; letter-spacing: -0.2px; }
.author-role { font-size: 12px; color: var(--text-sub); }

/* ── LIVE DEMO CARDS ── */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.demo-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px 22px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.section-white .demo-card { background: var(--bg); }
.demo-card:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 12px 34px rgba(232,39,75,0.13);
}
.demo-card__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-dark);
  background: var(--red-light);
  border: 1px solid var(--red-line);
  border-radius: 20px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.demo-card__tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
.demo-card h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.2;
  margin-bottom: 9px;
}
.demo-card p { font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-bottom: 20px; }
.demo-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.demo-card__go svg { width: 14px; height: 14px; transition: transform 0.15s; }
.demo-card:hover .demo-card__go svg { transform: translate(2px, -2px); }

/* signup row closing the demo section: tried it -> buy it */
.demo-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* inline "see it working" link under a feature */
.try-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.01em;
}
.try-link svg { width: 13px; height: 13px; transition: transform 0.15s; }
.try-link:hover svg { transform: translate(2px, -2px); }

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

/* ── SCREENSHOTS ── */
.shot-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
/* Full width only. These are captures of a dense UI, so anything narrower than
   the container renders their text too small to read. */
.shot-stack { display: grid; gap: 22px; max-width: 1100px; margin: 0 auto; }

.shot {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 40px rgba(20,20,30,0.08);
}
.shot-scroll { overflow-x: auto; }
/* the captures are of a light UI, so they sit on white even in a white section */
.shot img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg);
}
.shot figcaption {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-sub);
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.shot figcaption b { color: var(--text); font-weight: 600; }

/* a portrait capture (a dialog) blown up to container width just looks broken */
.shot--narrow { max-width: 480px; margin-left: auto; margin-right: auto; }

/* ── SHOT STAGE ──
   One capture with two panels beside it, the same composition as the hero.
   The panels are markup rather than crops of the dialogs they describe: at
   260px a capture of that dialog renders its 14px labels at about 4px, which
   is the reason the pair below used to need half the container each. */
.shot-stage {
  position: relative;
  width: min(1240px, calc(100vw - 48px));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
/* min-width:0 or the capture refuses to shrink below its own intrinsic width */
.shot-stage .shot-main {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 660px;
  margin: 0 auto;
}

.gs-card {
  width: 100%;
  max-width: 360px;
  justify-self: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 16px 14px;
  box-shadow: 0 2px 4px rgba(20,20,30,0.04), 0 14px 34px rgba(20,20,30,0.10);
}
.gs-card .hf-title { margin-bottom: 11px; }

/* the dietary chips, at the size the dialog actually draws them */
.gs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gs-chips span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 9px;
}
.gs-chips span.on {
  background: var(--red-light);
  border-color: var(--red-line);
  color: var(--red-dark);
}
.gs-field {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.gs-field:last-of-type { border-bottom: 0; }
.gs-field b { font-weight: 600; }
.gs-field span { color: var(--text-sub); }
/* the dialog leaves accessibility blank on this seat, so the card shows the
   field's own placeholder rather than inventing an answer for Daniel */
.gs-empty span { color: var(--text-4, #b6bac3); font-style: italic; }
/* VIP is gold in the product, not the brand red the pill defaults to */
.hf-title span.is-vip {
  background: var(--amber-light);
  color: var(--amber-dark);
}
.gs-label {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-sub);
  margin: 12px 0 7px;
}
/* the VIP row, mirroring the toggle in the dialog */
.gs-vip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 9px 11px;
  background: var(--amber-light);
  border: 1px solid var(--amber-line);
  border-radius: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--amber-dark);
}
.gs-toggle {
  width: 28px; height: 16px; border-radius: 20px;
  background: var(--amber); position: relative; flex: 0 0 28px;
}
.gs-toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--white);
}
.gs-table { display: block; width: 100%; height: auto; margin: 2px 0 4px; }

@media (min-width: 1240px) {
  .shot-stage { display: block; }
  .shot-stage .shot-main { max-width: 660px; }
  .gs-card {
    position: absolute;
    z-index: 2;
    width: 260px;
    max-width: none;
    animation: hf-drift 9s ease-in-out infinite;
    will-change: transform;
  }
  /* Only 12px of overlap here, not the hero's 44: the capture carries just 9px
     of margin on each side, and any deeper the cards cover the seat badges and
     the View button that the section is pointing at. */
  .gs-card.is-details {
    top: 40px;
    right: calc(50% + 318px);
    animation-delay: -2.2s;
  }
  .gs-card.is-seating {
    top: 240px;
    left: calc(50% + 318px);
    animation-name: hf-drift-b;
    animation-duration: 11s;
    animation-delay: -5.1s;
  }
}

/* Two-up is only safe for dialog-sized captures: at ~539px a 540px-wide modal
   is still 1:1. Never use this for a full-page capture. */
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* ── PRICING ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 26px;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.section-white .pricing-card { background: var(--bg); }
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.08); }
.pricing-card.popular { border-color: var(--red); border-width: 2px; padding: 31px 25px; }
.popular-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--white);
  font-size: 11px; font-weight: 700;   /* 11px floor, and matches mynethub.com's badge */
  padding: 4px 15px; border-radius: 20px;
  white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase;
}
.price-name { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 10px; }
.price-amount {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 34px; font-weight: 700;
  letter-spacing: -1.4px; line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.price-amount span { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--text-sub); letter-spacing: 0; }
.price-desc { font-size: 13px; color: var(--text-sub); margin-bottom: 0; line-height: 1.65; }
.price-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.price-features { list-style: none; margin: 0 0 26px; }
.price-features li {
  padding: 5px 0; font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 9px;
}
.price-features li::before {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--red-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C01F3C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}
/* the fee line is a cost, not a feature — mark it as such */
.price-features li.is-fee::before {
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7A' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.price-features li.is-fee { color: var(--text-sub); }
.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ── COMPARISON TABLE ── */
.compare-wrap {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
  background: var(--white);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 13.5px;
}
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--bg);
  white-space: nowrap;
}
.compare tbody th { font-weight: 600; color: var(--text); width: 30%; }
.compare td { color: var(--text-sub); line-height: 1.6; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--green-dark); font-weight: 700; white-space: nowrap; }

/* ── FAQ ── */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.section-white .faq-item { background: var(--bg); }
.faq-item summary {
  cursor: pointer;
  padding: 19px 24px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.18s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--red); }
.faq-answer { padding: 0 24px 22px; font-size: 13.5px; color: var(--text-sub); line-height: 1.8; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--red); font-weight: 600; }
.faq-answer a:hover { text-decoration: underline; }

/* ── CTA BANNER ── */
.cta-banner {
  background: var(--text);
  color: var(--white);
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(232,39,75,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner .section-title { color: var(--white); position: relative; z-index: 1; }
.cta-banner .section-sub   { color: rgba(255,255,255,0.65); margin-bottom: 40px; position: relative; z-index: 1; }
.cta-banner .section-label { color: rgba(255,255,255,0.45); position: relative; z-index: 1; }
.cta-banner .hero-actions  { position: relative; z-index: 1; }

/* ── FOOTER ── */
footer {
  background: var(--text);
  color: rgba(255,255,255,0.45);
  padding: 64px 0 32px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-row { display: flex; align-items: center; gap: 11px; }
.footer-brand-name {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
}
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 12px; max-width: 340px; }

.footer-contact {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: normal;          /* it is an <address>, which browsers italicise */
  max-width: 340px;
}
.footer-contact a,
.footer-contact span {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.15s;
  white-space: normal;
  word-break: break-word;
}
.footer-contact a:hover { color: var(--white); }
.footer-contact svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  stroke: currentColor;
}
/* h3, not h4: the preceding section heading is an h2, so h4 would skip a level */
.footer-col h3 { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.42); transition: color 0.15s; }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
}
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: rgba(255,255,255,0.42); transition: color 0.15s; }
.footer-legal a:hover { color: var(--white); }

/* Net Hub is credited here and nowhere else in the chrome */
.powered-by {
  display: block;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 0.15s;
}
.powered-by:hover { opacity: 1; }
.powered-by img { width: 132px; height: auto; }

/* ── FLOW DIAGRAM ── */
.flow-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  overflow-x: auto;
}
.section-white .flow-wrap { background: var(--bg); }
.flow-wrap svg { width: 100%; height: auto; min-width: 760px; }

/* ── SVG VISUAL HELPERS ── */
.viz-label { font: 600 9px 'Inter', sans-serif; fill: #6B6B7A; letter-spacing: 0.04em; }
.viz-title { font: 700 11px 'Inter', sans-serif; fill: #0F0F12; }
.viz-h     { font: 700 13px 'Inter', sans-serif; fill: #0F0F12; letter-spacing: -0.2px; }
.viz-body  { font: 500 9.5px 'Inter', sans-serif; fill: #6B6B7A; }
.viz-num   { font: 700 10px 'Inter', sans-serif; fill: #0F0F12; font-variant-numeric: tabular-nums; }
.flow-title { font: 700 14px 'Inter', sans-serif; fill: #0F0F12; letter-spacing: -0.3px; }
.flow-body  { font: 500 11.5px 'Inter', sans-serif; fill: #6B6B7A; }

/* attribution line under a stat value */
.stat-attrib { color: #B6BAC3; }

/* a stat strip sitting directly above quotes needs less air between them */
.stat-strip + .testimonials-grid { margin-top: 20px; }

/* ── RESPONSIVE ── */
@media (max-width: 1060px) {
  nav { padding: 0 24px; }
  .nav-links { gap: 20px; }
}
@media (max-width: 1000px) {
  .usecase-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .feature-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  /* shed the least load-bearing links before the bar starts wrapping */
  .nav-links li.nav-optional { display: none; }
}
@media (max-width: 900px) {
  nav { padding: 0 20px; }
  .split { grid-template-columns: 1fr; }
  .split-visual { min-height: 240px; padding: 32px 28px; border-right: none; border-bottom: 1px solid var(--border); }
  .split-body { padding: 34px 28px; }
  .split.reverse .split-visual { order: 1; border-left: none; border-bottom: 1px solid var(--border); }
  .split.reverse .split-body   { order: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
  .feature-detail-inner { padding: 30px 30px; }
}
@media (max-width: 760px) {
  /* Nav links go; every destination is still reachable from the footer,
     and the event-type cards are the first thing under the hero. */
  .nav-links { display: none; }
  .btn-login { display: none; }
  /* stacked, the interpuncts end up dangling at the end of each line */
  .trust-bar { flex-direction: column; gap: 9px; }
  .trust-sep { display: none; }
  /* two 155px panels side by side are narrower than their own content */
  .shot-stage { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .section, .section-tight { padding: 64px 20px; }
  .page-hero { padding: 104px 20px 64px; }
  .cta-banner { padding: 72px 20px; }
  .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; }
  .tick-list { grid-template-columns: 1fr; }
  .feature-detail-inner { flex-direction: column; gap: 18px; padding: 26px 22px; }
  footer { padding: 48px 0 24px; }
  .footer-inner { padding: 0 20px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stage { margin-top: 34px; grid-template-columns: 1fr; }
  .hero-peek { border-radius: 12px; }
  .split-visual.is-shot img { min-height: 200px; }
  /* A dense UI capture scaled to 375px is illegible, so let it pan instead.
     Same trade the flow diagram and comparison table already make. */
  .shot img { min-width: 900px; }
  .shot--narrow img { min-width: 0; }   /* the dialog is already narrow enough to read */
  .shot-pair { grid-template-columns: 1fr; }
  .shot-pair .shot img { min-width: 0; }
  .shot figcaption { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}