/* The homepage pricing cards (home.css "10-pricing"), for the page templates: _inc/partials/pricing-cards.php with
   assets/js/pricing.js. Copied 27 Oct 2026 so the pricing page matches the homepage; keep the two in step.
   Every rule starts with body.ft .lp .pr-block.pr-block so it wins over the article's own resets (tools-kb.css .ft-blocks). */
body.ft .lp .pr-block.pr-block .pr-bar { display: flex; justify-content: center; margin-bottom: clamp(28px, 3.4vw, 40px); }


/* billing toggle (the app's pw-term, as a pill) */
body.ft .lp .pr-block.pr-block .pr-term { padding: 4px; background: rgb(31 26 46 / .055); }
body.ft .lp .pr-block.pr-block .pr-term > button { height: 38px; padding: 0 18px; font-size: .9375rem; gap: 8px; }
body.ft .lp .pr-block.pr-block .pr-save { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--violet-soft); color: var(--violet-ink); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
body.ft .lp .pr-block.pr-block .pr-term > [aria-pressed="false"] .pr-save { background: rgb(127 86 217 / .1); }

/* cards */
body.ft .lp .pr-block.pr-block .pr-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { body.ft .lp .pr-block.pr-block .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
body.ft .lp .pr-block.pr-block .pr-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 32px; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-tile); isolation: isolate; overflow: hidden; }
body.ft .lp .pr-block.pr-block .pr-card.is-pop { box-shadow: 0 0 0 1.5px var(--ink), var(--shadow-float), 0 40px 80px -48px rgb(70 40 130 / .35); }
body.ft .lp .pr-block.pr-block .pr-card.is-pop::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 260px; pointer-events: none; background:
  radial-gradient(55% 90% at 88% 0%, rgb(214 196 250 / .55), transparent 72%),
  radial-gradient(45% 70% at 18% 0%, rgb(250 214 196 / .38), transparent 72%); }
body.ft .lp .pr-block.pr-block .pr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
body.ft .lp .pr-block.pr-block .pr-name { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: -.018em; color: var(--ink); }
body.ft .lp .pr-block.pr-block .pr-flag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .005em; white-space: nowrap; }
body.ft .lp .pr-block.pr-block .pr-blurb { margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }

