/* ==========================================================================
   NUii — coming soon page
   Layout, spacing and type sizes are carried over from the client's approved
   mockups so the signed-off composition is preserved, and deviations are
   commented where they occur.

   Current reference: NUii_Coming_Soon_The_NUii_Way_to_Healthy_v4.html (2026-09-25).
   v4 replaced the whole palette (see tokens.css) and the logo, which now carries
   the tagline inside the lockup. The body markup was byte-identical to v3 and the
   hero photograph is unchanged; everything here that moved, moved for colour.
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--nuii-font-sans);
  color: var(--nuii-text);
  background: var(--nuii-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visible only to screen readers, but still focusable. */
.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;
}

/* A single consistent focus ring. The mockup styled :focus on inputs only,
   which left the button and links with no keyboard affordance at all. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--nuii-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 3%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(180deg, var(--nuii-gray-light) 0%, var(--nuii-gray) 100%);
}

.hero {
  min-height: 940px;
  display: grid;
  grid-template-columns: 55% 45%;
  position: relative;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: 56px 32px 126px var(--nuii-gutter);
  display: flex;
  align-items: center;
}

.hero__inner {
  width: 100%;
}

/* --- Logo ----------------------------------------------------------------
   The v4 lockup is drawn full-bleed — its ink reaches the canvas edges — so
   unlike the v1 artwork there is no transparent padding to correct for, and the
   client's widths are used exactly as given. The lockup now sets "THE NUii WAY
   TO HEALTHY" beneath the wordmark, which is why it is both smaller and more
   generously spaced below than the v3 logo was.
   ------------------------------------------------------------------------- */
.logo {
  width: 320px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 0 36px;
}

.eyebrow {
  color: var(--nuii-teal);
  font-size: 31px;
  line-height: 1;
  letter-spacing: var(--nuii-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 32px;
}

/* Weight 400 rather than the mockup's 500: Georgia ships only regular and
   bold, so 500 already rendered as regular in the approved preview. Stating
   400 keeps Gelasio (which does have a 500) from rendering heavier. */
.headline {
  margin: 0;
  max-width: 720px;
  font-family: var(--nuii-font-serif);
  font-weight: 400;
  font-size: clamp(60px, 5.15vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.047em;
  color: var(--nuii-deep);
}

.subhead {
  margin: 17px 0 0;
  max-width: 660px;
  font-family: var(--nuii-font-serif);
  font-size: clamp(38px, 3.2vw, 53px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--nuii-teal);
}

.lead {
  margin-top: 26px;
  max-width: 690px;
  font-size: clamp(20px, 1.45vw, 25px);
  line-height: 1.52;
  color: var(--nuii-ink);
}

/* --- Early access form -------------------------------------------------- */
.signup {
  margin-top: 34px;
  max-width: 690px;
}

.signup__title {
  color: var(--nuii-teal);
  font-size: 18px;
  letter-spacing: var(--nuii-tracking-label);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.signup__copy {
  font-size: 16px;
  color: var(--nuii-muted);
  margin-bottom: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 225px;
  gap: 14px;
  align-items: start;
}

.field {
  min-width: 0;
}

.field__input {
  width: 100%;
  height: var(--nuii-control-h);
  border: 1px solid var(--nuii-line);
  border-radius: var(--nuii-radius);
  background: rgba(255, 255, 255, 0.88);
  padding: 0 18px;
  outline: none;
  color: var(--nuii-ink);
  font-family: inherit;
  font-size: 16px;
}

.field__input::placeholder {
  color: #8b9599;
  opacity: 1;
}

.field__input:focus {
  border-color: var(--nuii-teal);
  box-shadow: var(--nuii-ring);
}

.field__input[aria-invalid="true"] {
  border-color: var(--nuii-error);
}

.field__input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn {
  height: var(--nuii-control-h);
  border: 0;
  border-radius: var(--nuii-radius);
  background: var(--nuii-action);
  color: var(--nuii-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.18s ease;
}

.btn:hover {
  background: var(--nuii-action-hover);
}

.btn[disabled] {
  cursor: progress;
  background: var(--nuii-action);
  opacity: 0.78;
}

/* Spinner shown while the submission is in flight. */
.btn__spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--nuii-white);
  border-radius: 50%;
  animation: nuii-spin 0.7s linear infinite;
  flex: none;
}

.btn[data-loading="true"] .btn__spinner {
  display: block;
}

@keyframes nuii-spin {
  to {
    transform: rotate(360deg);
  }
}

.privacy {
  margin-top: 11px;
  margin-bottom: 0;
  color: var(--nuii-muted);
  font-size: 12px;
  line-height: 1.55;
  max-width: 690px;
}

.privacy a {
  color: var(--nuii-teal);
  text-decoration: underline;
  text-decoration-color: var(--nuii-line);
  text-underline-offset: 2px;
}

.privacy a:hover {
  text-decoration-color: var(--nuii-lime);
}

/* One live region drives every outcome, so a screen reader hears the result
   without the focus being yanked around. */
.form-status {
  margin-top: 14px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.45;
  min-height: 0;
}

.form-status:empty {
  display: none;
}

.form-status[data-state="success"] {
  color: var(--nuii-success);
}

.form-status[data-state="error"] {
  color: var(--nuii-error);
}

/* --- Feature strip ------------------------------------------------------ */
.features {
  margin-top: 42px;
  display: grid;
  /* Six since the v3 revision. The 720px cap is the client's, which leaves
     ~120px per column, so .feature's side padding is trimmed below to keep
     the longest label ("PERSONALIZED") from overflowing its cell. */
  grid-template-columns: repeat(6, 1fr);
  max-width: 720px;
  padding: 0;
  list-style: none;
}

.feature {
  text-align: center;
  padding: 0 9px;
  border-right: 1px solid rgba(0, 73, 82, 0.18);
}

.feature:first-child {
  padding-left: 0;
}

.feature:last-child {
  padding-right: 0;
  border-right: 0;
}

.feature__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--nuii-lime);
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: rgba(196, 217, 58, 0.14);
}

