/* ===========================================================
   NAKED & NU — Landing Page Styles
   Brand fonts:  NT Fabulous (display serif) / Syne (sans body)
   Brand colors: Azure Blue #008AE7 · Cream #FFF7F2
                 Sky Blue #8CD3FF · Ice Blue #D1EBFF · Coconut #FFFAF9
=========================================================== */

@font-face {
  font-family: "NT Fabulous";
  src: url("../fonts/NTFabulous.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Tokens ---------- */
:root {
  --azure: #008AE7;
  --azure-deep: #0072BF;
  --cream: #FFF7F2;
  --coconut: #FFFAF9;
  --sky: #8CD3FF;
  --ice: #D1EBFF;
  --ink: #0B2338;

  --font-display: "NT Fabulous", "Times New Roman", serif;
  --font-body: "Syne", Arial, Helvetica, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Single shared left/right inset used by every element that should
     line up on the page edge: the icon, the "Taste the sunshine"-style
     copy blocks, and the signup section. Keep this the one source of
     truth rather than one-off paddings per element. */
  --edge: clamp(24px, 4vw, 64px);
}

html, body { background: var(--cream); color: var(--azure); }

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.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;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow--light { color: var(--cream); opacity: .85; }
.eyebrow--dark { color: var(--azure); }

/* ===========================================================
   AGE GATE — full-screen overlay, azure background to match the hero.
   script.js toggles the [hidden] attribute and locks page scroll while
   it's open; see initAgeGate() there for the localStorage logic.
=========================================================== */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--edge);
  background: var(--azure);
}
.age-gate[hidden] { display: none; }

body.age-gate-locked { overflow: hidden; }

.age-gate__panel {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.age-gate__icon {
  height: 64px;
  width: auto;
  margin: 0 auto 28px;
  display: block;
}
.age-gate__eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 42px);
  color: var(--cream);
  opacity: .85;
  margin: 0 0 20px;
}
.age-gate__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.15;
  color: var(--cream);
  margin: 0 0 16px;
}
.age-gate__copy {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  opacity: .8;
  margin: 0 0 32px;
}
.age-gate__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.age-gate__actions[hidden] { display: none; }
.age-gate__declined {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn--pill.btn--cream {
  background: var(--cream);
  color: var(--azure);
}
.btn--pill.btn--cream:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

.btn--dark {
  background: var(--azure);
  color: var(--cream);
}
.btn--dark:hover { background: var(--azure-deep); transform: translateY(-2px); }

.btn--ghost-dark {
  background: transparent;
  color: var(--azure);
  border: 1.5px solid var(--azure);
  padding: 14.5px 34px;
}
.btn--ghost-dark:hover { background: var(--azure); color: var(--cream); }

.btn--small { padding: 12px 24px; font-size: 12px; }

/* ===========================================================
   BRANDMARK — the only two "sticky" elements on the page. Both are
   position:fixed and never move; everything else beneath them is a
   plain, normally-scrolling page. script.js fades + blurs the wordmark
   out shortly after the hero (so it doesn't sit behind/interfere with
   copy further down) and ripples it back in near the very end of the
   page, so it settles in behind the bottom of the site. Its opacity,
   blur and scale are driven every frame by script.js — the values
   below are just the resting (fully visible) state.
=========================================================== */

.brandmark__icon {
  position: fixed;
  top: clamp(10px, 1.6vw, 24px);
  left: clamp(10px, 1.6vw, 24px);
  height: clamp(92px, 9.5vw, 138px);
  width: auto;
  z-index: 50;
  pointer-events: none;
  transition: opacity .3s ease;
}

.brandmark__wordmark {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -3vh;
  display: block;
  /* The source SVGs have their own tight (padding-free) bounding box,
     so this box's edges now line up with the actual lettering — equal
     --edge insets on both sides match the left margin of the hero copy
     above it and the right margin on the photo side. */
  width: calc(100% - (var(--edge) * 2));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: opacity, filter, transform;
}

/* ===========================================================
   PANELS — plain, normally-scrolling sections. The wordmark sits above
   them (z-index 3 vs. 2) so it's visible resting over the hero at the
   very start of the page; script.js fades its opacity to 0 well before
   the next section scrolls into view, so it never visibly overlaps
   later copy even though it's technically layered on top.
=========================================================== */
.panel {
  position: relative;
  z-index: 2;
  background: var(--azure);
}

.panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.panel--split {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 90vh;
}
.panel--hero {
  height: 100vh;
  min-height: 560px;
}
.panel--split .panel__media { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; }
.panel--split .panel__copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Extra bottom padding (vs. top) pulls the vertically-centred content
     up off dead-centre, so the heading sits a little higher in the
     frame instead of sitting exactly in the middle of the section. */
  padding: clamp(32px, 6vw, 96px) var(--edge) clamp(140px, 18vh, 240px);
}
.panel--split.panel--reverse .panel__media { grid-column: 1; }
.panel--split.panel--reverse .panel__copy { grid-column: 2; }
.panel--split .panel__media .panel__image { position: absolute; inset: 0; }

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.1;
}
.hero__tagline span { display: block; }
.hero__tagline--tight { font-size: 0.9em; }

