/* ============================================================
   Vector Space — kwvector.space
   Translated from the Claude Design handoff bundle
   (design/vector-space-website in the kwvector.space repo).
   Tokens are copied verbatim; component classes recreate the
   prototype's inline styles.
   ============================================================ */

/* ===== Tokens: color ===== */
:root {
  /* Brand green scale (forest / teal — the space) */
  --green-950: #0d211b;
  --green-900: #123026;
  --green-850: #163a2d;
  --green-800: #1b4636;
  --green-700: #235640;
  --green-600: #2e7d59;
  --green-550: #2e8159;
  --green-500: #3a9a6a;
  --green-400: #5cb487;
  --green-300: #8fcfac;
  --green-200: #c0e6d2;
  --green-100: #e2f3ea;
  --green-50:  #f1f9f4;

  /* Olive / lime bridge (left arrow of logo) */
  --olive-600: #6f8a3f;
  --olive-500: #869f52;
  --olive-400: #9bb46a;
  --olive-300: #c0d29a;

  /* Nano accent (electric green-yellow — the nano lights) */
  --nano-700: #8fbe10;
  --nano-600: #a6d81f;
  --nano-500: #c2ee3f;
  --nano-400: #d4f46e;
  --nano-300: #e6faa6;
  --nano-200: #f1fccf;

  /* Neutral / ink */
  --ink-950: #141716;
  --ink-900: #1f2421;
  --ink-800: #2c322e;
  --ink-700: #3d4541;
  --ink-600: #586059;
  --ink-500: #767e79;
  --ink-400: #9aa39e;
  --ink-300: #c2c9c5;
  --ink-200: #dde2df;
  --ink-150: #e8ebe9;
  --ink-100: #f1f4f2;
  --ink-50:  #f8faf9;
  --white:   #ffffff;

  /* Semantic status */
  --success: #2e8159;
  --warning: #d8a313;
  --danger:  #c5482f;
  --info:    #2f6fa8;

  /* Semantic aliases */
  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--green-900);
  --surface-inverse-2: var(--green-800);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-dark:  var(--ink-50);
  --text-on-dark-muted: var(--green-200);
  --text-accent:   var(--green-600);

  --brand:          var(--green-600);
  --brand-strong:   var(--green-700);
  --brand-deep:     var(--green-800);
  --accent:         var(--nano-500);
  --accent-strong:  var(--nano-600);
  --on-accent:      var(--green-900);
  --on-brand:       var(--white);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: #ffffff26;
  --focus-ring:    var(--green-500);

  --grad-vector: linear-gradient(120deg, var(--olive-500) 0%, var(--green-500) 50%, var(--green-550) 100%);
  --grad-nano:   linear-gradient(120deg, var(--nano-500) 0%, var(--green-400) 100%);
}

/* ===== Tokens: typography ===== */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.25rem;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
  --tracking-mono:   0.02em;
}

/* ===== Tokens: spacing & layout ===== */
:root {
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --container-lg:  1080px;
  --container-xl:  1280px;
}

/* ===== Tokens: effects ===== */
:root {
  --shadow-xs: 0 1px 2px rgba(18, 48, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 48, 38, 0.08), 0 1px 2px rgba(18, 48, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 48, 38, 0.08), 0 2px 4px rgba(18, 48, 38, 0.05);
  --shadow-lg: 0 12px 28px rgba(18, 48, 38, 0.12), 0 4px 8px rgba(18, 48, 38, 0.06);
  --shadow-xl: 0 24px 56px rgba(13, 33, 27, 0.18), 0 8px 16px rgba(13, 33, 27, 0.08);

  --glow-nano: 0 0 0 1px rgba(194, 238, 63, 0.5), 0 0 18px rgba(194, 238, 63, 0.35);
  --ring: 0 0 0 3px rgba(58, 154, 106, 0.35);
  --ring-nano: 0 0 0 3px rgba(194, 238, 63, 0.45);
  --blur-panel: blur(16px) saturate(1.1);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--nano-300); color: var(--green-900); }

.vs-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  font-weight: var(--weight-medium);
}

.vs-section { max-width: var(--container-lg); margin: 0 auto; padding: 0 32px; }

/* lucide icons render at the size of their placeholder element */
.vs-icon-16 { width: 16px; height: 16px; }
.vs-icon-18 { width: 18px; height: 18px; }
.vs-icon-22 { width: 22px; height: 22px; }