.feature__icon svg {
  width: 31px;
  height: 31px;
  stroke: var(--nuii-teal);
  fill: none;
  stroke-width: 1.65;
}

.feature__label {
  font-size: 11.5px;
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--nuii-deep);
}

/* --- Hero photograph ----------------------------------------------------
   The mockup used a CSS background-image, which cannot carry a srcset. A real
   <img> lets us ship WebP with a JPEG fallback and two widths. The blurred
   LQIP behind it covers the gap before the photo decodes.
   ------------------------------------------------------------------------- */
.hero__media {
  position: relative;
  min-height: 940px;
  overflow: hidden;
  background: var(--nuii-gray) url("../img/hero-sunset-lqip.jpg") center / cover
    no-repeat;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  transform: scale(1.045);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(231, 231, 228, 1) 0%,
    rgba(231, 231, 228, 0.82) 8%,
    rgba(231, 231, 228, 0.26) 24%,
    rgba(231, 231, 228, 0) 44%
  );
}

/* --- Curved footer ----------------------------------------------------- */
.footer-curve {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -90px;
  height: 195px;
  background: var(--nuii-teal);
  border-top: 4px solid var(--nuii-lime);
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  transform: rotate(-0.3deg);
  z-index: 4;
}

.site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  z-index: 5;
  padding: 0 var(--nuii-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--nuii-white);
}

.footer-message {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  font-size: 18px;
}

.footer-message .accent {
  color: var(--nuii-lime);
  font-weight: 700;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.site-footer__links a {
  color: var(--nuii-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.86;
}

.site-footer__links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* The domain keeps its lime treatment and larger size — it reads as the brand
   signature rather than as another nav link. */
.site-footer__domain {
  color: var(--nuii-lime);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__links a.site-footer__domain {
  color: var(--nuii-lime);
  font-size: 18px;
  font-weight: 800;
  opacity: 1;
}

.site-footer__domain:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --nuii-gutter: var(--nuii-gutter-md);
  }

  .logo {
    width: 300px;
  }
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__content {
    padding: 44px 34px 58px;
  }

  .hero__media {
    min-height: 620px;
  }

  .logo {
    width: 300px;
  }

  /* The mockup set `display:none` on both the curve and the footer below this
     width, which silently dropped the tagline and the domain on every phone
     and tablet. They become a normal stacked band instead. */
  .footer-curve {
    display: none;
  }

  .site-footer {
    position: static;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 34px 30px;
    background: var(--nuii-teal);
    border-top: 4px solid var(--nuii-lime);
  }
}

@media (max-width: 720px) {
  .hero__content {
    padding: 30px var(--nuii-gutter-sm) 48px;
  }

  .logo {
    width: 230px;
    margin-bottom: 26px;
  }

  .eyebrow {
    font-size: 22px;
    letter-spacing: 0.24em;
    margin-bottom: 25px;
  }

  .headline {
    font-size: 52px;
  }

  .subhead {
    font-size: 37px;
  }

  .lead {
    font-size: 18px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 8px;
  }

  .feature {
    border-right: 0;
    padding: 0;
  }

  .hero__media {
    min-height: 450px;
  }

  .site-footer {
    padding: 24px var(--nuii-gutter-sm) 28px;
  }

  .footer-message {
    font-size: 16px;
  }
}

/* ==========================================================================
   Confirmation overlay
   --------------------------------------------------------------------------
   Shown after a successful signup. Carries the copy from the welcome email so
   the visitor is acknowledged immediately, on screen, with no email round trip
   — which is what lets the actual email wait on DNS without hurting anyone.

   Rebuilt as native markup rather than injecting email/welcome-early-access.html
   directly: that file is table-based email HTML held together by inline style
   attributes, and the CSP in _headers sets style-src 'self', which blocks
   inline styles outright. Native markup is also responsive and focusable.
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  overflow-y: auto;
  background: rgba(28, 20, 14, 0.58);
  animation: nuii-fade 0.22s ease both;
}

/* Must beat `display:grid` above, or [hidden] would have no effect. */
.overlay[hidden] {
  display: none;
}

/* 640px wide with a 46px inset and an 18px radius, matching the email's card
   exactly, so the two read as the same artefact. Padding lives on __content so
   the green footer band can run full-bleed to the card edges. */
.overlay__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  background: var(--nuii-gray-light);
  border-radius: var(--nuii-radius-lg);
  box-shadow: 0 24px 70px rgba(20, 14, 9, 0.34);
  overflow: hidden;
  animation: nuii-rise 0.26s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

.overlay__content {
  padding: 42px 46px 38px;
}

/* Matches the email's 180px logo inside the same 548px content width. */
.overlay__logo {
  width: 180px;
  max-width: 50%;
  height: auto;
  display: block;
  margin: 0 0 30px;
}

/* The email's closing green band, tagline and copyright included. Leaving it out
   is what made the overlay read as a stripped-down version of the design. */
.overlay__footer {
  background: var(--nuii-teal);
  padding: 24px 46px 26px;
}

.overlay__footer-tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nuii-white);
}