.checklist {
  display: flex;
  flex-direction: column;
  max-width: 420px;
}
.checklist li {
  color: var(--cream);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,247,242,.3);
}

/* ===========================================================
   SCROLL REVEALS — each [data-reveal] block fades up once, the first
   time it scrolls into view (see [data-reveal] rule further down);
   script.js staggers siblings within the same parent slightly.
=========================================================== */

/* ===========================================================
   SIGNUP — two columns: a "coming soon" line sitting above the
   signup form on the left, contact details right-aligned on the
   right. The fixed corner icon (see initIconHandoff in script.js)
   simply fades out once it reaches this section — nothing replaces
   it here.
=========================================================== */
.panel--signup {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  grid-template-areas:
    "promo connect"
    "main connect";
  column-gap: clamp(40px, 6vw, 90px);
  padding: clamp(96px, 14vh, 160px) var(--edge) clamp(80px, 10vh, 140px);
  background: var(--cream);
}

.signup__connect { grid-area: connect; }
.signup__promo { grid-area: promo; }
.signup__main { grid-area: main; }

.signup__promo .hero__tagline {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: clamp(32px, 5vh, 56px);
}

/* Footer color flip: this section (and the static wordmark below it)
   sits on cream instead of azure, so every element inside inverts to
   azure text/borders. */
