/* ==========================================================================
   Rules the built site needs and the demo does not (spec-landing.md B3).
   The demo is a static mock: its language switch and term switch are buttons that app.js toggles.
   The built site runs no JavaScript beyond remembering the language, so the language switch is
   two links, the term switch is two radios driven by CSS, and a store badge with no listing yet
   is a span rather than a link. Every colour is a token from base.css.
   ========================================================================== */
/* The same Nunito the app bundles, served from this site (the demo imports it from Google). */
@font-face { font-family: "Nunito"; src: url("./fonts/Nunito-Variable.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; font-display: swap; }

.lang-switch a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; color: var(--text-2); }
.lang-switch a.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }

.store--soon { cursor: default; }

.pricing .wrap { position: relative; }
.term-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented label { padding: 8px 14px; border-radius: 11px; font-weight: 800; font-size: 14px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
#term-6:checked ~ .terms label[for="term-6"], #term-12:checked ~ .terms label[for="term-12"] { background: var(--accent); color: var(--white); box-shadow: var(--shadow-1); }
#term-6:checked ~ .plans .term-12, #term-6:checked ~ .terms .term-12 { display: none; }
#term-12:checked ~ .plans .term-6, #term-12:checked ~ .terms .term-6 { display: none; }

/* The staff is prerendered SVG; the demo sizes it through .staff-wrap svg already. */
.float-staff svg text { font-family: Bravura; }