/* ============================================================
   My Vacation Story — Brand UI System
   v1.0 · production-ready · drop into any page
   Requires Google Fonts: Playfair Display, Inter, Great Vibes
   ============================================================ */

:root{
  /* Core palette */
  --teal:        #14B8C4;
  --teal-2:      #1FD3D9;
  --teal-deep:   #0E7A86;
  --coral:       #FF6B47;
  --coral-soft:  #FF8A6F;
  --cream:       #FFF4DC;
  --cream-warm:  #FFFAE8;
  --ink:         #0F3D4A;
  --sand:        #FFE8AC;

  /* Semantic */
  --bg:           var(--cream);
  --bg-elev:      #FFFFFF;
  --bg-dark:      var(--teal);
  --text:         var(--ink);
  --text-on-dark: var(--cream);
  --text-muted:   rgba(15,61,74,0.65);
  --text-dim:     rgba(255,244,220,0.88);
  --border:       rgba(20,184,196,0.16);
  --border-warm:  rgba(255,107,71,0.55);

  /* Typography */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-accent:  'Great Vibes', cursive;

  /* Radius / shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-soft: 0 16px 36px -18px rgba(15,61,74,0.25);
  --shadow-card: 0 28px 56px -28px rgba(15,61,74,0.35);
  --shadow-warm: 0 14px 30px -14px rgba(255,107,71,0.45);
}

/* ───── Base ───── */
.mvs-body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ───── Sections ───── */
.mvs-section{ padding:96px 48px; }
.mvs-section--cream { background:var(--cream); color:var(--ink); }
.mvs-section--dark  { background:var(--teal);  color:var(--text-on-dark); }
.mvs-section--deep  {
  background:linear-gradient(180deg,var(--teal-deep),var(--teal));
  color:var(--text-on-dark);
}
.mvs-section--coral { background:var(--coral); color:#fff; }

.mvs-container{ max-width:1240px; margin:0 auto; }

/* ───── Type ───── */
.mvs-eyebrow{
  font-family:var(--font-accent);
  color:var(--coral);
  font-size:36px;line-height:1;margin:0 0 6px;
}
.mvs-display{
  font-family:var(--font-display);
  font-weight:500;letter-spacing:-0.5px;
  font-size:clamp(40px, 5vw, 72px); line-height:1.05; margin:0 0 16px;
}
.mvs-display i{ color:var(--coral); font-weight:500 }
.mvs-h2{
  font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3vw,42px);
  letter-spacing:-0.3px;line-height:1.15;margin:0 0 12px;
}
.mvs-lead{
  font-family:var(--font-body);font-size:18px;line-height:1.6;
  color:var(--text-muted);max-width:60ch;margin:0 0 24px;
}
.mvs-lead--on-dark{ color:var(--text-dim); }
.mvs-micro{
  font-family:var(--font-body);font-size:12px;letter-spacing:5px;
  text-transform:uppercase;color:var(--coral);font-weight:600;
}

/* ───── Buttons ───── */
.mvs-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;
  font-size:14px;letter-spacing:2.5px;text-transform:uppercase;
  padding:18px 28px;
  border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.mvs-btn:hover{ transform:translateY(-1px); }
.mvs-btn:active{ transform:translateY(0); }

.mvs-btn-primary{
  background:var(--coral); color:#fff;
  box-shadow:var(--shadow-warm);
}
.mvs-btn-primary:hover{ background:var(--coral-soft); color:#fff; }

.mvs-btn-secondary{
  background:transparent; color:var(--cream);
  border-color:rgba(255,244,220,0.65);
}
.mvs-btn-secondary:hover{ border-color:var(--coral); color:var(--coral); }

.mvs-btn-on-cream{
  background:var(--teal); color:var(--cream);
}
.mvs-btn-on-cream:hover{ background:var(--teal-2); }

.mvs-btn-ghost{
  background:transparent; color:var(--cream);
  padding:12px 18px;font-size:12px;letter-spacing:3px;
  border:1px solid rgba(255,244,220,0.25);
}
.mvs-btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }

.mvs-btn-sm{ padding:12px 18px; font-size:12px; letter-spacing:2px }
.mvs-btn-lg{ padding:22px 36px; font-size:15px; letter-spacing:3px }

/* ───── Cards ───── */
.mvs-card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, border-color .2s ease;
}
.mvs-card:hover{ transform:translateY(-2px); border-color:var(--border-warm); }

.mvs-card--postcard{
  background:var(--cream-warm);
  border:1px solid var(--sand);
  position:relative;
  padding-top:42px;
}
.mvs-card--postcard::before{
  content:"";position:absolute;top:14px;left:14px;right:14px;height:18px;
  background:repeating-linear-gradient(45deg,var(--coral) 0 8px,transparent 8px 16px,var(--teal) 16px 24px,transparent 24px 32px);
  opacity:0.5;border-radius:6px;
}

.mvs-card--dark{
  background:var(--teal-deep); border:1px solid rgba(255,244,220,0.10);
  color:var(--cream);
}

