/* The plan chooser: a panel over the page, not a page of its own.

   Two columns. Plans on the left, how you pay on the right, so the choice and
   its consequence are on screen together. On a phone the right column drops
   under the left and the dialog becomes a sheet, because side by side at that
   width leaves neither readable. */

.pm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pm[hidden] { display: none; }

.pm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 21, 0.55);
  animation: pm-fade 0.18s ease-out;
}

.pm-dialog {
  position: relative;
  width: min(1420px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--cream);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(24, 28, 21, 0.4);
  animation: pm-rise 0.22s cubic-bezier(.2, .8, .3, 1);
  overscroll-behavior: contain;
}

@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .pm-scrim, .pm-dialog { animation: none; }
}

.pm-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--body-muted);
  cursor: pointer;
}

.pm-x:hover { background: var(--cream-deep); color: var(--dark); }
.pm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- the two columns ---------- */

.pm-step {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  align-items: start;
}

.pm-step[hidden] { display: none; }

.pm-left {
  padding: 42px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pm-right {
  align-self: stretch;
  padding: 42px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream-deep);
  border-left: 1px solid var(--border-medium);
  min-width: 0;
}

.pm-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
  padding-right: 40px;
}

.pm-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-muted);
}

/* ---------- the plans ---------- */

.pm-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 4px;
}

.pm-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  padding: 18px 15px 16px;
  border: 1.5px solid var(--border-medium);
  border-radius: 14px;
  background: var(--cream);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-plan:hover { border-color: var(--border-strong); }

/* the chosen one, the way Adobe rings its selected card */
.pm-plan[aria-checked="true"] {
  border-color: var(--sage);
  box-shadow: 0 0 0 1.5px var(--sage);
}

.pm-plan:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.pm-plan-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Out of the flow and on the card's top edge. In the flow it had to reserve
   a line on every card to keep the names level, which left the others with
   an empty strip. */
.pm-badges {
  position: absolute;
  top: -10px;
  left: 14px;
  display: flex;
  gap: 6px;
}

/* Shown on the chosen card while the year is the term, because that is when
   it is true: the same Sprout costs less a month that way. */
.pm-best {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--cream);
}

.pm-best[hidden] { display: none; }

/* three across is tighter than Adobe's two, so the name is set to stay on
   one line rather than break the card's top edge in half */
.pm-plan-name {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pm-flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--cream);
}

.pm-plan-for {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.pm-what {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.pm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pm-list li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.42;
}

.pm-list li > span[aria-hidden] {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--sage);
}

.pm-plan-price {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pm-plan-rate {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
}

.pm-plan-per { font-size: 13px; font-weight: 600; color: var(--label-muted); }

.pm-explore {
  margin-top: 2px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 700;
  color: var(--sage);
}

/* ---------- how you pay ---------- */

.pm-right-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}

.pm-right-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-muted);
}

.pm-terms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.pm-term {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 15px 16px;
  border: 1.5px solid var(--border-medium);
  border-radius: 12px;
  background: var(--cream);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.pm-term:hover:not([disabled]) { border-color: var(--border-strong); }

.pm-term[aria-checked="true"] {
  border-color: var(--sage);
  box-shadow: 0 0 0 1.5px var(--sage);
}

.pm-term[disabled] { opacity: 0.5; cursor: default; }
.pm-term:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.pm-term-name { font-size: 14px; font-weight: 700; }

.pm-term-price { display: flex; align-items: baseline; gap: 4px; }

.pm-term-rate {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 600;
}

.pm-term-per { font-size: 14px; font-weight: 600; color: var(--label-muted); }

.pm-term-note { font-size: 13px; line-height: 1.45; color: var(--body-muted); }

.pm-go {
  margin-top: 8px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--sage);
  color: var(--cream);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pm-go:hover:not([disabled]) { background: var(--dark); }

.pm-go[disabled] {
  background: var(--border-medium);
  color: var(--label-muted);
  cursor: default;
}

/* ---------- the second step ---------- */

.pm-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  background: var(--cream-deep);
  max-width: 420px;
}

.pm-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-medium);
}

.pm-summary-row:last-child { border-bottom: 0; }

.pm-summary-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-muted);
  align-self: center;
}

.pm-summary-v { font-size: 16px; font-weight: 700; text-align: right; }

.pm-back {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--sage);
  cursor: pointer;
}

.pm-back:hover { text-decoration: underline; }

.pm-form {
  max-width: none;
  margin: 0;
  font-family: inherit;
  --sf-gap: 0.8rem;
  --sf-radius: 10px;
}

.pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="tel"],
.pm-form textarea { min-height: 46px; background: var(--cream); }

