/* ===================================================================
   VioShield — Prelaunch Funnel
   =================================================================== */

:root {
  --color-primary: #a865e0;
  --color-primary-dark: #7c3fb4;
  --color-primary-darker: #4f2170;
  --color-primary-light: #d9b8f5;
  --color-accent-pink: #ef6fa8;
  --color-bg: #fbf9fd;
  --color-bg-alt: #f4edfb;
  --color-card: #ffffff;
  --color-ink: #1f1826;
  --color-ink-soft: #5c536b;
  --color-ink-faint: #8a8096;
  --color-border: #e7dcf3;
  --color-success: #2f9e64;

  --color-footer-bg: #17121d;
  --color-footer-ink: rgba(255, 255, 255, 0.72);

  --shadow-soft: 0 20px 45px -20px rgba(79, 33, 112, 0.28);
  --shadow-card: 0 12px 30px -14px rgba(79, 33, 112, 0.22);
  --shadow-button: 0 14px 28px -12px rgba(124, 63, 180, 0.55);

  --radius-lg: 1.75rem;
  --radius-md: 1.125rem;
  --radius-pill: 999px;

  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --max-width: 73.75rem; /* 1180px at the default 16px root */
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(168, 101, 224, 0.1);
  border: 1px solid rgba(168, 101, 224, 0.25);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(168, 101, 224, 0.25);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Brand mark — simple centered bar (VIP page: no nav, funnel focus)
   --------------------------------------------------------------- */

.brand-bar {
  display: flex;
  justify-content: center;
  padding: 2.25rem 1.5rem 0;
}

.brand-bar a {
  display: inline-flex;
  transition: opacity 0.18s ease;
}

.brand-bar a:hover {
  opacity: 0.82;
}

.brand-bar img {
  height: 64px;
  width: auto;
}

/* ---------------------------------------------------------------
   Site header — logo + "Coming Soon To Kickstarter" (home page)
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 249, 253, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 220, 243, 0.7);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.6rem 1.75rem;
}

.brand-mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.18s ease;
}

.brand-mark:hover {
  opacity: 0.82;
}

.brand-mark img {
  height: 64px;
  width: auto;
}

@media (max-width: 640px) {
  .brand-mark img {
    height: 40px;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-top::before,
  .hero-card-top::after,
  .gallery,
  .hero-copy,
  .form-spotlight::before,
  .form-spotlight .btn-primary {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Product hero — ONE connected card: gallery+copy on top,
   the highlighted email capture directly attached below
   --------------------------------------------------------------- */

.product-hero {
  /* Vertical rhythm compresses on short viewports (typical laptop screen
     heights) so the CTA below doesn't get pushed past the fold, and
     relaxes back out on tall viewports instead of leaving it fixed. */
  padding: clamp(0.75rem, 3vh, 1.5rem) 0 clamp(0.5rem, 2vh, 1.5rem);
}

/* A bit wider than the site's usual max-width, scoped to just this hero —
   more room per line means fewer wraps, so the card stays shorter and is
   more likely to fit on screen even when the visitor is zoomed in. */
.product-hero .wrap {
  /* Widened a bit further so the CTA heading (now living in the text
     column, not a full-width band) has room to stay on one line. */
  max-width: 97.5rem;
}

.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  background: var(--color-card);
}

.hero-card-top {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vh, 2rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vh, 1.75rem);
}

.hero-card-top::before,
.hero-card-top::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  opacity: 0.5;
}

.hero-card-top::before {
  width: 420px;
  height: 420px;
  background: var(--color-primary-light);
  top: -160px;
  right: -120px;
  animation: pulseGlow 9s ease-in-out infinite;
}

.hero-card-top::after {
  width: 320px;
  height: 320px;
  background: var(--color-accent-pink);
  bottom: -160px;
  left: -110px;
  opacity: 0.22;
  animation: pulseGlow 10s ease-in-out infinite 1.2s;
}

