/* ==========================================================================
   nurture commerce — global styles
   The background is the hero: a living, color-shifting abstract gradient mesh
   (drifting blobs of light that continuously cycle through the spectrum). The
   wordmark is kept deliberately simple so the motion carries the page.
   Zero dependencies, one small self-hosted font.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/sora.woff2") format("woff2");
}

:root {
  --bg-0: #050507;
  --ink-0: #ffffff;
  --ink-1: #c6c9d4;

  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 72rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh; min-height: 100svh;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* --- The living mesh: drifting color blobs that cycle hue --------------- */
.mesh {
  position: fixed;
  inset: -12%;
  z-index: -3;
  overflow: hidden;
  background: var(--bg-0);
  filter: blur(72px) saturate(1.35);
  animation: hue 20s linear infinite;
}
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.85;
  will-change: transform;
}
.blob.b1 {
  width: 62vmax; height: 62vmax; left: -12vmax; top: -16vmax;
  background: radial-gradient(circle at 50% 50%, #7b5cff 0%, rgba(123,92,255,0) 62%);
  animation: m1 28s ease-in-out infinite alternate;
}
.blob.b2 {
  width: 54vmax; height: 54vmax; right: -14vmax; top: -10vmax;
  background: radial-gradient(circle at 50% 50%, #19c8ff 0%, rgba(25,200,255,0) 62%);
  animation: m2 34s ease-in-out infinite alternate;
}
.blob.b3 {
  width: 58vmax; height: 58vmax; left: 8vmax; bottom: -20vmax;
  background: radial-gradient(circle at 50% 50%, #ff4d8d 0%, rgba(255,77,141,0) 62%);
  animation: m3 24s ease-in-out infinite alternate;
}
.blob.b4 {
  width: 50vmax; height: 50vmax; right: -8vmax; bottom: -16vmax;
  background: radial-gradient(circle at 50% 50%, #17e6a0 0%, rgba(23,230,160,0) 62%);
  animation: m4 30s ease-in-out infinite alternate;
}
.blob.b5 {
  width: 46vmax; height: 46vmax; left: 30vmax; top: 12vmax;
  background: radial-gradient(circle at 50% 50%, #ffb020 0%, rgba(255,176,32,0) 62%);
  animation: m5 26s ease-in-out infinite alternate;
}
@keyframes hue { to { filter: blur(72px) saturate(1.35) hue-rotate(360deg); } }
@keyframes m1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(16vmax,10vmax,0) scale(1.25); } }
@keyframes m2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-14vmax,14vmax,0) scale(0.85); } }
@keyframes m3 { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(12vmax,-16vmax,0) scale(1.2); } }
@keyframes m4 { from { transform: translate3d(0,0,0) scale(1.15); } to { transform: translate3d(-16vmax,-10vmax,0) scale(0.9); } }
@keyframes m5 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-12vmax,16vmax,0) scale(1.3); } }

/* Fine drifting particles for depth. */
.bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block; background: transparent;
}

/* Scrim: keeps the simple white text legible over the shifting colours
   (a background layer, not a text shadow). */
.scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 50%, rgba(0,0,0,0.5), transparent 72%),
    radial-gradient(130% 120% at 50% 50%, transparent 52%, rgba(0,0,0,0.55) 100%);
}

/* --- Layout --------------------------------------------------------------- */
.page {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: block;
  padding: 0 var(--pad);
}
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* --- Wordmark: simple, clean, white --------------------------------------- */
.wordmark {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.6rem, 10vw, 6.5rem);
  text-transform: lowercase;
  color: #fff;
}
.wordmark .line { display: block; }
/* Brand logo (white SVG wordmark) used in place of the text wordmark. */
.wordmark .brand { display: block; width: clamp(240px, 62vw, 560px); height: auto; }

/* --- Tagline -------------------------------------------------------------- */
.tagline {
  margin: 0;
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: clamp(0.62rem, 1.5vw, 0.8rem);
  color: var(--ink-1);
  padding-left: 0.42em;
}
.tagline .pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Landing page — sections, steps, and the package selector.
   Same language as the hero: dark, Sora, white ink over the living mesh.
   ========================================================================== */
:root {
  --ink-2: #8b8f9c;            /* dimmest text */
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.08);
  --card: rgba(255,255,255,0.035);
  --card-hi: rgba(255,255,255,0.06);
}

