/* The decision page. Numbered like the landing page and the set behind it:
   what is finished sits on paper, what is behind the price is a list of five
   with a verb each, and the price itself is one dark bar. */

.pv-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem;
  align-items: end; padding: 2.5rem 0 .5rem;
}
.pv-intro h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.06; margin: .5rem 0 0; }
.pv-intro .lede { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }

.pv-sec { padding: 3.5rem 0 0; }
.pv-sec .sec-head, .pv-behind .sec-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink); padding-bottom: .7rem; margin-bottom: 1.6rem;
}
.pv-sec .sec-head h2 { margin: 0; font-size: 1.9rem; }
.pv-sec .sec-head h2 .num { margin-right: .6rem; }

.pv-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: start; }
.pv-two .doc, .pv-two .send-box, .pv-two .bracket-note, .pv-two .stage-video { max-width: none; }
.pv-two .working { padding: 2rem 0; }

.pv-locked {
  margin-top: 1rem; padding: 1.1rem 1.4rem; background: var(--paper-3); border: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
}
.pv-locked p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.pill {
  flex: none; display: inline-block; font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rose); border: 1px solid var(--rose); padding: .3rem .55rem; white-space: nowrap;
}

.pv-booklet { max-width: 56rem; }

/* The thank-you card as an object on the table. */
.pv-card {
  background: #fff; max-width: 300px; min-height: 380px; padding: 28px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: safe center; text-align: center; color: #1c1a17;
  font-family: var(--serif); font-size: .88rem; line-height: 1.55;
  box-shadow: 0 30px 50px -28px rgba(43,41,38,.5), 0 2px 4px rgba(43,41,38,.12);
}
.pv-card p { margin: 0; white-space: pre-line; }
.pv-card.theme-modern { font-family: var(--sans); text-align: left; }

.pv-sec .stage-video { border: 0; }
.pv-sec .ss-controls { margin-top: .9rem; }
.pv-sec #ss-note { margin: .75rem 0 0; }

/* What unlocks: the five, with what each one is and what you do with it. */
.pv-behind {
  margin-top: 4rem; border-top: 1px solid var(--ink); padding-top: 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem;
}
.pv-behind h2 { font-size: 1.9rem; margin: .5rem 0 0; }
.pv-behind .small { margin: .75rem 0 0; }
.unlocks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.unlocks li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .9rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; line-height: 1.5; color: var(--ink-2);
}
.unlocks li .num { font-size: 1.15rem; }
.unlocks li b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.unlocks li .k { font-size: .66rem; }

/* The pay bar, in ink. */
.paybar { background: var(--ink); color: var(--paper); border-top: 0; }
.paybar .price { color: var(--paper); font-size: 1.6rem; }
.paybar .price small { color: #bfb3a0; display: inline-block; margin-left: .9rem; font-size: .68rem; }
.paybar .pay-assure { margin: 0; font-size: .85rem; color: #bfb3a0; max-width: none; }
.paybar .btn { background: var(--paper); color: var(--ink); }
.paybar .btn:hover { background: #fff; }

/* Already paid: the plain notice at the top. */
.paid-note {
  margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--paper-2); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.paid-note p { margin: 0; font-size: .93rem; color: var(--ink-2); flex: 1 1 20rem; }
.paid-note b { color: var(--ink); font-weight: 500; }

@media (max-width: 64rem) {
  .pv-two { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 46rem) {
  .pv-intro { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; }
  .pv-behind { grid-template-columns: 1fr; gap: 1.25rem; }
  .unlocks li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .unlocks li .k { grid-column: 2; }
  .pv-locked { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .pv-card { max-width: none; min-height: 0; padding: 1.5rem; }
  .pv-card p { margin: 0; }
}
@media (max-width: 34rem) {
  .paybar .price { font-size: 1.25rem; }
  .paybar .pay-assure { display: none; }
  .paybar .btn { flex: 1; text-align: center; min-height: 3rem; }
}