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

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

:root {
  --red:       #E8274B;
  --red-dark:  #C01F3C;
  --red-light: #FDEAEE;
  --red-line:  #f5b8c4;
  /* Net Hub Golf accent: the golf day's own themeColor. Red stays on
     primary CTAs, focus rings and the footer mark. */
  --fairway:        #1F7A4D;
  --fairway-dark:   #145536;
  --fairway-light:  #E7F3EC;
  --fairway-line:   #B9DCC8;
  --fairway-bright: #6FCF97;  /* on the dark hero and banner only */
  --text:      #0F0F12;
  --text-sub:  #6B6B7A;
  --border:    #E8E8F0;
  --bg:        #F5F5F7;
  --white:     #FFFFFF;
  --nav-h:     60px;
}

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

/* ── 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); }

/* ── 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 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.nav-links a:hover { color: var(--fairway); }
.nav-links a[aria-current="page"] { color: var(--fairway); font-weight: 600; }

.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(--fairway); color: var(--fairway); }
.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(31,122,77,0.22) 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(31,122,77,0.22);
  color: var(--fairway-bright);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(111,207,151,0.35);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fairway);
  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: var(--fairway-bright); }

.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(--fairway);
}
.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(--fairway-dark);
  background: var(--fairway-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(--fairway) 0%, #4CB27E 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(--fairway-light);
  color: var(--fairway-dark);
}
/* an unfilled seat is a dashed outline, the same cue the demo uses */
.hf-av.is-empty {
  background: transparent;
  border: 1px dashed var(--fairway-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);
}

/* a real portrait fills the circle; the initials stay as the fallback */
.hf-av img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 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(111,207,151,0.18);
  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-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(--fairway); }

.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(--fairway-light);
  color: var(--fairway-dark);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }

/* ── 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); }

/* ── 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(--fairway-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145536' 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;
}
a.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(--fairway-line);
}
.usecase-visual {
  height: 168px;
  /* never var(--bg): that is the section colour, and the panel vanished into it */
  background: #F3F9F5;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.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(--fairway-light);
  color: var(--fairway-dark);
  border: 1px solid var(--fairway-line);
}
.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; }

/* ── 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(--fairway); border-color: var(--fairway); 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(--fairway);
}
.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='%231F7A4D' 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(--fairway); }
.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(--fairway);
}
.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(--fairway-light);
  color: var(--fairway);
  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(--fairway);
  box-shadow: 0 12px 34px rgba(31,122,77,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(--fairway-dark);
  background: var(--fairway-light);
  border: 1px solid var(--fairway-line);
  border-radius: 20px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.demo-card__tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fairway);
  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(--fairway);
}
.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;
}

@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; }
/* medium captures (a dialog, a close-up) read at roughly 1:1 rather than blown up to the full column */
.shot--mid { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 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; }

.price-name { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 10px; }
.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(--fairway-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145536' 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 HEADLINE PLAN ──
   This microsite sells the events product on its own, so Events Only is the
   page's answer rather than one of four options. It gets a full-width card at
   twice the price size; the member plans sit folded away underneath. */
.plan-hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--fairway);
  border-radius: 20px;
  padding: 42px 40px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  box-shadow: 0 14px 44px rgba(31,122,77,0.13);
}
.section-white .plan-hero { background: var(--bg); }
.plan-hero__badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--fairway); color: var(--white);
  font-size: 11px; font-weight: 700;   /* same 11px floor as .popular-badge */
  padding: 5px 16px; border-radius: 20px;
  white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase;
}
.plan-hero__amount {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 62px; font-weight: 700;
  letter-spacing: -2.8px; line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.plan-hero__amount span {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-sub); letter-spacing: 0;
}
.plan-hero__desc { font-size: 14px; color: var(--text-sub); line-height: 1.75; margin-bottom: 26px; }
.plan-hero__cta { width: 100%; justify-content: center; }
/* the fee is a real cost, so it stays visible rather than hiding in the FAQ —
   just below the button instead of buried in the feature list */
.plan-hero__note { font-size: 12.5px; color: var(--text-sub); line-height: 1.65; margin-top: 15px; }
.plan-hero__label {
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 13px;
}
.plan-hero__features { margin: 0; }
/* a shade looser than the small cards, to sit level with a 62px price and a
   full-width button; ten lines at the 8px it started on overshot the left */
.plan-hero__features li { font-size: 14px; padding: 6px 0; }

/* ── THE CHIP UNDER THE PLAN ──
   One look, two jobs: the expander on /pricing and the link to /pricing from
   the home page. */
.plan-more { max-width: 900px; margin: 40px auto 0; text-align: center; }
.plan-chip {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  /* tinted rather than white: on a --bg section a white pill with a grey border
     read as page furniture, and this is the only other thing to click here.
     The tint, not a fill, so it never competes with the plan's red CTA. */
  border: 1.5px solid var(--fairway-line);
  background: var(--fairway-light);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fairway-dark);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.plan-chip::-webkit-details-marker { display: none; }
