/* Pricing page: the comparison table, the add-on strip, the licence lists and the guarantee
   badge. Shared tokens and components come from site.css; nothing here invents a radius,
   a shadow or a colour of its own. */

/* Plans at a glance in the hero, so a price and a buy link sit inside the first screen. */
.page-hero .plan-strip, .page-hero .hero-proof { flex: 1 1 100%; }
.plan-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 36rem; display: grid; gap: .75rem; text-align: left; }
@media (min-width: 1200px) { .plan-strip { max-width: 68rem; grid-template-columns: repeat(3, 1fr); } }
.plan-strip-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .75rem .75rem 1.25rem; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: #fff; }
@media (max-width: 575.98px) { .plan-strip { gap: .5rem; } .plan-strip-item { padding: .5rem .5rem .5rem 1rem; } }
.plan-strip-item.is-featured { border-color: var(--site-accent); }
.plan-strip-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; line-height: 1.35; }
.plan-strip-name { font-weight: 700; color: var(--site-ink); }
.plan-strip-sites, .plan-strip-price { font-size: var(--t-sm); color: var(--site-muted); }
.plan-strip-price { flex-basis: 100%; }
.plan-strip-price strong { font-size: var(--t-xl); color: var(--site-ink); letter-spacing: var(--track-tight); }
.plan-strip-item .button { flex: none; margin: 0; }
.page-hero .hero-proof { justify-content: center; }

/* Plan cards. The h1 above them is the section heading, so the grid starts straight under
   the hero and the note below it carries the pointer to the full inventory. */
.plans-heading { margin-bottom: 2rem; }
.plan-note { max-width: 46rem; margin-left: auto; margin-right: auto; }
.plan-note a { font-weight: 600; }

/* Comparison table. Fixed layout so the three plan columns stay equal and the label column
   wraps instead of the table overflowing its container at any width. */
.plan-table-wrap { border: 1px solid var(--site-line); border-radius: var(--site-radius); overflow: hidden; background: #fff; }
.plan-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-sm); }
.plan-table th, .plan-table td { padding: .5rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--site-line); overflow-wrap: anywhere; }
.plan-table thead th { background: var(--site-band); font-weight: 700; vertical-align: bottom; }
.plan-table thead th:not(:first-child) { text-align: center; }
.plan-table tbody th { font-weight: 500; color: var(--site-ink); }
.plan-table td { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table tbody:last-child tr:last-child th, .plan-table tbody:last-child tr:last-child td { border-bottom: 0; }
.plan-table th:first-child { width: 55%; }
.plan-table thead th:not(:first-child), .plan-table td { width: 15%; }
.plan-table .is-featured { background: rgba(26, 115, 232, .06); }
.plan-table thead th.is-featured { background: rgba(26, 115, 232, .12); }
.plan-table td i { color: var(--site-success); font-size: var(--t-lg); }
.plan-table td span[aria-hidden] { color: var(--site-muted); font-weight: 400; }
.plan-col-name { display: block; }
.plan-col-price { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--site-muted); margin-top: .125rem; }
.plan-table-group th { background: var(--site-band); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--site-muted); padding-top: .625rem; padding-bottom: .625rem; }

@media (max-width: 767.98px) {
	.plan-table { font-size: var(--t-xs); }
	.plan-table th, .plan-table td { padding: .625rem .5rem; }
	.plan-table th:first-child { width: 52%; }
	.plan-table thead th:not(:first-child), .plan-table td { width: 16%; }
	.plan-col-price { font-size: var(--t-2xs); }
}

/* Requirements, as a footnote to the table rather than a section of its own. */
.requirements-note { max-width: 52rem; margin-left: auto; margin-right: auto; }

/* The one optional add-on, as a strip under the inventory it is not part of. */
.addon-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-top: 2rem; padding: 1.75rem; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: #fff; }
.addon-body { flex: 1 1 22rem; }
.addon-body h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: .5rem; }
.addon-body p { color: var(--site-muted); margin-bottom: 0; }
.addon-buy { flex: 0 0 auto; text-align: left; }
.addon-buy .plan-price { margin-bottom: .25rem; }
.addon-buy .plan-price .amount { font-size: 2rem; }
.addon-scope { font-size: var(--t-sm); color: var(--site-muted); margin-bottom: .875rem; }
.addon-buy .button { margin: 0; }
@media (min-width: 992px) { .addon-buy { text-align: right; } .addon-buy .plan-price { justify-content: flex-end; } }

/* Licence rules and the expiry contract, one dark band instead of two card grids. */
.licence-title { display: flex; align-items: center; gap: .625rem; font-size: var(--t-lg); font-weight: 700; margin-bottom: 1.5rem; }
.licence-title i { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); color: #8ab4f8; font-size: var(--t-lg); }
.licence-dl { margin: 0; }
.licence-dl dt { font-weight: 700; color: #fff; }
.licence-dl dd { color: rgba(255, 255, 255, .78); margin: .25rem 0 0; padding-bottom: 1rem; }
.licence-dl dd:last-child { padding-bottom: 0; }

/* Guarantee, with the questions below it rather than mid-page. */
.guarantee-badge { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--site-accent-soft); color: var(--site-accent-text); font-size: var(--t-3xl); }
.faq-after-guarantee { margin-top: 3rem; }