:root {
  /* light theme (apply page) */
  --paper: #f6f2e8;
  --paper-dim: #efe9db;
  --ink: #201d17;
  --ink-soft: #4a4636;
  --forest: #23503c;
  --forest-deep: #163526;
  --rust: #c4562c;
  --rust-soft: #e07a45;
  --gold: #d9a441;
  --line: #dcd3ba;
  --card: #fffdf6;

  /* dark theme (index page) */
  --p-ground: #121110;
  --p-ground-deep: #0a0a09;
  --p-ink: #f2eee4;
  --p-ink-dim: #8f897c;
  --p-gold: #b8934f;
  --p-gold-soft: #d3b06b;
  --p-line: rgba(184, 147, 79, 0.2);

  --font-serif: "Inter", sans-serif;
  --font-sans: "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}

/* The Vimeo Player SDK creates its iframe with fixed pixel width/height
   attributes that don't match our responsive aspect-ratio container,
   leaving a letterboxed gap around the video — force it to fill instead. */
[data-vimeo-id] {
  position: relative;
}
[data-vimeo-id] iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  antialiased: true;
  -webkit-font-smoothing: antialiased;
}

body.page-dark {
  background: var(--p-ground);
  color: var(--p-ink);
}

::selection {
  background: var(--rust);
  color: var(--paper);
}

body.page-dark ::selection {
  background: var(--p-gold);
  color: var(--p-ground-deep);
}

/* Specificity bumped (body .font-serif, not just .font-serif) so this beats
   Tailwind's own .font-serif utility (generic Georgia/Times fallback) from
   tailwind.css regardless of which stylesheet's <link> happens to load
   second — swapping link order to "fix" this instead broke the hidden/
   md:flex responsive utilities that rely on tailwind.css winning ties. */
body .font-serif {
  font-family: var(--font-serif);
}

.text-balance {
  text-wrap: balance;
}

/* focus rings — high-contrast on dark pages where the default ring is
   nearly invisible */
.page-dark :is(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--p-gold-soft);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  background: var(--p-gold);
  color: var(--p-ground-deep);
  transition: top 0.18s ease-out;
}

.skip-link:focus {
  top: 0;
}

/* reveal-on-scroll (mirrors the old Reveal.tsx component) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* card-grid items animated via GSAP stagger (WhySection / BenefitsSection /
   WhoCanJoinSection / HowItWorksFlow) start hidden, GSAP takes over from there */
.pre-reveal {
  opacity: 0;
}

.card-gradient {
  background: linear-gradient(155deg, color-mix(in srgb, var(--p-gold) 9%, var(--p-ground)) 0%, var(--p-ground-deep) 100%);
  border-color: var(--p-line);
}

.card-hover {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
  cursor: default;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -14px var(--p-gold);
  border-color: var(--p-gold) !important;
}

/* icon inside any hoverable card reacts to the card's hover, not just its own —
   outline icons fill in with color as they scale/rotate */
.card-hover svg,
.card-hover-tilt svg,
.card-hover-scale svg,
.step-icon-circle svg {
  transition: transform 0.35s ease;
}

.card-hover svg path,
.card-hover svg circle,
.card-hover-tilt svg path,
.card-hover-tilt svg circle,
.card-hover-scale svg path,
.card-hover-scale svg circle,
.step-icon-circle svg path,
.step-icon-circle svg circle {
  transition: fill 0.35s ease;
  fill: transparent;
}

.card-hover:hover svg path,
.card-hover:hover svg circle {
  fill: color-mix(in srgb, var(--p-gold) 25%, transparent);
}

.card-hover-tilt:hover svg path,
.card-hover-tilt:hover svg circle {
  fill: color-mix(in srgb, var(--rust-soft) 25%, transparent);
}

.card-hover-scale:hover svg path,
.card-hover-scale:hover svg circle {
  fill: color-mix(in srgb, var(--p-gold) 25%, transparent);
}

.step-hover:hover .step-icon-circle svg path,
.step-hover:hover .step-icon-circle svg circle {
  fill: color-mix(in srgb, var(--p-gold) 30%, transparent);
}

.card-hover:hover svg {
  transform: scale(1.12) rotate(-4deg);
}

/* independent-card: gentle tilt + icon wiggle, rust-tinted */
.card-hover-tilt {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  cursor: default;
}

.card-hover-tilt:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 20px 44px -16px var(--rust);
  border-color: var(--rust-soft) !important;
}

.card-hover-tilt:hover svg {
  transform: rotate(8deg) scale(1.1);
}

/* benefit-card: diagonal light sweep across the card on hover */
.card-hover-shine {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
  cursor: default;
}

.card-hover-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--p-gold-soft) 35%, transparent), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.card-hover-shine:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px var(--p-gold-soft);
  border-color: var(--p-gold-soft) !important;
}

.card-hover-shine:hover::before {
  left: 120%;
}

/* category-card: scale pop + icon spin */
.card-hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}

.card-hover-scale:hover {
  transform: scale(1.035);
  box-shadow: 0 16px 36px -14px var(--p-gold);
  border-color: var(--p-gold) !important;
}

.card-hover-scale:hover svg {
  transform: scale(1.15) rotate(-6deg);
}

/* "Why 12 Weeks" step icons: circle + icon react when hovering the topic */
.step-icon-circle {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.step-icon-circle svg {
  transition: transform 0.35s ease;
}

.step-hover:hover .step-icon-circle {
  border-color: var(--p-gold) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-gold) 18%, transparent);
}

