/* ============================================================================
   family-pricing.css — "Dawn Compass" family / whānau Village pricing page.
   Extends /css/village-apps.css: consumes its tokens (--bg, --ink, --line,
   --ink-soft, --c-connect/-work/-ground + -soft variants, type + space scales)
   and its shared chrome (header.site, .wrap, footer.site, .pillars, .overlay,
   .skip-link, .lang-switch, .theme-btn). This sheet defines only the pricing
   components this page uses. NO raw colours — tokens only, so light and dark
   both hold from one sheet.

   Sibling of village-pricing.css (the Fair Ground page). Same system rule:
   anything carrying a sentence is a stacked, readable column, never a crushable
   card grid — DE/FR run ~30% longer than EN.
   ============================================================================ */

/* ---- Self-hosted Atkinson Hyperlegible (body) — matches ecosystem.css / mysy-landing.css ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: local('Atkinson Hyperlegible'),
       url('/fonts/atkinson/atkinson-hyperlegible-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: local('Atkinson Hyperlegible Bold'),
       url('/fonts/atkinson/atkinson-hyperlegible-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400; font-display: swap;
  src: local('Atkinson Hyperlegible Italic'),
       url('/fonts/atkinson/atkinson-hyperlegible-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 700; font-display: swap;
  src: local('Atkinson Hyperlegible Bold Italic'),
       url('/fonts/atkinson/atkinson-hyperlegible-bold-italic.woff2') format('woff2');
}
/* Body register override (village-apps.css sets system-ui). */
body { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; }

/* ---------- 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, .pricing-product-card { transition: none !important; transform: none !important; }
}
a:focus-visible, button:focus-visible, select:focus-visible, input: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; }

/* ---------- 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: 22ch; }
.hero--pricing .sub { max-width: 46ch; }
.price-line { margin-top: var(--s6); font-size: var(--t-l); font-weight: 750; }
.price-line .amount { color: var(--c-work); }
.price-note { margin-top: .25rem; font-size: var(--t-xs); font-weight: 650; color: var(--c-ground); }
.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); text-align: center; }
.band-head h2 { font-size: var(--t-xl); letter-spacing: -.01em; }
.band-head .lede { margin: var(--s2) auto 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------- the flat tier: one centred ledger card ---------- */
.tier-ledger { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.tier-ledger--single { max-width: 30rem; margin-inline: auto; }

.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(--s8); min-width: 0; }
.pricing-product-card--featured { border: 1.5px solid var(--c-ground); background: var(--c-ground-soft); }
.tier-flag { align-self: flex-start; background: var(--c-ground); color: var(--bg);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; padding: .3em .9em;
  border-radius: 999px; line-height: 1.3; }
.pricing-product-card h3.tier-name { font-size: var(--t-l); line-height: 1.2; }
.tier-storage { font-size: var(--t-s); font-weight: 650; color: var(--c-ground); }
.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); }
.product-features { list-style: none; padding: var(--s4) 0 0; margin: 0; border-top: 1px solid var(--c-ground);
  display: grid; gap: .5rem; }
.product-features li { position: relative; padding-left: 1.5rem; 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: var(--s4); 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); }
.storage-note { margin: var(--s8) auto 0; max-width: 60ch; text-align: center;
  color: var(--ink-soft); font-size: var(--t-s); line-height: 1.65; }

/* ---------- 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); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); max-width: 60rem;
  margin-inline: auto; }
@media (min-width: 54rem) { .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-item { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s6); min-width: 0; }
.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; }

/* ---------- 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: 52ch; margin: var(--s3) auto 0; }
.cta-band .btn { margin-top: var(--s6); }