/* ---------- Easy Evite — sky blue brand ---------- */
* { box-sizing: border-box; }
:root {
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;   /* primary — brand accent, backgrounds, artwork */
  /* White text on --sky-500 is 2.77:1, well under the 4.5:1 WCAG AA minimum,
     so anything that puts white ON the blue uses this instead (5.70:1). The
     brand blue itself is unchanged everywhere it isn't carrying text. */
  --btn-primary: #0369A1;
  --btn-primary-hover: #075985;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-900: #0C4A6E;
  --ink: #0B2A45;
  --muted: #4A6F8C;
  --line: #D6ECFB;
  --paper: #ffffff;
  --shadow: 0 18px 40px -22px rgba(2, 132, 199, 0.45);
}

html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--sky-200), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--sky-100), transparent 55%),
    var(--sky-50);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.bg-clouds {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(60px 24px at 10% 20%, rgba(255,255,255,.7), transparent 65%),
    radial-gradient(80px 28px at 30% 18%, rgba(255,255,255,.55), transparent 65%),
    radial-gradient(70px 26px at 75% 30%, rgba(255,255,255,.6), transparent 65%),
    radial-gradient(90px 30px at 88% 12%, rgba(255,255,255,.5), transparent 65%);
}

a { color: var(--sky-700); text-decoration: none; }
a:hover { color: var(--sky-900); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  background: rgba(240, 249, 255, 0.85);
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
@media (min-width: 720px) { .nav { padding: 14px 24px; } }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 18px; text-decoration: none; }
.logo svg { display: block; }
.logo-text { letter-spacing: -.5px; }
.logo-dot { color: var(--sky-500); }
.logo-tag {
  display: inline-block;
  background: var(--sky-100);
  color: var(--sky-700);
  font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: 4px;
  border: 1px solid var(--sky-200);
}
@media (max-width: 380px) { .logo-tag { display: none; } }
.nav-links { display: flex; gap: 14px; font-weight: 500; font-size: 14px; align-items: center; }
.nav-links a { color: var(--sky-700); }
.nav-links .nav-login {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  color: white;
  box-shadow: 0 2px 6px rgba(2,132,199,.35);
}
.nav-links .nav-login:hover { color: white; }
@media (max-width: 540px) {
  /* keep auth state actions visible on mobile but hide marketing anchors */
  .nav-links a[href^="#"] { display: none; }
  .nav-links .muted { display: none; }
}

/* ---------- hero ---------- */
.hero {
  display: grid; gap: 36px;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  max-width: 1120px; margin: 0 auto;
  padding: 64px 24px 24px;
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-art { order: -1; }
}

