/* The pricing page, on its own dark stage.

   Three bands: the hero where the offer lives, the questions on warm paper, and
   the footer. The card on the right is the only white surface in the dark half,
   which is what makes it the thing you look at. */

.fc-p {
  margin: 0;
  background: var(--side-bg);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fc-p-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
}

/* ---- the strip along the top ----
   The homepage banner, borrowed whole: its gradient drift and sheen live in
   styles.css, so all this page does is give it a height and show it. */

.fc-p { --banner-h: 38px; }

.fc-p .fc-banner { display: flex; }
.fc-p .fc-banner span { font-size: 13px; }
.fc-p .fc-banner b { font-weight: 800; }

.fc-p-head {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* On the left, but on the left of the CONTENT — pinned to the window it sat
   out in the margin, a long way from anything else on the page. The maths is
   the same one .fc-p-wrap uses to centre itself. */
.fc-p-back {
  position: absolute;
  left: max(26px, calc((100% - 1180px) / 2 + 26px));
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .72);
  font: 600 13.5px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
}

.fc-p-back:hover { color: #fff; }

@media (max-width: 720px) {
  .fc-p-head { flex-direction: column; align-items: center; gap: 10px; }
  .fc-p-back { position: static; left: auto; transform: none; }
}

.fc-p-logo {
  font-size: 34px;
  color: #fff;
  text-decoration: none;
}

/* ---- the hero ---- */

.fc-p-hero { padding: 34px 0 78px; }

.fc-p-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px;
  align-items: start;
}

.fc-p-title {
  margin: 0 0 16px;
  font: 800 clamp(32px, 4.2vw, 46px)/1.12 Archivo, Inter, system-ui, sans-serif;
  letter-spacing: -.025em;
  color: #fff;
}

.fc-p-sub {
  margin: 0 0 26px;
  max-width: 56ch;
  font: 400 16px/1.65 Inter, system-ui, sans-serif;
  color: #b9b4ad;
}

/* the Founding block — the only red-lit surface on the dark side */

.fc-p-founding {
  padding: 20px 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--maroon) 26%, var(--side-bg));
  border: 1px solid color-mix(in srgb, var(--red) 42%, transparent);
  margin: 0 0 18px;
}

.fc-p-founding-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ff8a8f;
}

.fc-p-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent);
}

.fc-p-founding-text {
  margin: 0;
  font: 400 14.5px/1.6 Inter, system-ui, sans-serif;
  color: #ded9d2;
}

.fc-p-more { margin: 12px 0 0; }

.fc-p-more summary {
  cursor: pointer;
  font: 600 13.5px/1 Inter, system-ui, sans-serif;
  color: #ff8a8f;
  list-style: none;
}

.fc-p-more summary::-webkit-details-marker { display: none; }
.fc-p-more summary::after { content: " +"; }
.fc-p-more[open] summary::after { content: " –"; }

.fc-p-more p {
  margin: 12px 0 0;
  font: 400 14px/1.65 Inter, system-ui, sans-serif;
  color: #c9c4bd;
}

/* the free row: present, stated, and not competing for the click */

.fc-p-free {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid #34322e;
}

/* the box has to say what it is before it says what it costs */
.fc-p-free-tag {
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #4a4741;
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #cdc7bf;
}

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

.fc-p-free-fig span {
  font: 800 26px/1 Archivo, Inter, system-ui, sans-serif;
  color: #fff;
}

.fc-p-free-fig em {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8d8880;
}

.fc-p-free-text {
  margin: 0;
  font: 400 13.5px/1.55 Inter, system-ui, sans-serif;
  color: #a8a39b;
}

.fc-p-ghost {
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 9px;
  border: 1px solid #4a4741;
  color: #fff;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.fc-p-ghost:hover { border-color: #6d675f; background: #26241f; color: #fff; }

/* ---- questions, on paper ---- */

.fc-p-qa {
  padding: 66px 0 78px;
  background: #faf7f2;
}

.fc-p-h2 {
  margin: 0 0 18px;
  font: 800 clamp(26px, 3vw, 34px)/1.15 Archivo, Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: var(--ink);
}

.fc-p-q {
  border-top: 1px solid #e8e2d8;
}

.fc-p-q:last-of-type { border-bottom: 1px solid #e8e2d8; }

.fc-p-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font: 700 15.5px/1.4 Inter, system-ui, sans-serif;
  color: var(--ink);
}

.fc-p-q summary::-webkit-details-marker { display: none; }

.fc-p-q summary::after {
  content: "+";
  flex: none;
  font: 400 22px/1 Inter, system-ui, sans-serif;
  color: var(--red);
}

.fc-p-q[open] summary::after { content: "–"; }

.fc-p-q p {
  margin: 0 0 20px;
  max-width: 74ch;
  font: 400 14.5px/1.7 Inter, system-ui, sans-serif;
  color: var(--body);
}

/* ---- the closing band ---- */

.fc-p-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin: 48px 0 0;
  padding: 34px 38px;
  border-radius: 18px;
  background: var(--side-bg);
}

.fc-p-cta h3 {
  margin: 0 0 6px;
  font: 800 clamp(22px, 2.6vw, 28px)/1.2 Archivo, Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: #fff;
}

.fc-p-cta p {
  margin: 0;
  font: 400 14.5px/1.5 Inter, system-ui, sans-serif;
  color: #a8a39b;
}

.fc-p-cta .fc-p-btn { padding: 16px 34px; }

/* ---- the footer ---- */

.fc-p-foot {
  padding: 58px 0 26px;
  background: #1b1a18;
  border-top: 1px solid #2b2925;
}

.fc-p-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.fc-p-foot-blurb {
  margin: 14px 0 16px;
  max-width: 38ch;
  font: 400 14px/1.6 Inter, system-ui, sans-serif;
  color: #94908a;
}

.fc-p-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #3a3833;
  font: 600 11.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #cdc7bf;
}

.fc-p-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d07f;
}

.fc-p-foot h4 {
  margin: 0 0 14px;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.fc-p-foot nav a {
  display: block;
  margin-bottom: 11px;
  font: 400 14.5px/1.4 Inter, system-ui, sans-serif;
  color: #a8a39b;
  text-decoration: none;
  transition: color .18s ease;
}

.fc-p-foot nav a:hover { color: #fff; }

.fc-p-foot-end {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #2b2925;
}

.fc-p-foot-end p {
  margin: 0;
  font: 400 13px/1.5 Inter, system-ui, sans-serif;
  color: #7d7a74;
}

/* ---- narrow ---- */

@media (max-width: 940px) {
  .fc-p-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .fc-p-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .fc-p-wrap { padding: 0 18px; }
  .fc-p-hero { padding: 26px 0 54px; }
  .fc-p-free { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fc-p-ghost { text-align: center; }
  .fc-p-cta { padding: 26px 22px; }
  .fc-p-foot-grid { grid-template-columns: minmax(0, 1fr); }
}


/* the buy button in the closing band is wider than the one in the card */
.fc-p-cta .fc-p-buy {
  width: auto;
  min-width: 230px;
  padding-left: 34px;
  padding-right: 34px;
}