/* Theme 2.0 pricing. Owner: Frontend Builder A. Restyles the live .fb-pricing markup with tokens; wording stays in page-pricing.php. */
body.t2 .fb-pricing { padding: var(--page-t) var(--page-x) 0; color: var(--t2); font-family: var(--font); }
body.t2 .fb-pricing *, body.t2 .fb-pricing *::before, body.t2 .fb-pricing *::after { box-sizing: border-box; font-family: inherit; }
body.t2 .fb-pricing :is(h1, h2, h3, p, ul) { margin: 0; text-transform: none; letter-spacing: 0; }
body.t2 .fb-pricing a { color: var(--r2); }
.fb-pricing__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 28px; }
.fb-pricing__hero .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--td); }
body.t2 .fb-pricing__hero h1 { font-size: 60px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; color: var(--tx); }
.fb-pricing__hero p { font-size: 15px; line-height: 1.55; color: var(--t2); max-width: 560px; }
.fb-pricing__billing { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.fb-pricing .seg { display: inline-flex; padding: 3px; border-radius: var(--rad-seg); background: var(--seg); border: 1px solid var(--pbd); }
.fb-pricing .seg-btn { padding: 8px 18px; border: 0; border-radius: var(--rad-seg-i); background: transparent; color: var(--td); font-size: 13px; font-weight: 500; cursor: pointer; }
.fb-pricing .seg-btn.is-active { background: var(--panelsolid); color: var(--tx); }
.fb-pricing .save-badge { padding: 4px 10px; border-radius: 8px; background: var(--ghost); color: var(--tx); font-size: 12px; font-weight: 500; }
.fb-pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.plan-card { display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--rad-panel); border: 1px solid var(--pbd); background: color-mix(in srgb, var(--panel) 50%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); min-width: 0; }
.plan-card--featured { background: var(--glass); border-color: var(--glassbd); color: #fff; }
.plan-card--featured :is(.plan-card__name, .plan-card__amount, .plan-card__currency, .plan-card__interval, .plan-card__desc, .plan-card__features li, .plan-card__annual-note, .plan-card__trial-note, .plan-card__cta-sub) { color: #fff; }
.plan-card__head { display: flex; flex-direction: column; gap: 10px; }
body.t2 .plan-card__name { font-size: 20px; font-weight: 500; color: var(--tx); }
.plan-card__desc { font-size: 14px; line-height: 1.5; color: var(--t2); }
.plan-card__price { display: flex; align-items: baseline; gap: 6px; }
.plan-card__currency { font-size: 28px; color: var(--tx); }
.plan-card__amount { font-size: 64px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }
.plan-card__interval { font-size: 14px; color: var(--t2); }
.plan-card__annual-note, .plan-card__trial-note { font-size: 13px; color: var(--td); }
.plan-card__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan-card__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--tx); }
.plan-card__features svg { flex: none; width: 16px; height: 16px; margin-top: 2px; opacity: 0.8; }
.plan-card__features li strong { font-weight: 500; }
.plan-card .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; border: 1px solid var(--grid); background: var(--ghost); color: var(--tx); }
.plan-card .btn:hover { background: var(--seg); }
.plan-card .btn-primary { background: var(--ink); color: var(--inktx); border-color: var(--ink); }
.plan-card--featured .btn-primary { background: #fff; color: var(--r3); border-color: #fff; }
body.t2 .plan-card--featured a { color: #fff; }
body.t2 .plan-card .btn-primary { color: var(--inktx); }
body.t2 .plan-card--featured .btn-primary { color: var(--r3); }
.plan-card__cta-sub { font-size: 12px; color: var(--td); text-align: center; margin-top: 8px; }
.plan-card__head .plan-card__cta-sub { text-align: left; margin-top: 0; font-size: 13px; }   /* live moved the plan notes from annual-note to cta-sub */
.plan-card__cta-current { display: block; text-align: center; font-size: 14px; font-weight: 500; color: var(--t2); padding: 14px 0; }
.fb-pricing__compare, .fb-pricing__faq { background: color-mix(in srgb, var(--panel) 50%, transparent); border: 1px solid var(--pbd); border-radius: var(--rad-panel); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); margin-bottom: var(--gap); }
.fb-pricing__compare { padding: 0; overflow: hidden; }
body.t2 .fb-pricing__compare h2 { padding: 24px; font-size: 20px; font-weight: 500; color: var(--tx); }
.fb-pricing__compare-wrap { overflow-x: auto; }
.fb-pricing__compare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fb-pricing__compare th, .fb-pricing__compare td { padding: 15px 24px; text-align: center; font-size: 14px; border-top: 1px solid var(--grid); color: var(--tx); }
.fb-pricing__compare th { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td); border-top: 0; }
.fb-pricing__compare th:first-child, .fb-pricing__compare td:first-child { text-align: left; color: var(--t2); min-width: 240px; }
.fb-pricing__compare tr.group td { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--td); background: var(--ghost); }
.fb-pricing__compare .dash-mark { color: var(--td); }
.fb-pricing__compare .check-mark { color: var(--gain); }
.fb-pricing__faq { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
body.t2 .fb-pricing__faq h2 { font-size: 20px; font-weight: 500; color: var(--tx); padding-bottom: 8px; }
.faq-item { border-top: 1px solid var(--grid); padding: 16px 0; }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; font-weight: 500; color: var(--tx); cursor: pointer; }
.faq-item__q svg { width: 16px; height: 16px; flex: none; color: var(--td); transition: transform var(--dur); }
.faq-item.is-open .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a { display: none; padding-top: 10px; font-size: 14px; line-height: 1.65; color: var(--t2); max-width: 760px; }
.faq-item.is-open .faq-item__a { display: block; }
.faq-item__a p { margin: 0 0 10px; }
.fb-pricing__footer { text-align: center; padding: 32px 0 8px; font-size: 14px; color: var(--t2); display: flex; flex-direction: column; gap: 6px; }
.fb-toast { position: fixed; z-index: 80; top: 84px; left: 50%; transform: translate(-50%, -8px); padding: 14px 22px; border-radius: var(--rad-tile); background: var(--ink); color: var(--inktx); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.fb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1279px) { body.t2 .fb-pricing { padding-left: 32px; padding-right: 32px; } .fb-pricing__grid { grid-template-columns: 1fr; } body.t2 .fb-pricing__hero h1 { font-size: 44px; } }

/* approved headings: ribbon text and the sub-lines under Compare plans and the FAQ heading */
.plan-card--trial::before { content: '14 day free trial, no card'; }
.fb-pricing__sub { margin: 4px 0 12px; color: var(--t2); }

/* "Current plan" on the featured (blue) card was dark grey on blue in both themes: unreadable */
.plan-card--featured .plan-card__cta-current { color: #fff; opacity: 0.9; }

/* tap targets and minimum text (SEO visible-content gate): 44px hit areas, nothing under 11px */
.fb-pricing th small, .fb-pricing td small { font-size: 11px; }
.fb-pricing .seg-btn { min-height: 44px; }
.faq-item { padding: 4px 0; }
.faq-item__q { min-height: 44px; }
body.t2 .fb-pricing :is(p, li, .fb-pricing__footer) a:not(.btn):not([class*="plan-card"]) { display: inline-block; padding: 12px 0; margin: -12px 0; }