/* The Workshop Founding Member pop-up on the Studio front page (Aaron,
   2026-10-08; static/founding_popup.js). Brand: cream ground, chocolate
   text, Cormorant Garamond heading, the page's sans for the rest, the
   action in deep gold with cream text. The price (price-cards, Aaron
   2026-10-18): Workshop monthly struck in muted with a red line (Aaron's
   choice for this element only) and its label beside it, then the founding
   year per month as the dialog's largest figure, Cormorant Garamond 700 in
   chocolate (gold stays for what is clicked), and the year's bill beneath.
   Colours come from the page's own variables, with the Studio's values as
   the fallback. */
.fp-overlay {
  --fp-cream: var(--bg, #f5f0e8);
  --fp-ink: var(--text, #1e1a14);
  --fp-sub: var(--subtext, #6a5c42);
  --fp-gold: var(--accent, #8b6914);
  --fp-gold-deep: var(--accent-ink, #6f5310);
  --fp-muted: var(--muted, #a89878);
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background: rgba(30, 22, 12, 0.55);
  opacity: 0; transition: opacity .2s;
}
.fp-overlay[hidden] { display: none; }
.fp-overlay.fp-show { opacity: 1; }
.fp-dialog {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
  padding: 40px 36px 30px;
  background: var(--fp-cream); color: var(--fp-ink);
  border: 1px solid var(--fp-gold); outline: 1px solid var(--fp-gold); outline-offset: -6px;
  border-radius: 2px; box-shadow: 0 18px 48px rgba(30, 22, 12, 0.28);
  font-family: 'Jost', sans-serif; font-weight: 300;
  text-align: center;
}
.fp-dialog:focus { outline: 1px solid var(--fp-gold); outline-offset: -6px; }
.fp-x {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; color: var(--fp-ink); cursor: pointer;
}
.fp-x:hover { color: var(--fp-gold-deep); }
.fp-title {
  margin: 0 0 14px; font-family: 'Cormorant Garamond', serif;
  font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: 0.01em; color: var(--fp-ink);
}
.fp-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--fp-ink); }
.fp-price { margin: 0 0 16px; }
.fp-was-row { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; }
.fp-was { font-size: 18px; font-weight: 400; color: var(--fp-sub);
  text-decoration: line-through; text-decoration-color: #c62828; text-decoration-thickness: 2px; }
.fp-was-label { font-size: 14px; font-weight: 400; color: var(--fp-sub); }
.fp-now { margin: 4px 0 0; color: var(--fp-ink); line-height: 1; }
.fp-now-amount { font-family: 'Cormorant Garamond', serif; font-size: 76px; font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; color: var(--fp-ink); }
.fp-now-per { margin-left: 4px; font-size: 20px; font-weight: 400; }
.fp-billed { margin: 6px 0 0; font-size: 14px; font-weight: 400; color: var(--fp-sub); }
.fp-line { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--fp-ink); }
.fp-small { margin: 14px 0 0; font-size: 12.5px; font-style: italic; color: var(--fp-sub); }
.fp-actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fp-go {
  width: 100%; min-height: 48px; padding: 12px 18px; cursor: pointer;
  background: var(--fp-gold-deep); color: var(--fp-cream);
  border: 1px solid var(--fp-gold-deep); border-radius: 2px;
  font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
}
.fp-go:hover { background: var(--fp-ink); border-color: var(--fp-ink); }
.fp-later {
  min-height: 44px; padding: 8px 16px; cursor: pointer;
  background: transparent; border: 0; color: var(--fp-sub);
  font-family: inherit; font-size: 13px; letter-spacing: 0.06em;
  text-decoration: underline; text-underline-offset: 3px;
}
.fp-later:hover { color: var(--fp-ink); }
.fp-go:focus-visible, .fp-later:focus-visible, .fp-x:focus-visible { outline: 2px solid var(--fp-gold); outline-offset: 2px; }
.fp-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 480px) {
  .fp-dialog { padding: 36px 22px 24px; }
  .fp-title { font-size: 30px; }
}
/* Short screens (a 375 x 667 phone): the larger price would push "Not now"
   below the band beside Generate, so the spacing tightens instead. */
@media (max-height: 760px) {
  .fp-dialog { padding-top: 28px; padding-bottom: 16px; }
  .fp-title { margin-bottom: 8px; }
  .fp-lead { margin-bottom: 12px; }
  .fp-price { margin-bottom: 10px; }
  .fp-small { margin-top: 8px; }
  .fp-actions { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .fp-overlay { transition: none; } }