/*
 * Soft & playful theme — opt-in per section with the `.soft` class, so the page
 * can be migrated section by section. Load after wl4.css / extra.css.
 * Pair `.soft` with a tone (wl4-tone-sky = light, wl4-tone-plum = dark) so the
 * shared components (card, button, text helpers) pick up the right variables.
 */

:root {
  --font-fredoka: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-nunito: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wl4 {
  --coral: #ff6b57;
  --coral-deep: #c8402f;
  --sun: #ffc93c;
  --sun-deep: #e0a100;
  --mint: #3ecfa5;
  --plum: #4b2a7b;
  --plum-deep: #2f1a55;
  --lilac: #efe6ff;
  --cream: #fff8ec;
}

/* ---------- Tones ---------- */
.wl4-tone-sky {
  --fg: #3b2a63;
  --strong: #2a1650;
  --muted: #5b4a80;
  --surface: #ffffff;
  --surface-2: #f3ecff;
  --line: #dccdf7;
  --line-soft: #ece2fb;
  --accent: #c8402f;
  --ok: #1a7f5f;
}
.wl4-tone-plum {
  --fg: #efe6ff;
  --strong: #ffffff;
  --muted: #d3c6f2;
  --surface: rgba(255, 255, 255, 0.1);
  --surface-2: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.35);
  --line-soft: rgba(255, 255, 255, 0.18);
  --accent: #ffd45e;
  --ok: #8ff0cf;
}

/* ---------- Type ---------- */
.soft { font-family: var(--font-nunito); }
.soft .wl4-display,
.soft .wl4-serif {
  font-family: var(--font-fredoka);
  font-variant-numeric: normal;
}
.soft-h1 {
  font-size: clamp(2rem, 6.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.soft .wl4-foil {
  background: none;
  color: var(--coral-deep);
  font-style: normal;
  animation: none;
  text-decoration: underline wavy var(--sun);
  text-decoration-thickness: 4px;
  text-underline-offset: 9px;
  text-decoration-skip-ink: none;
}
.soft-lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--fg);
}
.soft-lead strong {
  color: var(--plum);
  background: linear-gradient(transparent 62%, rgba(255, 201, 60, 0.6) 62%);
}
.soft-label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Sticker chip ---------- */
.soft .wl4-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--plum);
  font-family: var(--font-fredoka);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 0 rgba(75, 42, 123, 0.18);
}
.soft .wl4-chip svg { color: var(--coral-deep); width: 1.15rem; height: 1.15rem; }

/* ---------- Buttons ---------- */
.soft .wl4-btn {
  font-family: var(--font-fredoka);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--plum-deep);
  background: var(--sun);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--sun-deep), 0 16px 26px -10px rgba(224, 161, 0, 0.6);
  transition: transform 0.18s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.18s ease;
}
.soft .wl4-btn:hover:not(:disabled) {
  filter: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 0 var(--sun-deep), 0 20px 30px -10px rgba(224, 161, 0, 0.6);
}
.soft .wl4-btn:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--sun-deep);
}
.soft .wl4-btn-ghost {
  font-family: var(--font-fredoka);
  letter-spacing: 0;
  text-transform: none;
  border: 2px solid var(--line);
  border-radius: 999px;
}

/* ---------- Card & form ---------- */
.soft .wl4-card {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 8px 0 rgba(75, 42, 123, 0.1), 0 30px 50px -30px rgba(75, 42, 123, 0.5);
}
.soft input[type="email"] {
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.05rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.soft input[type="email"]:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.4);
}
.soft input[type="checkbox"] { accent-color: var(--coral-deep); }
.soft [data-form-error],
.soft [data-form-success] { border-radius: 16px; }