@keyframes vs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Buttons ===== */
.vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--text-base);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.vs-btn:hover { text-decoration: none; }
.vs-btn:active { transform: scale(0.98); }
.vs-btn--lg { padding: 14px 28px; font-size: var(--text-md); gap: 10px; }

.vs-btn--primary { background: var(--brand); color: var(--on-brand); }
.vs-btn--primary:hover { background: var(--brand-strong); }
.vs-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-nano); }
.vs-btn--accent:hover { background: var(--accent-strong); }
.vs-btn--secondary { background: var(--green-50); color: var(--brand-strong); border-color: var(--green-200); }
.vs-btn--secondary:hover { background: var(--green-100); }
.vs-btn--inverse { background: rgba(255,255,255,0.10); color: var(--white); border-color: var(--border-on-dark); }
.vs-btn--inverse:hover { background: rgba(255,255,255,0.18); }
.vs-btn--full { width: 100%; }

/* ===== Badge ===== */
.vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.vs-badge--accent { background: var(--nano-200); color: var(--green-800); }
.vs-badge--brand { background: var(--green-100); color: var(--green-700); }

/* ===== Header ===== */
/* The frosted background is permanent: over the uniform light page background
   it's indistinguishable from "transparent" at rest, so the bar stays a
   constant-height light band while content slides beneath it. Toggling
   background/backdrop-filter on scroll instead causes a shrinking band and a
   blur pop — backdrop-filter cannot transition from `none`. The scrolled
   state only fades in a hairline border for depth. */
.vs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(248, 250, 249, 0.86);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.vs-header.is-scrolled {
  border-bottom-color: var(--border);
}
.vs-header__logo { display: block; height: 30px; }
.vs-header__nav { display: flex; align-items: center; gap: 2px; }
.vs-header__link {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  color: var(--text-body);
  transition: color var(--dur-base) var(--ease-standard);
}
.vs-header__link:hover { color: var(--text-strong); text-decoration: none; }

/* ===== Hero (split layout) ===== */
/* The hero sits below the sticky header in normal flow (as in the design):
   a light header strip above the dark panel. Don't pull it up behind the
   header — the charcoal logo and nav are illegible on the dark green. */
.vs-hero {
  position: relative;
  background: var(--green-900);
  overflow: hidden;
}
.vs-dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.vs-hero__grid {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  min-height: 88vh;
}
.vs-hero__copy { padding: 64px 0; }
.vs-hero__copy .vs-eyebrow { color: var(--nano-500); }
.vs-hero__title {
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1.0;
  margin: 20px 0 0;
  color: #fff;
  max-width: 15ch;
  font-weight: var(--weight-bold);
}
.vs-hero__sub {
  font-size: var(--text-md);
  color: var(--green-200);
  max-width: 44ch;
  margin: 22px 0 0;
  line-height: 1.6;
}
.vs-hero__ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.vs-hero__stats { display: flex; gap: 44px; margin-top: 52px; flex-wrap: wrap; }
.vs-hero__stat { font-family: var(--font-mono); }
.vs-hero__stat-value { font-size: var(--text-2xl); font-weight: var(--weight-medium); color: #fff; line-height: 1; }
.vs-hero__stat-label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  color: var(--green-300);
  margin-top: 8px;
  text-transform: uppercase;
}
.vs-hero__media { position: relative; align-self: stretch; display: flex; align-items: center; padding: 48px 0; }
.vs-hero__media-frame { position: relative; width: 100%; }
.vs-hero__photo {
  display: block;
  width: 100%;
  height: min(60vh, 520px);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  object-fit: cover;
}
.vs-hero__chip-est {
  position: absolute;
  top: -14px;
  right: 18px;
  background: var(--nano-500);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-nano);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.vs-hero__chip-open {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.vs-hero__chip-open .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(46, 129, 89, 0.18);
}
.vs-hero__chip-open .label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); }