.product-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'gallery copy'
    'gallery cta';
  /* row-gap column-gap — the gap above the CTA is tighter than the gap
     beside the gallery image. */
  gap: 1.75rem clamp(1.5rem, 4vh, 3.25rem);
  align-items: start;
}

@media (max-width: 880px) {
  .product-hero-grid {
    grid-template-columns: 1fr;
    /* The CTA is the whole point of the page for cold ad traffic — put it
       first on small screens so it's reachable without scrolling past the
       full gallery and feature list. */
    grid-template-areas:
      'cta'
      'gallery'
      'copy';
  }
}

/* Gallery */

.gallery {
  grid-area: gallery;
  animation: fadeUp 0.8s ease both;
}

.gallery-preview {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  background: var(--color-card);
}

.gallery-preview img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

/* Interactive "Trio Sequence" panel — an alternate gallery-preview view
   (photo + phase selector) instead of a plain static photo. Hidden by
   default; toggled by the "trio" gallery thumbnail (see gallery.js). */

.gallery-trio {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(#fff, #f2f4fa);
  overflow: hidden;
}

.gallery-trio.is-visible {
  display: block;
}

.gallery-trio .vio-trio-elem-halo {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 72%;
  filter: blur(50px);
  opacity: 0.24;
  transition: background 0.45s ease;
}

.gallery-trio .vio-trio-elem-floor {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12%;
  height: 16%;
  filter: blur(30px);
  opacity: 0.42;
  transition: background 0.45s ease;
}

.gallery-trio .vio-trio-elem-photo {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(72%, 420px);
  z-index: 2;
}

.gallery-trio .vio-trio-elem-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  border-radius: 0.85rem;
  transition: filter 0.45s ease;
}

.gallery-trio.vio-trio-phase-0 .vio-trio-elem-photo img {
  filter: hue-rotate(325deg) saturate(1.28) brightness(0.98);
}

.gallery-trio.vio-trio-phase-1 .vio-trio-elem-photo img {
  filter: hue-rotate(4deg) saturate(1.1) brightness(1);
}

.gallery-trio.vio-trio-phase-2 .vio-trio-elem-photo img {
  filter: hue-rotate(52deg) saturate(1.4) brightness(0.98);
}

.gallery-trio .vio-trio-elem-caption {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 6%;
  text-align: center;
}

.gallery-trio .vio-trio-elem-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-ink);
}

.gallery-trio .vio-trio-elem-caption span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.gallery-trio-steps {
  display: none;
  margin-top: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.gallery-trio-steps.is-visible {
  display: grid;
}

.trio-step {
  border: 1.5px solid var(--color-border);
  background: var(--color-card);
  border-radius: 0.85rem;
  padding: 0.55rem 0.4rem;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.trio-step:hover {
  transform: translateY(-2px);
}

.trio-step .trio-dot {
  width: 24px;
  height: 24px;
  margin: 0 auto 0.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  color: #fff;
  background: var(--color-border);
  transition: background 0.18s ease;
}

.trio-step.is-active {
  border-color: var(--phase-color, var(--color-primary));
}

.trio-step.is-active .trio-dot {
  background: var(--phase-color, var(--color-primary));
}

.trio-step .trio-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-ink);
}

.trio-step .trio-wave {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--color-ink-faint);
}

@media (max-width: 640px) {
  .trio-step .trio-label {
    font-size: 0.68rem;
  }
  .trio-step .trio-wave {
    display: none;
  }
}

.gallery-thumbs {
  margin-top: clamp(0.5rem, 1.5vh, 0.9rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}

.gallery-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.85rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* The Trio product shot is a wide table, not a portrait/landscape lifestyle
   photo — cover-cropping it to a square cuts off its left/right ends. */
.gallery-thumb[data-type='trio'] img {
  object-fit: contain;
  background: #fff;
}

.gallery-thumb:hover {
  transform: translateY(-2px);
}

.gallery-thumb.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(168, 101, 224, 0.2), var(--shadow-card);
}

