/* ready.coach — landing page
   Colors & layout taken from the Figma "Screen" frame (1728×1117 artboard). */

:root {
  --bg:        #eddfd4;
  --ink:       #232323;
  --subcopy:   #a39181;
  --field:     #66635d;
  --line:      rgba(0, 0, 0, 0.31);
  --footer:    rgba(35, 35, 35, 0.4);

  --col-logo:  316px;   /* left column — logo sits in the margin */
  --col-main:  740px;   /* right column — headline, copy, form */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { position: relative; overflow-x: hidden; min-height: 100vh; }

/* Soft animated gradient band across the top, behind everything.
   This is a <canvas> painted by gradient.js. If WebGL is unavailable the
   canvas is never painted and the SVG background below shows instead. */
.gradient {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 130vw;
  max-width: 1900px;
  height: 460px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: block;
  /* fallback for no-WebGL: the original static band */
  background: top center / 100% auto no-repeat url("assets/gradient.svg");
  /* melt into the page beige toward the bottom — a progressive (multi-stop,
     eased) fade rather than a single linear step */
  /* --fade: linear-gradient(
    180deg,
    #000 0%,
    rgba(0, 0, 0, 0.92) 45%,
    rgba(0, 0, 0, 0.65) 65%,
    rgba(0, 0, 0, 0.30) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade); */
}

/* ---------- layout ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1192px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero {
  display: grid;
  grid-template-columns: var(--col-logo) minmax(0, var(--col-main));
  justify-content: start;
  padding-top: 86px;
  padding-bottom: 96px;
}

/* ---------- logo (composed SVG wordmark) ---------- */
.logo {
  position: relative;
  display: block;
  width: 259px;
  height: 44px;
  align-self: start;
  /* Drop the wordmark so its baseline sits on the headline's first line. */
  margin-top: 9px;
}
.logo-frag { position: absolute; }
.logo-frag img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- content column ---------- */
.content { min-width: 0; }

/* Headline — serif highlight (Fraunces) + sans continuation */
.headline {
  margin: 0;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: #000;
}
.serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;                                   /* wght 400 */
  font-optical-sizing: auto;                          /* optical size on */
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
}
.sans {
  font-family: "Inter", -apple-system, sans-serif;
  font-weight: 400;
  /* relative to .headline (40/48) so it scales with the breakpoints */
  font-size: 0.8333em;
}

/* Sub copy */
.subcopy {
  margin-top: 40px;
  max-width: 601px;
  color: var(--subcopy);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -1px;
}
.subcopy p { margin: 0 0 24px; }
.subcopy p:last-child { margin-bottom: 0; }

/* ---------- waitlist form ---------- */
.waitlist {
  position: relative;
  margin-top: 56px;
  width: 100%;
  max-width: 736px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field { display: flex; flex-direction: column; }
.field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--field);
  margin-bottom: 2px;
}
.field input, .field textarea {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: "Brawler", Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  color: var(--ink);
  width: 100%;
}
.field ::placeholder { color: var(--field); opacity: 0.3; }
.field :focus { outline: none; }
.field :focus::placeholder { opacity: 0.15; }

.waitlist button {
  background: none;
  border:0;
  font-family: "Brawler", Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  text-align:left;
}

/* Submission feedback — empty until JS sets a message */
.wl-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--subcopy);
}
.wl-status:empty { display: none; }
.wl-status[data-kind="success"] { color: #2f7d52; }
.wl-status[data-kind="error"]   { color: #b3452f; }

/* ---------- paper airplane illustration ---------- */
/* Positioned (in %) over the form's top-right corner, matching the Figma geometry. */
.plane {
  position: absolute;
  left: 66.98%;
  top: 24px;
  width: 36.1%;
  /* keep the Figma shape (265.7×300 at the 736px form) at any form width */
  aspect-ratio: 266 / 300;
  pointer-events: none;
}
.plane img { position: absolute; display: block; }

.plane-path  { left: 0;      top: 26.1%; width: 78.9%; height: 73.9%; }
.plane-body  { left: 79.1%;  top: 0.4%;  width: 20.9%; height: 27.8%; }
.plane-l1    { left: 73.3%;  top: 4.8%;  width: 22.5%; height: 18.4%; }
.plane-l2    { left: 80.2%;  top: 5.3%;  width: 14.5%; height: 13.4%; }
.plane-l3    { left: 73.25%; top: 15.4%; width: 6.03%; height: 3.56%; }
.plane-l4    { left: 80.1%;  top: 20.1%; width: 3.18%; height: 6.08%; }

/* ---------- about us ---------- */
.about-us {
  margin-top: 124px;
  max-width: 601px;
  /* color: var(--subcopy); */
  /* font-size: 18px; */
  /* line-height: 28px; */
  /* letter-spacing: -0.3px; */
}
/* .about-us h2 {
  margin: 0 0 16px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.about-us p { margin: 0 0 16px; }
.about-us p:last-child { margin-bottom: 0; } */

.about-us h1 {color: var(--ink)}

/* ---------- footer ---------- */
.footer {
  margin-top: 72px;
  color: var(--footer);
  font-size: 14.6px;
  font-weight: 500;
  line-height: 28.8px;
}
.footer p { margin: 0; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
/* Footer icons are ~15px squares; the exported SVGs have no intrinsic
   size (preserveAspectRatio="none"), so pin both dimensions explicitly. */
.footer .fi {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -0.12em;
  margin: 0 3px;
  opacity: 0.9;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
    padding-bottom: 64px;
    gap: 40px;
  }
  .logo { margin-top: 0; }   /* stacked layout — no baseline to share */
  .headline { font-size: 36px; }
  .subcopy { font-size: 20px; line-height: 28px; letter-spacing: -0.5px; }
  .field input,
  .field textarea,
  .waitlist button { font-size: 30px; }
  .waitlist { padding: 28px 24px; }
  .about-us { margin-top: 88px; }
}

@media (max-width: 560px) {
  .headline { font-size: 28px; }
  .subcopy { margin-top: 32px; font-size: 18px; line-height: 26px; }
  .field input,
  .field textarea,
  .waitlist button { font-size: 24px; }
  .waitlist { margin-top: 40px; padding: 24px 20px; border-radius: 22px; }
  .plane { display: none; }
  .about-us { margin-top: 64px; }
  .footer { margin-top: 56px; }
}

/* ---------- GSAP initial states (hidden until JS animates in) ---------- */
.js .reveal { opacity: 0; }
.word { display: inline-block; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; }
}