/* /pricing/ and /free/ — page_pricing.py, page_free.py. The table is the 3.0 template pricing-compare-table; here
   only the web's own blocks around it. */

/* the hero is just the H1: the table's intro follows straight away */
.fbw .fbw-pricing-hero + .brxe-section { padding-top: 0; }
/* «Already a customer?» sits inside the table's section, space-m under the table (R5, 2026-10-19); the container's
   own gap is --fbk-section-gap, so the note pulls back the difference */
.fbw .fbw-price__note { margin-block-start: calc(var(--space-m) - var(--fbk-section-gap, var(--space-xl))); }

/* the plans, explained: H2s of the SEO outline set at card size */
.fbw .fbw-plan-note {
  height: 100%; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-l);
  background: var(--white); border: 1px solid var(--fbw-line-soft); border-radius: var(--radius);
}
.fbw .fbw-plan-note h2 { margin: 0; font-size: var(--h5); line-height: 1.25; letter-spacing: -0.01em; }
.fbw .fbw-plan-note p { margin: 0; }
.fbw .fbw-plan-note .fbw-link { margin-top: auto; padding-top: var(--space-xs); }

/* /free/: what the account includes */
.fbw .fbw-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-s); }
.fbw .fbw-checks li { display: flex; gap: 0.6rem; align-items: flex-start; padding: var(--space-s) var(--space-m); border: 1px solid var(--fbw-line-soft); border-radius: 0.75rem; background: var(--white); color: var(--heading-color); font-weight: 500; }
.fbw .fbw-checks svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1em; }
.fbw .fbw-landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.fbw .fbw-landing__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); }
@media (max-width: 960px) { .fbw .fbw-landing { grid-template-columns: minmax(0, 1fr); } }

/* the page opens with the table (its intro is the H1): white like the other page heads, a page-head top padding */
.fbw .fbw-pricing-top { background: var(--white); padding-block-start: var(--space-xl); }
.fbw .fbw-pricing-top .fbk-intro__title { font-size: var(--fbw-h1-child); } /* the H1 of a child page (SISTEMA-UI.md «Portadas») */
.fbw .fbw-pricing-faq { background: var(--white); }
/* feature labels centered like the values (the template top-aligned them 8 px low) */
/* (2026-10-22) the template's feature cell is now a flex COLUMN: centering is justify-content, and the label stays at
   the start (align-items: center had moved every label to the middle of its cell) */
.fbw .fbw-pricing-top .fbk-compare__row > .fbk-compare__feature { padding-block: 16px; justify-content: center; align-items: flex-start; text-align: start; }
/* the plan heads start at the same line, so Free, Annual and Lifetime line up whatever each one holds (Lifetime has a
   longer period and «Back on special dates»); the action sits on the last row */
.fbw .fbw-pricing-top .fbk-compare__plan { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.fbw .fbw-pricing-top .fbk-compare__price { min-block-size: 1.8125rem; align-items: baseline; justify-content: center; }
.fbw .fbw-pricing-top .fbk-compare__plan > :is(.fbk-btn, .fbw-price__later) { margin-block-start: auto; }
/* «Back on special dates» is a note, not a button: plain muted text at the button's height, no gray box */
.fbw .fbw-pricing-top .fbw-price__later { display: flex; align-items: center; justify-content: center; min-block-size: 2.1875rem; margin: 0;
  background: none; padding: 0; font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-pricing-top .fbk-compare__feature > * { margin-block: 0; }

/* W25 (2026-10-20): on a phone the Free plan fills the first screen; a jump to the annual plan in the intro */
.fbw .fbw-pricing-jump { display: none; }
.fbw #annual { scroll-margin-block-start: calc(var(--fbw-header-h, 76px) + var(--space-s)); }
@media (max-width: 767px) { .fbw .fbw-pricing-jump { display: inline-flex; align-self: center; } }

/* audit 2 M3 (2026-10-20): the table on the house tokens. Edges --fbw-line-soft (the template's ink at 16 % gave
   #dbdcdc); the row tint on hover is gray, not yellow at 5 %; the featured plan is white and carries the house
   featured treatment (2 px ink, as .fbw-price--featured) down its whole column on desktop, instead of the cream
   head (yellow at 8 %). Column 3 = the featured plan of the page (Annual). On a phone each plan is a block: the
   featured one keeps the 2 px ink edge on its sticky head. */
.fbw .fbk-compare:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-t-border: var(--fbw-line-soft); }
.fbw .fbk-compare__row:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):hover { --fbk-t-row-bg: var(--base-ultra-light); }
.fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { --fbk-t-plan-bg: var(--white); }
@media (min-width: 768px) {
  .fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *)),
  .fbw .fbk-compare:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):has(> .fbk-compare__head > .fbk-compare__plan--featured:nth-child(3)) > .fbk-compare__row > :nth-child(3) { position: relative; }
  /* the template gives the plan heads `top: var(--fbk-t-sticky-top)` (the admin bar's 32 px when logged in) for its
     phone sticky head; made relative here, that offset pushed the featured head 32 px down (owner, 2026-10-22) */
  .fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { inset-block-start: auto; }
  .fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *))::after,
  .fbw .fbk-compare:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):has(> .fbk-compare__head > .fbk-compare__plan--featured:nth-child(3)) > .fbk-compare__row > :nth-child(3)::after {
    content: ""; position: absolute; inset: -1px 0 0; border-inline: 2px solid var(--base-ultra-dark); pointer-events: none;
  }
  .fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *))::after { inset-block-start: 0; border-block-start: 2px solid var(--base-ultra-dark); border-start-start-radius: var(--radius-inside, calc(var(--radius) * 0.5)); border-start-end-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }
  .fbw .fbk-compare:where(:not(.fbw-demo-palette, .fbw-demo-palette *)):has(> .fbk-compare__head > .fbk-compare__plan--featured:nth-child(3)) > .fbk-compare__row:last-child > :nth-child(3)::after {
    border-block-end: 2px solid var(--base-ultra-dark); border-end-start-radius: var(--radius-inside, calc(var(--radius) * 0.5)); border-end-end-radius: var(--radius-inside, calc(var(--radius) * 0.5));
  }
}
@media (max-width: 767px) {
  .fbw .fbk-compare__plan--featured:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) { outline: 2px solid var(--base-ultra-dark); outline-offset: -2px; }
}
/* tablets: the feature column gives room to the plans, so «Create free account» and «Back on special dates» keep one
   line (at 161 px per plan both wrapped and the heads no longer lined up; 2026-10-22) */
@media (min-width: 768px) and (max-width: 1023px) { .fbw .fbw-pricing-top .fbk-compare { --fbk-t-feature-width: 8.5rem; } }