/* Vavella — coming soon.
   Palette and type lifted from the PWA (artifacts/vavela/app/globals.css):
   ground #1C0D14, accent #C9956A, surface #2A1020, border #3D1A2C,
   muted copy #D4B8C0, Inter for text and Pinyon Script for the wordmark.
   The hero, marquee and steps mirror pages-src/home.tsx.

   Everything is sized to fit one viewport with no scrolling. Sizes are
   clamped against BOTH axes — `min(Nvw, Nvh)` — because width alone gets a
   short laptop or a landscape phone wrong: the page has to shrink when the
   viewport is short, not only when it is narrow. */

:root {
  --ground: #1c0d14;
  --accent: #c9956a;
  --accent-bright: #e8b88a;
  --surface: #2a1020;
  --border: #3d1a2c;
  --text: #fafafa;
  --muted: #d4b8c0;
  --muted-dim: #a68a94;
  --muted-faint: #8a6a74;

  /* The single vertical rhythm unit. Everything that separates one block
     from the next is derived from it, so the whole stack compresses together
     as the viewport gets shorter. */
  --gap: clamp(0.5rem, 2vh, 1.5rem);
}

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

html {
  font-size: clamp(12px, min(0.28vw + 12.5px, 2.05vh), 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  color: var(--text);
  /* Flat brand plum, matching the app. The PWA's body sets a black-to-magenta
     bg.webp, but components/Layout.tsx wraps every page in an opaque
     bg-[#1C0D14] at min-h-screen, so that image is never actually seen — the
     home page ground is this single colour. Over it, a ramp to solid black at
     the foot of the page. */
  background-color: var(--ground);
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 42%,
    rgba(0, 0, 0, 0.45) 70%,
    rgba(0, 0, 0, 0.8) 88%,
    #000 100%
  );
  background-repeat: no-repeat;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* A single warm pool of light behind the wordmark, echoing the app icon.
   Anchored to the first viewport rather than fixed, so it does not drift over
   the black foot of the page. */
.glow {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
  pointer-events: none;
  background: radial-gradient(
    44ch 44ch at 50% 30%,
    rgba(201, 149, 106, 0.08),
    rgba(201, 149, 106, 0.025) 45%,
    transparent 70%
  );
}

/* No inline padding here — the marquee needs to run edge to edge, so each
   section gutters itself instead. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  min-height: 100svh;
  padding: clamp(0.9rem, 3vh, 2.25rem) 0
    calc(clamp(0.9rem, 2.5vh, 1.75rem) + env(safe-area-inset-bottom));
  text-align: center;
}

.brand,
.hero,
.steps,
.pitch,
.signup,
.foot {
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

/* ---------- Brand ---------- */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mark {
  width: clamp(40px, min(9vw, 6.5vh), 78px);
  height: auto;
  border-radius: 22%;
  border: 1px solid rgba(201, 149, 106, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.wordmark {
  margin: clamp(0.35rem, 1.2vh, 0.9rem) 0 0;
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-size: clamp(2.4rem, min(13vw, 7.2vh), 5.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(
    170deg,
    var(--accent-bright) 0%,
    var(--accent) 48%,
    #a9754c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for engines that ignore background-clip: text */
  -webkit-text-fill-color: transparent;
  padding: 0 0.08em 0.06em;
}

.eyebrow {
  margin: clamp(0.3rem, 1vh, 0.75rem) 0 0;
  font-size: clamp(0.56rem, min(1.4vw, 1.5vh), 0.72rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.rule {
  width: min(150px, 34vw);
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 149, 106, 0.55),
    transparent
  );
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.9vh, 0.6rem);
  width: 100%;
  max-width: min(92vw, 62rem);
}

.kicker {
  margin: 0;
  font-size: clamp(0.58rem, min(1.45vw, 1.55vh), 0.82rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--accent);
}

.hero-title {
  margin: 0;
  font-size: clamp(1.85rem, min(6.4vw, 6vh), 4.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.65);
}

.hero-sub {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(0.85rem, min(2vw, 2vh), 1.1rem);
  color: var(--muted);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- Marquee ---------- */

.marquee {
  width: 100%;
  overflow: hidden;
  padding-block: clamp(0.35rem, 1.1vh, 0.7rem);
  background: rgba(0, 0, 0, 0.4);
  border-block: 1px solid rgba(61, 26, 44, 0.5);
  backdrop-filter: blur(4px);
  /* Feather both ends so items enter and leave instead of being chopped. */
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-set {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  list-style: none;
}

.tag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-size: clamp(0.58rem, min(1.35vw, 1.5vh), 0.78rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

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

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee 28s linear infinite;
  }
}

/* ---------- 3 simple steps ---------- */

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.9vh, 0.6rem);
  max-width: 100%;
}

.steps-label {
  margin: 0;
  font-size: clamp(0.54rem, min(1.3vw, 1.4vh), 0.7rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-faint);
}

.steps-pill {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1.2vw, 0.75rem);
  max-width: 100%;
  margin: 0;
  padding: clamp(0.3rem, 1vh, 0.6rem) clamp(0.65rem, 2vw, 1.3rem);
  list-style: none;
  border: 1px solid rgba(201, 149, 106, 0.3);
  border-radius: 999px;
  background: rgba(28, 13, 20, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(201, 149, 106, 0.15);
}

.steps-pill li {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1vw, 0.5rem);
  white-space: nowrap;
}

.steps-pill .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(1.1rem, 2.9vh, 1.55rem);
  height: clamp(1.1rem, 2.9vh, 1.55rem);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ground);
  font-size: clamp(0.58rem, 1.5vh, 0.78rem);
  font-weight: 700;
}