.plan-chip::after {
  content: '';
  flex-shrink: 0;
  width: 15px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145536' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.18s;
}
/* the home page's chip leaves the page rather than opening something on it */
.plan-chip--go::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145536' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.plan-chip:hover {
  border-color: var(--fairway);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(31,122,77,0.16);
}
.plan-chip--go:hover::after { transform: translateX(3px); }
.plan-more[open] > .plan-chip::after { transform: rotate(180deg); }

/* ── 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(--fairway); }
.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(--fairway); 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(31,122,77,0.2) 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; }
/* the mark is the H of the nav lockup, so it keeps the lockup's red on the dark ground */
.footer-brand-row .logo-svg {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  color: var(--red);
}
.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; }

/* ── 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-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; }

/* 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; }
}
@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; }
  /* at 760 the two plan columns are ~330px each and the feature lines wrap */
  .plan-hero { grid-template-columns: 1fr; gap: 30px; padding: 38px 26px 32px; }
  .plan-hero__amount { font-size: 50px; letter-spacing: -2.2px; }
  .plan-chip { text-align: left; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .section { 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; }
  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, .shot--mid img { min-width: 0; }   /* 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;
  }
}

/* ══ CONTACT PAGE ══ generated by net-hub/scripts/deploy_site_pages.py ══ */
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 56px;
  align-items: start;
}
.contact-lead h2 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 30px;
}
.contact-detail { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-detail strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: -0.2px;
}
.contact-detail p { font-size: 13.5px; color: var(--text-sub); line-height: 1.72; }
.contact-detail a { color: var(--fairway); font-weight: 600; text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; }

.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.contact-form h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 22px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--text);
}
.form-group input,
.form-group textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.form-group textarea { resize: vertical; min-height: 118px; line-height: 1.65; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A6A6B4; }
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 39, 75, 0.14);
}
.form-group input:user-invalid,
.form-group textarea:user-invalid { border-color: var(--red-line); }

.contact-submit { width: 100%; justify-content: center; margin-top: 4px; }
.contact-submit[disabled] { opacity: 0.6; pointer-events: none; }

.contact-status { font-size: 13px; line-height: 1.6; margin-top: 14px; }
.contact-status:empty { display: none; }
.contact-status.is-ok  { color: var(--fairway-dark); font-weight: 600; }
.contact-status.is-bad { color: var(--red-dark); font-weight: 600; }
.contact-status a { color: inherit; }

.contact-small {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.65;
  margin-top: 14px;
}

/* the honeypot: off screen for people, present for bots */
.contact-hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .contact-form { padding: 24px 20px; }
}

/* =============================================
   NET HUB GOLF
   ============================================= */

/* ── Photo hero ──
   The first-tee photograph sits under the same dark ground as every other
   hero. The overlay keeps white type above AA however bright the sky comes
   out; the peek and the panels sit on top exactly as before. */
.page-hero.has-photo { background: #0B1410; }
.page-hero.has-photo::before { z-index: 1; }
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.55;
}
.page-hero.has-photo > .hero-photo { position: absolute; z-index: 0; }
.page-hero.has-photo::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11,20,16,0.55) 0%, rgba(11,20,16,0.35) 38%, rgba(15,15,18,0.92) 78%, var(--text) 100%);
  pointer-events: none;
}
.page-hero.has-photo .hero-sub { color: rgba(255,255,255,0.8); }

/* ── Hero play button and film modal ──
   A play button over the middle of the Venue designer capture opens the
   intro film in a native <dialog>, already playing. */
.hero-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--white);
}
.hero-play__icon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 0 0 10px rgba(232,39,75,0.22), 0 14px 34px rgba(0,0,0,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
}
/* the path's own geometry already sits the triangle's centroid on the circle's centre */
.hero-play__icon svg { width: 34px; height: 34px; }
.hero-play__label {
  background: rgba(15,15,18,0.82);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-play__label span { color: var(--fairway-bright); margin-left: 6px; }
.hero-play:hover .hero-play__icon,
.hero-play:focus-visible .hero-play__icon {
  transform: scale(1.07);
  box-shadow: 0 0 0 14px rgba(232,39,75,0.26), 0 16px 38px rgba(0,0,0,0.5);
}
.hero-play:focus-visible { outline: none; }
.hero-play:focus-visible .hero-play__icon { outline: 2px solid var(--white); outline-offset: 4px; }

.film-modal {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.film-modal::backdrop { background: rgba(8,10,9,0.86); }
.film-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 96px);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.film-modal__video { display: block; width: 100%; height: 100%; background: #000; }
.film-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(15,15,18,0.72);
  color: var(--white);
  cursor: pointer;
}
.film-modal__close svg { width: 20px; height: 20px; }
.film-modal__close:hover { background: rgba(15,15,18,0.92); }
body.film-open { overflow: hidden; }

@media (max-width: 640px) {
  .hero-play__icon { width: 64px; height: 64px; }
  .hero-play__icon svg { width: 26px; height: 26px; margin-left: 4px; }
  /* the peek is short on a phone: the label would sit on the figcaption */
  .hero-play__label { display: none; }
}