.step-hover:hover .step-icon-circle svg {
  transform: scale(1.15) rotate(-6deg);
}

/* field-card (registration grid): lift + glow ring, number circle fills in */
.card-hover-glow {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}

.card-hover-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--p-gold), 0 18px 38px -16px var(--p-gold);
  border-color: var(--p-gold) !important;
}

.field-number {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.card-hover-glow:hover .field-number {
  background: var(--p-gold);
  color: var(--p-ground-deep);
  transform: scale(1.1);
}

/* How It Works: each step number fills solid gold once that stage is reached */
.step-number {
  transition: background 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, transform 0.3s ease;
}

.step-number.filled {
  background: var(--p-gold) !important;
  color: var(--p-ground-deep) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-gold) 22%, transparent);
  transform: scale(1.08);
}

/* nav (shared skeleton for both dark PreviewNav and light Navbar) */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
}

.site-nav.loaded {
  opacity: 1;
  transform: translateY(0);
}

.site-nav.scrolled {
  padding: 0.35rem 1rem;
}

@media (min-width: 640px) {
  .site-nav.scrolled {
    padding: 0.5rem 1.5rem;
  }
}

.site-nav-inner {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.3s, box-shadow 0.3s, max-width 0.4s ease, border-radius 0.4s ease, border-color 0.3s;
}

.site-nav.scrolled .site-nav-inner {
  max-width: 64rem;
  border-radius: 9999px;
}

.page-dark .site-nav-inner {
  background: rgba(8, 8, 7, 0.92);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.page-dark .site-nav.scrolled .site-nav-inner {
  background: rgba(6, 6, 5, 0.97);
  border-color: rgba(211, 176, 107, 0.4);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

body:not(.page-dark) .site-nav-inner {
  background: rgba(255, 253, 246, 0.6);
  border-color: var(--line);
  box-shadow: 0 4px 20px -14px rgba(32, 29, 23, 0.2);
}

body:not(.page-dark) .site-nav.scrolled .site-nav-inner {
  background: rgba(255, 253, 246, 0.9);
  box-shadow: 0 8px 30px -12px rgba(32, 29, 23, 0.25);
}

.nav-links a {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: color 0.2s, opacity 0.2s;
}

.page-dark .nav-links a {
  color: var(--p-ink);
}

.page-dark .nav-links a:hover {
  color: var(--p-gold-soft);
  background: rgba(184, 147, 79, 0.12);
}

body:not(.page-dark) .nav-links a:hover {
  background: color-mix(in srgb, var(--forest) 8%, transparent);
  color: var(--ink);
}

.hamburger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
}

.page-dark .hamburger {
  border-color: var(--p-line);
}

.hamburger-lines {
  position: relative;
  width: 1rem;
  height: 0.75rem;
  display: block;
}

.hamburger-lines span {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s;
}

.page-dark .hamburger-lines span {
  background: var(--p-ink);
}

.hamburger-lines span:first-child {
  top: 0;
}

.hamburger-lines span:last-child {
  bottom: 0;
}

.hamburger.open .hamburger-lines span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.open .hamburger-lines span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu {
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
  border-radius: 1.5rem;
  border: 1px solid;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  display: none;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.open {
  display: block;
}

.mobile-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.page-dark .mobile-menu {
  background: rgba(10, 10, 9, 0.95);
  border-color: var(--p-line);
}

body:not(.page-dark) .mobile-menu {
  background: rgba(255, 253, 246, 0.95);
  border-color: var(--line);
}

.mobile-menu a {
  display: block;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.mobile-menu a.rounded-full,
.mobile-menu button.rounded-full {
  padding: 0.75rem 1.25rem;
  border-bottom: none;
}

.page-dark .mobile-menu a {
  border-color: var(--p-line);
  color: var(--p-ink-dim);
}

body:not(.page-dark) .mobile-menu a {
  color: var(--ink-soft);
}

/* floating "free to join" widget */
.floating-badge {
  position: fixed;
  right: 1.5rem;
  bottom: 6rem;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Only shown once JS confirms the hero has scrolled out of view — keeps it
   from covering the hero heading on short mobile viewports. */
.floating-badge.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.floating-badge.hidden-behind-chat {
  animation: none;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
}

.floating-badge-dot {
  position: relative;
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  background: var(--p-gold);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--p-gold) 40%, transparent);
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.floating-badge-dot:hover {
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--p-gold) 50%, transparent);
}

.floating-badge-dot-core {
  position: relative;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--p-ground-deep);
}

.floating-badge-dot-icon {
  display: none;
}

.floating-badge-dot-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--p-ground-deep);
  white-space: nowrap;
}