.badge {
  display: inline-block;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--sky-200);
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05; letter-spacing: -1px;
  margin: 18px 0 14px;
  color: var(--ink);
}
.lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 540px; line-height: 1.55; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn.primary { background: var(--btn-primary); color: white; box-shadow: var(--shadow); }
.btn.primary:hover { background: var(--btn-primary-hover); color: white; }
.btn.primary:active { transform: translateY(1px); }
.btn.ghost { color: var(--sky-700); background: white; border-color: var(--sky-200); }
.btn.ghost:hover { border-color: var(--sky-400); color: var(--sky-900); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- mini envelope ----------
   Layering when closed: back(1) < invite(2) < front cover(3) < flap(6) < seal(7).
   The front cover is a FULL rectangle (seam lines only drawn on), so the
   invite is completely hidden at rest — the envelope reads as sealed.
   On .open: seal pops, flap swings up (and drops behind), then the invite
   rises out of the top slot, and once clear of the cover it jumps to z(8)
   and scales up front-and-center. Confetti fires as it clears. */
.hero-art { display: grid; place-items: center; gap: 14px; }
.env-scene {
  /* Headroom for the invite to rise into without clipping the header. */
  padding-top: min(58vw, 240px);
}
.envelope.mini {
  position: relative;
  width: min(88vw, 430px);
  aspect-ratio: 1.45 / 1;
  perspective: 1200px;
}
.envelope.mini .back {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sky-400), var(--sky-600));
  box-shadow: 0 25px 40px -22px rgba(3, 105, 161, 0.55);
  z-index: 1;
}
.envelope.mini .letter {
  position: absolute;
  left: 50%; top: 7%;
  width: 46%; aspect-ratio: 5 / 7;
  transform: translateX(-50%);
  border-radius: 6px;
  overflow: hidden;
  background: white;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition:
    transform .95s cubic-bezier(.2,.7,.2,1),
    box-shadow .95s ease,
    z-index 0s linear .55s; /* jump forward only once clear of the cover */
}
.envelope.mini .letter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.envelope.mini .front {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--sky-500), var(--sky-300) 55%, var(--sky-500));
  z-index: 3;
  /* Seam lines suggest the pocket without exposing what's inside. */
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px 100%),
    linear-gradient(245deg, rgba(255,255,255,.22) 0 1.5px, transparent 1.5px 100%),
    linear-gradient(180deg, var(--sky-500), var(--sky-300) 55%, var(--sky-500));
  box-shadow: inset 0 2px 4px rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.15);
}
.envelope.mini .flap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 52%;
  background: linear-gradient(180deg, var(--sky-400), var(--sky-500));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 8px 8px 0 0;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  /* Base = closing direction: wait for the invite to tuck back in (.55s)
     before the flap swings shut. Opening overrides these delays below. */
  transition:
    transform .7s cubic-bezier(.45,.05,.2,1) .5s,
    z-index 0s linear .85s;
  z-index: 6;
  backface-visibility: visible;
}
.envelope.mini .seal {
  position: absolute; left: 50%; top: 44%;
  width: 17%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #c33144 0%, #8b1c2b 55%, #5c1019 100%);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(9px, 1.6vw, 12px);
  color: #f6d9dd;
  font-weight: 700; letter-spacing: 1.5px;
  z-index: 7;
  box-shadow: 0 4px 8px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.25);
  /* Base = closing: reappear only after the flap has shut (~1.2s). */
  transition: transform .3s ease 1.2s, opacity .3s ease 1.2s;
}
.envelope.mini .seal::before {
  content: "";
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
}

/* open sequence */
.envelope.mini.open .seal {
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
  opacity: 0;
  transition-delay: 0s, 0s; /* pops immediately on open */
}
.envelope.mini.open .flap {
  transform: rotateX(180deg);
  transition-delay: .15s, .5s;
  z-index: 1; /* once flipped up, it sits behind the rising invite */
}
.envelope.mini.open .letter {
  /* Rises less but scales more: the big card hovers over the envelope's
     upper half rather than floating far above it, so it reads large
     without demanding a skyscraper of headroom. */
  transform: translateX(-50%) translateY(-65%) scale(1.55) rotate(-2deg);
  box-shadow: 0 34px 60px -18px rgba(0,0,0,.5);
  z-index: 8;
  transition-delay: .5s, .5s, 1.05s;
}