/* ===== Branded photo placeholder (no photography yet) ===== */
.vs-ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1b4636 0%, #123026 100%);
  display: block;
}
.vs-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
}
.vs-ph--b { background: linear-gradient(135deg, #235640 0%, #14352a 100%); }
.vs-ph--c { background: linear-gradient(135deg, #2e7d59 0%, #1b4636 100%); }
.vs-ph--d { background: linear-gradient(135deg, #163a2d 0%, #0d211b 100%); }
.vs-ph__symbol {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 38%;
  min-width: 90px;
  opacity: 0.16;
}

/* ===== Photo caption chip (gallery + placeholders) ===== */
.vs-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(13,33,27,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}

/* ===== Marquee band ===== */
.vs-marquee {
  background: var(--green-950);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  overflow: hidden;
  padding: 16px 0;
}
.vs-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: vs-marquee 30s linear infinite;
  will-change: transform;
}
.vs-marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-200);
  padding: 0 28px;
}
.vs-marquee__item .slash { color: var(--nano-500); margin-left: 28px; }

/* ===== Section headers ===== */
.vs-section-head { max-width: 640px; }
.vs-section-head h2 { font-size: var(--text-2xl); margin: 12px 0 0; }
.vs-section-head p { font-size: var(--text-md); color: var(--text-muted); margin: 14px 0 0; line-height: 1.6; }

/* ===== Features ===== */
.vs-features-head { padding: 96px 32px 40px; }
.vs-features-grid-wrap { padding: 8px 32px 96px; }
.vs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.vs-feature {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.vs-feature:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.vs-feature__top { display: flex; align-items: center; justify-content: space-between; }
.vs-feature__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  color: var(--brand);
}
.vs-feature__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  letter-spacing: var(--tracking-mono);
}
.vs-feature h3 { font-size: var(--text-lg); }
.vs-feature p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin: 7px 0 0; }

.vs-feature-cta {
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--green-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
}
.vs-feature-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}
.vs-feature-cta__symbol { position: absolute; right: -20px; bottom: -20px; width: 120px; opacity: 0.16; }
.vs-feature-cta__body { position: relative; }
.vs-feature-cta .vs-eyebrow { color: var(--nano-500); }
.vs-feature-cta__line {
  font-size: var(--text-md);
  color: #fff;
  margin: 10px 0 0;
  line-height: 1.5;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}
.vs-feature-cta__link {
  position: relative;
  align-self: flex-start;
  margin-top: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nano-500);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.vs-feature-cta__link:hover { text-decoration: none; color: var(--nano-400); }

/* ===== Gallery ===== */
.vs-gallery-section {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.vs-gallery-section .vs-section { padding-top: 88px; padding-bottom: 88px; }
.vs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
  margin-top: 32px;
}
.vs-tile { position: relative; }
.vs-tile--wide { grid-column: span 8; grid-row: span 2; }
.vs-tile--tall { grid-column: span 4; grid-row: span 2; }
.vs-tile--std  { grid-column: span 4; grid-row: span 1; }
.vs-tile--full { grid-column: span 12; grid-row: span 1; }
.vs-tile .vs-ph, .vs-tile__img { width: 100%; height: 100%; border-radius: 16px; }
.vs-tile__img { object-fit: cover; display: block; }
.vs-tile .vs-ph { overflow: hidden; }

/* ===== Pricing ===== */
.vs-pricing-section .vs-section { padding-top: 96px; padding-bottom: 96px; }
.vs-pricing-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.vs-pricing-head .vs-eyebrow { display: block; }
.vs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.vs-price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.vs-price--featured {
  background: var(--green-900);
  color: #fff;
  border-color: var(--green-800);
  box-shadow: var(--shadow-lg);
}
.vs-price--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.vs-price > * { position: relative; }
.vs-price__top { display: flex; align-items: center; justify-content: space-between; }
.vs-price h3 { font-size: var(--text-lg); }
.vs-price--featured h3 { color: #fff; }
.vs-price__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  margin: 6px 0 0;
}
.vs-price--featured .vs-price__note { color: var(--green-200); }
.vs-price__amount { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
.vs-price__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--text-strong);
}
.vs-price--featured .vs-price__value { color: #fff; }
.vs-price__unit { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-faint); }
.vs-price--featured .vs-price__unit { color: var(--green-300); }
.vs-price ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.vs-price li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.vs-price--featured li { color: var(--green-100); }
.vs-price li i, .vs-price li svg { width: 16px; height: 16px; margin-top: 2px; color: var(--brand); flex: none; }
.vs-price--featured li i, .vs-price--featured li svg { color: var(--nano-500); }
.vs-pricing-footnote { text-align: center; font-size: var(--text-sm); color: var(--text-muted); margin: 28px 0 0; }
.vs-pricing-footnote a { color: var(--text-accent); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Pricing add-ons ===== */
.vs-addons { margin-top: 56px; }
.vs-addons-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.vs-addons-head__line { font-size: var(--text-sm); color: var(--text-muted); }
.vs-addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vs-addon {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.vs-addon__icon {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--radius-md); color: var(--brand);
}
.vs-addon__icon i, .vs-addon__icon svg { width: 22px; height: 22px; }
.vs-addon__body { flex: 1; min-width: 0; }
.vs-addon__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-strong); }
.vs-addon__line { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin-top: 4px; }
.vs-addon__price { flex: none; text-align: right; }
.vs-addon__amount { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--text-strong); line-height: 1; }
.vs-addon__unit { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); color: var(--text-faint); margin-top: 4px; }