/* Site header ------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 1.8rem) 0;
}
.site-header .brand-mark { display: flex; align-items: center; }
.site-header .brand-mark img { height: clamp(22px, 3.2vw, 30px); width: auto; display: block; }
.header-cta {
  font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-0);
  font-family: var(--font-sans); cursor: pointer;
  text-decoration: none; padding: 0.6rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.header-cta:hover { background: var(--card-hi); border-color: rgba(255,255,255,0.28); }

/* Generic section --------------------------------------------------------- */
.section { max-width: var(--maxw); margin-inline: auto; padding: clamp(3.5rem, 9vw, 7rem) 0; }
.section + .section { border-top: 1px solid var(--line-soft); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.4rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ink-2); display: inline-block; }
.section h2 {
  margin: 0 0 1.1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
}
.lede { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink-1); max-width: 46ch; margin: 0 0 1.2rem; }
.section p { color: var(--ink-1); max-width: 62ch; }
.muted { color: var(--ink-2); }

/* Hero -------------------------------------------------------------------- */
.hero {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 10vw, 8rem) 0 clamp(2.5rem, 7vw, 5rem);
  min-height: min(88svh, 780px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 {
  margin: 0.4rem 0 1.5rem; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.02; font-size: clamp(2.4rem, 7vw, 5.2rem); max-width: 16ch;
}
.hero .subtitle {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ink-0); font-weight: 500;
  max-width: 34ch; margin: 0 0 1.4rem;
}
.hero .desc { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--ink-1); max-width: 56ch; margin: 0 0 2.3rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer;
  padding: 0.85rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #fff; color: #0a0a0c; }
.btn-primary:hover { background: #eee; }
.btn-ghost { background: var(--card); color: var(--ink-0); border-color: var(--line); }
.btn-ghost:hover { background: var(--card-hi); border-color: rgba(255,255,255,0.28); }

/* "What you get" numbered proof list -------------------------------------- */
.proof-list { list-style: none; counter-reset: p; margin: 1.6rem 0 2rem; padding: 0; max-width: 60ch; }
.proof-list li {
  counter-increment: p; position: relative; padding: 1.05rem 0 1.05rem 3.4rem;
  border-top: 1px solid var(--line-soft); color: var(--ink-1);
}
.proof-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.proof-list li::before {
  content: counter(p); position: absolute; left: 0; top: 0.95rem;
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 0.85rem; color: var(--ink-0);
  background: var(--card);
}
.callout {
  margin: 1.6rem 0 0; padding: 1.4rem 1.6rem; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line-soft);
  color: var(--ink-0); font-size: 1.02rem; max-width: 60ch;
}

/* How it works — steps ---------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; margin-top: 2rem; }
.step { background: var(--bg-0); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.5rem; }
.step .num {
  font-size: 1.1rem; font-weight: 600; color: var(--ink-0);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; background: var(--card);
}
.step .body h3 { margin: 0.2rem 0 0.5rem; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.step .body p { margin: 0 0 0.9rem; color: var(--ink-1); }
.step .youget {
  display: inline-block; font-size: 0.9rem; color: var(--ink-0);
  padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--card-hi);
  border: 1px solid var(--line-soft);
}
.step .youget b { font-weight: 600; }
.step .youget .lbl { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; margin-right: 0.5rem; }

/* Packages — dropdown, one at a time (not a grid) ------------------------- */
.packages-wrap { max-width: 40rem; }
.pkg-select-row { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.8rem; flex-wrap: wrap; }
.pkg-select-row label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.select-shell { position: relative; }
.select-shell::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-1); border-bottom: 2px solid var(--ink-1);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.pkg-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink-0);
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.8rem 2.8rem 0.8rem 1.1rem; cursor: pointer; min-width: 12rem;
}
.pkg-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pkg-select option { color: #111; }

.pkg-panel {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
}
.pkg-panel[hidden] { display: none; }
.pkg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 2.2rem); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.pkg-name { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; }
.pkg-price { text-align: right; }
.pkg-price .amt { font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.pkg-price .per { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); margin-top: 0.4rem; }
.pkg-rows { padding: 0.4rem clamp(1.5rem, 3.5vw, 2.2rem) 1rem; }
.pkg-rows .row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.pkg-rows .row:first-child { border-top: none; }
.pkg-rows .k { color: var(--ink-2); font-size: 0.95rem; }
.pkg-rows .v { color: var(--ink-0); font-weight: 500; text-align: right; }
.pkg-note { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--ink-2); }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  max-width: var(--maxw); margin-inline: auto;
  border-top: 1px solid var(--line-soft);
  padding: 2.4rem 0 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer img { height: 20px; width: auto; opacity: 0.9; }
