/* =============================================
   Net Hub — Dining Hub
   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 Dining Hub.
   ============================================= */

*, *::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; text-decoration: none; }
/* the whole lockup: the wordmark with the two-figure mark standing in for its H.
   24px lands the cap height at 17px and the width at 128px, near enough the
   footprint the separate mark and wordmark used to take. */
.nav-lockup { height: 24px; width: auto; display: block; 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;
}
/* ── EXPANDABLE CAPTURES ──
   The showcase crops these hard, so the detail worth showing is unreadable
   until opened. The button is added by lightbox.js, never in the markup, so
   the affordance cannot appear on a page where it would do nothing. */
.split-visual.is-zoomable { position: relative; cursor: zoom-in; }
.shot-zoom {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  font: 700 11.5px/1 'Inter', sans-serif;
  letter-spacing: 0.02em;
  cursor: zoom-in;
  box-shadow: 0 2px 10px rgba(20,20,30,0.14);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shot-zoom svg { width: 13px; height: 13px; }
.split-visual.is-zoomable:hover .shot-zoom,
.shot-zoom:hover,
.shot-zoom:focus-visible { background: var(--red); border-color: var(--red); color: var(--white); }

/* ── LIGHTBOX ── */
/* Opaque, and no backdrop-filter. A viewer exists to remove distraction, and a
   translucent backdrop left the page legible behind the screenshot; a
   full-screen blur layer is also a real GPU cost on a phone. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: #0C0C10;
  display: flex; flex-direction: column;
}
.lightbox[hidden] { display: none; }
html.lb-open, html.lb-open body { overflow: hidden; }

.lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}
.lb-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.lb-count {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); flex-shrink: 0;
}
.lb-name {
  font-family: 'Sora', 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-close, .lb-nav {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.lb-close svg, .lb-nav svg { width: 18px; height: 18px; }
.lb-close:hover, .lb-nav:hover,
.lb-close:focus-visible, .lb-nav:focus-visible {
  background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5);
}

/* the stage scrolls: these captures are up to 2225px tall at full size */
.lb-stage {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 0 18px 22px;
  display: flex; justify-content: center; align-items: flex-start;
}
.lb-img {
  display: block;
  max-width: min(1100px, 100%);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

@media (max-width: 640px) {
  .lb-bar { padding: 10px 12px; }
  .lb-name { display: none; }          /* the counter carries it on a phone */
  .lb-stage { padding: 0 10px 16px; }
  .lb-nav { top: auto; bottom: 14px; transform: none; }
  .shot-zoom-label { display: none; }  /* the icon alone reads at this size */
  .shot-zoom { padding: 0 10px; }
}

.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); }

/* ── INTRO FILM, IN A PHONE, BESIDE THE DEMOS ──
   The film is 9:16 and was shot for a phone, so it is shown in one. Above the
   cards a portrait film would push them off the fold; beside them it costs no
   vertical run at all, because the four cards fold from one row into a 2x2 and
   the phone takes the width they release.

   The phone's height is not set here. The column stretches to whatever the two
   rows of cards come to, and the handset fills it, so the two always finish
   level however the card copy wraps. */
.demo-split {
  display: grid;
  grid-template-columns: 1fr 214px;
  gap: 34px;
  max-width: 1100px;
  /* room for the note hanging out of flow under the handset */
  margin: 0 auto 16px;
}
.demo-split .demo-grid {
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  max-width: none;
}

.demo-phone {
  position: relative;
  height: 100%;
  padding: 9px;                 /* the bezel */
  border-radius: 40px;
  background: linear-gradient(155deg, #43434A, #1B1B1F 38%, #0A0A0C);
  box-shadow:
    0 22px 44px rgba(15, 15, 18, 0.24),
    0 2px 6px rgba(15, 15, 18, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}
.demo-phone__screen {
  display: block;
  width: 100%;
  height: 100%;
  /* The handset is narrower than 9:16, so the film is cropped rather than
     letterboxed. The captions are burned in and clear 14.4% of the frame at
     their widest. This takes 7% a side normally, and 11.3% at 1010px where the
     card copy wraps to three lines and stretches the phone: the reason the body
     is 214 rather than the 202 true proportions would ask for. No word is cut. */
  object-fit: cover;
  border-radius: 32px;
  background: #000;             /* until the poster decodes */
}
.demo-phone__island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 19px;
  border-radius: 999px;
  background: #08080A;
  pointer-events: none;         /* the whole screen has to stay clickable */
}
/* How long this is, before anyone commits to it. preload is none, so the
   player itself cannot say until it has been asked to load. */
.demo-phone__time {
  position: absolute;
  top: 22px;
  right: 21px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
/* Who is talking. Hung out of flow below the handset rather than placed after
   it, so it cannot take height off the phone and break the level finish with
   the cards. It clears the CTA row beneath by a comfortable margin, and the
   two never meet horizontally anyway. */
.demo-phone__note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 11px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-sub);
}
.demo-phone.is-large .demo-phone__note { display: none; }

