/* ============================================================================
   First-visit discount popup.

   Structure, geometry and interaction are a clone of blueguardian.com's
   first-visit modal, captured 4 Aug 2026. Their measurements, for reference:

     card        820 x 474 (capture) / 820 x 349 (success), radius 14.4
     grid        1.05fr 1fr on >=sm, single column below
     left pane   32px padding, column, gap 16
     logo        h 28
     h2          32 / 600 / 38
     body        16 / 24, secondary ink
     input       h 44, pill, 1.25px border, 16px side padding
     button      h 48, pill, 63deg gradient, 16 / 600
     no thanks   14 / 500, secondary ink
     disclaimer  12 / 20, secondary ink
     close       36 x 36, absolute 12 / 12, pill, translucent dark

   Every one of those numbers is reproduced. What is NOT reproduced is their
   palette: this is built on Atlas tokens, so it is the same object in our
   brand rather than a recolour of theirs.
   ========================================================================= */

.afxpz {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--e-out);
}
.afxpz[data-open="true"] { opacity: 1; pointer-events: auto; }

/* the card. 820x474 at rest, height driven by content so the success state
   collapses to its own 349 exactly as theirs does. */
.afxpz__card {
  position: relative;
  width: 820px;
  max-width: 100%;
  border-radius: 14.4px;
  border: 1.25px solid rgba(124, 177, 172, .28);
  background:
    radial-gradient(112.79% 106.31% at 27.58% -4.5%,
      rgba(124, 177, 172, .50) 0%,
      rgba(225, 255, 160, .10) 50%,
      rgba(5, 31, 29, 0) 100%),
    var(--af-hero-glow);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
  transform: translateY(8px) scale(.985);
  transition: transform var(--t-slow) var(--e-out);
}
.afxpz[data-open="true"] .afxpz__card { transform: none; }

.afxpz__grid { display: grid; grid-template-columns: 1.05fr 1fr; }

/* left pane */
.afxpz__pane {
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px;
}
/* align-self is load-bearing: the pane is a flex column, so the default
   `stretch` blew the logo from its natural 210x28 out to the full 355px pane
   width and squashed the wordmark.

   atlas-logo.png is a DARK-ink wordmark (mean ink rgb(13,40,44)) — there is
   only one logo asset in the repo, and every dark surface whitens it with the
   same filter rather than shipping a second file. .afx-nav__logo does exactly
   this. On the popup's dark card the unfiltered logo was near-invisible. */
.afxpz__logo {
  height: 28px; width: auto; display: block; align-self: flex-start;
  filter: brightness(0) invert(1);
}

.afxpz__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px; line-height: 38px; font-weight: var(--w-semi);
  letter-spacing: -.96px;
  color: #F7F7F7;
  text-wrap: balance;
}
.afxpz__p {
  margin: 0;
  font-size: 16px; line-height: 24px;
  color: var(--af-mint);
}

.afxpz__form { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }

.afxpz__input {
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  border: 1.25px solid rgba(124, 177, 172, .45);
  background: var(--af-hero-glow);
  color: var(--af-white);
  font-family: inherit; font-size: 14px;
  width: 100%;
}
.afxpz__input::placeholder { color: rgba(164, 228, 222, .6); }
.afxpz__input:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; }

/* the lime CTA. Ink is set explicitly — a lime button that inherits the link
   colour ships at about 1.1:1, which has happened on this site before. */
.afxpz__cta {
  height: 48px; padding: 12px 20px; box-sizing: border-box;
  border: 0; border-radius: var(--r-pill);
  background: linear-gradient(63deg, var(--af-teal) 0%, var(--af-lime) 100%);
  color: var(--af-ink-teal);
  font-family: inherit; font-size: 16px; font-weight: var(--w-semi);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  /* the success-state CTA is an <a>, and without this it inherits the site's
     link underline straight through the middle of the button label */
  text-decoration: none;
  transition: transform var(--t-instant) var(--e-out), filter var(--t-fast) var(--e-out);
}
.afxpz__cta:active { transform: scale(.97); }
.afxpz__cta:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; }
.afxpz__cta svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .afxpz__cta:hover { filter: brightness(1.06); }
}

.afxpz__decline {
  border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: var(--w-medium);
  line-height: 20px;
  color: var(--af-teal);
  cursor: pointer;
}
.afxpz__decline:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; }

.afxpz__legal {
  margin: 0;
  font-size: 12px; line-height: 20px;
  color: rgba(124, 177, 172, .85);
}
.afxpz__legal a { color: inherit; }

/* close */
.afxpz__close {
  position: absolute; top: 12px; right: 12px;
  /* the grid comes after this in the DOM, so the art panel painted straight
     over the close button and there was no visible way out of the modal */
  z-index: 2;
  width: 36px; height: 36px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(0, 29, 33, .8);
  color: var(--af-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxpz__close:active { transform: scale(.94); }
.afxpz__close:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .afxpz__close:hover { background: rgba(0, 29, 33, .95); }
}

/* right pane — art */
.afxpz__art {
  background: var(--af-deep) center / cover no-repeat;
  background-image: url('/assets/figma/hiw-hero-bg.webp');
  position: relative;
}
.afxpz__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--af-hero-glow) 0%, rgba(5, 31, 29, 0) 45%);
}

/* ---- success state ------------------------------------------------------ */
.afxpz__code {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 52px; padding: 8px 8px 8px 18px; box-sizing: border-box;
  border-radius: var(--r-pill);
  border: 1.25px solid rgba(124, 177, 172, .45);
  background: var(--af-hero-glow);
}
.afxpz__codeval {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 16px; font-weight: var(--w-bold); letter-spacing: 1px;
  color: var(--af-lime);
}
.afxpz__copy {
  height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(124, 177, 172, .22);
  color: var(--af-white);
  font-family: inherit; font-size: 14px; font-weight: var(--w-medium);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out);
}
.afxpz__copy:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .afxpz__copy:hover { background: rgba(124, 177, 172, .34); }
}

.afxpz [hidden] { display: none !important; }

/* ---- mobile — single column, art removed ------------------------------- */
@media (max-width: 700px) {
  .afxpz__grid { grid-template-columns: 1fr; }
  .afxpz__art { display: none; }
  .afxpz__card { width: 100%; }
  .afxpz__pane { padding: 24px; }
  .afxpz__h2 { font-size: 28px; line-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .afxpz, .afxpz__card, .afxpz__cta, .afxpz__close { transition: none; }
  .afxpz__card { transform: none; }
}

/* .afx-vh lives in atlas-ft2-mid.css, which is not on every page, and the
   popup ships everywhere. Declared here so the input's label is never the
   only thing keeping the field accessible. */
.afxpz .afx-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}