/* Harris Taylor — pricing page

   Tokens are this site's own (style.css). Built from the site's existing
   patterns: the intro is the about page's hero, each section is the FAQ's
   two columns (eyebrow and heading left, content right), and the cards are
   the framed surface the workflow demos use. */

/* ---------- 02 to 04: heading left, content right ---------- */
.pr-sec {
  padding: clamp(64px, calc(27px + 9.86vw), 128px) var(--gutter);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.pr-sec__left {
  display: flex;
  flex-direction: column;
}

/* The FAQ's heading size (.faq__heading) */
.pr-sec__heading {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 16px 0 0;
}

/* The small line under a block */
.pr-note {
  font-size: 14px;
  font-weight: var(--wt-light);
  line-height: 1.65;
  color: var(--fg-quiet);
  margin: 20px 0 0;
  max-width: 40em;
}

/* ---------- the card ----------
   A surface one step up from the page, no border. Top to bottom: the name,
   the price with its unit, one line on how it is billed, "Includes:", then
   the list with thin ticks. The same on the plan and workflow cards. */
.pr-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: 24px;
  padding: clamp(28px, 7vw, 40px);   /* 40px, a little less on a small phone */
}

.pr-card__name {
  font-size: var(--t-h3);   /* one step up the scale, still well under the price */
  font-weight: var(--wt-regular);
  color: var(--fg-quiet);
}

/* The figure in the display face at light weight; "from" and the unit a
   third of its size, in the muted colour. The size is set on the row so
   the small parts can be fractions of it. */
.pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.18em;
  margin: 20px 0 0;
  font-size: clamp(34px, 4.4vw, 62px);   /* big, still under the section heading */
  color: var(--paper-0);
}

.pr-price__num {
  font-weight: var(--wt-light);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pr-price__from,
.pr-price__per {
  font-size: max(14px, 0.33em);
  font-weight: var(--wt-light);
  letter-spacing: 0;
  color: var(--fg-quiet);
}
.pr-price__from { margin-right: 0.1em; }

.pr-card__note {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: var(--wt-light);
  line-height: 1.5;
  color: var(--fg-quiet);
}

.pr-card__includes {
  margin: 32px 0 0;
  font-size: 15px;
  font-weight: var(--wt-regular);
  color: var(--fg);
}

/* The list: a thin tick, then the item, both muted, well spaced */
.pr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 18px 0 0;
}

.pr-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--wt-light);
  line-height: 1.5;
  color: var(--fg-quiet);
}

.pr-list li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.2em;   /* level with the first line's letters */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 02 the site: centred heading, two plans ---------- */
.pr-sec--centred { display: block; }

.pr-sec__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(48px, calc(38.8px + 2.47vw), 64px);
}

/* A short paragraph under a centred heading */
.pr-sec__lede {
  margin: var(--s-5) 0 0;
  max-width: 40em;
  font-size: 17px;
  font-weight: var(--wt-light);
  line-height: 1.65;
  color: var(--fg-quiet);
}

.pr-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

/* ---------- 03 workflows: three boxes across the section ---------- */
.pr-flows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.pr-sec__foot { text-align: center; }

/* The site's white button, centred under the boxes */
.pr-sec__btn { margin-top: var(--s-7); }

/* ---------- FAQ: short, so the heading stays put (as on /workflows/) ---------- */
.faq__left { position: static; }

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .pr-sec { grid-template-columns: 1fr; }
  .pr-sec { gap: 40px; }

  /* Tablet: the plans side by side and the workflows three across, compact */
  .pr-plans { gap: 16px; }
  .pr-flows { gap: 12px; }
  .pr-card { padding: 28px; }
  .pr-card__name { color: var(--fg); }
  .pr-price { margin-top: 12px; font-size: 36px; }
  .pr-price__from,
  .pr-price__per { font-size: 14px; }
  .pr-card__note { margin-top: 8px; font-size: 13px; }
  .pr-card__includes { margin-top: 24px; font-size: 14px; }
  .pr-list { gap: 13px; margin-top: 12px; }
  .pr-list li { gap: 10px; line-height: 1.35; }
  .pr-list li::before { width: 12px; height: 12px; }
}

/* Phone: one card a row, full size, as they were */
@media (max-width: 767px) {
  .pr-plans,
  .pr-flows { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pr-card { padding: clamp(28px, 7vw, 40px); }
  .pr-card__name { color: var(--fg-quiet); }
  .pr-price { margin-top: 20px; font-size: 34px; }
  .pr-card__note { margin-top: 14px; font-size: 14px; }
  .pr-card__includes { margin-top: 32px; font-size: 15px; }
  .pr-list { gap: 14px; margin-top: 18px; }
  .pr-list li { gap: 12px; line-height: 1.5; }
  .pr-list li::before { width: 14px; height: 14px; }
}