/* pricing.html — page styles (scoped to .page-pricing) */

/* ---------- Hero + plans ---------- */
.page-pricing .pr-hero { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.page-pricing .pr-hero__inner { align-items: center; text-align: center; margin-inline: auto; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.page-pricing .pr-hero__inner .lead { margin-inline: auto; }
.page-pricing .pr-hero__badges { justify-content: center; margin-top: .5rem; }
.page-pricing .pr-billing { margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.page-pricing .pr-billing__nojs { display: none; width: 100%; text-align: center; margin: 0; }
html:not(.js) .page-pricing .pr-billing .segmented { display: none; }
html:not(.js) .page-pricing .pr-billing__nojs { display: block; }

.page-pricing .pr-plans { max-width: 1120px; margin-inline: auto; }
.page-pricing .pr-plans .plan__name { font-size: var(--fs-xs); }
.page-pricing .pr-plans .price__was { min-height: 1.2em; }
.page-pricing .pr-plans .plan--featured .price__num { color: var(--indigo-700); }
/* keep the featured card first-glance prominent on wide screens */
@media (min-width: 1100px) {
  .page-pricing .pr-plans { align-items: start; }
  .page-pricing .pr-plans .plan--featured { margin-top: -.75rem; padding-bottom: calc(clamp(1.4rem, 1.1rem + 1vw, 2rem) + .75rem); }
}
/* Two columns at tablet: centre the featured card on its own row */
@media (min-width: 720px) and (max-width: 1099px) {
  .page-pricing .pr-plans .plan--featured { grid-column: 1 / -1; order: -1; }
}
.page-pricing .pr-plus { font-weight: 600; color: var(--indigo-700); }

.page-pricing .pr-plans__foot { max-width: 46rem; margin: 1.75rem auto 0; text-align: center; line-height: 1.6; }
.page-pricing .pr-plans__foot a { color: var(--indigo-700); }

/* ---------- Unlimited toolkit bento ---------- */
.page-pricing .unl .bento__card { display: flex; flex-direction: column; }
.page-pricing .unl__vis { min-height: 150px; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(120% 90% at 50% 0%, var(--indigo-50) 0%, transparent 70%), var(--mist); }
.page-pricing .unl__tag { margin-bottom: .45rem; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-700); }

.page-pricing .unl-doc { width: min(100%, 250px); display: grid; gap: .7rem; padding: .9rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.page-pricing .unl-doc__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink); }
.page-pricing .unl-doc__caret { font-family: var(--font-mono); font-size: .6875rem; color: #6b7183; }

.page-pricing .unl-rec { width: min(100%, 260px); display: grid; gap: .8rem; justify-items: start; padding: .9rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); grid-template-columns: auto 1fr; align-items: center; }
.page-pricing .unl-rec .sample-tag { justify-self: end; }
.page-pricing .unl-rec .wave { grid-column: 1 / -1; width: 100%; }

.page-pricing .unl-query { width: min(100%, 260px); display: grid; gap: .55rem; justify-items: start; }
.page-pricing .unl-query__input { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .55rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); font-family: var(--font-mono); font-size: .6875rem; color: #6b7183; }
.page-pricing .unl-query__input .icon { width: 14px; height: 14px; color: var(--indigo); flex: none; }
.page-pricing .unl-query__bubble { padding: .6rem .75rem; border-radius: 10px 10px 10px 3px; background: var(--ink); color: #fff; font-size: .75rem; line-height: 1.45; }

.page-pricing .unl-chips { justify-content: center; max-width: 250px; }
.page-pricing .unl-chips .chip { background: #fff; }
.page-pricing .unl-chips .chip--active { background: var(--indigo-50); }

.page-pricing .unl-big { display: grid; justify-items: center; line-height: 1; }
.page-pricing .unl-big__num { font-size: 3.4rem; font-weight: 600; letter-spacing: -.05em; color: var(--ink); background: linear-gradient(180deg, var(--ink), var(--indigo-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-pricing .unl-big__lbl { margin-top: .4rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }

.page-pricing .unl-lock { display: grid; justify-items: center; gap: .7rem; }
.page-pricing .unl-lock .icon-tile { width: 56px; height: 56px; border-radius: 16px; }
.page-pricing .unl-lock__lbl { padding: .35rem .7rem; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .6875rem; color: var(--ink); }

/* ---------- Comparison ---------- */
.page-pricing .pr-table { max-width: 1080px; margin-inline: auto; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); }
.page-pricing .pr-table .compare thead th { padding-top: 1.25rem; }
.page-pricing .pr-table__cta > * { padding-block: 1.1rem 1.3rem; border-bottom: 0; }
.page-pricing .pr-table__cta .btn { white-space: nowrap; }
.page-pricing .compare tbody tr.pr-table__cta:hover > * { background: var(--surface); }
.page-pricing .compare tbody tr.pr-table__cta:hover > .is-featured { background: rgba(81, 59, 244, .04); }
.page-pricing .pr-table__hint { margin-top: .75rem; text-align: center; }

/* ---------- Security strip ---------- */
.page-pricing .pr-secure { position: relative; overflow: hidden; }
.page-pricing .pr-secure .bg-grid { opacity: .5; }
.page-pricing .pr-secure__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .page-pricing .pr-secure__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 3rem; } }
.page-pricing .pr-secure__intro { display: grid; gap: .9rem; justify-items: start; }
.page-pricing .pr-secure__intro .eyebrow { margin: 0; }
.page-pricing .pr-secure__intro .h3 { color: #fff; max-width: 18ch; }
.page-pricing .pr-secure__accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--lilac); }
.page-pricing .pr-secure__link { color: var(--lilac); }
.page-pricing .pr-secure__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); }
@media (min-width: 640px) { .page-pricing .pr-secure__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .page-pricing .pr-secure__list { grid-template-columns: repeat(4, 1fr); } }
.page-pricing .pr-secure__list li { display: grid; gap: .8rem; align-content: start; padding: 1.25rem; background: var(--ink); font-size: var(--fs-sm); line-height: 1.55; color: var(--slate-ink); }
.page-pricing .pr-secure__list b { display: block; margin-bottom: .2rem; color: #fff; font-weight: 600; }
.page-pricing .pr-secure__list a { color: var(--lilac); }

/* ---------- FAQ ---------- */
@media (min-width: 960px) { .page-pricing .pr-faq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .page-pricing .pr-faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
.page-pricing .pr-faq__help { display: grid; gap: .5rem; margin-top: .75rem; padding: 1.25rem 1.4rem; }
.page-pricing .pr-faq__help .h4 { margin: 0; }
.page-pricing .pr-faq__btns { margin-top: .5rem; }
.page-pricing .acc__body a { color: var(--indigo-700); }

/* QA fixes */
.page-pricing .unl__vis { min-height: 0; height: 190px; }
.page-pricing .unl-chips { max-width: 300px; }
/* Below the 3-up layout, lead with the featured plan so it sits right under the billing toggle */
@media (max-width: 719px) { .page-pricing .pr-plans .plan--featured { order: -1; } }
/* Phones: tighter table so two plan columns fit beside the sticky feature column */
@media (max-width: 719px) {
  .page-pricing .pr-table .compare { font-size: var(--fs-xs); min-width: 560px; }
  .page-pricing .pr-table .compare th, .page-pricing .pr-table .compare td { padding: .75rem .6rem; }
  .page-pricing .pr-table .compare th:first-child { min-width: 8.25rem; padding-left: .9rem; }
}