/* THE PLAN CARD — shared.

   The white box with the price in it appears on the pricing page and inside
   the "Sign up for premium" popup on the gallery. One file, so the two can
   never say different things. Everything here is the card itself; the pricing
   page's own layout stays in pricing.css.

   The buy button is .fc-hero-try from the gallery, unchanged. */

/* ---- the card ---- */

.fc-p-card {
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.fc-p-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.fc-p-kicker {
  font: 700 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.fc-p-badge {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--ramp);
  color: #fff;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fc-p-switch {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: 999px;
  background: #f2f2f5;
}

.fc-p-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: var(--body);
  font: 600 13.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.fc-p-tab.is-on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 20, 27, .14);
}

.fc-p-save {
  padding: 3px 8px;
  border-radius: 999px;
  background: #12a150;
  color: #fff;
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
}

.fc-p-fig {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 6px;
}

.fc-p-amount {
  font: 800 clamp(40px, 5vw, 52px)/1 Archivo, Inter, system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
}

.fc-p-per {
  font: 600 14px/1 Inter, system-ui, sans-serif;
  color: var(--muted-2);
}

.fc-p-then {
  margin: 0 0 20px;
  font: 500 14px/1.5 Inter, system-ui, sans-serif;
  color: var(--body);
}

.fc-p-btn {
  display: block;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--ramp);
  color: #fff;
  font: 700 16px/1 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}

.fc-p-btn:hover { filter: brightness(1.09); transform: translateY(-1px); }

.fc-p-fine {
  margin: 12px 0 20px;
  font: 400 12.5px/1.55 Inter, system-ui, sans-serif;
  color: var(--muted-2);
  text-align: center;
}

.fc-p-list {
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
  display: grid;
  gap: 11px;
}

.fc-p-list li {
  position: relative;
  padding-left: 26px;
  font: 400 14.5px/1.5 Inter, system-ui, sans-serif;
  color: var(--body);
}

.fc-p-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .4em;
  width: 12px;
  height: 7px;
  border-left: 2px solid #12a150;
  border-bottom: 2px solid #12a150;
  transform: rotate(-45deg);
}


/* ---- the buy button ----
   .fc-hero-try from the gallery, unchanged, so it keeps drifting and the mark
   still rides in on hover. Only its placement is set here. */

.fc-p-buy {
  display: block;
  margin-top: 0;
  text-decoration: none;
  text-align: center;
}

/* the price everyone else pays, said plainly so the Founding rate reads as
   the exception it is */
.fc-p-regular {
  margin: -12px 0 20px;
  font: 500 13.5px/1.5 Inter, system-ui, sans-serif;
  color: var(--muted-2);
}

.fc-p-regular s {
  text-decoration-thickness: 1.5px;
  color: var(--ink);
  font-weight: 700;
}

/* ================= THE POPUPS =================
   Signing in and signing up, over the page rather than instead of it. */

.fc-pop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 14, 22, .6);
  overflow-y: auto;
}

.fc-pop[hidden] { display: none; }

body.is-popped { overflow: hidden; }

.fc-pop-box {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: auto;
}

.fc-pop-x {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #14141b;
  font: 400 20px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* ---- logging in ---- */

.fc-pop-in {
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.fc-pop-in h2 { margin: 0 0 4px; font: 800 22px/1.2 Inter, system-ui, sans-serif; }

.fc-pop-sub {
  margin: 0 0 18px;
  color: var(--muted-2);
  font-size: 14px;
}

.fc-pop-form { display: grid; gap: 10px; }

.fc-pop-email {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
}

/* the popup carries its own button: .fc-board-btn is defined in the
   dashboard's stylesheet, which the gallery does not load, so relying on it
   left a plain grey box on the page that matters most */
.fc-pop-form button {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font: 800 14.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.fc-pop-form button:hover { background: var(--red-hover, #c2151c); }
.fc-pop-form button[disabled] { opacity: .6; cursor: default; }

.fc-pop-note {
  margin: 14px 0 0;
  color: var(--muted-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---- the line that swaps one popup for the other ---- */

.fc-pop-swap {
  margin: 16px 0 0;
  color: var(--muted-2);
  font-size: 13px;
  text-align: center;
}

.fc-pop-plan .fc-pop-swap {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .8);
}

.fc-pop-swap button,
.fc-pop-swap a {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fc-pop-plan .fc-pop-swap a { color: #fff; }
.fc-pop-swap button:hover, .fc-pop-swap a:hover { color: var(--red); }
.fc-pop-plan .fc-pop-swap button:hover { color: #fff; opacity: .8; }

.fc-pop-or { display: block; }

/* the card in the popup carries its own close button's shadow, so it needs no
   extra frame — it is the same card the pricing page shows */
.fc-pop .fc-p-card { margin: 0; }

@media (max-width: 560px) {
  .fc-pop { padding: 16px; align-items: start; }
  .fc-pop-x { top: 6px; right: 6px; }
}


/* The page's own link colour was winning on hover and turning the label black.
   Both buttons are red or bordered — their text is white in every state. */
.fc-p-buy,
.fc-p-buy:hover,
.fc-p-buy:focus,
.fc-p-buy:active { color: #fff; }

/* ---- the link is away ---- */

.fc-pop-sent { text-align: center; padding: 6px 0 2px; }

.fc-pop-tick {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #d8f0e2;
  color: #0c6b36;
}

.fc-pop-sent-h {
  margin: 0 0 6px;
  font: 800 18px/1.2 Inter, system-ui, sans-serif;
}

.fc-pop-sent-p {
  margin: 0;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.55;
}

.fc-pop-sent-p b { color: var(--ink); word-break: break-all; }

.fc-pop-again {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-2);
  font: 600 13px/1 Inter, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fc-pop-again:hover { color: var(--ink); }

/* the burst: scraps of paper, gone in a second, and never in the way */
.fc-confetti {
  position: fixed;
  z-index: 401;
  width: 7px;
  height: 10px;
  border-radius: 1px;
  pointer-events: none;
}

/* ---- choosing which project an effect goes into ---- */

.fc-pop-projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.fc-pop-project {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fc-pop-project:hover { border-color: var(--red); background: #fff8f8; }

.fc-pop-project-name { font: 700 14.5px/1.3 Inter, system-ui, sans-serif; }

.fc-pop-project-meta {
  flex: none;
  color: var(--muted-2);
  font: 500 12px/1.3 Inter, system-ui, sans-serif;
}

.fc-pop-loading,
.fc-pop-none {
  padding: 13px 2px;
  color: var(--muted-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.fc-pop-none a { color: var(--red); font-weight: 700; }

/* what to do once it is in */
.fc-pop-after {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.fc-pop-after .fc-board-btn {
  padding: 13px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font: 800 14px/1 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}

.fc-pop-after .fc-board-btn:hover { background: var(--red-hover, #c2151c); color: #fff; }

.fc-pop-stay {
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  font: 700 13.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.fc-pop-stay:hover { border-color: var(--ink); }