/* ---------- Sky hero ---------- */
.soft-sky {
  background:
    radial-gradient(60% 45% at 50% 100%, rgba(255, 201, 60, 0.45) 0%, transparent 72%),
    linear-gradient(180deg, #a9dcff 0%, #d3eeff 40%, #fff1d9 78%, #ffdcc0 100%);
}
.soft-sky .wl4-rays {
  background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, 0.32) 0 2deg, transparent 2deg 9deg);
}
.soft-sky .wl4-sun {
  background: radial-gradient(circle, #fff7cf 0%, #ffd95e 34%, #ffb940 62%, rgba(255, 185, 64, 0) 72%);
}
.soft-cloud {
  position: absolute;
  width: var(--w, 140px);
  height: calc(var(--w, 140px) * 0.34);
  border-radius: 999px;
  background: #fff;
  opacity: 0.92;
  animation: soft-drift var(--d, 40s) ease-in-out infinite alternate;
}
.soft-cloud::before,
.soft-cloud::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}
.soft-cloud::before { width: 42%; left: 14%; bottom: 40%; }
.soft-cloud::after { width: 32%; left: 50%; bottom: 35%; }
.soft-spark {
  position: absolute;
  width: var(--s, 22px);
  aspect-ratio: 1;
  background: var(--c, var(--sun));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: soft-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes soft-drift { from { transform: translateX(-24px); } to { transform: translateX(34px); } }
@keyframes soft-twinkle {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.1) rotate(14deg); opacity: 1; }
}

/* ---------- Mobile sticky CTA ---------- */
.soft-sticky {
  background: rgba(255, 248, 236, 0.96);
  border-top: 2px solid var(--line);
}