@media (max-width: 640px) {
  .gallery-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

/* Copy + form */

.hero-copy {
  grid-area: copy;
  animation: fadeUp 0.85s ease 0.15s both;
}

.hero-copy-logo {
  height: clamp(2.75rem, 7.5vh, 4.5rem);
  width: auto;
  margin-bottom: 1.1rem;
}

.hero-copy h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hero-copy h1 .accent {
  display: inline-block;
  margin-top: 0.2em;
  background: linear-gradient(100deg, var(--color-primary-dark), var(--color-accent-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy .lede {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 52ch;
}

.hero-copy .lede b {
  color: var(--color-ink);
  font-weight: 800;
}

.value-lines {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.value-lines p {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.value-lines b {
  color: var(--color-ink);
  font-weight: 800;
}

.access-line {
  margin-top: 1.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.form-spotlight {
  position: relative;
  margin-top: 1.1rem;
}

.form-spotlight .notify-form {
  position: relative;
  z-index: 1;
}

.form-spotlight::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -24px;
  right: -24px;
  bottom: 20px;
  background: radial-gradient(closest-side, rgba(168, 101, 224, 0.32), transparent 72%);
  filter: blur(20px);
  z-index: 0;
  border-radius: 999px;
  animation: pulseGlow 3.4s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 640px) {
  .product-hero {
    padding: 1rem 0 3rem;
  }

  .hero-card-top {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* ---------------------------------------------------------------
   Hero card, bottom zone — the one highlighted funnel action,
   attached directly beneath the gallery/copy zone (no gap, no
   separate section — reads as one connected card)
   --------------------------------------------------------------- */

.hero-cta {
  grid-area: cta;
  animation: fadeUp 0.9s ease 0.25s both;
}

.cta-heading {
  color: var(--color-primary-dark);
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  font-weight: 800;
  line-height: 1.3;
}

/* Only keep it on one line once the text column is wide enough to fit it
   without clipping — proven fine from 981px up (the old, wider two-column
   breakpoint); the 881–980px sliver is two-column but with a narrower text
   column, so it needs to be allowed to wrap like the stacked mobile layout
   does. */
@media (min-width: 981px) {
  .cta-heading {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .hero-cta {
    text-align: center;
  }

  .hero-card-form {
    margin-left: auto;
    margin-right: auto;
  }
}

.cta-kickstarter-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.4em;
  padding: 0.14em 0.5em;
  margin: 0 0.05em;
  transform: translateY(-0.06em);
}

.cta-kickstarter-chip img {
  height: 0.92em;
  width: auto;
  display: block;
}

.hero-card-form {
  width: 100%;
  max-width: 30rem;
}

.notify-form.is-stacked {
  flex-direction: column;
  max-width: none;
  gap: 0.85rem;
}

.notify-form.is-stacked input[type='email'] {
  padding: 1.2rem 1.6rem;
  font-size: 1.1rem;
}

.notify-form.is-stacked .btn {
  width: 100%;
  min-height: 3.9rem;
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------
   Notify form (pill input + button)
   --------------------------------------------------------------- */

.notify-form {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  max-width: 30rem;
}

.notify-form .field {
  flex: 1;
  min-width: 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notify-form input[type='email'] {
  width: 100%;
  height: 100%;
  /* Gradient border via layered backgrounds (padding-box fill + border-box
     gradient) so the field reads clearly against the white card instead of
     the old near-invisible pale border. */
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-card), var(--color-card)) padding-box,
    linear-gradient(120deg, var(--color-primary), var(--color-accent-pink)) border-box;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  outline: none;
  transition: box-shadow 0.18s ease;
}

.notify-form input[type='email']::placeholder {
  color: var(--color-ink-faint);
}

.notify-form input[type='email']:focus {
  box-shadow: 0 0 0 4px rgba(168, 101, 224, 0.16);
}

.notify-form.is-invalid input[type='email'] {
  background: linear-gradient(var(--color-card), var(--color-card)) padding-box,
    linear-gradient(120deg, #d9455f, #d9455f) border-box;
  box-shadow: 0 0 0 4px rgba(217, 69, 95, 0.14);
}

.btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 0 1.7rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.btn:disabled {
  cursor: default;
  opacity: 0.75;
  transform: none;
}

.btn-primary {
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: var(--shadow-button);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(124, 63, 180, 0.6);
}

.form-spotlight .btn-primary {
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent-pink), var(--color-primary-dark));
  background-size: 200% auto;
  animation: gradientShift 5s ease infinite, ctaPulse 2.8s ease-in-out infinite;
}

.form-spotlight .btn-primary:hover:not(:disabled) {
  animation-play-state: paused;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes ctaPulse {
  0%,
  100% {
    box-shadow: var(--shadow-button), 0 0 0 0 rgba(168, 101, 224, 0.4);
  }
  50% {
    box-shadow: var(--shadow-button), 0 0 0 9px rgba(168, 101, 224, 0);
  }
}

.btn-block {
  width: 100%;
}

.notify-form .btn {
  min-height: 3.3rem;
}

.btn-lg {
  padding: 1.05rem 2rem;
  font-size: 1rem;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

.form-note strong {
  color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------
   Site footer — dark, contact details + legal links
   --------------------------------------------------------------- */

.site-footer {
  background: none;
  color: var(--color-ink-soft);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 0 1.25rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-brand a {
  display: inline-flex;
  transition: opacity 0.18s ease;
}

.footer-brand a:hover {
  opacity: 0.82;
}

.footer-brand img {
  height: 2.75rem;
  width: auto;
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.footer-contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: color 0.18s ease;
}

.footer-links a:hover {
  color: var(--color-primary-dark);
}

.footer-bottom {
  padding-top: 0.75rem;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    gap: 1.75rem;
  }
}

/* ===================================================================
   VIP reservation page
   =================================================================== */

.vip-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 85% 0%, rgba(168, 101, 224, 0.16), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(239, 111, 168, 0.12), transparent 40%), var(--color-bg);
}

.vip-main {
  padding: 3rem 0 1rem;
}

.vip-main--center {
  padding: 3rem 0 1.5rem;
}

.vip-card {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 3rem;
  align-items: stretch;
}

.vip-copy .confirm-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-success);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: 0.01em;
}

.vip-copy .confirm-row svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.confirm-subtext {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-ink);
}

.order-number {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--color-ink-faint);
}

.offer-hook {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  line-height: 1.35;
}

.vip-copy h1 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
}

.vip-copy .sub {
  margin-top: 0.85rem;
  font-size: 1.08rem;
  color: var(--color-ink-soft);
}

.vip-badge {
  display: inline-flex;
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  background: linear-gradient(120deg, rgba(168, 101, 224, 0.16), rgba(239, 111, 168, 0.14));
  border: 1px solid rgba(168, 101, 224, 0.3);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
}

.offer-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.offer-card .price-was {
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--color-ink);
  line-height: 1.3;
}

.offer-card .price-vip {
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.offer-card .offer-headline {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--color-ink);
  line-height: 1.3;
}

.offer-card .offer-sub {
  margin-top: 1rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-ink);
}

.offer-card .applied-note {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.offer-card .reserve-btn {
  margin-top: auto;
  padding-top: 1.5rem;
}

.trust-row {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
}

.trust-row .trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
}

.trust-row .trust-item svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

/* Trust badges — 3-card row beneath the reservation offer */

.trust-badges .wrap {
  padding-top: 0;
  padding-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.trust-badge {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.trust-badge .icon {
  grid-row: 1;
  grid-column: 1;
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 101, 224, 0.16), rgba(239, 111, 168, 0.14));
  color: var(--color-primary-dark);
}

.trust-badge h3 {
  grid-row: 1;
  grid-column: 2;
}

.trust-badge p {
  grid-column: 1 / -1;
}

.trust-badge .icon svg {
  width: 19px;
  height: 19px;
}

.trust-badge .icon.icon-img {
  background: none;
  padding: 0;
  overflow: hidden;
}

.trust-badge .icon.icon-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.trust-badge h3 {
  font-size: 0.98rem;
  font-weight: 800;
}

.trust-badge p {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

@media (max-width: 720px) {
  .trust-badges .wrap {
    grid-template-columns: 1fr;
  }
}

.decline-link {
  display: inline-block;
  margin-top: 1.3rem;
  font-size: 0.88rem;
  color: var(--color-ink-faint);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
}

.decline-link:hover {
  color: var(--color-ink-soft);
}

.vip-visual {
  position: relative;
  height: 100%;
}

.vip-visual .glow-card {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  background: radial-gradient(circle at 50% 30%, rgba(168, 101, 224, 0.22), transparent 60%), var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.vip-visual .glow-card img {
  width: 100%;
  filter: drop-shadow(0 24px 34px rgba(79, 33, 112, 0.28));
}

.glow-card-brand {
  position: absolute;
  top: -1.6rem;
  left: 1.1rem;
  z-index: 2;
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  box-shadow: var(--shadow-card);
  transition: opacity 0.18s ease;
}

.glow-card-brand.is-right {
  left: auto;
  right: 1.1rem;
}

.glow-card-brand:hover {
  opacity: 0.82;
}

.glow-card-brand img {
  height: clamp(2.25rem, 6vh, 3.75rem);
  width: auto;
  filter: none;
}

/* "Built in Colorado" stamp — sits over the lower middle of the product
   shot. Capped at the source PNG's native 200px so it never upscales. */
.vip-visual .glow-card .glow-card-badge {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 25%;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(30, 20, 50, 0.3));
}

.vip-visual .savings-pill {
  position: absolute;
  top: -1rem;
  right: 1.5rem;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent-pink));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button);
}