.floating-badge.open .floating-badge-dot {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* Absolutely positioned (instead of an inline-flex sibling) so it never
   affects the collapsed dot's box — lets both dot and panel cross-fade with
   plain opacity/transform, which is smooth in both directions and fully
   GPU-composited, unlike the old display:none swap (which had no exit
   transition at all). */
.floating-badge-panel {
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 0.9rem;
  padding: 0.85rem 0.75rem 0.85rem 1.1rem;
  background: var(--p-ground);
  border: 1px solid var(--p-line);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(10px) scale(0.94);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-badge.open .floating-badge-panel {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}

.floating-badge-drag-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 0.75rem;
  text-decoration: none;
}

.floating-badge-cta {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: var(--p-gold);
  color: var(--p-ground-deep);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.floating-badge-cta:hover {
  filter: brightness(1.08);
}

@media (max-width: 640px) {
  /* Mobile: icon-only round button, matched to the #chat-toggle FAB below it
     (same 3.5rem size, right edge, shadow, pulse ring). */
  .floating-badge {
    right: 1.25rem;
    bottom: 6rem;
  }

  .floating-badge-dot {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 3.5rem;
    height: 3.5rem;
    box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--p-gold) 40%, transparent);
  }

  .floating-badge-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--p-gold);
    animation: chat-pulse 2.2s ease-out infinite;
    z-index: -1;
  }

  .floating-badge-dot-label,
  .floating-badge-dot > span:first-child {
    display: none;
  }

  .floating-badge-dot-icon {
    display: block;
    color: var(--p-ground-deep);
  }
}

.glow-dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--p-gold);
  animation: dot-ping 1.8s ease-out infinite;
}

@keyframes dot-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-dot-ping { display: none; }
}

/* FAQ accordion */
.faq-item {
  margin-bottom: 0.55rem;
  border: 1px solid var(--p-line);
  border-radius: 0.8rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--p-gold) 7%, var(--p-ground)) 0%, var(--p-ground-deep) 100%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  border-color: color-mix(in srgb, var(--p-gold) 60%, transparent);
}

.faq-item:has(.faq-question.open) {
  border-color: var(--p-gold);
  box-shadow: 0 18px 40px -24px var(--p-gold);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.faq-icon-wrap {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--p-gold);
  color: var(--p-gold-soft);
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-question:hover .faq-icon-wrap,
.faq-question.open .faq-icon-wrap {
  background: var(--p-gold);
  color: var(--p-ground-deep);
}

.faq-question > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.3s ease;
}

/* Q / A markers so it reads as a question-and-answer list. */
.faq-question > span:first-child::before,
.faq-answer p::before {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 9999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.faq-question > span:first-child::before {
  content: "Q";
  background: color-mix(in srgb, var(--p-gold) 18%, transparent);
  color: var(--p-gold-soft);
}

.faq-answer p::before {
  content: "A";
  background: var(--p-gold);
  color: var(--p-ground-deep);
}

.faq-question.open > span:first-child {
  color: var(--p-gold-soft);
}

.faq-icon .line-h,
.faq-icon .line-v {
  transform-origin: 8px 8px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-question.open .line-h {
  transform: rotate(180deg);
}

.faq-question.open .line-v {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer p {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.15rem 1rem 1rem;
  max-width: 42rem;
  line-height: 1.625;
  color: var(--p-ink-dim);
}

/* floating actions */
.fab {
  position: fixed;
  z-index: 40;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fab.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.fab:active {
  transform: scale(0.94);
}

.stat-counter-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}

.stat-counter-wrap > *:last-child {
  margin-top: 0;
}

#chat-toggle {
  bottom: 1.5rem;
  right: 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--p-gold);
  color: var(--p-ground-deep);
  border: none;
  box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--p-gold) 40%, transparent);
  cursor: pointer;
}

#chat-toggle .ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--p-gold);
  animation: chat-pulse 2.2s ease-out infinite;
}

#chat-toggle.open .ring {
  display: none;
}

@keyframes chat-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

#chat-toggle .icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  transition: transform 0.25s;
}

#chat-toggle.open .icon-wrap {
  transform: rotate(90deg);
}

#chat-panel {
  position: fixed;
  bottom: 6rem;
  right: 1.25rem;
  z-index: 40;
  width: min(22rem, calc(100vw - 2.5rem));
  height: min(32rem, calc(100vh - 8rem));
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--ink) 25%, transparent);
  overflow: hidden;
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#chat-panel.open {
  display: flex;
}

#chat-panel.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--p-ground-deep);
  color: var(--p-ink);
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-msg {
  display: flex;
  animation: msg-in 0.25s ease both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.user {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 85%;
  border-radius: 1rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.chat-msg.user .chat-bubble {
  background: var(--rust);
  color: var(--paper);
  border-bottom-right-radius: 0.375rem;
}

.chat-msg.bot .chat-bubble {
  background: var(--paper-dim);
  color: var(--ink);
  border-bottom-left-radius: 0.375rem;
}

.chat-typing {
  display: flex;
  gap: 0.3rem;
  background: var(--paper-dim);
  border-radius: 1rem;
  border-bottom-left-radius: 0.375rem;
  padding: 0.75rem 1rem;
  width: fit-content;
}

.chat-typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--ink-soft) 50%, transparent);
  animation: typing-bounce 0.8s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.chat-suggestions {
  padding: 0 1rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
}

.chat-suggestions button {
  font-size: 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.chat-suggestions button:hover {
  border-color: color-mix(in srgb, var(--rust) 40%, transparent);
  background: var(--paper-dim);
}

.chat-footer {
  border-top: 1px solid var(--line);
  padding: 0.5rem 0.75rem 0.75rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-quick-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-quick-links a {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--rust) 10%, transparent);
  color: var(--rust);
  transition: background 0.2s;
}

.chat-quick-links a:hover {
  background: color-mix(in srgb, var(--rust) 15%, transparent);
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-form input {
  flex: 1;
  min-width: 0;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  outline: none;
}

.chat-form input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.chat-form input:focus {
  border-color: color-mix(in srgb, var(--rust) 40%, transparent);
}

.chat-form button {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--rust);
  color: var(--paper);
  border: none;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.chat-form button:hover {
  background: var(--rust-soft);
}

.chat-form button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* apply form */
.step-track {
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--line);
  overflow: hidden;
}