.overlay__footer-tagline .accent {
  color: var(--nuii-lime);
  font-weight: 700;
}

.overlay__footer-legal {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #b9cdd0;
}

.overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nuii-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.overlay__close:hover {
  background: rgba(196, 217, 58, 0.22);
  color: var(--nuii-ink);
}

.overlay__eyebrow {
  margin: 0 0 18px;
  color: var(--nuii-lime);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.overlay__title {
  margin: 0;
  font-family: var(--nuii-font-serif);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--nuii-deep);
}

.overlay__subtitle {
  margin: 8px 0 0;
  font-family: var(--nuii-font-serif);
  font-weight: 400;
  font-size: clamp(23px, 4.4vw, 28px);
  line-height: 1.2;
  color: var(--nuii-teal);
}

.overlay__rule {
  width: 62px;
  height: 2px;
  margin: 24px 0;
  background: var(--nuii-lime);
  border: 0;
}

.overlay__body {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--nuii-ink);
}

.overlay__body strong {
  color: var(--nuii-deep);
}

/* Only rendered when the acknowledgement email actually went out, so the page
   never claims to have sent something it didn't. */
.overlay__sent {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--nuii-muted);
}

.overlay__sent b {
  color: var(--nuii-ink);
  font-weight: 700;
  word-break: break-all;
}

.overlay__callout {
  margin: 26px 0;
  padding: 20px 22px;
  border-left: 3px solid var(--nuii-lime);
  border-radius: 8px;
  background: #f0f3dc;
}

.overlay__callout p:first-child {
  margin: 0;
  font-family: var(--nuii-font-serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--nuii-teal);
}

.overlay__callout p:last-child {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nuii-ink);
}

.overlay__next {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nuii-teal);
}

.overlay__list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.overlay__list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nuii-ink);
}

.overlay__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nuii-lime);
}

.overlay__signoff {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nuii-ink);
}

.overlay__signoff strong {
  color: var(--nuii-ink);
}

.overlay__dismiss {
  margin-top: 28px;
  height: var(--nuii-control-h);
  padding: 0 30px;
  border: 0;
  border-radius: var(--nuii-radius);
  background: var(--nuii-action);
  color: var(--nuii-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.overlay__dismiss:hover {
  background: var(--nuii-action-hover);
}

@keyframes nuii-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nuii-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Stops the page behind the overlay from scrolling. */
.nuii-modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .overlay {
    padding: 0;
  }

  .overlay__card {
    min-height: 100%;
    border-radius: 0;
  }

  .overlay__content {
    padding: 34px 24px 30px;
  }

  .overlay__footer {
    padding: 22px 24px 26px;
  }

  .overlay__logo {
    width: 150px;
    margin-bottom: 24px;
  }

  .overlay__dismiss {
    width: 100%;
  }
}

/* Short landscape viewports: the 940px floor would otherwise force a scroll
   on laptops with limited height. */
@media (min-width: 1041px) and (max-height: 900px) {
  .hero,
  .hero__media {
    min-height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__media img {
    transform: none;
  }
}

@media print {
  .hero__media,
  .footer-curve,
  .signup {
    display: none;
  }
}