/* ---------------------------------------------------------------
   Success icon — reused on the Thank You page's confirm-row
   --------------------------------------------------------------- */

.success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-icon svg {
  width: 24px;
  height: 24px;
}

/* ---------------------------------------------------------------
   Checkout page — on-site Stripe checkout (checkout/index.html)
   --------------------------------------------------------------- */

.checkout-header {
  padding: 1.25rem 0 0;
}

.checkout-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkout-logo {
  display: inline-flex;
  transition: opacity 0.18s ease;
}

.checkout-logo:hover {
  opacity: 0.82;
}

.checkout-logo img {
  height: 4.25rem;
  width: auto;
}

.secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-success);
  background: rgba(47, 158, 100, 0.08);
  border: 1px solid rgba(47, 158, 100, 0.25);
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-pill);
}

.secure-pill svg {
  width: 19px;
  height: 19px;
}

.checkout-main {
  flex: 1;
  padding: 0.75rem 0 1.5rem;
}

.checkout-intro {
  text-align: center;
}

.checkout-title {
  white-space: nowrap;
  font-size: clamp(1.15rem, 4.6vw, 2.3rem);
  font-weight: 800;
  background: linear-gradient(100deg, var(--color-primary-dark), var(--color-accent-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.checkout-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}

.checkout-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.9rem;
  box-shadow: var(--shadow-card);
}

.checkout-section + .checkout-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}