.step-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--rust);
  width: 0%;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.25rem;
  min-height: 0;
}

@media (min-width: 640px) {
  .form-panel {
    padding: 1.75rem 2rem;
  }
}

.form-back-btn {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--p-ink-dim);
  background: none;
  border: 1px solid var(--p-line);
  border-radius: 0.375rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.form-back-btn:hover:not(:disabled) {
  border-color: var(--p-gold);
  color: var(--p-ink);
}

.form-back-btn:disabled {
  cursor: not-allowed;
}

.form-step {
  opacity: 0;
}

.field-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.75rem 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-input::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 50%, transparent);
}

.field-input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 15%, transparent);
}

.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.page-dark .step-track {
  background: var(--p-line);
}

.page-dark .step-fill {
  background: var(--p-gold);
}

.page-dark .form-panel {
  border-color: var(--p-line);
  background: var(--p-ground);
}

.page-dark .field-input {
  border-color: var(--p-line);
  background: var(--p-ground-deep);
  color: var(--p-ink);
}

.page-dark .field-input::placeholder {
  color: color-mix(in srgb, var(--p-ink-dim) 60%, transparent);
}

.page-dark .field-input:focus {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold) 15%, transparent);
}

/* Browser autofill (e.g. a remembered City/ZIP) otherwise forces its own
   light background via the UA's internal :-webkit-autofill styling, which
   plain `background` CSS can't override — this inset-shadow trick keeps
   autofilled fields on the dark theme instead of flashing white. */
.page-dark .field-input:-webkit-autofill,
.page-dark .field-input:-webkit-autofill:hover,
.page-dark .field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--p-ink);
  -webkit-box-shadow: 0 0 0px 1000px var(--p-ground-deep) inset;
  box-shadow: 0 0 0px 1000px var(--p-ground-deep) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.page-dark .field-label {
  color: var(--p-ink-dim);
}

.magnetic-btn {
  display: inline-flex;
}

.magnetic-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  will-change: transform;
}

#hero .hero-content {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.highlight-text {
  color: var(--p-ground-deep);
  background: var(--p-gold);
  padding: 0 0.15em;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: none;
}

/* Per-line translucent backing — sits behind just the text itself (each
   wrapped line gets its own box via box-decoration-break), instead of one
   big panel behind the whole hero content block. */
.disclosure-line-inner {
  white-space: nowrap;
  font-size: clamp(0.75rem, 2vw, 1.125rem);
}

@media (max-width: 480px) {
  .disclosure-line-inner {
    white-space: normal;
    font-size: 0.75rem;
  }
  .disclosure-line {
    overflow: visible;
  }
}

.social-icon {
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.social-icon svg {
  transition: transform 0.35s ease;
}

.social-icon:hover {
  background: var(--p-gold);
  color: var(--p-ground-deep) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px var(--p-gold);
}

.social-icon:hover svg {
  transform: scale(1.15) rotate(-6deg);
}

.chat-quick-links a svg {
  transition: transform 0.35s ease;
}

.chat-quick-links a:hover svg {
  transform: scale(1.15) rotate(-6deg);
}

.text-scrim {
  display: inline;
  background: rgba(6, 6, 5, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 0 0.15em;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--p-gold-soft);
  margin-bottom: 1rem;
  text-shadow: 0 0 8px color-mix(in srgb, var(--p-gold) 65%, transparent), 0 0 20px color-mix(in srgb, var(--p-gold) 35%, transparent);
  animation: eyebrow-glow 3s ease-in-out infinite;
}

.section-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--p-gold);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--p-gold) 70%, transparent);
  flex-shrink: 0;
}

@keyframes eyebrow-glow {
  0%, 100% {
    text-shadow: 0 0 8px color-mix(in srgb, var(--p-gold) 65%, transparent), 0 0 20px color-mix(in srgb, var(--p-gold) 35%, transparent);
  }
  50% {
    text-shadow: 0 0 12px color-mix(in srgb, var(--p-gold) 85%, transparent), 0 0 28px color-mix(in srgb, var(--p-gold) 50%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-eyebrow {
    animation: none;
  }
}

/* How It Works — staggered zigzag flow */
.zigzag-wrap {
  min-height: 60px;
}

.zigzag-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.75rem;
}

.zigzag-col {
  min-width: 0;
}

@media (min-width: 640px) {
  .zigzag-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .zigzag-col {
    flex: 1;
  }

  .zigzag-top {
    margin-top: 0;
  }

  .zigzag-bottom {
    margin-top: 150px;
  }
}

.footer-col-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--p-gold);
}

.footer-link {
  position: relative;
  display: inline-block;
  transition: color 0.25s ease;
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--p-gold);
  transition: width 0.25s ease;
}

.footer-link:hover {
  color: var(--p-gold-soft);
}

.footer-link:hover::after {
  width: 100%;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-contact-item svg {
  flex-shrink: 0;
  color: var(--p-gold);
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s ease, transform 0.25s ease;
}

.back-to-top:hover {
  color: var(--p-gold-soft);
  transform: translateY(-2px);
}

.footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(4.5rem, 18vw, 11rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--p-gold);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

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

.review-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-gold-soft);
  margin-bottom: 0.6rem;
}

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.35rem 0;
}