/* ---------- Plum section with wavy edges ---------- */
.soft-bg-plum {
  background:
    radial-gradient(600px 320px at 12% 18%, rgba(255, 107, 87, 0.28), transparent 70%),
    radial-gradient(700px 400px at 92% 85%, rgba(62, 207, 165, 0.2), transparent 70%),
    linear-gradient(180deg, #4b2a7b, #38205f);
}
/* One wave per boundary: each section paints its top edge in the previous section's colour */
.soft-waves::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 1;
  pointer-events: none;
  background: var(--wave-top, #fff8ec);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 36'%3E%3Cpath d='M0 0V18Q60 -6 120 18T240 18V0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 36px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 36'%3E%3Cpath d='M0 0V18Q60 -6 120 18T240 18V0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 36px;
}

/* ---------- Parent scroll ---------- */
.soft .wl4-scroll {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0, #fff0d2);
  box-shadow:
    inset 16px 0 16px -14px rgba(214, 150, 40, 0.4),
    inset -16px 0 16px -14px rgba(214, 150, 40, 0.4),
    0 10px 0 rgba(0, 0, 0, 0.16),
    0 30px 50px -30px rgba(0, 0, 0, 0.6);
}
.soft .wl4-rod {
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe07a, #ffc93c 55%, #f0a800);
  box-shadow: 0 4px 0 var(--sun-deep);
}
.soft .wl4-rod::before,
.soft .wl4-rod::after {
  top: -3px;
  bottom: -3px;
  width: 14px;
  background: var(--coral);
}
.soft .wl4-rod::before { left: -5px; }
.soft .wl4-rod::after { right: -5px; }
.soft .wl4-badge {
  border: 2px dashed var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}
.soft .wl4-steps { gap: 6px; margin-top: 0.6rem; }
.soft .wl4-seg {
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 2px 0 rgba(75, 42, 123, 0.1);
}
.soft .wl4-seg.on::after { background: linear-gradient(90deg, #2fc19a, #7ee8c8); }
.soft .wl4-stage svg { stroke: var(--coral-deep); }
.soft .wl4-note {
  border: 0;
  border-radius: 20px 20px 20px 4px;
  background: #fff0b3;
  transform: rotate(-0.8deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.07);
}
.soft .wl4-note-label {
  color: var(--coral-deep);
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.soft .wl4-note-label svg { stroke: var(--coral-deep); }
.soft .wl4-note .wl4-serif {
  font-family: var(--font-nunito);
  font-style: normal;
  font-weight: 600;
}
.soft .wl4-foot { border-color: var(--line-soft); }

@media (prefers-reduced-motion: reduce) {
  .soft-cloud, .soft-spark { animation: none; }
}

@media (max-width: 640px) {
  .soft-spark { display: none; }
}

/* =====================================================================
   Rollout: light backgrounds, generic softening of shared components
   ===================================================================== */
.soft-bg-cream {
  background:
    radial-gradient(520px 260px at 8% 12%, rgba(255, 201, 60, 0.16), transparent 70%),
    radial-gradient(560px 300px at 94% 90%, rgba(183, 155, 240, 0.16), transparent 70%),
    #fff8ec;
}
.soft-bg-sky {
  background:
    radial-gradient(520px 260px at 92% 10%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(520px 300px at 6% 92%, rgba(255, 107, 87, 0.1), transparent 70%),
    #e3f3ff;
}
.soft-bg-sun {
  background:
    radial-gradient(520px 260px at 90% 12%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(520px 300px at 8% 90%, rgba(255, 107, 87, 0.12), transparent 70%),
    #fff1c2;
}
.soft-bg-mint {
  background:
    radial-gradient(520px 260px at 8% 10%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(520px 300px at 94% 92%, rgba(255, 201, 60, 0.18), transparent 70%),
    #dcf6ec;
}
.wl4-tone-plum .wl4-foil { color: #ffd45e; text-decoration-color: var(--coral); }

/* Labels: keep the small caps hierarchy, drop the shouty tracking */
.soft .uppercase { text-transform: none; }
.soft [class*="tracking-["] { letter-spacing: 0.01em; }
.soft .tracking-wide { letter-spacing: 0; }
.soft [class*="text-[0.8"] { font-size: 0.95rem; }
.soft dt.wl4-display { font-size: 0.95rem; }

/* Shapes */
.soft .wl4-card-hi {
  border-color: var(--sun);
  box-shadow: 0 8px 0 rgba(224, 161, 0, 0.35), 0 30px 50px -28px rgba(75, 42, 123, 0.55);
}
.soft .wl4-surface-2 { border-radius: 20px; }
.soft .wl4-line.border,
.soft .wl4-line-soft.border { border-radius: 14px; }
.soft [data-dot] { rotate: none; border-radius: 999px; }
.soft .rotate-45 { rotate: none; border-radius: 50%; }
.soft summary { border-radius: 16px; }

/* Gold accents from the old theme -> playful palette */
.soft [class~="bg-[#c9a24b]"] { background: var(--sun); }
.soft [class~="bg-[#a67f2c]"] { background: #ffb01f; }
.soft [class~="bg-[#b4502e]"] { background: var(--coral); }
.soft [class~="from-[#e6b866]"] {
  background-image: linear-gradient(180deg, #ffe07a, #ffb01f);
  --tw-ring-color: rgba(255, 176, 31, 0.5);
}
.soft [class~="from-[#f6e2a0]"] { background-image: linear-gradient(180deg, #ffe07a, #ffb01f); }

/* Footer */
.soft-footer { background: #2a1650; }
.soft-footer a {
  font-family: var(--font-fredoka);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.soft-footer a:hover { color: var(--sun); }
.soft-footer svg { color: var(--sun); }
.soft-footer .wl4-serif { font-style: normal; color: var(--strong); }

/* School temple: one colour per column */
.soft .wl4-accent.bg-current { color: #b79bf0; }
.soft ul > li > svg.wl4-accent { transition: transform 0.25s cubic-bezier(0.3, 1.7, 0.5, 1); }
.soft ul > li:hover > svg.wl4-accent { transform: translateY(-4px); }
.soft ul > li:nth-child(1) > svg.wl4-accent { color: #ff6b57; }
.soft ul > li:nth-child(2) > svg.wl4-accent { color: #ffb01f; }
.soft ul > li:nth-child(3) > svg.wl4-accent { color: #3ecfa5; }
.soft ul > li:nth-child(4) > svg.wl4-accent { color: #5bb8ff; }
.soft ul > li:nth-child(5) > svg.wl4-accent { color: #b79bf0; }
.soft ul > li:nth-child(6) > svg.wl4-accent { color: #ff8fb3; }
.soft ul > li:nth-child(7) > svg.wl4-accent { color: #ff6b57; }

/* FAQ */
.soft-faq { display: grid; gap: 0.85rem; }
.soft-faq details {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 1rem 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.soft-faq details:hover { border-color: #c9b2f2; }
.soft-faq details[open] {
  border-color: var(--sun);
  box-shadow: 0 5px 0 rgba(224, 161, 0, 0.35);
}
.soft .wl4-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--plum-deep);
  font-family: var(--font-fredoka);
  font-size: 1rem;
  font-weight: 600;
}

/* Final call: own padding (the Tailwind build lacks these sizes) */
.soft-final { padding: 7rem 1rem 9rem; }
@media (min-width: 640px) { .soft-final { padding-inline: 1.5rem; } }

/* Footer spacing (room for the wave) */
.soft-footer { padding-top: 3.25rem; }

/* Thank-you page medal */
.soft-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  box-shadow: 0 6px 0 #22a37f;
}
.soft-medal svg { width: 2.1rem; height: 2.1rem; }

/* Fade the closing sun into the plum so the footer wave meets a clean edge */
.soft-final::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(56, 32, 95, 0), #38205f);
}

/* =====================================================================
   Maths doodles: decorative, behind the content, hidden from assistive tech
   ===================================================================== */
.soft-doodles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.soft-doodle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s, 56px) * 1.6);
  height: calc(var(--s, 56px) * 1.6);
  color: var(--c);
  opacity: 0.75;
  rotate: var(--r, 0deg);
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: soft-float 7s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
.soft-doodles--dark .soft-doodle { opacity: 0.55; }
@keyframes soft-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (max-width: 900px) {
  .soft-doodle { --s: 36px; opacity: 0.4; }
  .soft-doodles--dark .soft-doodle { opacity: 0.32; }
  .soft-doodle--wide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soft-doodle { animation: none; }
}

/* ---------- CTA link buttons (anchors that look like the form button) ---------- */
.soft .soft-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.soft .soft-cta svg { flex: none; width: 1.1rem; height: 1.1rem; }

/* ---------- Social proof: live waitlist counter (hidden until real) ---------- */
.soft-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.1rem auto 0;
  padding: 0.55rem 1rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(47, 193, 154, 0.14);
  color: var(--plum-deep);
  font-size: 0.98rem;
  line-height: 1.3;
  text-align: center;
  animation: soft-proof-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.soft-proof[hidden] { display: none; }
.soft-proof strong { font-family: var(--font-fredoka); font-weight: 700; font-variant-numeric: tabular-nums; }
.soft-proof__dot {
  position: relative;
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #22b28a;
}
.soft-proof__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22b28a;
  animation: soft-proof-ping 1.8s ease-out infinite;
}
@keyframes soft-proof-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes soft-proof-ping { to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .soft-proof, .soft-proof__dot::after { animation: none; }
}

/* ---------- Author strip (under the hero form) ---------- */
.soft-author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem auto 0;
  padding: 0.7rem 1.2rem 0.7rem 0.7rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid var(--line);
  color: var(--plum-deep);
  text-align: left;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.soft-author:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(75, 42, 123, 0.6); }
.soft-author img {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sun);
}
.soft-author__name { display: block; font-size: 1.02rem; line-height: 1.25; }
.soft-author__name strong { font-family: var(--font-fredoka); font-weight: 700; }
.soft-author__role { display: block; margin-top: 0.15rem; font-size: 0.86rem; line-height: 1.3; opacity: 0.8; }
@media (max-width: 480px) {
  .soft-author { border-radius: 26px; padding-right: 1rem; }
}

/* ---------- Hero temple: give it a ground to stand on ---------- */
.soft-temple { margin-bottom: 2.4rem; }
.soft-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 3.3rem;
  z-index: 5;
  pointer-events: none;
  background: #fff1c2;
  border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.7);
}