/* price: Inter 300, digits roll on the billing switch */
body.ft .lp .pr-block.pr-block .pr-price { display: flex; align-items: baseline; gap: 8px; margin-top: 30px; }
body.ft .lp .pr-block.pr-block .pr-amt { display: inline-flex; align-items: baseline; font-size: clamp(2.875rem, 2.3rem + 1.2vw, 3.375rem); line-height: 1; font-weight: 300; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
body.ft .lp .pr-block.pr-block .pr-cur { margin-inline-end: .02em; }
body.ft .lp .pr-block.pr-block .pr-num { display: inline-flex; }
body.ft .lp .pr-block.pr-block .pr-d { position: relative; display: inline-grid; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
body.ft .lp .pr-block.pr-block .pr-d > span { grid-area: 1 / 1; }
body.ft .lp .pr-block.pr-block .pr-per { font-size: .9375rem; color: var(--muted); letter-spacing: 0; }
body.ft .lp .pr-block.pr-block .pr-bill { position: relative; display: grid; margin-top: 10px; font-size: .875rem; line-height: 1.45; color: var(--muted); }
body.ft .lp .pr-block.pr-block .pr-bill > span { grid-area: 1 / 1; }
body.ft .lp .pr-block.pr-block .pr-cta { margin-top: 24px; width: 100%; --h: 48px; font-size: .9375rem; }

body.ft .lp .pr-block.pr-block .pr-rule { height: 1px; margin: 28px 0 22px; border: 0; background: var(--line); }
body.ft .lp .pr-block.pr-block .pr-inc { margin-bottom: 14px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
body.ft .lp .pr-block.pr-block .pr-list { display: grid; gap: 13px; }
body.ft .lp .pr-block.pr-block .pr-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: start; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
body.ft .lp .pr-block.pr-block .pr-list li b { font-weight: 500; color: var(--ink); }
body.ft .lp .pr-block.pr-block .pr-list .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }

/* the writers' prints next to "ghostwriters" (the app's halftone marks) */
body.ft .lp .pr-block.pr-block .pr-marks { display: inline-flex; align-items: center; gap: 3px; padding-inline-start: 4px; }
body.ft .lp .pr-block.pr-block .pr-marks .byl { --bs: 17px; }
body.ft .lp .pr-block.pr-block .pr-marks .pr-more { margin-inline-start: 3px; font-size: .75rem; font-weight: 500; color: var(--muted); }
/* three seats */
body.ft .lp .pr-block.pr-block .pr-seats { display: inline-flex; padding-inline-start: 6px; }
body.ft .lp .pr-block.pr-block .pr-seats i { width: 22px; height: 22px; margin-inline-start: -5px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .625rem; font-weight: 600; color: var(--ink); background: #ece5fb; box-shadow: 0 0 0 2px var(--card); }
body.ft .lp .pr-block.pr-block .pr-seats i:nth-child(2) { background: #fbe3d6; } body.ft .lp .pr-block.pr-block .pr-seats i:nth-child(3) { background: #e3ead6; }
/* a writer and a kit per client: three app rows */
body.ft .lp .pr-block.pr-block .pr-clients { display: grid; gap: 6px; margin-top: 22px; padding: 6px; border-radius: var(--r-card); background: var(--page-2); }
body.ft .lp .pr-block.pr-block .pr-client { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px 0 9px;padding-inline: 9px 12px; border-radius: var(--r-ctl); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; font-weight: 500; color: var(--ink); }
body.ft .lp .pr-block.pr-block .pr-client i { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgb(31 26 46 / .08); }
body.ft .lp .pr-block.pr-block .pr-client small { font-size: .75rem; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* reassurance under the cards */
body.ft .lp .pr-block.pr-block .pr-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin-top: 36px; }
body.ft .lp .pr-block.pr-block .pr-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
body.ft .lp .pr-block.pr-block .pr-trust .ic { width: 16px; height: 16px; color: var(--violet); }

@media (min-width: 900px) and (max-width: 1099px) {
  body.ft .lp .pr-block.pr-block .pr-card { padding: 24px 22px 28px; }
  body.ft .lp .pr-block.pr-block .pr-list li { font-size: .875rem; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  /* narrow cards: the prints go under their line */
  body.ft .lp .pr-block.pr-block .pr-list li { grid-template-columns: 18px minmax(0, 1fr); }
  body.ft .lp .pr-block.pr-block .pr-list li:has(.pr-seats) { grid-template-columns: 18px minmax(0, 1fr) auto; }
  body.ft .lp .pr-block.pr-block .pr-marks { grid-column: 2; justify-self: start; padding-inline-start: 0; margin-top: -4px; }
}
@media (max-width: 899px) {
  body.ft .lp .pr-block.pr-block .pr-card.is-pop { order: -1; }
}
@media (min-width: 640px) and (max-width: 899px) {
  body.ft .lp .pr-block.pr-block .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ft .lp .pr-block.pr-block .pr-card.is-pop { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  body.ft .lp .pr-block.pr-block .pr-term { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  body.ft .lp .pr-block.pr-block .pr-term > button { justify-content: center; height: 40px; }
  body.ft .lp .pr-block.pr-block .pr-card { padding: 24px 22px 26px; }
  body.ft .lp .pr-block.pr-block .pr-price { margin-top: 24px; }
  body.ft .lp .pr-block.pr-block .pr-trust { flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
}

/* in a narrower column (an article, not the page's full width): the same rules as the homepage's narrow screens,
   by the column's width */
body.ft .lp .pr-block.pr-block { container-type: inline-size; }
@container (max-width: 1000px) {
  body.ft .lp .pr-block.pr-block .pr-card { padding: 24px 20px 28px; }
  body.ft .lp .pr-block.pr-block .pr-list li { grid-template-columns: 18px minmax(0, 1fr); font-size: .875rem; }
  body.ft .lp .pr-block.pr-block .pr-list li:has(.pr-seats) { grid-template-columns: 18px minmax(0, 1fr) auto; }
  body.ft .lp .pr-block.pr-block .pr-marks { grid-column: 2; justify-self: start; padding-inline-start: 0; margin-top: -4px; }
  body.ft .lp .pr-block.pr-block .pr-client { grid-template-columns: 22px minmax(0, 1fr); }
  body.ft .lp .pr-block.pr-block .pr-client small { display: none; }
}
@container (max-width: 760px) {
  body.ft .lp .pr-block.pr-block .pr-grid { grid-template-columns: minmax(0, 1fr); }
  body.ft .lp .pr-block.pr-block .pr-card.is-pop { order: -1; grid-column: auto; }
}