/* ==========================================================================
   Masterfly — Landing page
   Fluid scaling: the two Figma comps (375px / 1440px) are treated as the
   two ends of a continuous fluid scale for the hero display type + logo,
   built with clamp(). Fixed-size UI text (buttons, inputs, footer, notes)
   stays the exact px Figma uses at BOTH comps, since it doesn't change
   between them either. Structural layout (stacked vs. split column)
   switches at 900px, matching the two provided breakpoints.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------
   PP Agrandir (Grand Heavy / Bold) and PP Object Sans (Regular / Bold) are
   the two typefaces used in the Figma file. They are paid Pangram Pangram
   fonts, not available on Google Fonts — drop the licensed woff2 files in
   assets/fonts/ and these @font-face rules will pick them up. Until then,
   the fallback stacks below approximate the look.
   -------------------------------------------------------------------- */
@font-face {
  font-family: "PP Agrandir";
  src: url("../assets/fonts/PPAgrandir-GrandHeavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Agrandir";
  src: url("../assets/fonts/PPAgrandir-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Object Sans";
  src: url("../assets/fonts/PPObjectSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Object Sans";
  src: url("../assets/fonts/PPObjectSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --beige: #dadacf;
  --red: #e44327;
  --yellow: #f69500;
  --ink: #1d1c17;
  --bg: #000;

  --font-display: "PP Agrandir", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "PP Object Sans", "Helvetica Neue", Arial, sans-serif;

  /* fluid viewport clamp bounds — anchored to the two Figma frames */
  --vw-min: 375;
  --vw-max: 1440;

  --gutter: clamp(20px, calc(20px + (100vw - 375px) * 0.0563), 80px);
}

/* fluid(minPx, maxPx) helper values, computed per-property below with calc()
   using: min + (max - min) * (100vw - 375px) / (1440 - 375) */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--beige);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Stage / background --------------------------------------------- */

.stage {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
}

.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The current cover image. Swap this <img> for a <video autoplay muted
   loop playsinline> using the same .bg__cover class when the motion
   background is ready — object-fit: cover already keeps proportion. */
.bg__cover,
.bg__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg__glow {
  object-position: bottom;
}

.bg__vignette {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.95) 100%),
    rgba(0, 0, 0, 0.2);
}

/* ---- Panel / layout ---------------------------------------------------- */

.panel {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, calc(20px + (100vw - 375px) * 0.0169), 40px) var(--gutter)
    clamp(70px, calc(70px + (100vw - 375px) * 0.0075), 78px);
  gap: clamp(24px, calc(24px + (100vw - 375px) * 0.169), 40px);
}

.intro {
  margin: 0;
  max-width: 527px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
}

.intro strong {
  font-weight: 700;
}

.content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(48px, calc(48px + (100vw - 375px) * 0.169), 96px);
}

@media (min-width: 900px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Brand / logo ------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(8px + (100vw - 375px) * 0.0094), 18px);
}

.brand__logo {
  width: clamp(241px, calc(241px + (100vw - 375px) * 0.1049), 352.7px);
  height: auto;
}

.brand__tag {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14.38px, calc(14.38px + (100vw - 375px) * 0.00624), 21.03px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--red);
  white-space: nowrap;
}

.brand__tag span {
  display: block;
  color: var(--yellow);
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  max-width: 582px;
}

.hero__title,
.hero__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: clamp(22px, calc(22px + (100vw - 375px) * 0.0169), 40px);
}

.hero__claim {
  margin-top: 0.15em;
}

.hero__claim .c-red {
  color: var(--red);
  display: block;
}

.hero__claim .c-yellow {
  color: var(--yellow);
  display: block;
}

.hero__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: clamp(20px, calc(20px + (100vw - 375px) * 0.0169), 34px) 0;
}

.hero__label {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}

.hero__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

/* ---- Signup form ---------------------------------------------------------- */

.signup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 335px;
}

.signup input {
  appearance: none;
  border: none;
  border-radius: 3px;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 16px;
}

.signup input::placeholder {
  color: var(--ink);
  opacity: 1;
}

.signup button {
  appearance: none;
  border: none;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  cursor: pointer;
}

.signup button:hover {
  filter: brightness(1.05);
}

.signup__status {
  min-height: 1.4em;
  font-size: 13px;
}

.signup__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.signup__consent input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.signup__box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--beige);
  border-radius: 3px;
  position: relative;
}

.signup__consent input:checked + .signup__box {
  background: var(--yellow);
  border-color: var(--yellow);
}

.signup__consent input:checked + .signup__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.signup__consent input:focus-visible + .signup__box {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.signup__status.is-error {
  color: var(--red);
}

.signup button:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (min-width: 900px) {
  .signup {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .signup__consent {
    flex: 0 0 100%;
  }

  .signup input[type="email"] {
    flex: 1;
    min-width: 0;
  }

  .signup button {
    white-space: nowrap;
  }
}

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* Mobile: Privacy Policy sits left, Credit sits right (matches the 375
   comp). Desktop flips to Credit-left / Privacy-right, aligned under the
   same two columns as .content, so Privacy lines up with the right
   column — same alignment the privacy page's copy uses. */
.site-footer__link--privacy {
  order: -1;
}

.site-footer__link {
  font-size: 10px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__link {
    text-transform: none;
    justify-self: start;
  }

  .site-footer__link--privacy {
    order: 0;
    grid-column: 2;
  }
}

/* ---- Privacy page ------------------------------------------------------------ */

.privacy-copy {
  max-width: 582px;
  font-family: var(--font-body);
  color: #fff;
}

.privacy-copy h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, calc(20px + (100vw - 375px) * 0.0075), 28px);
  text-transform: uppercase;
  margin: 0 0 1em;
}

.privacy-copy p {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 1.2em;
}

.privacy-copy p strong {
  font-weight: 700;
}