.review-row + .review-row {
  border-top: 1px dashed var(--p-line);
}

.review-label {
  color: var(--p-ink-dim);
  flex: 0 0 auto;
}

.review-value {
  color: var(--p-ink);
  font-weight: 600;
  text-align: right;
}

.btn-disabled {
  background: var(--line) !important;
  color: color-mix(in srgb, var(--ink-soft) 60%, transparent) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.field-select {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.75rem 1rem;
  color: var(--ink);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 15%, transparent);
}

.page-dark .field-select {
  border-color: var(--p-line);
  background-color: var(--p-ground-deep);
  color: var(--p-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8934f' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
}

.page-dark .field-select:focus {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold) 15%, transparent);
}

.field-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .field-checkbox-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.field-checkbox-item:hover {
  border-color: var(--forest);
}

.field-checkbox-item input[type="checkbox"] {
  accent-color: var(--forest);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.page-dark .field-checkbox-item {
  border-color: var(--p-line);
  color: var(--p-ink);
}

.page-dark .field-checkbox-item:hover {
  border-color: var(--p-gold);
}

.page-dark .field-checkbox-item input[type="checkbox"] {
  accent-color: var(--p-gold);
}

.field-checkbox-item.is-checked {
  border-color: var(--forest);
  background: color-mix(in srgb, var(--forest) 8%, transparent);
}

.page-dark .field-checkbox-item.is-checked {
  border-color: var(--p-gold);
  background: color-mix(in srgb, var(--p-gold) 10%, transparent);
}

.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.field-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--forest);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.page-dark .field-consent input[type="checkbox"] {
  accent-color: var(--p-gold);
}

.phone-input-wrap {
  position: relative;
}

.phone-flag {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--p-ink-dim);
}

.phone-input-wrap .field-input {
  padding-left: 4.25rem;
}

.field-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: #e5484d;
}

.btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

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

.field-error.is-visible {
  display: block;
}

.field-input.has-error,
.field-select.has-error {
  border-color: #e5484d !important;
}

.field-input.has-error:focus,
.field-select.has-error:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15) !important;
}

/* Floating toast shown when Continue/Submit is clicked while the step still
   has validation errors — a quick nudge alongside the per-field red borders,
   in case the invalid field isn't in view. Fixed near the top of the
   viewport (below the sticky nav) so it doesn't push page content around
   and stays visible regardless of scroll position. */
#form-toast {
  display: none;
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 300;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #1a1512;
  border: 1px solid rgba(229, 72, 77, 0.5);
  color: #e5484d;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#form-toast.is-visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Brand request section — an inline page section (not a modal overlay),
   toggled via the [hidden] attribute in initBrandRequestSection(). */
.brand-request-section {
  animation: brand-request-reveal 0.3s ease;
}

@keyframes brand-request-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-request-section {
    animation: none;
  }
}

.brand-request-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--p-line);
  background: var(--p-ground-deep);
  color: var(--p-ink-dim);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.brand-request-close:hover {
  border-color: var(--p-gold);
  color: var(--p-ink);
}

.brand-cta-outline {
  /* Tailwind's 1px "border" utility can render as a sub-pixel line (and fade
     unevenly at the corners of a fully-rounded pill) on some displays —
     bump it slightly and force every side so the outline reads clearly
     against the dark background. */
  border-width: 1.5px !important;
  border-style: solid !important;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.brand-cta-outline:hover {
  background: var(--p-gold);
  color: var(--p-ground-deep) !important;
  border-color: var(--p-gold) !important;
  box-shadow: 0 12px 28px -10px var(--p-gold);
}

/* Inside the mobile menu there's no .magnetic-btn wrapper (no mousemove to
   drive the magnetic pull), so give it a plain hover/tap lift instead. */
.mobile-menu .brand-cta-outline:hover {
  transform: translateY(-2px);
}

/* Phone country-code picker (brand request form) */
.phone-cc-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.phone-cc-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  border: 1px solid var(--p-line);
  border-right: none;
  border-radius: 0.75rem 0 0 0.75rem;
  background: var(--p-ground-deep);
  color: var(--p-ink);
  padding: 0.75rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.phone-cc-toggle:hover {
  border-color: var(--p-gold);
}

.phone-cc-wrap.open .phone-cc-toggle {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold) 15%, transparent);
}

.phone-cc-caret {
  color: var(--p-ink-dim);
  transition: transform 0.2s ease;
}

.phone-cc-wrap.open .phone-cc-caret {
  transform: rotate(180deg);
}

.phone-cc-input {
  border-radius: 0 0.75rem 0.75rem 0 !important;
}

.phone-cc-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 20;
  width: min(320px, 100%);
  max-height: 320px;
  overflow: hidden;
  flex-direction: column;
  border-radius: 0.75rem;
  border: 1px solid var(--p-line);
  background: var(--p-ground-deep);
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.55);
}

.phone-cc-wrap:not(.open) .phone-cc-dropdown {
  display: none !important;
}

.phone-cc-wrap.open .phone-cc-dropdown {
  display: flex;
}

.phone-cc-search-wrap {
  padding: 0.6rem;
  border-bottom: 1px solid var(--p-line);
}

.phone-cc-search {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--p-line);
  background: var(--p-ground);
  color: var(--p-ink);
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  outline: none;
}

.phone-cc-search:focus {
  border-color: var(--p-gold);
}