/* Volume rocker and side button. Two nubs are enough at this size; a full
   button stack turns into noise. */
.demo-phone::before,
.demo-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: #34343A;
}
.demo-phone::before { left: -2px; top: 22%; height: 13%; }
.demo-phone::after  { right: -2px; top: 27%; height: 9%; }

/* ── BIGGER ──
   Sized to finish level with the cards, the handset is small for anyone who
   actually wants to watch. This grows it to the height of the window, in place:
   the phone is fixed rather than reparented, so the <video> never leaves the
   DOM and playback carries on through the change. The column keeps its 214px
   and the row height comes from the cards, so nothing collapses behind it. */
.demo-phone.is-large {
  position: fixed;
  z-index: 210;
  top: 50%;
  left: 50%;
  /* Height drives the size, so the width cap has to be expressed as one too:
     191vw is 92vw at this ratio. It only binds on a narrow tall screen, where
     88vh would otherwise push the handset wider than the window. */
  height: min(88vh, 940px, 191vw);
  width: auto;
  aspect-ratio: 214 / 446;
  transform: translate(-50%, -50%);
  border-radius: min(7vh, 74px);
  padding: min(1.8vh, 19px);
}
.demo-phone.is-large .demo-phone__screen { border-radius: min(5.6vh, 59px); }
.demo-phone.is-large .demo-phone__island {
  top: min(4vh, 42px);
  height: min(3.9vh, 41px);
}
.demo-phone.is-large .demo-phone__time {
  top: min(4.4vh, 46px);
  right: min(4.4vh, 46px);
  padding: 6px 15px;
  font-size: 19px;
}

.demo-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 13, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.demo-scrim[hidden] { display: none; }

/* Same chip as the screenshot viewer. Top left, opposite the duration and clear
   of the island: along the bottom edge it sat on the player's own control bar,
   which appears on hover at the same moment this does. */
.demo-phone__zoom {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  font: 700 11.5px/1 'Inter', sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(10, 10, 13, 0.4);
  opacity: 0;
  transition: opacity 0.16s, background 0.15s, color 0.15s;
}
/* Held back until the phone is hovered or the button is tabbed to: it sits over
   the film, and the player's own controls are along that edge. */
.demo-phone:hover .demo-phone__zoom,
.demo-phone__zoom:focus-visible,
.demo-phone.is-large .demo-phone__zoom { opacity: 1; }
.demo-phone__zoom:hover,
.demo-phone__zoom:focus-visible { background: var(--red); color: var(--white); }
.demo-phone__zoom svg { width: 13px; height: 13px; }
.demo-phone.is-large .demo-phone__zoom {
  top: min(4.2vh, 44px);
  left: min(4.2vh, 44px);
  height: 38px;
  padding: 0 17px;
  font-size: 14px;
}
.demo-phone.is-large .demo-phone__zoom svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .demo-phone__zoom { transition: none; }
}

@media (max-width: 1000px) {
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
  /* One handset against a single column of cards is the wrong ratio; give it
     the top slot and let the four cards run full width beneath. */
  /* 34px of gap left the note 6px off the first card, where it read as a label
     for the cards rather than for the film above it. */
  .demo-split { grid-template-columns: 1fr; gap: 58px; justify-items: center; }
  .demo-split .demo-grid { width: 100%; }
  /* Nothing to stretch to once stacked, so the handset carries its own shape,
     and it leads: the film is the reason to stop scrolling. */
  .demo-phone { width: 214px; height: auto; aspect-ratio: 214 / 446; order: -1; }
  .demo-phone.is-large { width: auto; }
}
@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; }
  /* the section already gives 20px; the container's own 24 doubled it into a
     44px gutter, a quarter of a 375px screen spent on margin */
  .container { padding-left: 0; padding-right: 0; }
  /* icon beside the text left the copy 161px and it wrapped every three words */
  .step-card-inner { flex-direction: column; gap: 14px; padding: 22px 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;
  }
}