/* ============================================================
   FOUNDING NURSE COMMUNITY — standalone landing page styles
   Page-specific layer on top of css/main.css tokens/components.
   Loaded only by index.html, after main.css.
   ============================================================ */

/* ---------- Anchors clear the fixed nav ---------- */
#join, #join-final, #why { scroll-margin-top: 6.5rem; }

/* ---------- Section labels ("Why join", "The Nurse Moves App", …) ----------
   main.css sets these at 0.72rem/0.22em, which is too small and too widely
   tracked to read comfortably. Bumped and tightened here only. */
.kicker {
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  font-weight: 650;
}
.kicker::before, .kicker.centered::after { width: 1.875rem; height: 0.1563rem; }
@media (max-width: 640px) {
  .kicker { font-size: 0.8rem; letter-spacing: 0.14em; }
}

/* ---------- Visible keyboard focus (form-first page) ---------- */
a:focus-visible, button:focus-visible, .theme-dial:focus-visible {
  outline: 0.1875rem solid var(--gold-soft);
  outline-offset: 0.1875rem;
  border-radius: 0.375rem;
}
.btn:focus-visible { border-radius: 6.25rem; }

/* ============================================================
   HERO — copy left, sign-up card right
   ============================================================ */
.fn-hero .hero-grid { align-items: center; }
.fn-hero .hero-copy .lead { margin-bottom: 1.625rem; }
.fn-hero .sun { animation-duration: 11s; }
.fn-hero-card { position: relative; }

/* ---------- Soft photo atmosphere behind the left column ----------
   Every colour below is a LITERAL rgba, written out once per theme.
   Deliberately NO var() tokens: this tint must go warm-light in
   morning/evening and deep-navy at night, and the tokens that flip
   (--white, --navy-deep) flip the wrong way for that. */