.phone-cc-list {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  overflow-y: auto;
}

.phone-cc-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: none;
  background: none;
  color: var(--p-ink);
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.phone-cc-item:hover,
.phone-cc-item.is-active {
  background: color-mix(in srgb, var(--p-gold) 12%, transparent);
}

.phone-cc-item-flag {
  flex-shrink: 0;
}

.phone-cc-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-cc-item-dial {
  flex-shrink: 0;
  color: var(--p-ink-dim);
}

.phone-cc-empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--p-ink-dim);
  text-align: center;
}

/* Country select (brand request form) — same shape as the phone country-code picker above. */
.country-select-wrap {
  position: relative;
}

.country-select-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid var(--p-line);
  border-radius: 0.75rem;
  background: var(--p-ground-deep);
  color: var(--p-ink);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.country-select-toggle:hover {
  border-color: var(--p-gold);
}

.country-select-wrap.open .country-select-toggle {
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold) 15%, transparent);
}

.country-select-toggle.has-error {
  border-color: #e5484d !important;
}

.country-select-placeholder {
  color: var(--p-ink-dim);
  font-weight: 400;
}

.country-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-caret {
  flex-shrink: 0;
  color: var(--p-ink-dim);
  transition: transform 0.2s ease;
}

.country-select-wrap.open .country-select-caret {
  transform: rotate(180deg);
}

.country-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow: hidden;
  flex-direction: column;
  border-radius: 0.75rem;
  border: 1px solid var(--p-line);
  background: var(--p-ground-deep);
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.55);
}

.country-select-wrap:not(.open) .country-select-dropdown {
  display: none !important;
}

.country-select-wrap.open .country-select-dropdown {
  display: flex;
}

.country-select-search-wrap {
  padding: 0.6rem;
  border-bottom: 1px solid var(--p-line);
}

.country-select-search {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--p-line);
  background: var(--p-ground);
  color: var(--p-ink);
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  outline: none;
}

.country-select-search:focus {
  border-color: var(--p-gold);
}

.country-select-list {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  overflow-y: auto;
}

.country-select-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: none;
  background: none;
  color: var(--p-ink);
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.country-select-item:hover,
.country-select-item.is-active {
  background: color-mix(in srgb, var(--p-gold) 12%, transparent);
}

.country-select-item-flag {
  flex-shrink: 0;
}

.country-select-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--p-ink-dim);
  text-align: center;
}

/* Thin, theme-colored scrollbars for the phone/country picker dropdown
   lists — the default browser scrollbar (wide, light-gray) clashed badly
   with the dark/gold theme. */
.phone-cc-list,
.country-select-list {
  scrollbar-width: thin;
  scrollbar-color: var(--p-gold) transparent;
}

.phone-cc-list::-webkit-scrollbar,
.country-select-list::-webkit-scrollbar {
  width: 8px;
}

.phone-cc-list::-webkit-scrollbar-track,
.country-select-list::-webkit-scrollbar-track {
  background: transparent;
}

.phone-cc-list::-webkit-scrollbar-thumb,
.country-select-list::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--p-gold) 55%, transparent);
  border-radius: 9999px;
  border: 2px solid var(--p-ground-deep);
}

.phone-cc-list::-webkit-scrollbar-thumb:hover,
.country-select-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--p-gold);
}

/* Legal pages (terms.html, privacy.html) */
.legal-intro {
  margin-bottom: 3rem;
}

.legal-intro p:last-child {
  margin-bottom: 0;
}

/* Headings use the same classes as the home page's own h2
   (class="font-serif text-3xl sm:text-4xl leading-tight") directly in the
   markup, so no font/size/color rule is needed here — just spacing and the
   divider line between sections. */
.legal-content h2 {
  margin-top: 3rem;
  padding-top: 2rem;
  margin-bottom: 0.75rem;
  border-top: 1px solid var(--p-line);
}

.legal-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--p-gold-soft);
}

.legal-content p {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: var(--p-ink-dim);
}

.legal-content ul {
  margin: 0 0 1.25rem 1.25rem;
  list-style: disc;
  color: var(--p-ink-dim);
}

.legal-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.legal-content strong {
  color: var(--p-ink);
}

.legal-content a {
  color: var(--p-gold-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Apply-page "how to fill this out" video: a compact link that opens a
   modal player, rather than an inline video taking up page real estate. */
.video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--p-gold);
  background: color-mix(in srgb, var(--p-gold) 8%, transparent);
  color: var(--p-gold-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.video-link:hover {
  background: color-mix(in srgb, var(--p-gold) 16%, transparent);
  transform: translateY(-1px);
}

.video-link-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--p-gold);
  color: var(--p-ground-deep);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.video-modal.open {
  display: flex;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--p-ground-deep) 82%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-modal.show .video-modal-backdrop {
  opacity: 1;
}

.video-modal-panel {
  position: relative;
  /* Sized by width normally, but on short viewports (mobile landscape) the
     16:9 panel would overflow the viewport's height — the third term caps
     width to whatever keeps the panel's height within the available space.
     Wide (80rem) so the guide slideshow's embedded screenshots stay legible —
     at the old 48rem cap the whole 1920px slide canvas scaled down so far
     that screenshot text became too small to read. */
  width: min(80rem, 100%, calc((100vh - 3rem) * 16 / 9));
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal.show .video-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.video-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--p-ground-deep) 55%, transparent);
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.video-loader.hidden {
  opacity: 0;
}