/* ===== Calendar (dark panel) ===== */
.vs-calendar-section {
  position: relative;
  background: var(--green-900);
  color: #fff;
  overflow: hidden;
}
.vs-calendar-section .vs-section { position: relative; padding-top: 88px; padding-bottom: 88px; }
.vs-calendar-section .vs-eyebrow { color: var(--nano-500); }

.vs-cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.vs-cal-head__intro { max-width: 640px; }
.vs-cal-head__intro h2 { font-size: var(--text-2xl); margin: 12px 0 0; color: #fff; }
.vs-cal-head__intro p { font-size: var(--text-md); color: var(--green-200); margin: 14px 0 0; line-height: 1.6; }

.vs-cal-legend { display: flex; flex-direction: column; gap: 10px; }
.vs-cal-legend__row { display: flex; gap: 16px; flex-wrap: wrap; }
.vs-cal-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); color: var(--green-200);
}
.vs-cal-legend__swatch { width: 12px; height: 12px; border-radius: 3px; }
.vs-cal-legend__swatch--public { background: var(--nano-500); }
.vs-cal-legend__swatch--private { background: var(--green-400); }
.vs-cal-legend__swatch--open { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.vs-cal-legend__key {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); color: var(--green-300);
}
.vs-cal-legend__bars { display: flex; gap: 3px; }
.vs-cal-legend__bars span { width: 16px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.28); }

.vs-cal-card {
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.025);
  padding: 20px;
}
.vs-cal-nojs { color: var(--green-200); font-size: var(--text-sm); text-align: center; margin: 0; padding: 20px; }

.vs-cal-switcher { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vs-cal-switcher__label { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: #fff; }
.vs-cal-switcher__nav { display: flex; gap: 8px; }
.vs-cal-navbtn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-md);
  background: var(--green-850); color: var(--green-100); cursor: pointer; padding: 0;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.vs-cal-navbtn:hover { border-color: var(--nano-500); }
.vs-cal-navbtn i, .vs-cal-navbtn svg { width: 17px; height: 17px; }
.vs-cal-navbtn.is-disabled { color: var(--green-300); opacity: 0.5; cursor: default; pointer-events: none; }

.vs-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.vs-cal-weekday {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); color: var(--green-300); padding: 2px 4px;
}