.step-num {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-pink));
}

/* Our own inputs mirror the Stripe Payment Element's appearance settings
   (see page-checkout.js) so both halves of the form look like one form. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
}

.field-row--3 {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

.checkout-panel .field {
  margin-bottom: 0.8rem;
}

.checkout-panel .field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.req {
  color: #d9455f;
}

.checkout-panel .field input,
.checkout-panel .field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-panel .field select {
  appearance: none;
  padding-right: 2.4rem;
  background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c536b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 16px;
  cursor: pointer;
}

.checkout-panel .field select:invalid {
  color: var(--color-ink-faint);
}

.checkout-panel .field input:focus,
.checkout-panel .field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(168, 101, 224, 0.16);
}

.checkout-panel .field.is-invalid input,
.checkout-panel .field.is-invalid select {
  border-color: #d9455f;
  box-shadow: 0 0 0 4px rgba(217, 69, 95, 0.12);
}

.field-hint {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}

.payment-element {
  min-height: 8.5rem;
}

.payment-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.payment-skeleton span {
  grid-column: 1 / -1;
  height: 2.9rem;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-bg-alt), #fff, var(--color-bg-alt));
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.payment-skeleton span.half {
  grid-column: auto;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.checkout-error {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(217, 69, 95, 0.08);
  border: 1px solid rgba(217, 69, 95, 0.3);
  color: #b3304a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.pay-btn {
  margin-top: 1.25rem;
}

.pay-btn .btn {
  position: relative;
  min-height: 3.5rem;
}

.btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.btn-label svg {
  width: 18px;
  height: 18px;
}

.btn-spinner {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

.btn.is-loading .btn-label {
  display: none;
}

.btn.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Order summary */