.steps-pill .step-name {
  font-size: clamp(0.7rem, min(1.6vw, 1.75vh), 0.92rem);
  font-weight: 500;
  color: var(--muted);
}

.steps-pill .sep {
  flex: none;
  width: clamp(0.4rem, 1.2vw, 1rem);
  height: 1px;
  background: var(--border);
}

/* ---------- Pitch ---------- */

.pitch {
  max-width: 44ch;
}

.headline {
  margin: 0;
  font-size: clamp(1.05rem, min(2.4vw, 2.7vh), 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lede {
  margin: clamp(0.35rem, 1.2vh, 0.9rem) 0 0;
  font-size: clamp(0.78rem, min(1.7vw, 1.85vh), 1.02rem);
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Signup ---------- */

.signup {
  width: 100%;
  max-width: 32rem;
}

.signup-heading {
  margin: 0 0 clamp(0.35rem, 1.2vh, 0.85rem);
  font-size: clamp(0.56rem, min(1.3vw, 1.4vh), 0.74rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.form {
  margin: 0;
}

.field {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: rgba(42, 16, 32, 0.6);
  backdrop-filter: blur(8px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field:focus-within {
  border-color: rgba(201, 149, 106, 0.7);
  box-shadow: 0 0 0 4px rgba(201, 149, 106, 0.14);
}

.field input {
  flex: 1;
  min-width: 0;
  padding: clamp(0.5rem, 1.5vh, 0.8rem) 0.85rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-weight: inherit;
  /* Never below 16px: iOS Safari zooms the page when a smaller field is
     focused, and the zoom does not come back on blur. */
  font-size: max(16px, 1rem);
}

.field input::placeholder {
  color: var(--muted-dim);
}

.field input:focus {
  outline: none;
}

.field button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 6.75rem;
  padding: clamp(0.5rem, 1.5vh, 0.8rem) clamp(0.9rem, 2.5vw, 1.4rem);
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--ground);
  font-family: inherit;
  font-size: clamp(0.85rem, min(1.7vw, 1.9vh), 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease,
    opacity 160ms ease;
}

.field button:hover:not(:disabled) {
  background: var(--accent-bright);
}

.field button:active:not(:disabled) {
  transform: scale(0.98);
}

.field button:disabled {
  cursor: default;
  opacity: 0.7;
}

.field button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* The spinner replaces the label only while a request is in flight. */
.spinner {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
}

.spinner circle {
  stroke-dasharray: 42;
  stroke-dashoffset: 32;
}

.is-busy .label {
  display: none;
}

.is-busy .spinner {
  display: block;
  animation: spin 750ms linear infinite;
}

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

.who {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: clamp(0.4rem, 1.3vh, 0.85rem) 0 0;
  padding: 0;
  border: 0;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: clamp(0.3rem, 0.9vh, 0.5rem) clamp(0.6rem, 2vw, 1rem);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: clamp(0.7rem, min(1.6vw, 1.7vh), 0.86rem);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease,
    background-color 160ms ease;
}

.chip:hover span {
  border-color: rgba(201, 149, 106, 0.45);
  color: var(--text);
}

.chip input:checked + span {
  border-color: rgba(201, 149, 106, 0.75);
  background: rgba(201, 149, 106, 0.12);
  color: var(--accent);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.status {
  min-height: 1.2rem;
  margin: clamp(0.4rem, 1.3vh, 0.85rem) 0 0;
  font-size: clamp(0.74rem, min(1.6vw, 1.75vh), 0.9rem);
  line-height: 1.4;
  color: var(--muted);
}

.status.is-error {
  color: #f3a4a4;
}

.status.is-done {
  color: var(--accent);
}

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(0.7rem, min(1.5vw, 1.65vh), 0.85rem);
  color: var(--muted-dim);
}

.contact {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 184, 192, 0.28);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact:hover {
  color: var(--accent);
  border-color: rgba(201, 149, 106, 0.6);
}

.dot {
  opacity: 0.5;
}

/* ---------- Utilities ---------- */

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Fitting one viewport ---------- */

/* The hairline rule is decoration; it is the first thing to go when vertical
   room is tight. */
@media (max-height: 760px) {
  .rule {
    display: none;
  }
}

/* Landscape phones are wide but very short. Sit the brand beside the hero so
   the stack loses one whole block of height, and drop the wordmark's own
   glow-heavy spacing. */
@media (max-height: 520px) and (orientation: landscape) {
  .stage {
    justify-content: space-evenly;
    gap: clamp(0.35rem, 1.2vh, 0.75rem);
  }

  .brand {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .mark {
    width: clamp(32px, 8vh, 48px);
  }

  .wordmark {
    margin: 0;
    font-size: clamp(2rem, 9vh, 3.25rem);
  }

  .eyebrow {
    display: none;
  }

  .pitch .lede {
    display: none;
  }
}

/* Narrow phones: the steps pill and the send button are the two things that
   run out of horizontal room first. */
@media (max-width: 430px) {
  .field {
    flex-direction: column;
  }

  .field button {
    width: 100%;
  }
}

@media (max-width: 340px) {
  .steps-pill .step-name {
    font-size: 0.68rem;
  }

  .chip span {
    font-size: 0.7rem;
  }
}