/* confetti — fires once the invite clears the envelope */
.envelope.mini .confetti { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.envelope.mini .confetti i {
  position: absolute; left: 50%; top: 20%;
  width: 10px; height: 14px;
  opacity: 0;
  border-radius: 2px;
}
.envelope.mini.open .confetti i { animation: confetti-pop 1.1s cubic-bezier(.2,.6,.3,1) forwards; }
.envelope.mini .confetti i:nth-child(1) { background: #f59e0b; --cx: -120px; --cr: -200deg; animation-delay: .9s !important; }
.envelope.mini .confetti i:nth-child(2) { background: #ec4899; --cx: -75px;  --cr: 160deg;  animation-delay: 1s   !important; }
.envelope.mini .confetti i:nth-child(3) { background: #22c55e; --cx: -30px;  --cr: -140deg; animation-delay: .95s !important; }
.envelope.mini .confetti i:nth-child(4) { background: #0ea5e9; --cx: 25px;   --cr: 220deg;  animation-delay: 1.05s !important; }
.envelope.mini .confetti i:nth-child(5) { background: #a855f7; --cx: 70px;   --cr: -180deg; animation-delay: .92s !important; }
.envelope.mini .confetti i:nth-child(6) { background: #ef4444; --cx: 115px;  --cr: 150deg;  animation-delay: 1.02s !important; }
.envelope.mini .confetti i:nth-child(7) { background: #eab308; --cx: -55px;  --cr: 190deg;  animation-delay: 1.1s !important; }
.envelope.mini .confetti i:nth-child(8) { background: #14b8a6; --cx: 50px;   --cr: -160deg; animation-delay: 1.08s !important; }
@keyframes confetti-pop {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), -220px) rotate(var(--cr)); }
}

/* gentle idle nudge so the sealed envelope invites a tap */
@keyframes env-nudge {
  0%, 100% { transform: translateY(0) rotate(0); }
  6%  { transform: translateY(-4px) rotate(-1deg); }
  12% { transform: translateY(0) rotate(1deg); }
  18% { transform: translateY(-2px) rotate(0); }
}
.envelope.mini:not(.open) { animation: env-nudge 3.2s ease-in-out 1.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .envelope.mini:not(.open) { animation: none; }
  .envelope.mini .letter, .envelope.mini .flap { transition-duration: .01s; }
  .envelope.mini.open .confetti i { animation: none; }
}

.mini-cta {
  appearance: none; border: none; cursor: pointer;
  background: white;
  color: var(--sky-700);
  border: 1px solid var(--sky-200);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(2,132,199,.15);
}
.mini-cta:hover { border-color: var(--sky-400); }

/* ---------- callout ---------- */
.callout {
  margin: 48px auto 0; max-width: 1120px; padding: 0 24px;
}
.callout-inner {
  background: linear-gradient(180deg, var(--sky-500), var(--sky-700));
  color: white;
  padding: 38px 32px; border-radius: 22px;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(3,105,161,.7);
}
.callout h2 { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; }
.callout p { max-width: 640px; margin: 6px auto 22px; opacity: .95; line-height: 1.55; }
.checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  text-align: left;
  max-width: 720px; margin: 0 auto;
}
.checks li {
  position: relative;
  padding-left: 28px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 12px 10px 36px;
  font-weight: 600;
}
.checks li::before {
  content: ""; position: absolute;
  left: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2.5px solid white; border-bottom: 2.5px solid white;
  margin-top: -3px;
  /* checkmark */
}
.checks li::after {
  content: "";
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  z-index: -1;
}

/* ---------- how ---------- */
.how { max-width: 1120px; margin: 64px auto 24px; padding: 0 24px; }
.how h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; margin: 0 0 24px; text-align: center; }
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.steps li {
  background: white; border-radius: 16px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -22px rgba(2,132,199,.4);
}
.step-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--sky-100); color: var(--sky-700);
  font-weight: 800; font-size: 15px;
  margin-bottom: 10px;
}
.steps h3 { margin: 4px 0 6px; font-size: 17px; }
.steps p { color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 56px auto 24px; padding: 0 24px; }
.faq h2 { text-align: center; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.5px; margin: 0 0 18px; }
.faq details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq details[open] { border-color: var(--sky-300); }
.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--sky-500); font-weight: 700; font-size: 20px;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 18px 14px; color: var(--muted); line-height: 1.55; }

/* ---------- final ---------- */
.cta-final {
  text-align: center;
  padding: 52px 24px 28px;
}
.big { font-size: clamp(20px, 3vw, 26px); margin: 0 0 4px; font-weight: 700; }

