/* ============================================================================
   village-pricing.css — "Fair Ground" pricing page (2026-07-17, Fable-5).
   Extends /css/village-apps.css: consumes its tokens (--bg, --ink, --line,
   --c-connect/-decide/-work/-know/-ground + -soft variants, type scale, space
   scale) and its shared chrome (header.site, .wrap, .catnav, .chip, .pill,
   .pillars, .ground-band, footer.site, .overlay). This file defines only the
   pricing-page components. NO raw colours — tokens only, so light and dark
   themes both hold without a second sheet.

   SYSTEM RULE (this bug has shipped twice — nav-wrap 96f1d123c, card-crush
   04247d080): card grids ONLY for content that survives ≤6 words per line in
   German. Anything carrying a sentence is a LEDGER ROW —
   grid-template-columns: minmax(0,1fr) auto, min-width:0 on children, stacked
   in a single readable column. DE/FR run ~30% longer than EN.
   ============================================================================ */

/* ---------- global manners ---------- */
html { scroll-padding-top: 4.5rem; } /* sticky header must not eat anchors */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .checkout-btn, .btn, .app-row, .pricing-product-card { transition: none !important; transform: none !important; }
}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-know); outline-offset: 2px;
}
:lang(de) p, :lang(de) h2, :lang(de) h3, :lang(de) li { hyphens: auto; }
.legacy-anchor { display: block; height: 0; } /* old #products/#features/… deep links */
.link-teal { color: var(--c-know); text-decoration: underline; } /* legacy class name kept —
  it is baked into data-i18n-html locale strings (pricing.allTypes, pricing.kohaNote,
  pricing.certified.implementationHelp); colour is now token-driven, not teal. */

/* ---------- operational banners (script-driven) ---------- */
.checkout-cancelled-banner { display: none; background: var(--c-connect-soft); color: var(--c-connect);
  padding: .7rem 1rem; text-align: center; font-size: var(--t-s); border-bottom: 1px solid var(--line); }
.provisional-note { display: none; margin: var(--s4) auto 0; max-width: 72rem; padding: .75rem var(--s4);
  background: var(--c-connect-soft); border: 1px solid var(--c-connect); border-radius: var(--r-s);
  font-size: var(--t-xs); color: var(--ink); line-height: 1.6; }

/* ---------- hero (dawn ivory — inherits .hero + .mesh from village-apps.css) ---------- */
.hero--pricing .wrap { grid-template-columns: 1fr; padding-block: var(--s12); }
.hero--pricing h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem); max-width: 26ch; }
.hero--pricing .sub { max-width: 52ch; }
.price-line { margin-top: var(--s6); font-size: var(--t-l); font-weight: 750; }
.price-line .amount { color: var(--c-work); }
.founding-line { margin-top: var(--s2); font-size: var(--t-s); color: var(--c-work); font-weight: 650; max-width: 52ch; }
.currency-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin-top: var(--s6); font-size: var(--t-s); color: var(--ink-soft); }
.currency-select { padding: .35rem .8rem; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--bg-raise); color: var(--ink); font: inherit; font-size: var(--t-s); cursor: pointer; }
.billing-note { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); }

/* ---------- generic band ---------- */
section.band { padding-block: var(--s12); }
section.band.band-tint { background: linear-gradient(hsl(var(--hue-ground) 30% 50% / .06),
  hsl(var(--hue-ground) 30% 50% / .06)); border-block: 1px solid var(--line); }
.band-head { margin-bottom: var(--s8); }
.band-head h2 { font-size: var(--t-xl); letter-spacing: -.01em; }
.band-head .lede { margin-top: var(--s2); color: var(--ink-soft); max-width: 64ch; }
.chip.ground { --c: var(--c-ground); --cs: var(--c-ground-soft); }

/* ---------- how it works: three beats ---------- */
.beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s6); }
.beat { display: flex; gap: var(--s3); align-items: flex-start; min-width: 0; }
.beat .mark { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid;
  place-items: center; background: var(--c-ground-soft); color: var(--c-ground); font-weight: 750; }
.beat h3 { font-size: var(--t-m); }
.beat p { font-size: var(--t-s); color: var(--ink-soft); margin-top: var(--s1); }

