/* ācta pricing: the fee schedule.
   One bond sheet in a manila folder lists the plans in ruled columns under a
   3px double rule. The billing choice is the folder's two tabs, Monthly and
   Annual: a radio group styled like the guide's folder tabs, so CSS shows the
   chosen prices and the page works without script. The "Free during the
   beta" stamp is pressed onto the sheet itself, above the plans. The questions reuse the shared .rec-q disclosure.
   Loads after marketing.css. */

/* ---------- Page ---------- */

.pr-page {
  width: var(--wrap);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 112px);
}

.pr-title {
  font-size: clamp(2.25rem, 1.3rem + 2.9vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.pr-lede {
  margin-top: 14px;
  max-width: 60ch;
  font-size: 1.1875rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- The sheet ---------- */

.pr-sheet {
  position: relative;
  margin-top: clamp(64px, 7vw, 96px);
  padding: clamp(24px, 3.5vw, 48px);
  background: var(--bond);
  border: 1px solid var(--sheet-edge);
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(90, 70, 20, 0.08), 0 40px 80px -40px rgba(60, 45, 10, 0.5);
}

/* The stamp is pressed onto the sheet, above the plans. It sits wholly on
   the bond, so it never straddles the folder, and no price sits under it. */
/* The head row: the schedule's name and terms, then the stamp. */
.pr-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}
/* Typed like the caption of a document: Courier, capitals, underscored. */
.pr-sched__title {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-type);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-sched__terms {
  margin-top: 8px;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.pr-stamp {
  display: flex;
  justify-content: flex-end;
  flex: none;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.pr-stamp span { transform: rotate(-3deg); }
.pr-stamp span {
  display: block;
  padding: 13px 26px 14px;
  border: 6px double var(--stamp-red);
  border-radius: 3px;
  color: var(--stamp-red);
  font-size: clamp(1.375rem, 0.8rem + 1.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 4px var(--bond), inset 0 0 0 6.5px var(--stamp-red);
}


/* ---------- Billing choice ---------- */

.pr-bill {
  position: absolute;
  left: -1px;
  bottom: 100%;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pr-bill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* Same form as .g-folders__tab in guide.css. The chosen tab is in front:
   bond, joined to the sheet with no line between them. */
.pr-bill__opt {
  position: relative;
  margin-right: -1px;
  padding: 8px 18px 7px;
  background: var(--manila-deep);
  border: 1px solid var(--folder-edge);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.pr-bill__opt:hover { color: var(--ink); background: color-mix(in srgb, var(--manila-deep) 70%, var(--bond)); }
.pr-bill__input:checked + .pr-bill__opt {
  z-index: 1;
  margin-bottom: -1px;
  padding: 11px 18px 9px;
  background: var(--bond);
  border-color: var(--sheet-edge);
  color: var(--ink);
}
.pr-bill__input:focus-visible + .pr-bill__opt {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  z-index: 2;
}

/* Monthly by default. The annual choice swaps every price on the sheet. */
.pr-price__set--annual { display: none; }
.pr-sheet:has(#pr-bill-annual:checked) .pr-price__set--monthly { display: none; }
.pr-sheet:has(#pr-bill-annual:checked) .pr-price__set--annual { display: inline; }

/* A browser without :has() cannot swap them, so it shows both and drops
   the choice. */
@supports not selector(:has(*)) {
  .pr-bill { display: none; }
  .pr-price__set--annual { display: block; }
  .pr-price .pr-price__set--annual { margin-top: 6px; font-size: 0.75em; }
}

/* ---------- Plans ---------- */

.pr-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  margin-top: 32px;
  border-top: 3px double var(--ink);
}
.pr-plan {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 28px clamp(20px, 2.6vw, 36px) 8px;
}
.pr-plan:first-child { padding-left: 0; }
.pr-plan:last-child { padding-right: 0; }
.pr-plan + .pr-plan { border-left: 1px solid var(--bond-rule); }

.pr-plan__name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.016em;
}
.pr-plan__for {
  margin-top: 8px;
  max-width: 34ch;
  font-family: var(--font-doc);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pr-price {
  margin-top: 24px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.pr-price__amt {
  font-size: clamp(2.5rem, 1.7rem + 1.9vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pr-price__per {
  margin-left: 2px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.pr-price--contact { display: flex; align-items: flex-end; }
.pr-contact { min-width: 160px; }

.pr-plan__facts {
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}
.pr-plan__facts li {
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--bond-rule);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---------- Every plan includes ---------- */

.pr-includes {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.pr-includes__title {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pr-includes__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px clamp(20px, 2.6vw, 36px);
  margin-top: 16px;
}
.pr-includes__list li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.45;
}
.pr-includes__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--ink);
}

/* ---------- Questions ---------- */

.pr-faq {
  width: var(--wrap);
  margin-inline: auto;
  padding: 0 0 clamp(80px, 9vw, 136px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
}
.pr-faq__list { border-bottom: 1px solid var(--ink); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pr-plan {
    display: block;
    grid-row: auto;
    padding: 28px 0 8px;
  }
  .pr-plan + .pr-plan { border-left: 0; border-top: 1px solid var(--bond-rule); }
  .pr-plan--custom { padding-bottom: 4px; }
  .pr-plan__facts li:last-child { border-bottom: 0; }
  .pr-includes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pr-faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .pr-sheet { padding: 26px 18px 26px; }
  .pr-sheet__head { flex-direction: column; align-items: flex-start; }
  .pr-stamp { align-self: center; }
  .pr-stamp span { padding: 10px 16px 11px; font-size: 1.0625rem; letter-spacing: 0.12em; }
  .pr-bill__opt { padding: 7px 14px 6px; font-size: 0.875rem; }
  .pr-bill__input:checked + .pr-bill__opt { padding: 9px 14px 8px; }
  .pr-plans { margin-top: 24px; }
  .pr-includes__list { grid-template-columns: minmax(0, 1fr); }
  .pr-contact { width: 100%; }
}

@media print {
  .pr-bill { display: none; }
  .pr-stamp span { transform: none; }
  .pr-price__set--annual { display: block; }
}