/* ---------- footer ---------- */
.footer { padding: 28px 24px 36px; }
.footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 14px;
  gap: 12px; flex-wrap: wrap;
}
.footer-inner a { color: var(--sky-700); text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner .sep { color: var(--line); margin: 0 6px; }
@media (max-width: 480px) { .footer-inner { flex-direction: column; gap: 4px; } }

/* Narrow phones: the header holds a logo, a language <select> populated with
   98 languages, and an auth button. Below ~430px those don't fit on one line
   and the whole page picks up a horizontal scrollbar. Let the header wrap and
   bound the select, rather than clipping the page. */
@media (max-width: 430px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-links { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .nav-links select { max-width: 104px; min-width: 0; }
  .logo-tag { display: none; }
}
/* Belt and braces: decorative background art must never widen the document.
   `clip` rather than `hidden` so no scroll container is created (that breaks
   vertical scrolling — see rsvp.css). */
body { overflow-x: clip; }

/* ---- dashboard create modal: kind choice + theme swatches (V2 §8.3) ----
   The dashboard loads landing.css + app.css only, so the quick-event-page
   UI is styled here rather than in event-v2.css. */
.kind-choice { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A class-level `display` beats the UA [hidden] rule, so restate it — same
   trick app.css uses for .modal[hidden]. */
.kind-choice[hidden], .grid-form[hidden] { display: none; }
.kind-option {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  min-width: 0; padding: 16px 14px; cursor: pointer;
  background: white; border: 2px solid var(--line); border-radius: 14px;
  font: inherit; color: var(--ink);
}
.kind-option:hover { border-color: var(--sky-400); background: var(--sky-50); }
.kind-option:focus-visible { outline: 2px solid var(--sky-600); outline-offset: 2px; }
.kind-emoji { font-size: 26px; line-height: 1.1; }
.kind-name { font-size: 15px; font-weight: 700; }
.kind-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 480px) { .kind-choice { grid-template-columns: 1fr; } }

.ee-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ee-swatch {
  display: grid; gap: 5px; min-width: 0; padding: 6px;
  background: white; border: 2px solid var(--line); border-radius: 10px;
  cursor: pointer; font: inherit; text-align: left;
}
.ee-swatch:hover { border-color: var(--sky-300); }
.ee-swatch:focus-visible { outline: 2px solid var(--sky-600); outline-offset: 2px; }
.ee-swatch[aria-checked="true"] { border-color: var(--sky-600); box-shadow: 0 2px 8px -3px rgba(2,132,199,.6); }
.ee-swatch-chip { display: block; height: 38px; border-radius: 7px; background: var(--sky-100); }
.ee-swatch-label { font-size: 11.5px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.ee-swatch[data-theme="confetti-blue"]  .ee-swatch-chip { background: linear-gradient(135deg,#0EA5E9,#38BDF8 55%,#BAE6FD); }
.ee-swatch[data-theme="sunset-warm"]    .ee-swatch-chip { background: linear-gradient(135deg,#F97316,#FB7185 60%,#FDE68A); }
.ee-swatch[data-theme="forest-calm"]    .ee-swatch-chip { background: linear-gradient(135deg,#166534,#22C55E 60%,#BBF7D0); }
.ee-swatch[data-theme="mono-ink"]       .ee-swatch-chip { background: linear-gradient(135deg,#0F172A,#475569 60%,#CBD5E1); }
.ee-swatch[data-theme="blush-bloom"]    .ee-swatch-chip { background: linear-gradient(135deg,#DB2777,#F472B6 55%,#FBCFE8); }
.ee-swatch[data-theme="midnight-stars"] .ee-swatch-chip { background: linear-gradient(135deg,#1E1B4B,#4338CA 60%,#A5B4FC); }
.ee-swatch[data-theme="citrus-pop"]     .ee-swatch-chip { background: linear-gradient(135deg,#CA8A04,#FACC15 55%,#FEF08A); }
.ee-swatch[data-theme="ocean-mist"]     .ee-swatch-chip { background: linear-gradient(135deg,#0E7490,#22D3EE 60%,#CFFAFE); }
.ee-swatch[data-theme="lavender-haze"]  .ee-swatch-chip { background: linear-gradient(135deg,#7C3AED,#A78BFA 60%,#EDE9FE); }
.ee-swatch[data-theme="autumn-spice"]   .ee-swatch-chip { background: linear-gradient(135deg,#9A3412,#EA580C 60%,#FED7AA); }
.ee-swatch[data-theme="mint-fresh"]     .ee-swatch-chip { background: linear-gradient(135deg,#0F766E,#2DD4BF 60%,#CCFBF1); }
.ee-swatch[data-theme="birthday-bash"]  .ee-swatch-chip { background: linear-gradient(135deg,#DB2777,#F59E0B 45%,#3B82F6); }
@media (max-width: 420px) {
  .ee-swatches { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}