/* MeetAlong - bright + fun + inviting theme (default).
 * White background, coral/peach primary, mint + sunshine accents, soft
 * pastel cards, generous rounded corners. Body text keeps high-contrast
 * dark grey for legibility.
 */
:root{
  --bg: #fffaf5;            /* warm off-white instead of stark #fff */
  --bg-soft: #fff3e6;       /* peach wash for highlight bands */
  --panel: #ffffff;         /* card surface */
  --panel-soft: #fff6ec;    /* alt card surface */
  --border: #f1e3d3;
  --border-strong: #e8d4be;
  --fg: #1a1322;            /* almost black with a hint of plum */
  --fg-soft: #2a2236;
  --muted: #6b6376;
  --primary: #ff6b9d;       /* coral pink - the "hello" color */
  --primary-deep: #e63979;  /* hover / pressed */
  --mint: #34d399;          /* fresh / live */
  --sunshine: #fbbf24;      /* highlight yellow */
  --sky: #38bdf8;           /* secondary CTA */
  --lavender: #c4b5fd;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Subtle confetti-blob background sitting behind the hero - keeps the
 * page from feeling sterile while the content area stays clean white. */
body{
  background-image:
    radial-gradient(900px 500px at 95% -10%, rgba(255,107,157,.18), transparent 65%),
    radial-gradient(700px 420px at -10% 0%, rgba(56,189,248,.12), transparent 65%),
    radial-gradient(900px 500px at 50% 110%, rgba(52,211,153,.10), transparent 65%);
  background-attachment: fixed;
}
a{color:var(--primary-deep);text-decoration:none}
a:hover{text-decoration:underline;color:var(--primary)}

.container{max-width:760px;margin:0 auto;padding:42px 22px 64px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:-.01em;font-size:20px;
  color:var(--fg);
}
.brand-mark{
  width:30px;height:30px;border-radius:50% 50% 50% 12%;
  background:linear-gradient(135deg,var(--primary),var(--sunshine) 55%,var(--mint));
  display:inline-block;
  box-shadow:0 4px 14px rgba(255,107,157,.35);
  transform:rotate(-8deg);
}

.pill{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:linear-gradient(135deg,#ffe4ec,#fff3e6);
  border:1px solid var(--border-strong);
  color:var(--primary-deep);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:18px;
  box-shadow:0 2px 8px rgba(255,107,157,.10);
}
h1{
  font-size:clamp(34px,6.2vw,60px);
  line-height:1.05;margin:0 0 20px;letter-spacing:-.02em;font-weight:800;
}
.lead{
  font-size:19px;color:var(--fg-soft);max-width:600px;margin-bottom:34px;line-height:1.55;
}

form#wait{display:flex;gap:8px;flex-wrap:wrap;max-width:560px;margin-bottom:14px}
form#wait input{
  flex:1;min-width:200px;padding:14px 16px;border-radius:14px;
  border:1.5px solid var(--border-strong);background:var(--panel);color:var(--fg);
  font-size:15px;font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
form#wait input::placeholder{color:var(--muted)}
form#wait input:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,107,157,.20);
}
form#wait button{
  padding:14px 24px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  color:#fff;font-size:15px;font-weight:700;font-family:inherit;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(255,107,157,.35);
  transition:transform .12s, box-shadow .12s;
}
form#wait button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(255,107,157,.45);
}
form#wait button:active{transform:translateY(0)}
.small{font-size:13px;color:var(--muted)}
.ok{color:#16a34a}
.err{color:#e11d48}

section{margin:60px 0}
h2{
  font-size:26px;margin:0 0 18px;letter-spacing:-.01em;font-weight:800;
  display:flex;align-items:center;gap:10px;
}
h2::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--sunshine);box-shadow:0 0 0 4px rgba(251,191,36,.25);
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{
  position:relative;
  padding:22px 22px 20px;
  border:1.5px solid var(--border);
  border-radius:18px;background:var(--panel);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.step:hover{
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:0 10px 24px rgba(26,19,34,.06);
}
/* Tint each card a different pastel for personality. */
.step:nth-child(4n+1){background:linear-gradient(180deg,#fff8f3,#ffffff)}
.step:nth-child(4n+2){background:linear-gradient(180deg,#f0fdf4,#ffffff)}
.step:nth-child(4n+3){background:linear-gradient(180deg,#eff6ff,#ffffff)}
.step:nth-child(4n+4){background:linear-gradient(180deg,#fdf2f8,#ffffff)}
.step .num{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:8px;color:var(--primary-deep);
}
.step h3{margin:0 0 8px;font-size:17px;color:var(--fg);font-weight:700}
.step p{margin:0;color:var(--fg-soft);font-size:14px;line-height:1.55}

.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.promise{
  padding:16px 18px;
  border:1.5px solid var(--border);
  border-radius:14px;background:var(--panel-soft);
  font-size:14px;color:var(--fg-soft);line-height:1.55;
}
.promise b{color:var(--fg);font-weight:800}

footer{
  margin-top:80px;padding-top:28px;
  border-top:1.5px dashed var(--border-strong);
  font-size:13px;color:var(--muted);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* Reusable highlight - the pink/sunshine/mint hero gradient */
.hl{
  background:linear-gradient(135deg,var(--primary) 10%,var(--sunshine) 55%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}

/* Optional dark-theme swap. Add <body data-theme="dark"> to flip back to
 * the original palette without re-deploying. The full original styles live
 * in styles.dark.css if anyone wants to link that file directly. */
body[data-theme="dark"]{
  background:#0b0d12; color:#e9edf6;
  background-image:none;
}
body[data-theme="dark"] .brand{color:#e9edf6}
body[data-theme="dark"] .pill{
  background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.35);color:#22d3ee;
  box-shadow:none;
}
body[data-theme="dark"] .lead,
body[data-theme="dark"] .step p,
body[data-theme="dark"] .promise{color:#8a93a6}
body[data-theme="dark"] .step,
body[data-theme="dark"] .promise{
  background:#11141b;border-color:#1f2530;
}
body[data-theme="dark"] form#wait input{
  background:#11141b;color:#e9edf6;border-color:#1f2530;
}
body[data-theme="dark"] form#wait button{
  background:#e9edf6;color:#0b0d12;box-shadow:none;
}
body[data-theme="dark"] footer{border-top-color:#1f2530}