.site-footer .copy { color: var(--ink-2); font-size: 0.85rem; }

/* Reveal-on-scroll. Scoped to .js so the content is always visible without
   JavaScript (crawlers and no-JS users never see a blank section). */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 0.6rem; }
  .pkg-head { align-items: flex-start; }
  .pkg-price { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Two-column layout: content 3/4 (left), packages sticky sidebar 1/4 (right).
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--maxw);
  margin-inline: auto;
  align-items: start;
}
.content-col { min-width: 0; }
/* Sections inside the column fill the column, not the page max-width. */
.content-col .hero,
.content-col .section { max-width: none; margin-inline: 0; }
.content-col .hero { min-height: 62svh; }

/* Packages sidebar */
.packages-col {
  position: sticky;
  top: clamp(1.25rem, 4vw, 2.25rem);
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}
.packages-col .eyebrow { margin-bottom: 0.9rem; }
.pkg-heading { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.pkg-sub { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 1.15rem; }
.packages-col .packages-wrap { max-width: none; }

/* Compact the plan selector + panel to fit the narrow column. */
.packages-col .pkg-select-row { margin-bottom: 1rem; }
.packages-col .select-shell { width: 100%; }
.packages-col .pkg-select { width: 100%; min-width: 0; }
.packages-col .pkg-head {
  flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.05rem;
}
.packages-col .pkg-name { font-size: 1.25rem; }
.packages-col .pkg-price { text-align: left; }
.packages-col .pkg-price .amt { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.packages-col .pkg-price .per { margin-top: 0.25rem; }
.packages-col .pkg-rows { padding: 0.2rem 1.25rem 1rem; }
.packages-col .pkg-rows .row {
  flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.8rem 0;
}
.packages-col .pkg-rows .k { font-size: 0.82rem; letter-spacing: 0.02em; }
.packages-col .pkg-rows .v { text-align: left; font-size: 0.98rem; }

/* Stack to one column on narrower viewports; sidebar becomes a normal block. */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .content-col .hero { min-height: min(80svh, 720px); }
  .packages-col { position: static; padding-top: clamp(2.5rem, 7vw, 4rem); border-top: 1px solid var(--line-soft); }
  .packages-col .packages-wrap { max-width: 40rem; }
}

/* ==========================================================================
   Lead capture modal + form.
   ========================================================================== */
body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--pad); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-dialog {
  position: relative; z-index: 1; width: min(30rem, 100%);
  max-height: 92svh; overflow: auto;
  background: #0c0d11; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line-soft); color: var(--ink-1);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: var(--card-hi); color: #fff; }
.modal-title { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 600; letter-spacing: -0.01em; }
.modal-sub { margin: 0 0 1.5rem; color: var(--ink-1); font-size: 0.98rem; }

.lead-form { display: grid; gap: 1rem; }
.lead-form .field { display: grid; gap: 0.4rem; }
.lead-form .field > span { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-1); }
.lead-form input, .lead-form textarea {
  font-family: var(--font-sans); font-size: 1rem; color: #fff;
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 11px;
  padding: 0.7rem 0.85rem; width: 100%; resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink-2); }
.lead-form input:focus, .lead-form textarea:focus {
  outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08);
}
.lead-form input:user-invalid { border-color: #ff6b6b; }
.lead-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.lead-status { margin: 0.3rem 0 0; min-height: 1.2em; font-size: 0.9rem; color: var(--ink-1); text-align: center; }

/* ==========================================================================
   Glassy panel: wraps the hero + "What you get" so all of that text stays crisp
   over the moving mesh, ending before "How Nurture works".
   ========================================================================== */
.glass-panel {
  background: rgba(8, 9, 13, 0.48);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
/* Tighten the section rhythm inside the panel (the panel provides the frame). */
.glass-panel .hero { min-height: auto; padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.glass-panel .section { max-width: none; padding: clamp(1.5rem, 4vw, 2.5rem) 0 0.5rem; }
.glass-panel .hero + .section { border-top: 1px solid var(--line-soft); padding-top: clamp(1.8rem, 4vw, 2.8rem); }

@media (max-width: 640px) {
  .glass-panel { border-radius: 20px; }
}