.vs-cal-grid-wrap { position: relative; }
.vs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.vs-cal-cell--blank { min-height: 0; }
.vs-cal-cell {
  display: flex; flex-direction: column; min-width: 0; min-height: 84px; padding: 10px 11px;
  text-align: left; font-family: inherit; color: inherit;
  border-radius: var(--radius-md); background: var(--green-850);
  border: 1px solid var(--border-on-dark); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.vs-cal-cell:hover { border-color: rgba(255,255,255,0.34); }
.vs-cal-cell--today { box-shadow: inset 0 0 0 1.5px var(--nano-500); }
.vs-cal-cell--past { background: transparent; opacity: 0.5; }
.vs-cal-cell--selected,
.vs-cal-cell--selected:hover { border-color: var(--nano-500); box-shadow: var(--shadow-md); }
.vs-cal-cell__head { display: flex; align-items: center; justify-content: space-between; }
.vs-cal-daynum { font-family: var(--font-mono); font-size: var(--text-sm); color: #fff; }
.vs-cal-cell--today .vs-cal-daynum { color: var(--nano-500); font-weight: var(--weight-semibold); }
.vs-cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.vs-cal-dot--public { background: var(--nano-500); }
.vs-cal-dot--private { background: var(--green-400); }
.vs-cal-summary {
  font-size: var(--text-2xs); color: var(--green-200); margin-top: 4px; line-height: 1.3;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-cal-summary--mono { font-family: var(--font-mono); color: var(--green-300); }
/* Badged days (recurring programming) show a compact brand mark instead of the
   long title — the full title lives in the day popover. */
.vs-cal-badge { margin-top: 6px; min-width: 0; display: flex; align-items: center; }
.vs-cal-badge img { height: 17px; width: auto; max-width: 100%; opacity: 0.9; }
/* Grid (not flex) so the three segments split the width evenly: Safari
   collapses empty flex children with a percentage flex-basis when the bar's
   width comes from align-items:stretch (treated as indefinite). The explicit
   width + 1fr columns size reliably in both engines. */
.vs-cal-slotbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; margin-top: auto; }
.vs-cal-slotbar__seg { height: 5px; border-radius: 2px; }
.vs-cal-slotbar__seg--public { background: var(--nano-500); }
.vs-cal-slotbar__seg--private { background: var(--green-400); }
.vs-cal-slotbar__seg--open { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.vs-cal-slotbar--past .vs-cal-slotbar__seg--public,
.vs-cal-slotbar--past .vs-cal-slotbar__seg--private { background: rgba(255,255,255,0.20); }

.vs-cal-pop {
  position: absolute; z-index: 20;
  background: var(--green-850); border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 18px;
}
.vs-cal-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vs-cal-pop__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); color: #fff; }
.vs-cal-pop__close { border: none; background: transparent; color: var(--green-300); cursor: pointer; padding: 2px; display: inline-flex; }
.vs-cal-pop__close i, .vs-cal-pop__close svg { width: 15px; height: 15px; }
.vs-cal-pop__slots { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.vs-cal-pop__slots:last-child { margin-bottom: 0; }
.vs-cal-pop__slot { display: flex; align-items: center; gap: 10px; }
.vs-cal-pop__swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.vs-cal-pop__swatch--public { background: var(--nano-500); }
.vs-cal-pop__swatch--private { background: var(--green-400); }
.vs-cal-pop__swatch--open { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); }
.vs-cal-pop__slotlabel {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono);
  color: var(--green-200); width: 78px; flex: none;
}
.vs-cal-pop__slotval {
  flex: 1; min-width: 0; font-size: var(--text-sm); color: #fff;
  /* wrap to show the full title (popover is the detail view) rather than truncate */
  line-height: 1.3; overflow-wrap: anywhere;
}
.vs-cal-pop__slotval--open { color: var(--nano-500); font-weight: var(--weight-medium); }
.vs-cal-pop__event { border-top: 1px solid var(--border-on-dark); padding-top: 12px; margin-bottom: 4px; }
.vs-cal-pop__event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vs-cal-pop__event-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: #fff; line-height: 1.3; }
.vs-cal-pop__type {
  flex: none; margin-top: 1px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--green-300);
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 3px 8px;
}
.vs-cal-pop__event-time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--green-200); margin-top: 5px; }
.vs-cal-pop__cta {
  margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--on-accent); background: var(--nano-500); border: none; border-radius: var(--radius-md);
  padding: 10px 14px; cursor: pointer; transition: background var(--dur-base), box-shadow var(--dur-base);
}
.vs-cal-pop__cta:hover { background: var(--nano-400); box-shadow: var(--glow-nano); }
.vs-cal-pop__cta i, .vs-cal-pop__cta svg { width: 15px; height: 15px; }

.vs-cal-rail-wrap { margin-top: 44px; }
.vs-cal-rail-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.vs-cal-rail-head__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nano-500); }
.vs-cal-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.vs-cal-rail::-webkit-scrollbar { height: 8px; }
.vs-cal-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
.vs-cal-rail::-webkit-scrollbar-track { background: transparent; }
.vs-cal-railcard {
  flex: none; width: 236px; scroll-snap-align: start;
  background: var(--green-850); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg); padding: 18px; transition: border-color var(--dur-base);
}
.vs-cal-railcard:hover { border-color: rgba(255,255,255,0.34); }
.vs-cal-railcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vs-cal-railcard__date { display: flex; align-items: baseline; gap: 6px; }
.vs-cal-railcard__month { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--nano-500); }
.vs-cal-railcard__day { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); color: #fff; }
.vs-cal-railcard__type {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--green-300); border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 3px 8px;
}
.vs-cal-railcard__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); color: #fff; line-height: 1.3; }
.vs-cal-railcard__time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--green-200); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.vs-cal-railcard__time i, .vs-cal-railcard__time svg { width: 12px; height: 12px; }