.fn-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* layer 1 = per-theme tint, layer 2 = the photograph */
  background-image: var(--fnp-tint), url("../assets/img/hero-nurses.jpg");
  background-size: cover, cover;
  background-position: center center, var(--fnp-pos);
  background-repeat: no-repeat, no-repeat;
  opacity: var(--fnp-op);
  filter: var(--fnp-filter);
  /* Single radial feather so the photo dissolves before the form card. */
  -webkit-mask-image: var(--fnp-mask);
          mask-image: var(--fnp-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

  /* MORNING (baseline) — the client's "white/gold overlay" */
  --fnp-op: 0.15;
  --fnp-pos: 30% 36%;
  --fnp-filter: saturate(0.72) contrast(0.94) brightness(1.06);
  --fnp-tint: linear-gradient(104deg,
      rgba(255, 253, 247, 0.56) 0%,
      rgba(246, 231, 196, 0.44) 44%,
      rgba(255, 255, 255, 0.30) 100%);
  --fnp-mask: radial-gradient(118% 106% at 15% 52%,
      #000 0%, #000 33%, rgba(0, 0, 0, 0.55) 58%, transparent 82%);
}

/* EVENING — golden hour; sepia pull marries the photo to the coral hero */
[data-theme="evening"] .fn-hero-photo {
  --fnp-op: 0.17;
  --fnp-filter: saturate(0.68) sepia(0.16) contrast(0.95) brightness(1.02);
  --fnp-tint: linear-gradient(104deg,
      rgba(255, 246, 232, 0.52) 0%,
      rgba(232, 198, 114, 0.40) 46%,
      rgba(242, 161, 133, 0.26) 100%);
}

/* NIGHT — the photo becomes a low horizon, not the sky. Mask is re-anchored
   to 76% so the upper band (where js/main.js spawns stars at top 0–62%)
   stays clear, and the tint darkens instead of lightening. */
[data-theme="night"] .fn-hero-photo {
  --fnp-op: 0.16;
  --fnp-pos: 30% 30%;
  --fnp-filter: saturate(0.40) brightness(0.60) contrast(1.08);
  --fnp-tint: linear-gradient(104deg,
      rgba(10, 16, 32, 0.66) 0%,
      rgba(12, 30, 46, 0.52) 44%,
      rgba(12, 36, 48, 0.34) 100%);
  --fnp-mask: radial-gradient(128% 88% at 17% 76%,
      #000 0%, #000 28%, rgba(0, 0, 0, 0.50) 55%, transparent 84%);
}

/* Tablet: hero stacks to one column, so aim the feather as a band under
   the headline and fade it out before the form card. */
@media (min-width: 641px) and (max-width: 920px) {
  .fn-hero-photo {
    --fnp-op: 0.12;
    --fnp-mask: radial-gradient(150% 74% at 50% 16%,
        #000 0%, rgba(0, 0, 0, 0.55) 44%, transparent 80%);
  }
  [data-theme="night"] .fn-hero-photo {
    --fnp-op: 0.13;
    --fnp-mask: radial-gradient(150% 70% at 50% 12%,
        #000 0%, rgba(0, 0, 0, 0.50) 42%, transparent 78%);
  }
}

/* Phone: the crop is too tight to read as anything. display:none also
   prevents the fetch (the preload link's media query already did). */
@media (max-width: 640px) {
  .fn-hero-photo { display: none; }
}

@media (max-width: 920px) {
  .fn-hero { padding-top: clamp(6.5rem, 15vh, 8rem); }
  .fn-hero-card { margin-top: 2.25rem; max-width: 30rem; margin-inline: auto; width: 100%; }
}

/* ============================================================
   Benefits band — light, warm
   ============================================================ */
.fn-benefits {
  background: linear-gradient(180deg, var(--warm-white), var(--warm-white-alt));
  overflow: hidden;
}
@media (max-width: 1080px) {
  .fn-benefits .fgrid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* ============================================================
   Arch figure (What Nurse Moves is)
   ============================================================ */
.arch-figure { position: relative; }
.arch-figure::before {
  content: ""; position: absolute; inset: -1.375rem auto auto -1.375rem;
  width: 58%; height: 46%;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 40% 40% var(--r-xl) var(--r-xl);
  border: 0.125rem solid var(--gold-pale);
  z-index: 0;
}
[data-theme="night"] .arch-figure::before { border-color: rgba(232, 181, 98, 0.4); }
.arch-mask {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 34% 34% var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-lift);
}
.arch-mask img {
  /* height:auto is load-bearing — without it the img's height="" attribute
     stays a definite height and aspect-ratio is ignored entirely. */
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 38%; display: block;
  animation: archDrift 45s ease-in-out infinite alternate;
}
@keyframes archDrift {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (max-width: 920px) {
  .arch-figure { max-width: 28rem; margin-inline: auto; }
  .arch-figure::before { display: none; }
}

/* ============================================================
   "What happens next" — visual hierarchy pass
   ------------------------------------------------------------
   NOTE: .how flips light→dark with the theme (--warm-white-alt →
   --blue-wash) and .how-num's background is var(--white), which
   flips WITH it. This is one of the few places the flipping
   tokens are already correct — don't "fix" them.
   ============================================================ */
.how-steps {
  --how-num-size: 6.75rem;     /* was 5.5rem */
  /* Half of main.css's `.how-path svg { height: 1.625rem }`. The svg
     overflows the 2px .how-path div downward and the path sits at its
     vertical midpoint, so the line's true centre is `top + 0.8125rem`
     — NOT `top`. The naive "half the diameter" value is 0.8125rem low. */
  --how-path-half: 0.8125rem;
}

/* Connector: recomputed so it finally passes through the circle centres */
.how-path { top: calc(var(--how-num-size) / 2 - var(--how-path-half)); }
.how-path path {
  stroke: #B8902F;             /* was var(--gold) #D4A843 — too pale on white */
  stroke-width: 2.4;
  stroke-dasharray: 6 10;
  opacity: 0.72;
}
/* Night: a deep gold goes muddy on near-black; the soft gold glows instead. */
[data-theme="night"] .how-path path { stroke: var(--gold-soft); opacity: 0.5; }

/* Circles: bigger, with a ring that's actually visible on white.
   The border uses ALPHA gold so it composites correctly on the white disc
   in morning/evening AND on the #131F38 disc at night — one declaration. */
.how-num {
  width: var(--how-num-size);
  height: var(--how-num-size);
  margin-bottom: 1.75rem;
  border: 0.1875rem solid rgba(212, 168, 67, 0.72);   /* was .125rem --gold-pale (1.2:1, invisible) */
  font-size: 2.6rem;                                   /* was 1.9rem */
  font-weight: 650;
  line-height: 1;
  color: #A9801F;   /* was var(--gold) at 2.2:1 on white; #B8902F lands at
                       2.97:1, just under AA-large. This clears it at ~3.6:1. */
}
[data-theme="night"] .how-num { color: var(--gold-soft); }
.how-step:hover .how-num { box-shadow: 0 0.75rem 2.25rem -0.75rem rgba(212, 168, 67, 0.45); }

/* The spinning dashed halo was the only visible ring before; now that the
   border is a real 3px gold, two concentric golds is one too many. */
.how-num::after { inset: -0.8125rem; border-color: rgba(212, 168, 67, 0.26); }

.how-step h3 {
  font-size: clamp(1.22rem, 1.5vw, 1.38rem);   /* was 1.12rem */
  font-weight: 650;
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
}
.how-step p {
  font-size: 1rem;               /* was 0.94rem */
  line-height: 1.65;
  color: var(--text-body);       /* was --text-muted — only 2.6:1, failed AA */
  max-width: 19.5rem;
}

@media (max-width: 480px) {
  .how-steps { --how-num-size: 6rem; }   /* .how-path is display:none below 920px */
  .how-num { font-size: 2.3rem; margin-bottom: 1.5rem; }
}

/* ============================================================
   Final band — sign-up form + Founding Nurse benefits
   ------------------------------------------------------------
   .sanctuary-band is DARK in ALL THREE themes, so every colour
   here is a literal on purpose: under [data-theme="night"]
   var(--white) resolves to #131F38 and var(--navy-deep) to
   #E9EDF6 — either one inverts to unreadable on this band.
   ============================================================ */
.fn-final .section-head .lead { max-width: 40rem; margin-inline: auto; }
.fn-final .form-card { max-width: 30rem; margin-inline: auto; text-align: left; }
.fn-note { margin-top: 1.75rem; font-size: 0.86rem; color: rgba(240, 244, 243, 0.55); }
.fn-note a { color: var(--firefly); text-decoration: underline; }

/* Widen only while the grid is two-up, so main.css's 480px
   `.container-narrow { width: 91vw }` still governs on mobile. */
@media (min-width: 921px) {
  .fn-final .container-narrow { width: min(66rem, 92vw); }
}

.fn-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.25rem, 4.5vw, 3rem);
  text-align: left;              /* undo the band's inline centering */
}

/* ---- Benefits column (reuses .beta-perk markup from main.css) ---- */
.fn-perks { max-width: 28rem; }
.fn-perks-title {
  font-size: clamp(1.38rem, 2.2vw, 1.72rem);   /* capped: must not out-shout .form-title opposite it */
  font-weight: 620;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #F0F4F3;
  text-wrap: balance;
}
/* --firefly is the band's established accent (.sanctuary-band .kicker,
   .fn-note a) and is never remapped by a theme. 8.1:1 on this band. */
.fn-perks-accent { color: var(--firefly); }

/* ---- Featured benefit: the 3 free months ----
   The wash bleeds outward via negative margin cancelled by equal padding,
   so the icon and text stay on the exact same grid as the other four rows.
   That's what makes it read as "start here", not as a different component. */
/* Selectors carry BOTH .beta-perk and .fn-perk-feature so they outrank the
   base `.fn-perks-list .beta-perk strong` rule further down the file, which
   is equal-specificity and would otherwise win on source order. */
.fn-perks-list .beta-perk.fn-perk-feature {
  margin: -0.375rem -0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.9375rem;
  background: linear-gradient(96deg,
      rgba(232, 181, 98, 0.085) 0%,
      rgba(232, 181, 98, 0.032) 38%,
      rgba(232, 181, 98, 0) 66%);
}
/* Icon keeps the SAME size as the others (a size change breaks the row
   rhythm) — only the temperature goes up. */
.fn-perks-list .beta-perk.fn-perk-feature .icon {
  background: rgba(232, 181, 98, 0.21);
  box-shadow: inset 0 0 0 0.0625rem rgba(232, 181, 98, 0.46);
}
/* #FFFFFF literal, never var(--white) — that token is #131F38 at night. */
.fn-perks-list .beta-perk.fn-perk-feature strong {
  font-size: 1.05rem;
  font-weight: 650;
  color: #FFFFFF;
  letter-spacing: -0.004em;
}
.fn-perks-list .beta-perk.fn-perk-feature span { color: rgba(240, 244, 243, 0.8); }

@media (max-width: 480px) {
  .fn-perks-title { font-size: 1.32rem; line-height: 1.26; }
  .fn-perks-list .fn-perk-feature { margin-inline: -0.625rem; padding-inline: 0.625rem; }
}
.fn-perks-list { margin-top: 1.25rem; gap: 1.125rem; }
/* main.css sets .beta-perk strong to var(--white) — inverts at night. */
.fn-perks-list .beta-perk strong { color: #F0F4F3; }
.fn-perks-list .beta-perk span { color: rgba(240, 244, 243, 0.68); line-height: 1.5; }
.fn-perks-list .beta-perk .icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.875rem;
  font-size: 1.15rem;
  background: rgba(232, 181, 98, 0.14);
  box-shadow: inset 0 0 0 0.0625rem rgba(232, 181, 98, 0.28);
}

/* ---- Reassurance under the CTA (inside <form>, hides on success) ---- */
.fn-microcopy {
  margin-top: 0.9375rem;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(240, 244, 243, 0.62);
}
.fn-microcopy + .form-note { margin-top: 0.4375rem; }
/* The hero card DOES invert with the theme, so it keeps the token. */
.form-card.on-light .fn-microcopy { color: var(--text-muted); }

/* ---- Night-theme fixes for this band (main.css uses var(--white)) ---- */
.fn-final .form-card:not(.on-light) .field input,
.fn-final .form-card:not(.on-light) .field select,
.fn-final .form-card:not(.on-light) .field textarea { color: #F0F4F3; }
.fn-final .form-success h3 { color: #F0F4F3; }

/* ---- Stack form → benefits, in source order ---- */
@media (max-width: 920px) {
  .fn-final-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fn-perks { max-width: 30rem; width: 100%; margin-inline: auto; }
}

/* ============================================================
   Standalone footer — two columns (no site-nav links here)
   ============================================================ */
.fn-footer-grid { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 640px) {
  .fn-footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile — 390px
   ============================================================ */
@media (max-width: 480px) {
  /* The full CTA never truncates — it wraps instead */
  .fn-card .form-submit { white-space: normal; line-height: 1.35; padding-block: 0.9375rem; }
  .fn-perks-list { gap: 1rem; }
  .fn-perks-list .beta-perk .icon { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
  .fn-microcopy { font-size: 0.8rem; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .arch-mask img { animation: none; }
}