.mvs-card .mvs-card-eyebrow{
  font-size:11px;letter-spacing:5px;color:var(--coral);text-transform:uppercase;margin-bottom:14px;font-weight:600;
}
.mvs-card .mvs-card-title{
  font-family:var(--font-display);font-size:22px;line-height:1.25;margin:0 0 10px;
}
.mvs-card .mvs-card-body{
  font-size:14px;line-height:1.55;color:var(--text-muted);
}
.mvs-card--dark .mvs-card-body{ color:var(--text-dim); }

/* ───── Form ───── */
.mvs-input{
  width:100%;box-sizing:border-box;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:16px 18px;
  color:var(--ink);font-family:var(--font-body);font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mvs-input::placeholder{ color:rgba(15,61,74,0.4); }
.mvs-input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,107,71,0.15); }

/* ───── Chip / Stamp ───── */
.mvs-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--border-warm);
  font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--coral);
  background:rgba(255,107,71,0.08);font-weight:600;
}
.mvs-chip .mvs-dot{width:6px;height:6px;border-radius:50%;background:var(--coral)}

.mvs-stamp{
  display:inline-flex;align-items:center;justify-content:center;
  width:88px;height:88px;border-radius:50%;
  border:2px dashed var(--coral);
  font-family:var(--font-accent);color:var(--coral);font-size:28px;
  transform:rotate(-8deg);
}

/* ───── Divider ───── */
.mvs-rule{
  height:1px;background:linear-gradient(90deg,transparent,var(--border-warm),transparent);
  border:0;margin:24px 0;
}

/* ───── Layout helpers ───── */
.mvs-stack-sm > * + *{margin-top:8px}
.mvs-stack-md > * + *{margin-top:16px}
.mvs-stack-lg > * + *{margin-top:32px}

.mvs-grid-3{ display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.mvs-grid-2{ display:grid;grid-template-columns:repeat(2,1fr);gap:28px; }
@media (max-width:860px){
  .mvs-grid-3,.mvs-grid-2{grid-template-columns:1fr}
  .mvs-section{padding:64px 24px}
}

/* ───── Page-specific overrides ───── */

/* Base page reset */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Sticky nav */
.mvs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px;
  box-shadow: 0 2px 16px rgba(15,61,74,0.25);
}
.mvs-nav-logo { display: flex; align-items: center; }
.mvs-nav-logo img { height: 96px; width: auto; }

@media (max-width: 640px) {
  .mvs-nav { padding: 14px 20px; }
}

/* Hero section */
.mvs-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,107,71,0.35), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(255,244,220,0.06), transparent 50%),
    linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 100%);
  color: var(--cream);
  padding: 80px 48px 96px;
  text-align: center;
}
.mvs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,244,220,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,244,220,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
}
.mvs-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
.mvs-hero .mvs-display { color: var(--cream); }
.mvs-cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }

@media (max-width: 640px) {
  .mvs-hero { padding: 56px 24px 72px; }
}

/* How it works — step cards */
.mvs-step-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 12px;
}
.mvs-step-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink);
}
.mvs-step-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.mvs-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

/* Waitlist form wrapper */
.mvs-form-wrapper {
  max-width: 480px;
  margin: 0 auto;
}
.mvs-form-wrapper .mvs-input {
  margin-bottom: 16px;
}
.mvs-form-wrapper .mvs-btn {
  width: 100%;
  justify-content: center;
}
.mvs-input[aria-invalid="true"] {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255,107,71,0.15);
}

/* Success / error message states */
.mvs-form-success {
  text-align: center;
  padding: 32px 24px;
}
.mvs-form-success h3 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--cream);
  margin: 0 0 12px;
}
.mvs-form-success p {
  color: var(--text-dim);
  margin: 0;
  font-size: 16px;
}
.mvs-form-error {
  color: var(--coral-soft);
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
}

/* Footer */
.mvs-footer {
  background: var(--ink);
  color: var(--text-dim);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.mvs-footer img { height: 36px; width: auto; }
.mvs-footer-copy {
  font-size: 13px;
  color: rgba(255,244,220,0.70);
}
.mvs-footer-links { display: flex; gap: 24px; }
.mvs-footer-links a {
  color: rgba(255,244,220,0.80);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
}
.mvs-footer-links a:hover { color: var(--coral); }

/* Legal pages (privacy.html, terms.html) */
.mvs-legal-body { background: var(--cream); }
.mvs-legal-content {
  max-width: 720px;
  margin: 64px auto;
  padding: 0 32px;
  line-height: 1.8;
  color: var(--ink);
}
.mvs-legal-content h1 {
  font-family: var(--font-display);
  font-size: 36px;
  margin-bottom: 8px;
}
.mvs-legal-content .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 40px;
}
.mvs-legal-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 8px;
}
.mvs-legal-content p, .mvs-legal-content li {
  font-size: 15px;
  color: var(--text-muted);
}

/* Light nav variant for legal pages */
.mvs-nav--light {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.mvs-nav--light img { /* use primary logo on cream bg */ }