/* Design-direction switcher — a REVIEW AID, not part of either design.
   Remove this stylesheet and the .vswitch markup before a real launch. */

.vswitch {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 5px 14px;

  background: rgba(12, 11, 8, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(236, 231, 221, 0.22);
  border-radius: 100px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);

  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}

.vswitch__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 231, 221, 0.5);
  margin-right: 6px;
}

.vswitch__opt {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(236, 231, 221, 0.72);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.vswitch__opt:hover { color: #ece7dd; background: rgba(236, 231, 221, 0.1); }

/* active option — accent colour matches the direction being viewed */
.vswitch__opt[aria-current="page"] {
  background: #a2552f;
  background: oklch(0.55 0.14 42);
  color: #f6f3ec;
}
.vswitch--dark .vswitch__opt[aria-current="page"] {
  background: #37a6e8;
  background: oklch(0.72 0.13 235);
  color: #12100c;
}
.vswitch--type .vswitch__opt[aria-current="page"] {
  background: #5e6b39;
  background: oklch(0.52 0.09 128);
  color: #f7f7f5;
}

.vswitch__opt:focus-visible {
  outline: 2px solid #ece7dd;
  outline-offset: 2px;
}

/* The switcher is fixed, so it would sit on top of whatever is at the bottom of
   the viewport. Reserve clearance where page content actually reaches that low.
   These overrides live here (loaded after v3.css/v4.css) so deleting this file
   removes the switcher AND its spacing compensation in one go. */

/* v3 footer sits 44px off the bottom — under the switcher. */
.foot { padding-bottom: 76px; }

/* Stacked hero CTAs run to the bottom edge on narrow screens. */
@media (max-width: 820px) {
  .hero__foot { padding-bottom: 100px; }
}

@media (max-width: 560px) {
  .vswitch { bottom: 14px; padding-left: 10px; gap: 2px; }
  .vswitch__label { display: none; }
  .vswitch__opt { padding: 8px 13px; font-size: 12px; }
}

@media print { .vswitch { display: none; } }