/* Actually — PRE-LAUNCH TEASER styles. Light-only by design (launch decision
   2026-07-14: the light Verdant scheme is the brand look; no dark remap here).
   Tokens mirror DESIGN_MASTER_DOC §4 and the post-launch site
   (../actually_web_postlaunch/css/styles.css). No build step; strict-CSP safe
   (no inline styles anywhere). */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --primary:         #149E63;
  --primary-deep:    #0E7A4D;
  --primary-tint:    #DCF3E9;
  --bg:              #F6F8F7;
  --surface:         #FFFFFF;
  --surface-variant: #EEF2F0;
  --outline:         #D9E2DD;
  --text-primary:    #10241B;
  --text-secondary:  #5B6B63;
  --accent-match:    #DB4D9D;
  --accent-gold:     #E8B931;
  --negative:        #C63D3D;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 36, 27, 0.08);
}

/* ---- Fonts (self-hosted; OFL in assets/fonts/) --------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: var(--primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

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

/* ---- Drifting blobs (the "fancy") ---------------------------------------
   Big soft radial tints floating behind everything. Purely decorative:
   fixed, no pointer events, parked still under reduced motion. */
.blob {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.blob-green {
  width: 55vmax; height: 55vmax;
  left: -18vmax; top: -22vmax;
  background: radial-gradient(circle at 35% 35%, var(--primary-tint), transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.blob-pink {
  width: 42vmax; height: 42vmax;
  right: -16vmax; top: 24vh;
  background: radial-gradient(circle at 60% 40%, rgba(219, 77, 157, 0.16), transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.blob-gold {
  width: 34vmax; height: 34vmax;
  left: 8vmax; bottom: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(232, 185, 49, 0.14), transparent 65%);
  animation: drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(6vmax, 5vmax) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-5vmax, -4vmax) scale(1.12); } }
@keyframes drift-c { to { transform: translate(4vmax, -6vmax) scale(1.05); } }

/* ---- Header ---------------------------------------------------------------- */
.site-header {
  padding: var(--sp-4) var(--sp-5);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.wordmark-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}

/* ---- Teaser hero ------------------------------------------------------------ */
.tease {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  gap: var(--sp-4);
}

.mascot {
  width: clamp(180px, 32vw, 280px);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(16, 36, 27, 0.16));
  animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

.tagline {
  font-size: clamp(1.75rem, 5.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 17ch;
  min-height: 2.4em; /* rotation never reflows the page */
  display: flex; align-items: center; justify-content: center;
}
.tagline em, .tagline .tagline-rotator em {
  font-style: normal;
  color: var(--primary);
}
.tagline-rotator {
  display: inline-block;
  transition: opacity 480ms ease, transform 480ms ease;
}
.tagline-rotator.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.mystery {
  max-width: 34rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}
.mystery strong { color: var(--text-primary); }

/* ---- Waitlist ------------------------------------------------------------ */
.waitlist { width: 100%; max-width: 34rem; }

.waitlist-form {
  display: flex;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: calc(var(--radius) + 6px);
  padding: var(--sp-2);
  box-shadow: var(--shadow);
}
.waitlist-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3);
  outline-offset: 2px;
}
.waitlist-form input[type="email"]:focus-visible { outline: 2px solid var(--primary); border-radius: 8px; }
.waitlist-form input.input-error { outline: 2px solid var(--negative); border-radius: 8px; }

.btn {
  font: inherit; font-weight: 600;
  border: 0; cursor: pointer;
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  transition: transform 160ms ease, background 160ms ease;
}
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.7; cursor: default; transform: none; }

.form-hint {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.form-hint a { font-weight: 600; }

/* Honeypot: off-screen (not display:none, which bots skip). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Footer ----------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--outline);
  color: var(--text-secondary);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.footer-links { display: flex; gap: var(--sp-4); }
.footer-links a { color: var(--text-secondary); }
.footer-links a:hover { color: var(--text-primary); }

/* ---- Toasts (same vocabulary as the full site) ---------------------------- */
.toast-region {
  position: fixed;
  bottom: var(--sp-4); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 50;
  width: min(92vw, 26rem);
}
.toast {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow);
  text-align: center;
}

.green-time {
  color: var(--primary);
  font-weight:bold;
}
.toast-success { background: var(--primary-deep); }
.toast-error   { background: var(--negative); }
.toast-info    { background: #262D37; }

/* ---- Small screens -------------------------------------------------------- */
@media (max-width: 480px) {
  .waitlist-form { flex-direction: column; }
  .btn-primary { width: 100%; padding: var(--sp-3); }
  .tagline { min-height: 3.6em; }
}

/* ---- Reduced motion: park EVERYTHING ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blob, .mascot { animation: none; }
  .tagline-rotator { transition: none; }
}