/* ---------- founding banner (gated by FOUNDING_PERIOD_ACTIVE via .founding-banner) ---------- */
.founding-banner { margin-top: var(--s8); padding: var(--s6); border: 1.5px solid var(--c-work);
  background: var(--c-work-soft); border-radius: var(--r-m); }
.founding-banner h2 { font-size: var(--t-l); color: var(--c-work); }
.founding-banner .offer-details { margin-top: var(--s2); color: var(--ink); }
.founding-banner .founding-why { margin-top: var(--s3); font-size: var(--t-s); color: var(--ink-soft);
  max-width: 72ch; line-height: 1.65; }
.price-example { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin-top: var(--s4); padding: var(--s2) var(--s4); background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: var(--r-s); font-weight: 650; }
.price-example .regular-price { color: var(--ink-soft); } /* deliberately NO strike-through */
.price-example .founding-price { color: var(--c-work); font-size: var(--t-l); font-weight: 750; }

/* ---------- tier ledger ---------- */
.tier-ledger { display: grid; grid-template-columns: 1fr; gap: var(--s6); align-items: stretch; }
@media (min-width: 46rem) { .tier-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tier-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pricing-product-card { position: relative; display: flex; flex-direction: column; gap: var(--s3);
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s6); min-width: 0; }
.pricing-product-card--preselected { box-shadow: 0 0 0 3px var(--c-know); }
.preselect-eyebrow { background: var(--c-know); color: var(--bg); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .02em; text-align: center; padding: .4rem .6rem;
  border-radius: var(--r-s); }
.tier-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tier-top h3 { font-size: var(--t-l); line-height: 1.2; }
.tier-price { display: flex; align-items: baseline; gap: .25rem; font-size: var(--t-xl);
  font-weight: 750; color: var(--ink); }
.tier-price .per { font-size: var(--t-s); font-weight: 400; color: var(--ink-soft); }
.founding-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s3); background: var(--c-work-soft); border: 1px solid var(--c-work);
  border-radius: var(--r-s); font-size: var(--t-s); }
.founding-offer .founding-label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-work); }
.founding-offer .founding-price-card { font-weight: 750; color: var(--c-work); }
.save-badge { font-size: var(--t-xs); font-weight: 700; color: var(--c-work);
  border: 1px solid var(--c-work); border-radius: 999px; padding: .05rem .5rem; }
.product-desc { color: var(--ink-soft); font-size: var(--t-s); }
.tier-specs { font-size: var(--t-s); font-weight: 650; color: var(--c-ground); }
.member-extras-note { font-size: var(--t-xs); }
/* Price qualifier — binds the price to what it includes (members) and answers the
   unspoken "is this per-seat?" the moment the eye lands on the amount. */
.price-note { margin-top: .25rem; font-size: var(--t-xs); font-weight: 650; color: var(--c-ground); }
.price-line .price-note { font-weight: 600; }
.product-features { list-style: none; padding: var(--s3) 0 0; margin: 0; border-top: 1px solid var(--line);
  display: grid; gap: .4rem; }
.product-features li { position: relative; padding-left: 1.4rem; font-size: var(--t-s);
  color: var(--ink); min-width: 0; }
.product-features li::before { content: '✓'; position: absolute; left: 0; color: var(--c-work);
  font-weight: 700; }
.checkout-btn { display: block; width: 100%; margin-top: auto; text-align: center;
  padding: .8em 1.4em; border-radius: 999px; border: 1px solid transparent; background: var(--ink);
  color: var(--bg); font-weight: 650; font-size: var(--t-s); font-family: inherit;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--ease); }
.checkout-btn:hover, .checkout-btn:focus-visible { transform: translateY(-1px); }
.checkout-btn.checkout-loading { opacity: .6; pointer-events: none; }

/* Certified — distinct, visually offset (regulated register: bronze ground, full width) */
.pricing-product-card--certified { margin-top: var(--s6); border: 1.5px solid var(--c-ground);
  background: var(--c-ground-soft); }
.certified-cols { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
@media (min-width: 60rem) { .certified-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s8); } }
.certified-cols > * { min-width: 0; }
.tier-flag { display: inline-block; background: var(--c-ground); color: var(--bg);
  font-size: var(--t-xs); font-weight: 700; padding: .25em .8em; border-radius: 999px;
  line-height: 1.3; margin-bottom: var(--s2); }