/* Linkified events (entries/cards with an Event.link) — popover + rail. */
.vs-cal-pop__link { color: inherit; text-decoration: none; cursor: pointer; }
.vs-cal-pop__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.vs-cal-pop__linkicon { width: 11px; height: 11px; vertical-align: -1px; opacity: 0.65; flex: none; }
.vs-cal-railcard--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.vs-cal-railcard__linkicon { width: 12px; height: 12px; vertical-align: -2px; margin-left: 4px; opacity: 0.6; color: var(--green-300); }

/* ===== Location ===== */
.vs-location-section { background: var(--surface-sunken); border-top: 1px solid var(--border); }
.vs-location-section .vs-section { padding-top: 88px; padding-bottom: 88px; }
.vs-location-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 36px;
}
.vs-location-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: var(--shadow-sm);
}
.vs-location-row { display: flex; gap: 14px; align-items: flex-start; }
.vs-location-row__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  color: var(--brand);
}
.vs-location-row__body { padding-top: 1px; }
.vs-location-row__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-strong); }
.vs-location-row__mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); margin-top: 3px; }
.vs-location-row__text { font-size: var(--text-sm); color: var(--text-body); line-height: 1.6; max-width: 34ch; margin-top: 8px; }
.vs-location-rule { height: 1px; background: var(--border); }
.vs-location-card__cta { margin-top: auto; padding-top: 6px; }
.vs-location-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  min-height: 380px;
}
.vs-location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.92);
}
.vs-location-map__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-900);
  pointer-events: none;
}
.vs-location-map__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nano-600); }

/* ===== Apply form ===== */
.vs-apply-section {
  position: relative;
  background: var(--green-900);
  color: #fff;
  overflow: hidden;
}
.vs-apply-section .vs-apply-container { position: relative; max-width: 1080px; margin: 0 auto; padding: 88px 32px; }
.vs-apply-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.vs-apply-pitch { position: sticky; top: 88px; }
.vs-apply-pitch .vs-eyebrow { color: var(--nano-500); }
.vs-apply-pitch h2 { font-size: var(--text-2xl); margin: 12px 0 0; color: #fff; }
.vs-apply-pitch__sub { font-size: var(--text-md); color: var(--green-200); margin: 16px 0 0; line-height: 1.65; max-width: 38ch; }
.vs-apply-pitch ul {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vs-apply-pitch li { display: flex; gap: 12px; align-items: center; color: var(--green-100); font-size: var(--text-sm); }
.vs-apply-pitch li i, .vs-apply-pitch li svg { width: 18px; height: 18px; color: var(--nano-500); flex: none; }

.vs-apply-card {
  background: var(--surface-card);
  color: var(--text-body);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-xl);
}
.vs-apply-form { display: flex; flex-direction: column; gap: 24px; }
.vs-form-errors {
  background: #f8e3de;
  color: #9a3322;
  border: 1px solid #eac4bb;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--text-sm);
}
.vs-field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-field-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.vs-field { display: flex; flex-direction: column; gap: 6px; }
.vs-field > label, .vs-group-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  display: block;
}
.vs-group-label { margin-bottom: 8px; }
.vs-field__box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.vs-field__box:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.vs-field--error .vs-field__box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(197,72,47,0.18); }
.vs-field__box i, .vs-field__box svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; }
.vs-field__box input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  padding: 0;
}
.vs-field__error { font-size: var(--text-xs); color: var(--danger); }

.vs-textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.vs-textarea:focus { border-color: var(--brand); box-shadow: var(--ring); }

/* Chips: native radio/checkbox inputs styled as the design's Tag pills */
.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-chip { position: relative; display: inline-flex; }
.vs-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vs-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  user-select: none;
}
.vs-chip input:checked + span { background: var(--green-700); color: var(--white); border-color: var(--green-700); }
.vs-chip input:checked + span::before { content: "✓"; font-size: var(--text-xs); }
.vs-chip input:focus-visible + span { box-shadow: var(--ring); }
.vs-chip--radio input:checked + span::before { content: none; }