.video-loader-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 3px solid color-mix(in srgb, var(--p-gold) 30%, transparent);
  border-top-color: var(--p-gold);
  animation: video-loader-spin 0.8s linear infinite;
}

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

/* Sits inside the panel's top-right corner (over the slide content) rather
   than floating above it -- that reclaims the vertical space the modal used
   to reserve just for the button, so the panel itself can render larger. */
.video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--p-line);
  background: color-mix(in srgb, var(--p-ground-deep) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--p-ink);
  cursor: pointer;
}

/* "How to Apply" slideshow: replaces the old how-to video. A fixed
   1920x1080 canvas (identical proportions to the source slide deck) is
   scaled down with a CSS transform to whatever width the modal panel ends
   up at, so the deck stays pixel-faithful at any viewport size. Only one
   .guide-slide is displayed at a time; guide.js toggles which. */
.guide-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #0a0a09;
}

/* On narrow/portrait screens, a strict 16:9 frame leaves almost no height to
   work with (a 16:9 box at phone width is only ~200px tall) -- break the
   ratio here and give the modal real vertical room instead. The canvas
   itself still scales to the frame's *width* only (see fitCanvas() in
   apply.js, which never crops or distorts it) and is vertically centered in
   whatever extra height this adds, rather than pinned to the top with dead
   space below. */
@media (max-width: 640px) {
  .guide-frame {
    aspect-ratio: auto;
    height: 50vh;
    max-height: 480px;
  }
}

.guide-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  font-family: inherit;
}

/* Sized exactly like the real header logo (Tailwind's h-16 sm:h-[72px]) --
   this lives outside the scaled canvas, so it always matches the header's
   actual on-screen size instead of shrinking/growing with the modal. Only
   shown over the cover slide (toggled in apply.js). */
.guide-cover-logo-real {
  display: none;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  height: 4rem;
  width: auto;
  z-index: 2;
}

@media (min-width: 640px) {
  .guide-cover-logo-real {
    height: 72px;
  }
}

.guide-cover-logo-real.guide-cover-logo-visible {
  display: block;
}

.guide-slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  color: #f2eee4;
  overflow: hidden;
  display: none;
}

.guide-slide.guide-active {
  display: block;
}

.guide-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184, 147, 79, 0.1), transparent 70%);
  pointer-events: none;
}

.guide-logo {
  display: block;
}

.guide-eyebrow {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d3b06b;
}

.guide-cover {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 160px;
}

.guide-cover.guide-active {
  display: flex;
}

.guide-cover-title {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 92px;
  line-height: 1.08;
  margin: 30px 0 0;
  color: #f2eee4;
}

.guide-cover-sub {
  max-width: 980px;
  margin: 44px auto 0;
  font-size: 30px;
  line-height: 1.6;
  color: #a89f8f;
}

.guide-step.guide-active {
  display: block;
}

.guide-step-inner {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 40px;
  gap: 28px;
}

.guide-step-copy {
  flex: 0 0 auto;
  width: 560px;
}

.guide-shot-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

.guide-step-brand {
  /* Extra right offset (vs. a plain 56px) clears the close button, which
     sits in the same top-right corner but at a fixed real-pixel position
     while this logo lives in the scaled 1920px canvas coordinate space. */
  position: absolute;
  top: 50px;
  right: 180px;
  height: 58px;
  z-index: 1;
}

.guide-step-num {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2.5px solid #b8934f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 34px;
  color: #d3b06b;
  background: linear-gradient(155deg, rgba(184, 147, 79, 0.16), transparent);
  margin-bottom: 32px;
}

.guide-step-kicker {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a89f8f;
  margin-bottom: 12px;
}

.guide-step-copy h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 58px;
  margin: 0 0 24px;
  color: #f2eee4;
  line-height: 1.12;
}

.guide-body {
  font-size: 35px;
  line-height: 1.42;
  color: #a89f8f;
  max-width: 540px;
  margin: 0 0 24px;
}

.guide-body strong {
  color: #f2eee4;
  font-weight: 700;
}

.guide-important-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(184, 147, 79, 0.6);
  background: linear-gradient(135deg, rgba(184, 147, 79, 0.22), rgba(184, 147, 79, 0.06));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d3b06b;
}

.guide-tip-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.guide-tip-list li {
  font-size: 29px;
  line-height: 1.38;
  color: #a89f8f;
  padding-left: 36px;
  position: relative;
  margin-bottom: 14px;
  max-width: 540px;
}

.guide-tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b8934f;
}

.guide-shot-col img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 1000px;
  object-fit: contain;
  border-radius: 18px;
  margin: 0 auto;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.75);
}

.guide-dodont.guide-active {
  display: flex;
}

.guide-dodont {
  flex-direction: column;
  padding: 90px 110px 70px;
}

.guide-dodont-head {
  text-align: center;
  margin-bottom: 50px;
}

.guide-dodont-head h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 56px;
  margin: 16px 0 0;
  color: #f2eee4;
}

.guide-dodont-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  flex: 1;
}

.guide-dodont-col {
  border-radius: 26px;
  border: 1.5px solid rgba(184, 147, 79, 0.25);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
}

