/* Kite Club marketing site — Figma "Marketing Site" 19:510 (1440 desktop).
   Desktop sizes below are Figma's; narrower screens are adapted from them. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("assets/fonts/poppins-latin-800-normal.woff2") format("woff2"); }

:root {
  --ink: #0f172a;
  --pink: #d349d0;
  --blue: #3f58ff;
  --green: #5da806;
  --yellow: #e3ea02;
  --rule: #d9d9d9;

  /* Content sits 139px in from a 1440 frame, centered on wider screens. */
  --frame: 1440px;
  --gutter: max(0px, (100vw - var(--frame)) / 2);
  --pad: clamp(24px, 9.65vw, 139px);
  --text-w: min(584px, 42vw);
  --media-gap: 56px;
  --section-gap: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: none; }
p, h1, h2, h3 { margin: 0; }
strong { font-weight: 600; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.container {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--pad);
}

[id] { scroll-margin-top: 24px; }

/* ---------- Shared type ---------- */

.heading { font-weight: 800; font-size: 40px; line-height: 56px; }
.body-text { font-size: 20px; line-height: 1.5; }
.prose p + p { margin-top: 1.5em; }
.prose b { font-weight: 700; }

/* Join early access (19:522): 64 tall, 72px either side of a 253px label. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: min(397px, 100%);
  padding: 0 72px;
  border-radius: 32px;
  background: var(--pink);
  color: var(--ink);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 150ms ease;
}
.cta:hover { filter: brightness(1.08); }

/* Header version (19:567): 277x48. */
.cta--small { height: 48px; min-width: 277px; padding: 0 12px; font-size: 16px; }

/* ---------- Header (80 tall) ---------- */

.site-header {
  display: flex;
  align-items: center;
  height: 80px;
  padding-inline: calc(var(--gutter) + var(--pad));
}

.site-header__logo img,
.site-footer__logo img { width: 89.75px; height: 56px; }