/* Switch: native checkbox styled as the design's toggle */
.vs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); color: var(--text-body); }
.vs-switch input { position: absolute; opacity: 0; }
.vs-switch__knob {
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--ink-300);
  position: relative;
  flex: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.vs-switch__knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: left var(--dur-base) var(--ease-out);
}
.vs-switch input:checked + .vs-switch__knob { background: var(--brand); }
.vs-switch input:checked + .vs-switch__knob::after { left: 21px; }
.vs-switch input:focus-visible + .vs-switch__knob { box-shadow: var(--ring); }

.vs-apply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 4px;
}
.vs-apply-fineprint {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  margin: 0;
  letter-spacing: var(--tracking-mono);
}

/* Success state */
.vs-apply-success { text-align: center; padding: 32px 8px; }
.vs-apply-success__badge {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nano-200);
  border-radius: 50%;
  color: var(--green-800);
  box-shadow: var(--glow-nano);
}
.vs-apply-success__badge i, .vs-apply-success__badge svg { width: 30px; height: 30px; }
.vs-apply-success h3 { font-size: var(--text-xl); margin: 20px 0 0; }
.vs-apply-success p {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 10px auto 0;
  max-width: 36ch;
  line-height: 1.6;
}
.vs-apply-success strong { color: var(--text-strong); }
.vs-apply-success .vs-btn { margin-top: 24px; }

/* ===== Footer ===== */
.vs-footer {
  background: var(--green-950);
  color: var(--green-200);
  padding: 64px 32px 30px;
  position: relative;
  overflow: hidden;
}
.vs-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.vs-footer__main {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.vs-footer__brand { max-width: 300px; }
.vs-footer__brand img { display: block; height: 28px; }
.vs-footer__brand p { margin: 16px 0 0; font-size: var(--text-sm); line-height: 1.65; color: var(--green-200); }
.vs-footer__icons { display: flex; gap: 10px; margin-top: 18px; }
.vs-footer__icons a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  color: var(--green-100);
}
.vs-footer__icons i, .vs-footer__icons svg { width: 16px; height: 16px; }
.vs-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.vs-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nano-500);
  margin-bottom: 14px;
}
.vs-footer__cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-footer__cols a { font-size: var(--text-sm); color: var(--green-100); }
.vs-footer__cols a:hover { color: var(--white); text-decoration: none; }
.vs-footer__bottom {
  position: relative;
  max-width: 1080px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: rgba(255,255,255,0.5);
}

/* ===== Standalone pages (unsubscribe, errors) ===== */
.vs-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 96px 32px; }
.vs-page__card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  max-width: 520px;
  width: 100%;
}
.vs-page__card h1 { font-size: var(--text-xl); margin-bottom: 12px; }
.vs-page__card p { color: var(--text-muted); }
.vs-prefs-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 18px 0;
  background: var(--ink-50);
}
.vs-prefs-option input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand); flex: none; }
.vs-prefs-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.vs-link-quiet { background: none; border: none; padding: 0; color: var(--text-muted); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .vs-hero__grid { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .vs-hero__media { padding-bottom: 64px; }
}
@media (max-width: 860px) {
  .vs-apply-grid { grid-template-columns: 1fr; gap: 36px; }
  .vs-apply-pitch { position: static; }
}
@media (max-width: 820px) {
  .vs-location-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vs-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .vs-gallery-grid .vs-tile { grid-column: span 2; grid-row: span 1; }
  /* Keep portrait-friendly tiles tall in the single column: anything "tall"
     in the desktop mosaic gets double height here, so the column alternates
     instead of degrading into uniform wide slivers. */
  .vs-gallery-grid .vs-tile--tall { grid-row: span 2; }
}
@media (max-width: 720px) {
  .vs-header { padding: 12px 20px; }
  .vs-header__nav { display: none; }
  .vs-section, .vs-features-head, .vs-features-grid-wrap { padding-left: 20px; padding-right: 20px; }
  .vs-apply-section .vs-apply-container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 620px) {
  .vs-calendar-section .vs-cal-cell { min-height: 64px; padding: 6px 5px; }
  .vs-calendar-section .vs-cal-grid,
  .vs-calendar-section .vs-cal-weekdays { gap: 5px; }
}
@media (max-width: 560px) {
  .vs-field-2, .vs-field-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vs-marquee__track { animation: none; }
}