.pm-form .sf-submit {
  align-self: stretch;
  margin-top: 6px;
  padding: 15px 24px;
  border-radius: var(--btn-radius);
  background: var(--sage);
  border-color: var(--sage);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.pm-form .sf-submit:hover { background: var(--dark); border-color: var(--dark); opacity: 1; }
.pm-form .sf-submit[disabled] { opacity: 1; }

/* ---------- narrower ---------- */

@media (max-width: 860px) {
  .pm { padding: 0; align-items: flex-end; }

  .pm-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }

  .pm-step { grid-template-columns: minmax(0, 1fr); }

  .pm-left { padding: 32px 20px 8px; }

  .pm-right {
    padding: 24px 20px 28px;
    border-left: 0;
    border-top: 1px solid var(--border-medium);
  }

  .pm-plans { grid-template-columns: minmax(0, 1fr); }

  /* a plan on a phone is a row, not a column: the list collapses so three of
     them can be compared without scrolling past each one */
  .pm-plan { gap: 7px; }
  .pm-what, .pm-list { display: none; }
  .pm-plan[aria-checked="true"] .pm-what,
  .pm-plan[aria-checked="true"] .pm-list { display: flex; }
  .pm-plan[aria-checked="true"] .pm-what { display: block; }

  .pm-plan-price { padding-top: 6px; }
}

@media (max-width: 640px) {
  /* a thumb is 44px; the close and the compare link were 40 and 23 */
  .pm-x { width: 44px; height: 44px; }

  .pm-explore {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .pm-form input[type="text"],
  .pm-form input[type="email"],
  .pm-form input[type="tel"],
  .pm-form textarea,
  .pm-form select { font-size: 16px; }
}

/* ---------- the decision column ---------- */

.pm-term-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* What the year saves, worked out from the two prices rather than typed, so
   it cannot drift away from them. */
.pm-save {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  /* sage-light on the cream panel was two soft tones a shade apart; amber is
     in the palette for exactly this and carries the dark text at 5.8:1 */
  background: var(--amber-edge);
  color: var(--dark);
}

.pm-save[hidden] { display: none; }

.pm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-medium);
}

.pm-total[hidden] { display: none; }

.pm-total-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.pm-total-v {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  text-align: right;
}

/* Three things worth knowing at the moment someone decides, and all three are
   promises the site already makes on its own pledge. */
.pm-assure {
  list-style: none;
  margin: 14px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pm-assure li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body-muted);
}

.pm-assure li > span[aria-hidden] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--sage);
  /* drawn, not folded out of two borders: round caps, centred by its own
     viewBox, cream on full sage rather than two mid tones fighting */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.3l2.9 2.9 5.9-6.3' fill='none' stroke='%23FBF7EF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

@media (max-width: 860px) {
  .pm-assure { gap: 9px; }
}

/* ---------- the checkout ---------- */

/* The summary on the left, and on the right the one button that posts the
   plan and term to Sprout, which sends the browser on to Stripe's own page
   for the card. */

/* the step's columns align to content, which left the tinted panel stopping
   halfway down beside a taller form */
.pm-step2 { align-items: stretch; }

.pm-left-summary {
  background: #FFFFFF;
  gap: 12px;
}

.pm-right-pay {
  background: var(--cream);
  border-left: 1px solid var(--border-medium);
  gap: 16px;
}

.pm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--body-muted);
  cursor: pointer;
}

.pm-back:hover { color: var(--dark); }

.pm-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pm-title-sm { font-size: clamp(21px, 1.7vw, 25px); padding-right: 0; }

.pm-price-big {
  margin: 2px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pm-price-big > span:first-child {
  font-family: var(--serif);
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1;
  font-weight: 600;
}

.pm-price-per { font-size: 15px; font-weight: 600; color: var(--label-muted); }

.pm-lines {
  padding-top: 14px;
  border-top: 1px solid var(--border-medium);
}

.pm-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
}

.pm-line-name { font-size: 15px; font-weight: 700; }
.pm-line-amount { font-size: 15px; font-weight: 700; text-align: right; }

.pm-line-note {
  grid-column: 1 / 2;
  font-size: 13px;
  color: var(--label-muted);
}

.pm-sums {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--border-medium);
}

.pm-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
}

.pm-sum-muted { color: var(--label-muted); }

.pm-sum-total {
  padding-top: 11px;
  border-top: 1px solid var(--border-medium);
  font-size: 16px;
  font-weight: 800;
}

.pm-renews {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--label-muted);
}

.pm-pay {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-pay-go {
  margin-top: 2px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--sage);
  color: var(--cream);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pm-pay-go:hover:not([disabled]) { background: var(--dark); }

/* switched off once pressed, while the browser is on its way to Stripe */
.pm-pay-go[disabled] {
  background: var(--border-medium);
  color: var(--label-muted);
  cursor: default;
}

.pm-pay-foot {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--label-muted);
  text-align: center;
}

@media (max-width: 860px) {
  .pm-right-pay { border-left: 0; border-top: 1px solid var(--border-medium); }
  .pm-left-summary { gap: 10px; }
}

/* ---------- what the plan gives you ---------- */

/* Two columns on a wide panel, so a plan's list does not run down one side
   with a lot of empty space beside it. */
.pm-includes {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pm-includes-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.pm-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 26px;
}

.pm-includes-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 8px;
  break-inside: avoid;
}

.pm-includes-list li > span[aria-hidden] {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--sage);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.9' fill='none' stroke='%23FBF7EF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

@media (max-width: 1100px) {
  .pm-includes-list { columns: 1; }
}