/* Pricing page (/pricing.html). Loaded after styles.css and pages.css. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Hero + controls ---------- */
.pr-hero { padding-bottom: 40px; }
/* Toggle centred under the lead, saving note centred beneath it */
.pr-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }

/* Billing toggle: pill with a sliding white thumb (Calendly style) */
.pr-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #EBEBEE; }
.pr-toggle button { position: relative; z-index: 1; height: 40px; min-width: 112px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--label); text-align: center; transition: color .25s; }
.pr-toggle button[aria-checked="true"] { color: var(--black); }
.pr-toggle button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pr-toggle-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--white); box-shadow: 0 2px 8px rgba(27, 27, 27, .08); transition: transform .35s var(--ease); }
.pr-toggle.is-yearly .pr-toggle-thumb { transform: translateX(100%); }
.pr-save { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--purple); }
.pr-save svg { width: 16px; height: 16px; }

/* Region select: native select dressed as a pill */
.pr-region { position: relative; display: inline-flex; align-items: center; height: 48px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); padding: 0 40px 0 40px; cursor: pointer; transition: border-color .2s; }
.pr-region:hover { border-color: #C5CAD1; }
.pr-region:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.pr-region > svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--label); pointer-events: none; }
.pr-region .pr-region-chev { left: auto; right: 14px; width: 16px; height: 16px; }
.pr-region select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--black); height: 100%; cursor: pointer; outline: none; }

/* ---------- Plans ---------- */
.pr-plans-wrap { background: var(--grey); padding: 24px 0 96px; }
.pr-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pr-plan { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-card); padding: 32px 28px 28px; border: 1px solid transparent; }
.pr-plan.is-featured { border-color: var(--purple); box-shadow: 0 24px 48px -24px rgba(120, 82, 212, .35); }
/* "Popular" sits inline beside the plan name */
.pr-flag { display: inline-flex; align-items: center; height: 24px; margin-left: 10px; vertical-align: middle; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--purple); background: var(--lavender); border-radius: 999px; padding: 0 10px; position: relative; top: -2px; }
.pr-plan h2 { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.pr-plan header p { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 22px; min-height: 44px; }
.pr-price { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.pr-price .amt { font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: proportional-nums; }
.pr-price .amt.swap { animation: prSwap .4s var(--ease); }
.pr-price .per { display: flex; flex-direction: column; font-size: 12px; line-height: 15px; color: var(--label); }
.pr-price .per [data-cur] { font-weight: 700; color: var(--black); }
@keyframes prSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pr-facts { list-style: none; margin: 20px 0 24px; display: grid; gap: 10px; }
.pr-facts li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.pr-facts svg { width: 18px; height: 18px; color: var(--purple); }
.pr-cta { width: 100%; }
.pr-example { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.pr-example p { margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--body); }
.pr-note { margin-top: 20px; text-align: center; font-size: 14px; color: var(--label); }


.pr-included { margin-top: 56px; text-align: center; }
.pr-included h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.pr-included ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-top: 24px; text-align: left; }
.pr-included li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }

/* ---------- Credits ---------- */
.pr-steps h3 { font-size: 19px; line-height: 25px; font-weight: 800; letter-spacing: -0.01em; }
.pr-steps p { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 23px; }
.pr-guide { margin-top: 56px; border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px; }
.pr-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 16px; flex-wrap: wrap; }
.pr-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pr-tabs button { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--body); transition: background-color .2s, color .2s; }
.pr-tabs button:hover { background: var(--grey); }
.pr-tabs button[aria-selected="true"] { background: var(--lavender); color: var(--purple); }
.pr-tabs button:focus-visible, .pr-rate-pick select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pr-rate-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--label); }
.pr-rate-pick select { height: 40px; border-radius: 10px; border: 1px solid var(--border); padding: 0 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--black); background: var(--white); cursor: pointer; }
.pr-table-wrap { border-radius: 16px; overflow: hidden; background: var(--grey); }
.pr-table { width: 100%; border-collapse: collapse; }
.pr-table.fade tbody { animation: prSwap .35s var(--ease); }
.pr-table th, .pr-table td { padding: 14px 20px; text-align: left; font-size: 15px; line-height: 21px; vertical-align: middle; }
.pr-table thead th { font-size: 13px; font-weight: 600; color: var(--label); padding-top: 16px; padding-bottom: 10px; }
.pr-table tbody tr + tr th, .pr-table tbody tr + tr td { border-top: 1px solid rgba(27, 27, 27, .06); }
.pr-table tbody th { font-weight: 600; }
.pr-table small { display: block; font-size: 13px; font-weight: 500; color: var(--label); margin-top: 2px; }
.pr-table td small { display: inline; margin: 0 0 0 4px; font-size: 12px; }
.pr-table .num { text-align: right; white-space: nowrap; letter-spacing: -0.01em; }
.pr-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 700; color: var(--purple); }
.pr-guide-foot { padding: 14px 8px 4px; }