.pricing-product-card--certified h3 { font-size: var(--t-l); }
.certified-headline { font-weight: 700; color: var(--ink); line-height: 1.35; margin-top: var(--s2); }
.certified-qualifier { font-size: var(--t-s); color: var(--ink-soft); line-height: 1.6;
  margin-block: var(--s3); }
.certified-help, .certified-demo, .certified-upgrade { font-size: var(--t-s); color: var(--ink-soft);
  margin-top: var(--s3); }
.certified-upgrade { font-style: italic; }
.pricing-product-card--certified .product-features { border-top-color: var(--c-ground); }
.pricing-product-card--certified .checkout-btn { margin-top: var(--s4); }

/* Governance & Regulated — full-width closing row of the ledger */
.governance-row { margin-top: var(--s6); padding: var(--s8); border: 1.5px dashed var(--c-decide);
  border-radius: var(--r-m); background: var(--c-decide-soft); }
.governance-row h3 { font-size: var(--t-l); color: var(--c-decide); }
.governance-row p { color: var(--ink); font-size: var(--t-s); line-height: 1.65; max-width: 78ch;
  margin-top: var(--s3); }
.governance-row .checkout-btn { display: inline-block; width: auto; margin-top: var(--s4); }
.governance-links { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  font-size: var(--t-s); }
.governance-links a { color: var(--c-decide); font-weight: 650; text-decoration: none; }
.governance-links a:hover, .governance-links a:focus-visible { text-decoration: underline; }

/* Upgrade bridge */
.upgrade-bridge { margin-top: var(--s6); padding: var(--s6); border-left: 3px solid var(--c-ground);
  background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--c-ground);
  border-radius: var(--r-s); }
.upgrade-bridge h3 { font-size: var(--t-m); color: var(--c-ground); }
.upgrade-bridge p { margin-top: var(--s2); color: var(--ink-soft); font-size: var(--t-s);
  line-height: 1.65; max-width: 78ch; }

.all-types-text { margin-top: var(--s6); text-align: center; color: var(--ink-soft);
  font-size: var(--t-s); }
.all-types-text.koha-note { margin-top: var(--s2); }

/* ---------- common ground band (pillars come from village-apps.css) ---------- */
.ground-band .lede { color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--s8); }
.ground-band h2 { margin-top: var(--s2); }
.ground-close { margin-top: var(--s8); padding-left: var(--s4); border-left: 3px solid var(--c-ground);
  color: var(--ink); font-weight: 650; max-width: 70ch; }

/* ---------- apps by direction: category ledger rows ---------- */
.cat-block { margin-top: var(--s12); }
.cat-block:first-of-type { margin-top: 0; }
.cat-block .cat-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s4); }
.cat-block .cat-head h3 { font-size: var(--t-l); letter-spacing: -.01em; }
#connect.cat-block .cat-mark { color: var(--c-connect); } #connect.cat-block .cat-mark i { background: var(--c-connect); }
#decide.cat-block .cat-mark { color: var(--c-decide); } #decide.cat-block .cat-mark i { background: var(--c-decide); }
#work.cat-block .cat-mark { color: var(--c-work); } #work.cat-block .cat-mark i { background: var(--c-work); }
#know.cat-block .cat-mark { color: var(--c-know); } #know.cat-block .cat-mark i { background: var(--c-know); }

.app-ledger { display: grid; gap: var(--s4); }
.app-row { --c: var(--c-ground); --cs: var(--c-ground-soft);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s8);
  background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--r-m); padding: var(--s4) var(--s6); }