.panel--signup .hero__tagline,
.panel--signup .notify__text,
.panel--signup .eyebrow--light,
.panel--signup .story__signup__link,
.panel--signup .signup-form__row input,
.panel--signup .signup-form__consent,
.panel--signup .signup-form__message {
  color: var(--azure);
}
.panel--signup .notify__text { opacity: .8; }
.panel--signup .eyebrow--light { opacity: .75; }
.panel--signup .signup-form__consent { opacity: .65; }
.panel--signup .signup-form__row input {
  border-bottom-color: rgba(0, 138, 231, .35);
}
.panel--signup .signup-form__row input::placeholder { color: rgba(0, 138, 231, .5); }
.panel--signup .signup-form__row input:focus { border-color: var(--azure); }
.panel--signup .btn__spinner {
  border-color: rgba(0, 138, 231, .3);
  border-top-color: var(--azure);
}
.panel--signup .signup-form__message.is-success { color: #1f7a4d; }
.panel--signup .signup-form__message.is-error { color: #c23b23; }

/* ===========================================================
   BRANDMARK FOOTER — a second, static wordmark at the very bottom of
   the page. Unlike the fixed one up top (which only ever fades out as
   you scroll past the hero), this one doesn't move or animate — it's
   ordinary page content, in blue, at the same scale, sitting below the
   signup section as the last thing on the page.
=========================================================== */
.brandmark-footer {
  background: var(--cream);
  overflow: hidden;
  padding-top: clamp(12px, 2vh, 28px);
}
.brandmark-footer__word {
  display: block;
  /* Same --edge-based width as .brandmark__wordmark above, so both
     wordmarks line up with the page's text margins at every width. */
  width: calc(100% - (var(--edge) * 2));
  max-width: 100%;
  height: auto;
  margin: 0 auto -3vh;
}

.signup__promo,
.signup__main,
.signup__connect {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.signup__connect {
  align-items: flex-end;
  text-align: right;
}

.notify__text {
  max-width: 480px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--cream);
  opacity: .85;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.signup__connect .eyebrow { margin-bottom: 14px; }
.story__signup__link {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cream);
  margin-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.story__signup__link:hover { border-color: currentColor; }

.signup-form { width: 100%; max-width: 480px; }
.signup-form__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.signup-form__row input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(255,247,242,.4);
  outline: none;
  background: transparent;
  padding: 8px 2px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
  transition: border-color .2s ease;
}
.signup-form__row input::placeholder { color: rgba(255,247,242,.5); }
.signup-form__row input:focus { border-color: var(--cream); }
.signup-form__row .btn { flex-shrink: 0; position: relative; }

.btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(255,247,242,.6);
}
.btn--ghost-light:hover { background: var(--cream); color: var(--azure); border-color: var(--cream); }

.btn__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,247,242,.4);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.signup-form.is-loading .btn__label { display: none; }
.signup-form.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.signup-form__consent {
  margin-top: 18px;
  font-size: 12px;
  color: var(--cream);
  opacity: .6;
  line-height: 1.5;
}
.signup-form__consent-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s ease;
}
.signup-form__consent-link:hover { opacity: .75; }
.signup-form__message {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
  color: var(--cream);
}
.signup-form__message.is-success { color: #d6f5e3; }
.signup-form__message.is-error { color: #ffd9d0; }

/* ===========================================================
   REVEAL ANIMATION
=========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Anyone with reduced-motion set at the OS level gets the same content,
   just without the sliding/fading motion — it appears (and disappears)
   instantly instead of animating in. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    transform: none;
  }
}

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width: 760px) {
  .brandmark__icon { height: 150px; }
  .brandmark__wordmark { bottom: -2vh; }

  .hero__tagline { font-size: clamp(32px, 9vw, 48px); }

  /* Side-by-side media/copy doesn't fit a phone viewport — instead of
     stacking photo-then-copy, the photo fills the whole section edge to
     edge and the copy floats on top of it, with a soft gradient scrim
     behind the text for legibility. No more solid colour block behind
     the copy — the image is the background. */
  .panel--split {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    background: none;
  }
  .panel--split .panel__media,
  .panel--split.panel--reverse .panel__media {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 1;
  }
  .panel--split .panel__copy,
  .panel--split.panel--reverse .panel__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Generous bottom clearance — not just visual breathing room: the
       scroll-reveal observer ignores the bottom ~8% of the viewport, so
       copy sitting flush against the true edge could land in that dead
       zone and never fade in. */
    padding: 40px var(--edge) clamp(96px, 14vh, 140px);
    background: linear-gradient(to top, rgba(11, 35, 56, .72) 0%, rgba(11, 35, 56, .32) 45%, rgba(11, 35, 56, 0) 75%);
  }

  /* The hero is the exception: its tagline sits roughly halfway up the
     screen (not anchored to the bottom) so the fixed wordmark has clear
     room to rest at the very bottom of the viewport underneath it, and
     the photo behind both fills the full first screen on arrival. */
  .panel--hero {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }
  .panel--hero .panel__copy {
    justify-content: center;
    padding-bottom: 0;
    background: linear-gradient(rgba(11, 35, 56, 0) 0%, rgba(11, 35, 56, .45) 30%, rgba(11, 35, 56, .45) 70%, rgba(11, 35, 56, 0) 100%);
  }

  .panel--signup {
    grid-template-columns: 1fr;
    grid-template-areas:
      "promo"
      "main"
      "connect";
    row-gap: 40px;
    padding: 100px var(--edge) 72px;
  }
  .signup__connect {
    align-items: flex-start;
    text-align: left;
  }
  .signup__promo .hero__tagline { font-size: clamp(30px, 10vw, 44px); }
  .signup__promo .hero__tagline { margin-bottom: 40px; }

  .brandmark-footer__word { margin-bottom: -2vh; }
}

/* ===========================================================
   POLICY PAGE — a plain, readable content page (privacy.html) sharing
   the site's fonts and palette, but laid out as ordinary editorial
   copy rather than the full-bleed panels of the landing page.
=========================================================== */
.policy-body { background: var(--cream); }

.policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 4vw, 32px) var(--edge);
}
.policy-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.policy-header__icon { height: 36px; width: auto; }
.policy-header__word {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--azure);
}
.policy-header__back {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--azure);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.policy-header__back:hover { border-color: currentColor; }

.policy {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) var(--edge) clamp(96px, 14vh, 160px);
  color: var(--azure);
}
.policy__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.1;
  margin-bottom: 12px;
}
.policy__updated {
  font-size: 13px;
  opacity: .6;
  margin-bottom: 40px;
}
.policy p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
  opacity: .9;
}
.policy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 28px);
  margin: 48px 0 16px;
}
.policy__link {
  text-decoration: underline;
  text-underline-offset: 2px;
}