/* WonderFonT family page: world, demos, tester, letters, pairs, the purchase and the bar.
   Loads on family pages only (wf_pages_public.family_page). Tokens from wf.css, pills from catalog.css. */

/* Family world */
/* minmax(0, 1fr): a definite column, so a demo grid or a long hero word can never widen the
   world past the viewport (an auto column takes the children's intrinsic width). */
.wf-world { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wf-s7); margin-block-end: var(--wf-s6); }
.wf-world__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wf-s6); align-items: center; }
.wf-world__hero .wf-sticker { min-block-size: 16rem; container-type: inline-size; padding: 12% 10%; }
/* The family hero grows with its text, so only the width bounds it (longest word across). */
.wf-world__hero .wf-spec--hero { font-size: clamp(2rem, calc(100cqi * 0.95 / var(--wf-word, 6)), 8rem); }
.wf-world__name { font-size: var(--wf-t-xl); margin: 0; }
.wf-world__alt { margin: 0; font-weight: 700; color: var(--wf-ink-2); }
.wf-world__intro form { display: inline-block; margin-block-start: var(--wf-s3); }
.wf-world__intro .wf-btn { inline-size: auto; }
@media (min-width: 900px) { .wf-world__hero { grid-template-columns: 3fr 2fr; } }
.wf-demos { overflow-x: clip; display: grid; gap: var(--wf-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.wf-demo { margin: 0; padding: var(--wf-s6); border-radius: var(--wf-r-m); box-shadow: var(--wf-edge); container-type: inline-size;
  display: grid; gap: var(--wf-s4); align-content: space-between; }
/* A name never breaks mid-word (review 09-27): the text fits the figure by its longest word. */
.wf-demo__text { margin: 0; overflow-wrap: normal; line-height: 1.1; min-inline-size: 0; max-inline-size: 100%; }
.wf-demo__title { font-size: var(--wf-t-sm); font-weight: 600; }
.wf-demo--poster { aspect-ratio: 3 / 4; }
.wf-demo--poster .wf-demo__text { font-size: clamp(2rem, calc(100cqi * 0.95 / var(--wf-word, 6)), 4.5rem); }
.wf-demo--packaging { border: 2px solid var(--wf-ink); border-radius: var(--wf-r-l) var(--wf-r-l) var(--wf-r-s) var(--wf-r-s); }
.wf-demo--packaging .wf-demo__text { font-size: var(--wf-t-lg); overflow-wrap: anywhere; }
.wf-demo--signage .wf-demo__text { font-size: clamp(1.5rem, calc(100cqi * 0.95 / var(--wf-word, 6)), 3rem); letter-spacing: .02em; }
.wf-wline .wf-sample { margin: 0; font-size: 56px; line-height: 1.15; white-space: pre-wrap; }
.wf-cov { font-size: var(--wf-t-sm); }
.wf-cov p { margin: 0; }
.wf-cov__fallback { color: var(--wf-red); font-weight: 600; }
.wf-miss { list-style: none; padding: 0; margin: 0; margin-block-start: var(--wf-s2); display: flex; flex-wrap: wrap; gap: var(--wf-s2) var(--wf-s4); }
.wf-miss__ch { font-size: var(--wf-t-md); }
/* The card's letters grow into this hero on the way in (tester.js names the clicked card). */
.wf-world__hero .wf-spec--hero { view-transition-name: wf-hero; }
@supports selector(:has(a)) {
  [data-wf-webbuy] .wf-webtotal { display: none; }
  [data-wf-webbuy]:has([name="sites"][value="1"]:checked) .wf-webtotal[data-sites="1"],
  [data-wf-webbuy]:has([name="sites"][value="5"]:checked) .wf-webtotal[data-sites="5"],
  [data-wf-webbuy]:has([name="sites"][value="25"]:checked) .wf-webtotal[data-sites="25"] { display: grid; }
}
/* The purchase as one choice (review 09-27): Desktop or Web, then that product only. */
.wf-buy { display: grid; gap: var(--wf-s4); max-inline-size: 34rem; }
.wf-buy__kind .wf-seg__opt span { font-size: var(--wf-t-md); padding-inline: var(--wf-s5); }
.wf-buy__panel { padding: var(--wf-s5); background: var(--wf-paper); border: 2px solid var(--wf-line); border-radius: var(--wf-r-l); }
.wf-buy__panel form { display: grid; gap: var(--wf-s3); }
.wf-buy__panel p { margin: 0; }
.wf-buy__panel .wf-webtotal .wf-price__n, .wf-buybar .wf-price__n { color: var(--wf-cobalt); }
.wf-buy__packs { margin-block: var(--wf-s3); }
.wf-buy__more { margin-block-start: var(--wf-s4); }
@supports selector(:has(a)) {
  .wf-buy:has([name="kind"][value="web"]:checked) [data-kind="desktop"],
  .wf-buy:has([name="kind"][value="desktop"]:checked) [data-kind="web"] { display: none; }
}
/* On a phone the bar sits at the bottom, one action, over the safe area (review 10). */
@media (max-width: 767px) {
  .wf-buybar { position: fixed; top: auto; inset-block-end: 0; inset-inline: 0; z-index: 20; margin: 0; border-radius: var(--wf-r-l) var(--wf-r-l) 0 0;
    padding-block: var(--wf-s3) calc(var(--wf-s3) + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -12px rgb(20 20 20 / .35); }
  .wf-buybar + .wf-section { margin-block-start: var(--wf-s6); }
  .wf-main:has(.wf-buybar) { padding-block-end: 8rem; }
}
/* Home hero sticker places (wf.css has the hero); logical insets mirror in RTL. */
.wf-buybar, .wf-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wf-s2) var(--wf-s3); }
.wf-buybar, .wf-tbar--box { padding: var(--wf-s2) var(--wf-s4); background: var(--wf-paper); border: 1px solid var(--wf-line); }
.wf-buybar { position: sticky; top: var(--wf-s2); z-index: 5; margin-block: var(--wf-s6); border-radius: var(--wf-r-pill); }
.wf-buybar__name { font-weight: 800; flex: 1; }
.wf-buybar .wf-price__n { font-size: var(--wf-t-lg); }
.wf-tbar--box { border-radius: var(--wf-r-m); }
.wf-tbar__text { flex: 1 1 14rem; box-sizing: border-box; min-block-size: var(--wf-tap); padding-block: calc((var(--wf-tap) - 1lh) / 2); border: 0; background: none; font: inherit; resize: none; }
.wf-wline { padding-block: var(--wf-s4); border-block-end: 1px solid var(--wf-line); }
.wf-wline__name { font-size: var(--wf-t-xs); color: var(--wf-ink-2); }
.wf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--wf-s3); }
.wf-stats li { display: grid; padding: var(--wf-s4); border-radius: var(--wf-r-m); background: var(--wf-paper); }
.wf-stats__n { font-size: var(--wf-t-lg); font-weight: 800; }
.wf-glyphs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1px; margin-block: var(--wf-s5); background: var(--wf-line); border: 1px solid var(--wf-line); font-size: clamp(1.25rem, 5vw, 3rem); text-align: center; }
.wf-glyphs span { padding: .5rem 0; background: var(--wf-ground); overflow: hidden; }
/* 10-01: an extended face drew glyphs wider than a ninth of a phone and widened the page */
@media (max-width: 599px) { .wf-glyphs { font-size: clamp(1.1rem, 6vw, 2rem); } }