.app-row > * { min-width: 0; }
@media (min-width: 48rem) {
  .app-row { grid-template-columns: minmax(0, 1fr) minmax(10rem, auto); }
  .app-price { text-align: right; }
}
.app-row.connect { --c: var(--c-connect); --cs: var(--c-connect-soft); }
.app-row.decide  { --c: var(--c-decide);  --cs: var(--c-decide-soft); }
.app-row.work    { --c: var(--c-work);    --cs: var(--c-work-soft); }
.app-row.know    { --c: var(--c-know);    --cs: var(--c-know-soft); }
.app-main .top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-main h4 { font-size: var(--t-m); line-height: 1.25; }
.app-main p { font-size: var(--t-s); color: var(--ink-soft); margin-top: var(--s1); }
.app-note { font-size: var(--t-xs); color: var(--c); font-weight: 650; margin-top: var(--s1); }
.app-facts { list-style: none; padding: 0; margin: var(--s1) 0 0; display: flex; flex-wrap: wrap;
  gap: .15rem 1rem; font-size: var(--t-xs); color: var(--ink-soft); }
.app-facts li { min-width: 0; }
.app-link { display: inline-block; margin-top: var(--s2); font-size: var(--t-s); font-weight: 650;
  color: var(--c); text-decoration: none; }
.app-link:hover, .app-link:focus-visible { text-decoration: underline; }
.app-price { font-size: var(--t-s); font-weight: 650; color: var(--ink); align-self: start; }
.app-price .tier-label { display: block; font-weight: 400; color: var(--ink-soft);
  font-size: var(--t-xs); }
.indicative { display: inline-block; margin-left: .35rem; font-style: normal; font-size: var(--t-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; vertical-align: middle; }

/* ---------- capacity add-ons: THE ledger rows (§4 — the twice-shipped bug's fix) ----------
   Two columns: label+description left (wraps freely, min-width:0 so grid cannot refuse to
   shrink), price right on a shared baseline. One stacked column, max-width 44rem. A German
   label 30% longer simply takes a second line, left-aligned. No column count to crush. */
.addon-ledger { max-width: 44rem; margin-inline: auto; display: grid; gap: var(--s3); }
.addon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--s1) var(--s6); background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--s4) var(--s6); }
.addon-row > * { min-width: 0; }
.addon-main h3 { font-size: var(--t-m); display: inline; margin-right: .4rem; }
.addon-main .pill { vertical-align: middle; }
.addon-main p { font-size: var(--t-s); color: var(--ink-soft); margin-top: .15rem; }
.addon-main .app-link { margin-top: var(--s1); }
.addon-price { font-weight: 750; color: var(--ink); font-size: var(--t-m); text-align: right;
  white-space: nowrap; }
.addon-price .per, .addon-price .from { font-weight: 400; color: var(--ink-soft);
  font-size: var(--t-s); }
.addon-row--special { border: 1.5px dashed var(--c-know); }

/* ---------- sovereignty strip (inverted panel — holds in both themes) ---------- */
.sovereignty-strip { background: var(--ink); color: var(--bg); border-radius: var(--r-l);
  padding: var(--s8); text-align: center; }
.sovereignty-strip h2 { font-size: var(--t-l); color: var(--bg); }
.sovereignty-jurisdictions { margin-top: var(--s3); font-weight: 700; letter-spacing: .02em;
  color: var(--c-work-soft); }
.sovereignty-strip p { margin: var(--s3) auto 0; max-width: 70ch; font-size: var(--t-s);
  line-height: 1.65; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 54rem) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-item--full { grid-column: 1 / -1; }
}
.faq-item { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s6); min-width: 0; }
.faq-item--full { border-left: 3px solid var(--c-ground); }
.faq-item h3 { font-size: var(--t-m); margin-bottom: var(--s2); }
.faq-item p { font-size: var(--t-s); color: var(--ink-soft); line-height: 1.65; }
.faq-item p + p { margin-top: var(--s3); }
.faq-item a { color: var(--c-know); }
.principles-line { margin-top: var(--s8); text-align: center; color: var(--ink-soft);
  font-size: var(--t-s); }
.principles-line a { color: var(--c-know); font-weight: 650; }

/* ---------- CTA ---------- */
.cta-band { text-align: center; padding-block: var(--s16); border-top: 1px solid var(--line);
  background: linear-gradient(hsl(var(--hue-ground) 30% 50% / .08),
  hsl(var(--hue-ground) 30% 50% / .08)); }
.cta-band h2 { font-size: var(--t-xl); }
.cta-band p { color: var(--ink-soft); max-width: 56ch; margin: var(--s3) auto 0; }
.cta-band .btn { margin-top: var(--s6); }