.summary-card {
  position: sticky;
  top: 1.5rem;
  background: radial-gradient(circle at 100% 0%, rgba(168, 101, 224, 0.12), transparent 55%), var(--color-card);
}

.summary-title {
  font-size: 1.1rem;
  font-weight: 800;
}

.summary-product {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.summary-thumb {
  position: relative;
  flex-shrink: 0;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(168, 101, 224, 0.22), transparent 70%), var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}

.summary-thumb img {
  max-height: 100%;
  object-fit: contain;
}

.summary-qty {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink-soft);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-product-info {
  flex: 1;
  min-width: 0;
}

.summary-product-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
}

.summary-product-meta {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}

.summary-product-price {
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
}

.summary-totals {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.summary-totals div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.summary-totals div + div {
  margin-top: 0.6rem;
}

.summary-totals dd {
  margin: 0;
  text-align: right;
}

.summary-totals .summary-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  align-items: baseline;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}

.summary-total dd {
  font-size: 1.45rem;
  color: var(--color-primary-dark);
}

.summary-total small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-ink-faint);
  margin-right: 0.2rem;
}

.order-number.is-pending {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-soft);
}

@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .summary-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .checkout-header {
    padding-top: 1rem;
  }

  .checkout-logo img {
    height: 2.6rem;
  }

  .checkout-main {
    padding-top: 1.25rem;
  }

  .checkout-panel {
    padding: 1.4rem;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .field-row--3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.9rem;
  }

  .field-row--3 .field:first-child {
    grid-column: 1 / -1;
  }

  .secure-pill {
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
  }

}


/* ---------------------------------------------------------------
   Responsive (VIP page)
   --------------------------------------------------------------- */

@media (max-width: 880px) {
  .vip-card {
    grid-template-columns: 1fr;
  }

  .vip-visual {
    order: -1;
  }
}

@media (max-width: 640px) {
  .notify-form {
    flex-direction: column;
    max-width: none;
  }

  .notify-form input[type='email'] {
    padding: 0.95rem 1.2rem;
  }

  .btn-lg,
  .notify-form .btn {
    width: 100%;
  }

  .offer-card {
    padding: 1.6rem;
  }

  .vip-visual .glow-card {
    padding: 1.75rem;
  }

  /* Extra top clearance so the corner logo badge (floats above the card
     via a negative offset) isn't cramped against the viewport edge. */
  .vip-main {
    padding-top: 3rem;
  }

  .vip-card {
    gap: 1.5rem;
  }

  /* The reservation button is the whole point of this page — move it up
     right after the opening confirmation line instead of making mobile
     visitors scroll past all the pricing copy to find it. */
  .confirm-row {
    order: 1;
  }

  .confirm-subtext {
    order: 2;
  }

  .offer-card .reserve-btn {
    order: 3;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .offer-hook {
    order: 4;
  }

  .offer-card .price-was {
    order: 5;
  }

  .offer-card .price-vip {
    order: 6;
  }

  .offer-card .offer-headline {
    order: 7;
  }

  .offer-card .offer-sub {
    order: 8;
  }

  .offer-card .applied-note {
    order: 9;
  }
}