.site-nav { display: flex; align-items: center; gap: 16px; }
.site-header .site-nav { margin-left: 40.25px; }
.site-nav a {
  padding: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav__wide { width: 130px; }

.site-header .cta { margin-left: auto; }

/* ---------- Hero (1440x802) ---------- */

.hero {
  position: relative;
  height: 802px;
  overflow: hidden;
  background: #6b6f86;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(220.42deg, rgba(217, 217, 217, 0) 30.233%, rgba(63, 88, 255, 0.5) 79.726%);
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: #fff;
}

.hero__title,
.hero__body { text-shadow: 0 0 12px rgba(0, 0, 0, 0.25); }
.hero__title { max-width: 426px; }
.hero__body { max-width: 439px; }

.hero__title { min-height: 177px; font-weight: 800; font-size: 48px; line-height: 56px; }
.hero__accent { color: var(--yellow); }

.hero__body { min-height: 125px; font-weight: 500; }
.hero__lead { font-size: 20px; line-height: 30px; }
.hero__sub { margin-top: 21px; font-size: 14px; line-height: 22px; }

/* The hero CTA and the sign-up form sit 16px further down than the column
   gap (34:698, 34:699). */
.hero .cta { margin-top: 16px; }

/* ---------- Create. Play. Connect. ---------- */

.intro { padding-top: var(--section-gap); padding-bottom: 24px; }
.intro__title { max-width: 480px; margin-bottom: 15px; }
.intro__text { max-width: 1147px; }

/* Three 300px columns, 64px apart, split by 3x264 rules (19:538). */
.features {
  display: grid;
  grid-template-columns: minmax(0, 300px) 3px minmax(0, 300px) 3px minmax(0, 300px);
  column-gap: 64px;
  align-items: center;
  justify-content: center;
  margin: 24px 0 var(--section-gap);
  padding: 0;
  list-style: none;
}

.features__rule { height: 264px; background: var(--rule); }

/* Figma's text box is 111 tall, so each column is 271. */
.feature { align-self: start; min-height: 271px; }

.feature__icon {
  position: relative;
  display: block;
  width: 136px;
  height: 136px;
  margin-bottom: 24px;
  border-radius: 50%;
}
.feature__icon img { position: absolute; left: 32px; top: 32px; }
.feature__icon .feature__glyph { left: 35px; top: 35px; }
.feature__icon--green { background: var(--green); }
.feature__icon--pink { background: var(--pink); }
.feature__icon--blue { background: var(--blue); }

.feature__title { font-weight: 700; font-size: 24px; line-height: 32px; }
.feature__text { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.feature__text--narrow { max-width: 290px; }

/* ---------- Photo + text sections ----------
   The photo runs off the screen edge; the text column is 584 wide, sits
   56-58px from it and is centered on it (19:598 / 19:595, 19:576 / 19:527,
   19:577 / 19:530). */

.split { position: relative; min-height: var(--media-h); }
.hero + .split,
.split + .split { margin-top: var(--section-gap); }

#meet-kite { --media-h: 400px; }
#for-parents { --media-h: 417px; }
#why-kite { --media-h: 400px; }

.split__media {
  position: absolute;
  top: 0;
  height: var(--media-h);
  overflow: hidden;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split--media-left .split__media {
  left: -74px;
  right: calc(var(--gutter) + var(--pad) + var(--text-w) + var(--media-gap));
  border-radius: 0 32px 32px 0;
}


.split--media-right .split__media {
  left: calc(var(--gutter) + var(--pad) + var(--text-w) + var(--media-gap));
  right: 0;
  border-radius: 32px 0 0 32px;
}
/* Figma zooms this photo past cover: 110% of the frame's height, 62px in
   from the left and 4.2% up. */
.split--media-right .split__media img {
  position: absolute;
  left: -62px;
  top: -4.2%;
  width: auto;
  height: 110.09%;
}

/* "Kite concept · Design in development" (19:606), 24px in from the
   photo's bottom-right corner. */
.split__caption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #000;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
}

.split__inner { display: flex; align-items: center; min-height: var(--media-h); }
.split--media-left .split__inner { justify-content: flex-end; }

.split__text { width: var(--text-w); }
.split__text .heading { margin-bottom: 15px; }
/* Text beside a left photo starts at x 719, 2px past the right-aligned
   column; "Made with kids" also carries 24px of bottom padding (19:527). */
.split--media-left .split__text { margin-right: -2px; }
#for-parents .split__text { padding-bottom: 24px; }

/* A 20px lead line, 14px body. Figma spaces paragraphs with a blank line,
   30px after a 20px line and 21px after a 14px one. */
.prose--lead { font-size: 14px; line-height: 1.5; }
.prose--lead .lead { font-size: 20px; }
.prose--lead p + p { margin-top: 21px; }
.prose--lead .lead + p,
.prose--lead .spaced { margin-top: 30px; }

/* ---------- Come fly with us + footer ---------- */

/* Clips the shapes at the bottom of the page, as in Figma; starts 18px
   above the band because the purple stroke pokes above it. The band sits
   90px below the last photo (19:604). */
.closing {
  position: relative;
  margin-top: var(--section-gap);
  padding-top: 18px;
  overflow: hidden;
}

.join {
  position: relative;
  z-index: 1;
  min-height: 413px;
  background: var(--blue);
  color: #fff;
}

.join__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding-block: 48px;
}
.join__title { max-width: 558px; }
.join__text { max-width: 584px; }

/* Sign-up form (19:536): a 570x64 white pill holding the email field and a
   277x48 button, 24px in on the left and 8px on the right. */
.signup {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 570px;
  max-width: 100%;
  height: 64px;
  margin-top: 16px;
  padding: 0 8px 0 24px;
  border-radius: 32px;
  background: #fff;
}
.signup[hidden] { display: none; }
.signup:focus-within { outline: 3px solid #fff; outline-offset: 3px; }

.signup__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 24px;
}
.signup__input::placeholder { color: rgba(15, 23, 42, 0.49); opacity: 1; }
.signup__input:focus { outline: none; }

.signup__submit { flex-shrink: 0; border: 0; cursor: pointer; font-family: inherit; }
/* Keeps Figma's 277 width where the header CTA compacts (max-width 1199). */
.signup .signup__submit { min-width: 277px; padding: 0 12px; }
.signup__submit:disabled { cursor: progress; filter: saturate(0.6); }

.signup__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Not in Figma: the confirmation replaces the form, errors sit under it. */
.signup__status { font-size: 14px; line-height: 1.5; }
.signup__status:empty { display: none; }
.signup__status--done { margin-top: 16px; font-weight: 600; font-size: 20px; line-height: 64px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.join__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; }

/* Positions measured from the band's top-right corner (19:514, 19:515,
   19:578), each centered in its rotated Figma box. */
.shape--stroke {
  top: -0.57px;
  right: -37.16px;
  width: 161.255px;
  height: 181.45px;
  transform: rotate(14.36deg) skewX(0.71deg);
}
.shape--squiggle {
  top: 131.9px;
  right: 225.39px;
  width: 276.354px;
  height: 96.056px;
  transform: rotate(25.88deg) skewX(1.17deg);
}
.shape--blob {
  top: 284px;
  right: -59.43px;
  width: 318.425px;
  height: 317.432px;
}

.site-footer {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  padding-left: calc(var(--gutter) + var(--pad));
  background: #fff;
}

.site-footer__tagline {
  margin-left: 18.25px;
  padding: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

/* Lines up with the photo column's text (x 779 at 1440). */
.site-footer__nav {
  position: absolute;
  left: calc(var(--gutter) + var(--pad) + var(--text-w) + var(--media-gap));
}

/* ---------- Narrower desktop ---------- */

@media (max-width: 1279px) {
  .shape--squiggle { right: 40px; top: 210px; }
}

/* Four nav links plus the full-width CTA stop fitting here. */
@media (max-width: 1199px) {
  .site-header .site-nav { margin-left: 24px; gap: 4px; }
  .cta--small { min-width: 0; padding: 0 24px; }
}

@media (max-width: 1099px) {
  .site-footer { height: auto; flex-wrap: wrap; padding-block: 12px; }
  .site-footer__nav { position: static; margin-left: auto; margin-right: var(--pad); }
}

@media (max-width: 959px) {
  .site-header .site-nav { display: none; }
}

/* ---------- Phones and small tablets ---------- */

@media (max-width: 860px) {
  :root { --pad: 24px; --text-w: 100%; --section-gap: 56px; }

  .site-header { height: 72px; padding-inline: 16px; }
  .site-header__logo img, .site-footer__logo img { width: 77px; height: 48px; }
  .cta--small { min-width: 0; height: 44px; padding: 0 20px; }

  .hero { height: min(680px, 88svh); min-height: 560px; }
  .hero__content { bottom: 32px; }
  .hero__title { min-height: 0; font-size: 36px; line-height: 44px; }
  .hero__body { min-height: 0; }
  .hero__lead { font-size: 18px; line-height: 27px; }
  .cta { height: 56px; padding: 0 32px; font-size: 18px; }
  .hero .cta { width: 100%; max-width: 397px; }
  .signup { width: 100%; padding-left: 20px; }
  .signup .signup__submit { min-width: 0; height: 48px; padding: 0 20px; font-size: 16px; }

  .heading { font-size: 32px; line-height: 44px; }
  .body-text { font-size: 18px; }

  .features { grid-template-columns: 1fr; row-gap: 40px; margin-top: 24px; }
  .features__rule { display: none; }
  .feature__icon { width: 112px; height: 112px; margin-bottom: 16px; }
  .feature__icon img { left: 20px; top: 20px; }
  .feature__icon .feature__glyph { left: 23px; top: 23px; }
  .feature__text { font-size: 16px; }
  .feature__text--narrow { max-width: none; }

  .split { display: flex; flex-direction: column; min-height: 0; }
  .split__inner { min-height: 0; }
  .split__media {
    position: relative;
    inset: auto;
    order: 2;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-inline: var(--pad);
    border-radius: 24px;
  }
  .split--media-left .split__media,
  .split--media-right .split__media { left: auto; right: auto; border-radius: 24px; }
  .split--media-right .split__media img { position: static; width: 100%; height: 100%; }
  .split__text,
  #for-parents .split__text { padding-block: 0 24px; }
  .split--media-left .split__text { margin-right: 0; }
  .prose--lead .lead { font-size: 18px; }

  .join { min-height: 0; }
  .join__inner { padding-bottom: 210px; }
  .shape--stroke { top: auto; bottom: 90px; right: -55px; transform: rotate(14.36deg) skewX(0.71deg) scale(0.55); }
  .shape--squiggle { top: auto; bottom: 30px; right: 150px; transform: rotate(25.88deg) skewX(1.17deg) scale(0.55); }
  .shape--blob { top: auto; bottom: -170px; right: -110px; transform: scale(0.6); }

  /* The footer wraps to two rows here, so it sits over the blob. */
  .site-footer { z-index: 2; gap: 4px 0; padding: 16px 24px; }
  .site-footer__tagline { margin-left: 8px; }
  .site-footer__nav { width: 100%; margin: 0 0 0 -8px; gap: 4px; }
  .site-footer .site-nav__wide { width: auto; }
}