.guide-do {
  background: linear-gradient(160deg, rgba(184, 147, 79, 0.12) 0%, #16140f 60%);
}

.guide-dont {
  background: linear-gradient(160deg, rgba(150, 60, 50, 0.1) 0%, #16140f 60%);
  border-color: rgba(196, 86, 44, 0.28);
}

.guide-dodont-col h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: 32px;
  margin: 0 0 26px;
}

.guide-do h3 {
  color: #d3b06b;
}

.guide-dont h3 {
  color: #e0876a;
}

.guide-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.guide-do .guide-mark {
  background: rgba(184, 147, 79, 0.18);
  color: #d3b06b;
  border: 1.5px solid #b8934f;
}

.guide-dont .guide-mark {
  background: rgba(196, 86, 44, 0.16);
  color: #e0876a;
  border: 1.5px solid rgba(224, 135, 106, 0.7);
}

.guide-dodont-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-dodont-col li {
  font-size: 25px;
  line-height: 1.42;
  color: #a89f8f;
  padding-left: 30px;
  position: relative;
  margin-bottom: 20px;
}

.guide-dodont-col li:last-child {
  margin-bottom: 0;
}

.guide-do li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #d3b06b;
  font-weight: 700;
}

.guide-dont li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  color: #e0876a;
  font-weight: 700;
}

.guide-dodont-col li strong {
  color: #f2eee4;
  font-weight: 700;
}

.guide-letter.guide-active {
  display: flex;
}

.guide-letter {
  align-items: center;
  justify-content: center;
  padding: 60px 260px;
}

.guide-letter-card {
  border: 1.5px solid rgba(184, 147, 79, 0.25);
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(184, 147, 79, 0.09) 0%, #16140f 55%);
  padding: 80px 120px;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.85);
  text-align: center;
  max-width: 1400px;
}

.guide-letter-card > .guide-logo {
  height: 70px;
  margin: 0 auto 34px;
}

.guide-letter-card h2 {
  font-style: italic;
  font-weight: 800;
  font-size: 64px;
  margin: 0 0 46px;
  color: #f2eee4;
}

.guide-letter-body p {
  font-weight: 400;
  font-size: 29px;
  line-height: 1.65;
  color: #f2eee4;
  max-width: 1080px;
  margin: 0 auto 26px;
}

.guide-signoff {
  margin-top: 46px;
  padding-top: 36px;
  border-top: 1px solid rgba(184, 147, 79, 0.25);
}

.guide-signoff-name {
  font-style: italic;
  font-weight: 700;
  font-size: 34px;
  color: #d3b06b;
}

.guide-signoff-role {
  margin-top: 8px;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a89f8f;
}

/* Nav chevrons + progress row, in the bottom bar under the canvas. */
.guide-nav-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--p-gold);
  background: color-mix(in srgb, var(--p-ground-deep) 65%, transparent);
  color: var(--p-gold);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.guide-nav-btn:hover {
  background: color-mix(in srgb, var(--p-gold) 18%, transparent);
}

.guide-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.guide-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--p-ground);
  border-top: 1px solid var(--p-line);
}

.guide-bottom-bar .guide-dots {
  flex: 1;
  justify-content: center;
}

.guide-bottom-bar .guide-counter {
  flex-shrink: 0;
}

.guide-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.guide-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: var(--p-line);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.guide-dot:hover {
  background: color-mix(in srgb, var(--p-gold) 50%, var(--p-line));
}

.guide-dot.guide-dot-active {
  background: var(--p-gold);
  transform: scale(1.25);
}

.guide-counter {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--p-ink-dim);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .guide-nav-btn {
    width: 2.1rem;
    height: 2.1rem;
  }
}

/* Shared top/bottom padding for the homepage's content sections — a dedicated class instead of
   Tailwind's "py" utilities, since css/tailwind.css is a pre-built, purged file: it only contains
   utility classes that were already in use when it was generated, so introducing a new py-N or
   sm:py-N combination here silently renders as 0px rather than erroring. This one lives in our
   own hand-written stylesheet, so its values are exact and can't go missing. */
.section-pad {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 640px) {
  .section-pad {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Featured country: on mobile show the text above the video (DOM has video first for desktop). */
@media (max-width: 639px) {
  .featured-country-text {
    order: -1;
  }
}

/* Shared card title: one size/weight/colour for every card heading (tailwind.css is a
   pre-built subset, so this lives here rather than as new utility classes). */
.card-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--p-ink);
}

/* Icon + title on one row at the top of a card. */
.card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-head svg {
  flex-shrink: 0;
}

/* Intro / lead paragraph: one size and line-height wherever a section opens with a sentence. */
.intro-text {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.card-head .field-number {
  flex-shrink: 0;
}

/* Final CTA: the three highlights as small centred cards (icon circle, title, text). */
.cta-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  border: 1px solid var(--p-line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--p-gold) 4%, transparent);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.cta-feature:hover {
  border-color: var(--p-gold);
  background: color-mix(in srgb, var(--p-gold) 8%, transparent);
  transform: translateY(-2px);
}
.cta-feature .card-title {
  margin: 0;
}
.cta-feature p {
  margin: 0;
}

/* Final CTA button: idle gold glow pulse + a light sweep, on top of the magnetic hover. */
.cta-apply {
  position: relative;
  overflow: hidden;
  animation: cta-glow 2.4s ease-in-out infinite;
}
.cta-apply::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: cta-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p-gold) 55%, transparent); }
  50% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--p-gold) 45%, transparent); }
}
@keyframes cta-sweep {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-apply,
  .cta-apply::after {
    animation: none;
  }
}