/* ---------- Comparison table ---------- */
.pr-compare-sec { background: var(--grey); border-radius: var(--r-panel); margin: 0 16px; }
.pr-compare-wrap { overflow-x: auto; border-radius: var(--r-card); background: var(--white); -webkit-overflow-scrolling: touch; }
.pr-compare-wrap:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pr-compare { width: 100%; min-width: 720px; border-collapse: collapse; }
.pr-compare th, .pr-compare td { padding: 14px 20px; font-size: 15px; line-height: 21px; text-align: center; }
.pr-compare thead th { font-size: 17px; font-weight: 800; padding-top: 24px; padding-bottom: 18px; position: sticky; top: 0; background: var(--white); }
.pr-compare tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--black); width: 34%; }
.pr-compare td { color: var(--body); font-weight: 600; }
.pr-compare td svg { width: 20px; height: 20px; color: var(--purple); margin: 0 auto; }
.pr-compare tr.grp th { text-align: left; font-size: 13px; font-weight: 700; color: var(--label); padding-top: 28px; padding-bottom: 8px; }
.pr-compare tbody tr:not(.grp) { border-top: 1px solid rgba(27, 27, 27, .06); }
.pr-compare .is-featured { background: rgba(223, 217, 246, .35); }
.pr-compare thead .is-featured { color: var(--purple); background: #F4F1FC; }
.pr-compare tbody tr:last-child td.is-featured { border-radius: 0 0 16px 16px; }
/* Sticky first column so labels stay visible when the table scrolls on phones */
.pr-compare th:first-child { position: sticky; left: 0; background: var(--white); z-index: 1; }

/* FAQ links */
.faq-a a:not(.btn) { color: var(--purple); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) and (min-width: 961px) { .pr-plan { padding: 28px 22px 24px; } .pr-price .amt { font-size: 38px; } }
@media (max-width: 960px) {
  .pr-hero { padding-bottom: 32px; }
  .pr-controls { flex-direction: column; gap: 12px; }
  .pr-plans { grid-template-columns: 1fr; gap: 24px; }
  .pr-plan header p { min-height: 0; }
  .pr-plans-wrap { padding-bottom: 72px; }
  .pr-included ul { grid-template-columns: 1fr; }
  .pr-guide { padding: 8px; }
  .pr-guide-head { flex-direction: column; align-items: stretch; }
  .pr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pr-tabs::-webkit-scrollbar { display: none; }
  .pr-tabs button { flex: none; }
  .pr-rate-pick { justify-content: space-between; }
  .pr-table th, .pr-table td { padding: 12px 12px; font-size: 14px; }
  .pr-table td small { display: block; margin: 2px 0 0; }
  .pr-compare-sec { margin: 0 8px; }
  .pr-compare th, .pr-compare td { padding: 12px 14px; font-size: 14px; }
  .pr-compare tbody th[scope="row"] { min-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-toggle-thumb, .pr-price .amt.swap, .pr-table.fade tbody { transition: none; animation: none; }
}

/* ---------- Polish ---------- */
h1, h2, h3, .h2 { text-wrap: balance; }
/* Plans band fades back to white so there's no hard grey edge */
.pr-plans-wrap { background: linear-gradient(180deg, var(--grey) 0%, var(--grey) 70%, var(--white) 100%); }
/* Even card heights: the example block sits at the bottom of every card */
.pr-plan .pr-example { margin-top: auto; }
.pr-plan .pr-cta { margin-bottom: 24px; }
.pr-example p { min-height: 88px; } @media (max-width: 960px) { .pr-example p { min-height: 0; } }
/* Hero flows straight into the grey plans band */
.pr-hero { background: linear-gradient(180deg, var(--white) 0%, #FAFAFA 120px, var(--grey) 100%); }
.pr-cta-band { padding-top: 48px; }

/* ---------- Phones: credit table folds credits under the label, comparison shows one plan ---------- */
.m-only, .pr-cmp-pick { display: none; }
@media (max-width: 720px) {
  .pr-table .col-credits { display: none; }
  .pr-table .m-only { display: inline-block; margin-top: 6px; background: var(--white); }
  .pr-table td small { display: inline; margin-left: 4px; }
  .pr-cmp-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: #EBEBEE; }
  .pr-cmp-pick button { height: 40px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--label); text-align: center; transition: background-color .2s, color .2s; }
  .pr-cmp-pick button[aria-pressed="true"] { background: var(--white); color: var(--black); box-shadow: 0 2px 8px rgba(27, 27, 27, .08); }
  .pr-compare { min-width: 0; }
  .pr-compare thead { display: none; }
  .pr-compare th:first-child { position: static; }
  .pr-compare tbody th[scope="row"] { width: auto; min-width: 0; }
  .pr-compare td { display: none; width: 96px; }
  .pr-compare-wrap[data-col="2"] td:nth-child(2), .pr-compare-wrap[data-col="3"] td:nth-child(3),
  .pr-compare-wrap[data-col="4"] td:nth-child(4), .pr-compare-wrap[data-col="5"] td:nth-child(5) { display: table-cell; }
  .pr-compare .is-featured { background: transparent; }
  .pr-compare tbody tr:last-child td.is-featured { border-radius: 0; }
}
@media (max-width: 720px) { .pr-table .m-only { display: table; } }
/* Shared .faq-ask stacks the form on phones, where flex: 1 collapses the input height. Local fix (flagged in report) */
@media (max-width: 960px) { .faq-ask input { flex: none; height: 46px; } }

/* ---------- QA polish pass (Oct 2026) ---------- */
/* "Included in every plan": centre the three columns as a block so the list sits balanced under its heading */
.pr-included ul { width: fit-content; max-width: 100%; margin: 24px auto 0; grid-template-columns: repeat(3, auto); gap: 14px 56px; }
/* Tighter hand-off from the plans band into the credits section (was 96 + 112px of empty space) */
#credits { padding-top: 64px; }
/* Plan price: currency + billing label sit on the price's optical centre */
.pr-price .per { padding-top: 4px; }
/* "Prices on" select dressed to match the region pill (custom chevron, pill radius) */
.pr-rate-pick select { appearance: none; -webkit-appearance: none; height: 40px; border-radius: 999px; padding: 0 38px 0 16px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; transition: border-color .2s; }
.pr-rate-pick select:hover { border-color: #C5CAD1; }
/* Comparison table: equal plan columns, continuous Standard highlight, centred check icons */
.pr-compare { table-layout: fixed; }
.pr-compare col.c-label { width: 32%; }
.pr-compare td svg { display: block; }
.pr-compare tr.grp td { padding: 0; }
.pr-compare tr.grp + tr { border-top: 1px solid rgba(27, 27, 27, .06); }
.pr-compare tbody tr:not(.grp) td, .pr-compare tbody tr:not(.grp) th { height: 53px; }
@media (max-width: 960px) {
  .pr-included ul { width: auto; grid-template-columns: 1fr; }
  #credits { padding-top: 56px; }
  /* Credit guide tabs: a 2x2 grid on phones so no tab is cut off */
  .pr-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .pr-tabs button { width: 100%; }
  .pr-guide-head { padding: 8px 4px 12px; }
  .pr-rate-pick select { min-width: 160px; }
}
@media (max-width: 720px) {
  .pr-compare { table-layout: auto; }
  .pr-compare tr.grp td { display: none; }
  .pr-compare tr.grp th { padding-left: 14px; }
  .pr-compare tbody tr:not(.grp) td, .pr-compare tbody tr:not(.grp) th { height: auto; }
  /* Shared suggestion chips are 36px tall on phones: lift to a 40px tap target */
  .faq-chips button { min-height: 40px; }
}
/* Credit guide: fixed numeric column widths so switching tabs never shifts the columns */
.pr-table thead .col-credits { width: 150px; }
.pr-table thead th:last-child { width: 170px; }
@media (max-width: 720px) { .pr-table thead th:last-child { width: 120px; } }
@media (max-width: 960px) { .pr-tabs button { text-align: center; } }
@media (max-width: 720px) {
  .pr-compare col.c-label { width: auto; }
  .pr-compare td { width: 88px; }
}
.faq-answer a:not(.btn) { color: var(--purple); font-weight: 600; }
/* Included list: simple purple ticks instead of coloured icon tiles */
.pr-tick { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237852D4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Custom pricing: one quiet grey line, as on the live site */
.pr-custom { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; background: none; padding: 0; font-size: 15px; line-height: 22px; color: var(--body); }
.pr-custom svg { width: 16px; height: 16px; flex: none; color: var(--black); }
.pr-custom b { color: var(--black); font-weight: 700; }
.pr-custom a { color: var(--purple); font-weight: 600; }
.pr-custom a:hover { text-decoration: underline; }

/* Credits section redesign: numbered steps on hairlines, then one clean white card with a segmented switch */
.pr-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0; padding: 0; }
.pr-steps li { border-top: 1px solid var(--border); padding-top: 22px; }
.pr-steps .n { display: block; font-size: 14px; font-weight: 700; color: var(--purple); margin-bottom: 14px; }
.pr-steps h3 { font-size: 19px; line-height: 25px; font-weight: 700; }
.pr-steps p { margin-top: 6px; }
.pr-guide { margin-top: 64px; border: 0; background: var(--white); padding: 20px; box-shadow: 0 1px 2px rgba(27, 27, 27, .04), 0 18px 48px -18px rgba(27, 27, 27, .14); }
.pr-guide-head { padding: 4px 4px 18px; }
/* Segmented switch, same look as the billing toggle */
.pr-tabs { gap: 0; padding: 4px; border-radius: 999px; background: #EBEBEE; }
.pr-tabs button { height: 38px; padding: 0 20px; color: var(--label); }
.pr-tabs button:hover { background: none; color: var(--black); }
.pr-tabs button[aria-selected="true"] { background: var(--white); color: var(--black); box-shadow: 0 2px 8px rgba(27, 27, 27, .08); }
.pr-table-wrap { background: none; border-radius: 0; }
.pr-table thead th { padding-left: 4px; padding-right: 4px; border-bottom: 1px solid #EBEBEF; }
.pr-table th, .pr-table td { padding-left: 4px; padding-right: 4px; }
.pr-table tbody tr + tr th, .pr-table tbody tr + tr td { border-top: 1px solid #EBEBEF; }
.pr-table tbody th, .pr-table tbody td { padding-top: 18px; padding-bottom: 18px; font-size: 16px; }
.pr-guide-foot { padding: 16px 4px 0; border-top: 1px solid #EBEBEF; margin-top: 4px; }
@media (max-width: 960px) {
  .pr-steps { grid-template-columns: 1fr; gap: 20px; }
  .pr-guide { padding: 14px; }
  .pr-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; }
  .pr-tabs button { padding: 0 8px; font-size: 14px; border-radius: 10px; }
}
.pr-tabs .m-lc { display: none; }
@media (max-width: 960px) { .pr-tabs .d-only { display: none; } .pr-tabs .m-lc { display: inline; } .pr-tabs button { white-space: nowrap; } }

/* "Could cover" with a shuffle button for another example */
.pr-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-shuffle { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--body); background: var(--grey); transition: background-color .2s, color .2s; }
@media (hover: hover) { .pr-shuffle:hover { background: var(--lavender); color: var(--purple); } }
.pr-shuffle svg { width: 15px; height: 15px; }
.pr-shuffle.spin svg { animation: prSpin .5s var(--ease); }
@keyframes prSpin { to { transform: rotate(360deg); } }
.pr-example p.swap { animation: prSwap .35s var(--ease); }
@media (max-width: 960px) { .pr-shuffle { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .pr-shuffle.spin svg, .pr-example p.swap { animation: none; } }
.pr-shuffle:focus:not(:focus-visible) { outline: none; }
.pr-shuffle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }