/* Feature-flag styles (site.fixes.*; loaded only when a flag is on - see README "Feature flags (fixes)"). Tokens only, radius 0, flat fills. */

/* ---- posterGrid: poster and template cards in a responsive grid (.fx-grid on the page container) ---- */
.fx-grid .poster-bands { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s6); align-items: flex-start; }
.fx-grid .poster-bands .band { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.fx-grid .band .poster-grid, .fx-grid .tpl-variant .tpl-files { display: flex; flex-wrap: wrap; gap: var(--s4); }
.fx-grid .poster-grid > .pcard2 { flex: 0 0 180px; min-width: 0; }
.fx-grid .poster-grid:not(.band .poster-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.fx-grid .pcard2__fig { padding: var(--s3); }
.fx-grid .pcard2__body { padding: var(--s3); }
.fx-grid .pcard2__title { font-size: 16px; }
.fx-grid .pcard2__btns .btn { min-height: 44px; font-size: 16px; padding: 0 10px; }
.fx-grid .pcard2__btns .btn--primary { min-height: 48px; font-size: 20px; }
.fx-grid .band__title { font-size: 28px; }
.fx-grid .band__ages { display: block; font-size: 14px; }
/* templates: each variant is a group (heading), files are cards in a row */
.fx-grid .tpl-variants { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-start; }
.fx-grid .tpl-variant { flex: 0 1 auto; max-width: 100%; border: 0; background: transparent; }
.fx-grid .tpl-variant__title { padding: 0 0 var(--s2); font-size: 28px; border-bottom: var(--bd-structural); margin-bottom: var(--s4); }
.fx-grid .tpl-file { flex: 0 0 240px; min-width: 0; background: var(--white); border: var(--bd-card); }
.fx-grid .tpl-file + .tpl-file { border-left: var(--bd-card); }
.fx-grid .tpl-file__fig { padding: var(--s3); }
.fx-grid .tpl-file__fig img { max-width: 200px; }
.fx-grid .tpl-file__body { padding: var(--s3); gap: var(--s2); }
.fx-grid .tpl-file__label { font-size: 22px; }
.fx-grid .tpl-file__btns .btn { min-height: 44px; font-size: 16px; padding: 0 10px; }
.fx-grid .tpl-file__btns .btn--primary { min-height: 48px; font-size: 18px; }
@media (min-width: 600px) and (max-width: 939px) {
  .fx-grid .poster-bands .band, .fx-grid .tpl-variant { flex: 1 1 100%; }
  .fx-grid .poster-grid > .pcard2, .fx-grid .tpl-file { flex: 0 0 calc(50% - var(--s2)); }
  .fx-grid .poster-grid:not(.band .poster-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .fx-grid .poster-bands .band, .fx-grid .tpl-variant { flex: 1 1 100%; }
  .fx-grid .poster-grid > .pcard2, .fx-grid .tpl-file { flex: 0 0 100%; }
  .fx-grid .poster-grid:not(.band .poster-grid) { grid-template-columns: minmax(0, 1fr); }
  .fx-grid .tpl-file + .tpl-file { border-left: var(--bd-card); border-top: var(--bd-card); }
}

/* ---- readyMadeLink: one quiet line under the sign download picker (plain text link, not a button, not an ad) ---- */
.ready-made { margin: calc(var(--section-gap) * -0.4) 0 0; font-size: 15px; color: var(--muted); }
.ready-made a { font-weight: 600; color: var(--ink); text-decoration: underline; }
.ready-made__aff { font-size: 13px; }

/* ---- productBlock: product-style affiliate cards ---- */
.affiliate--cards { display: block; }
.affiliate--cards h2 { margin: 0 0 var(--s2); }
.affiliate--cards > p { margin: 0 0 var(--s3); }
.pcards { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
.pcard { display: flex; flex-direction: column; background: var(--white); border: var(--bd-card); min-width: 0; }
.pcard__fig { margin: 0; background: var(--paper); border-bottom: var(--bd-card); padding: var(--s3); display: flex; justify-content: center; }
.pcard__fig img { width: auto; height: 150px; max-width: 100%; object-fit: contain; background: var(--white); border: 2px solid var(--ink); }
.pcard__body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.pcard__type { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.25; }
.pcard .btn { margin-top: auto; width: 100%; }
.affiliate__also { margin: 0 0 var(--s3); }
@media (max-width: 599px) { .pcards { grid-template-columns: minmax(0, 1fr); } .pcard { flex-direction: row; } .pcard__fig { border-bottom: 0; border-right: var(--bd-card); flex: none; } .pcard__fig img { height: 100px; } }

/* ---- externalMore: "More free ... from elsewhere" - dashed ink border + arrow so they never read as our downloads ---- */
.ext-more { display: flex; flex-direction: column; gap: var(--s3); }
.ext-more .section-head, .ext-more p { margin: 0; }
.ext-grid { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
.ext-card a { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s3); background: var(--paper); border: 3px dashed var(--ink); text-decoration: none; color: var(--ink); }
.ext-card a:hover { background: var(--white); }
.ext-card__fig { display: flex; justify-content: center; background: var(--white); border: 1px solid var(--disabled-border); padding: var(--s2); }
.ext-card__fig img { width: 100%; height: 160px; object-fit: contain; }
.ext-card__title { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.ext-card a:hover .ext-card__title { text-decoration: underline; }
.ext-card__src { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-blue, var(--ink)); margin-top: auto; }
.ext-card__meta { font-size: 13px; color: var(--muted); }
@media (max-width: 599px) { .ext-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- compact (site.fixes.compact): dense, full-width layout for sign, poster, template and household pages ----
   Everything is scoped to .fx-compact (set on the page container), so no other page and no flag-off build changes.
   Columns: --cols cards per row (2 phone, 3 tablet, 4 at 940+, 5 at 1200+). Radius 0, tokens only. */
.fx-compact { max-width: 1240px; --section-gap: 24px; --cols: 2; --ext-cols: 2; --tpl-cols: 2; }
.fx-compact.sign-layout { gap: var(--section-gap); }
@media (min-width: 600px) { .fx-compact { --cols: 3; --tpl-cols: 3; --ext-cols: 4; } }
@media (min-width: 940px) { .fx-compact { --cols: 4; --tpl-cols: 4; --ext-cols: 5; } }
@media (min-width: 1200px) { .fx-compact { --cols: 5; --ext-cols: 6; } }
@media (max-width: 379px) { .fx-compact { --cols: 1; --tpl-cols: 1; --ext-cols: 1; } }
/* 1. no sidebar column: one column, "On this page" becomes a slim row of jump links under the intro */
@media (min-width: 940px) {
  .fx-compact.sign-layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-areas: "lb" "intro" "aside" "dl" "read" "aside2"; }
  .fx-compact .sign-aside-top { grid-row: 3 / 4; }
  .fx-compact .fx-lb { grid-area: lb; }
}
.fx-compact .sign-intro { gap: var(--s2); }
.fx-compact .sign-intro .lead, .fx-compact.poster-layout .sign-intro .lead, .fx-compact.tpl-layout .sign-intro .lead { max-width: 980px; font-size: 18px; line-height: 1.45; }
.fx-compact .sign-aside-top { margin-top: calc(var(--s3) * -1); }
.fx-compact .jumpbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); background: transparent; border: 0; border-block: 2px solid var(--ink); padding: var(--s2) 0; }
.fx-compact .jumpbar .box__title { margin: 0; font-size: 16px; letter-spacing: 0.04em; }
.fx-compact .jumpbar nav { min-width: 0; }
.fx-compact .jumpbar ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.fx-compact .jumpbar li.otp__sub { display: none; }
.fx-compact .jumpbar a { min-height: 32px; padding: 0 var(--s3); background: var(--white); border: 2px solid var(--ink); font-size: 15px; text-decoration: none; white-space: nowrap; }
.fx-compact .jumpbar a:hover { background: var(--ink); color: var(--white); }
.fx-compact .sign-aside-bottom { align-self: start; gap: var(--s3); }
.fx-compact .sign-aside-bottom .box { padding: var(--s2) var(--s4); }
.fx-compact .sign-aside-bottom .box p { font-size: 15px; }
.fx-compact .sign-aside-bottom .class-box .marker { width: 28px; height: 28px; }
/* type and section rhythm */
.fx-compact h2 { font-size: clamp(28px, 3vw, 34px); }
.fx-compact .section-head { margin: 0 0 var(--s2); }
.fx-compact .section-intro { margin: 0 0 var(--s3); max-width: none; }
/* featured sign download */
.fx-compact .dl-feature { border-width: 3px; }
.fx-compact .dl-feature__preview { flex-basis: 260px; padding: var(--s4); border-right-width: 3px; }
.fx-compact .dl-feature__preview img { max-height: 340px; }
.fx-compact .dl-feature__panel { flex-basis: 360px; padding: var(--s5) var(--s6); gap: var(--s3); }
.fx-compact .dl-feature__panel h2 { font-size: 30px; }
.fx-compact .dl-feature .radio { min-height: 40px; }
.fx-compact .dl-feature .btn--primary { min-height: 52px; font-size: 24px; }
.fx-compact .dl-picker__form { gap: var(--s3); }
.fx-compact .dl-links a { min-height: 36px; }
/* 2/3. compact button chips (small secondary buttons) */
.fx-compact .btn--chip { min-height: 32px; width: auto; flex: none; padding: 0 var(--s3); border-width: 2px; font-size: 14px; line-height: 1; }
.fx-compact .btn--chip-primary { background: var(--sign-green); color: var(--white); border-color: var(--ink); }
.fx-compact .btn--chip-primary:hover { background: var(--green-hover); }
/* poster cards: flat grid, band labels become tiles that flow inline with the cards */
.fx-compact .poster-bands, .fx-compact .poster-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.fx-compact .poster-bands .poster-grid { display: contents; }
.fx-compact .band { display: contents; }
.fx-compact .band[hidden] { display: none; }
/* band headings stay in the DOM for screen readers; sighted users get the band chips above plus a band badge on every card */
.fx-compact .band__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.fx-compact .poster-bands > .poster-grid { display: contents; }
.fx-compact .pcard2 { border-width: 2px; min-width: 0; }
.fx-compact .pcard2__fig { padding: var(--s2); border-bottom-width: 2px; }
.fx-compact .pcard2__fig img { max-width: 100%; border-width: 1px; }
.fx-compact .pcard2__body { padding: var(--s2); gap: var(--s1); }
.fx-compact .pcard2__title { font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.fx-compact .pcard2__meta { margin: 0; line-height: 1; }
.fx-compact .pcard2__meta .tag { font-size: 12px; padding: 2px 6px; }
.fx-compact .pcard2__btns--c { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: auto; padding-top: var(--s1); }
.fx-compact .pcard2__inkgrp { display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s1); }
.fx-compact .pcard2__inklab { font-size: 12px; font-weight: 700; color: var(--muted); }
.fx-compact .band-chips { gap: var(--s1); }
.fx-compact .chip { min-height: 36px; padding: 0 var(--s3); font-size: 15px; border-width: 2px; }
/* 4. template styles: one card per style */
.fx-compact .tpl-variants { display: grid; grid-template-columns: repeat(var(--tpl-cols), minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.fx-compact .tpl-variant--c { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); min-width: 0; }
.fx-compact .tcard__fig { margin: 0; background: var(--paper); padding: var(--s2); display: flex; justify-content: center; border-bottom: 2px solid var(--ink); }
.fx-compact .tcard__fig img { width: 100%; max-width: 100%; max-height: 360px; object-fit: contain; background: var(--white); border: 1px solid var(--ink); }
.fx-compact .tcard__body { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.fx-compact .tcard__title { font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.2; text-transform: none; }
.fx-compact .tcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.fx-compact .tcard__row:first-of-type { margin-top: auto; }
.fx-compact .tcard__lab { flex: 0 0 58px; font-size: 13px; font-weight: 700; color: var(--muted); }
/* sign variant cards */
.fx-compact .card-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s3); }
.fx-compact .card { border-width: 2px; }
.fx-compact .card__media { padding: var(--s2); aspect-ratio: 4 / 5; border-bottom-width: 2px; }
.fx-compact .card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fx-compact .card__body { padding: var(--s2); gap: var(--s2); }
.fx-compact .card__title { font-size: 17px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em; }
.fx-compact .card__actions { gap: var(--s1); }
.fx-compact .dl-compact { gap: var(--s1); flex-direction: row; flex-wrap: wrap; align-items: center; }
.js .fx-compact .dl-compact__selects { flex-direction: row; flex: 1 1 100%; gap: var(--s1); }
.fx-compact .dl-compact select { height: 32px; border-width: 2px; font-size: 14px; padding: 0 var(--s1); }
.fx-compact .dl-compact .btn--small { min-height: 32px; flex: 1 1 100%; padding: 0 var(--s2); font-size: 14px; border-width: 2px; }
.fx-compact .dl-compact details { flex: 1 1 100%; }
.fx-compact .dl-compact details summary { min-height: 32px; }
/* 5. slim bars, reading blocks, FAQ */
.fx-compact .dl-all { padding: var(--s3) var(--s4); gap: var(--s2) var(--s4); }
.fx-compact .dl-all h3 { font-size: 22px; }
.fx-compact .dl-all p { font-size: 14px; line-height: 1.3; }
.fx-compact .dl-all .btn { min-height: 40px; font-size: 15px; padding: 0 var(--s4); }
.fx-compact .ink-block { padding: var(--s4) var(--s5); }
.fx-compact .ink-block h2 { font-size: 26px; margin-bottom: var(--s2); }
.fx-compact .ink-block ol { gap: var(--s1); }
.fx-compact .use-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s2); }
.fx-compact .use-list li { padding: var(--s3) var(--s4); }
.fx-compact .use-list strong { font-size: 17px; line-height: 1.25; }
.fx-compact .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s2); }
.fx-compact .steps__n { width: 44px; font-size: 26px; }
.fx-compact .steps__t { padding: var(--s3) var(--s4); }
.fx-compact .prose { max-width: none; column-width: 420px; column-gap: var(--s7); }
.fx-compact .prose > h2 { column-span: all; }
.fx-compact .faq { column-width: 480px; column-gap: var(--s8); }
.fx-compact .faq details { break-inside: avoid; padding: 0; }
.fx-compact .faq summary { min-height: 40px; font-size: 17px; }
.fx-compact .faq summary::after { font-size: 26px; }
.fx-compact .faq details p { margin: 0 0 var(--s3); }
.fx-compact .link-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s2); }
.fx-compact .link-tile { flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--s3); padding: var(--s2) var(--s3); border-width: 2px; font-size: 15px; line-height: 1.2; min-height: 44px; }
.fx-compact .link-tile img { width: 40px; height: 48px; flex: none; }
.fx-compact .ad--in-article, .fx-compact .ad--in-feed { min-height: 120px; }
/* product cards: small horizontal tiles, 4-5 across */
.fx-compact .affiliate--cards { padding: var(--s3) var(--s4); border-width: 3px; }
.fx-compact .affiliate--cards h2 { font-size: 26px; margin: 0 0 var(--s1); }
.fx-compact .affiliate--cards > p { margin: 0 0 var(--s2); font-size: 14px; }
.fx-compact .affiliate__label { margin: 0 0 2px; }
.fx-compact .pcards { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.fx-compact .pcard { flex-direction: row; border-width: 2px; }
.fx-compact .pcard__fig { padding: var(--s1); border-bottom: 0; border-right: 2px solid var(--ink); flex: none; align-items: center; }
.fx-compact .pcard__fig img { height: 76px; border-width: 1px; }
.fx-compact .pcard__body { padding: var(--s2); gap: var(--s2); justify-content: space-between; }
.fx-compact .pcard__type { font-size: 14px; }
.fx-compact .pcard .btn { min-height: 32px; font-size: 14px; padding: 0 var(--s2); border-width: 2px; }
.fx-compact .affiliate__also { margin: 0 0 var(--s2); font-size: 14px; }
.fx-compact .affiliate__disclosure { font-size: 13px; }
/* external "more from elsewhere": 5-6 across, small */
.fx-compact .ext-more { gap: var(--s2); }
.fx-compact .ext-grid { grid-template-columns: repeat(var(--ext-cols), minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.fx-compact .ext-card a { padding: var(--s2); gap: var(--s1); border-width: 2px; }
.fx-compact .ext-card__fig { padding: var(--s1); }
.fx-compact .ext-card__fig img { height: 120px; }
.fx-compact .ext-card__title { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-compact .ext-card__src { font-size: 13px; }
.fx-compact .ext-card__meta { font-size: 12px; }
/* phone: 44px touch targets */
@media (max-width: 599px) {
  .fx-compact .btn--chip, .fx-compact .dl-compact select, .fx-compact .dl-compact .btn--small, .fx-compact .jumpbar a, .fx-compact .pcard .btn, .fx-compact .chip, .fx-compact .dl-links a, .fx-compact .dl-compact details summary { min-height: 44px; }
  .fx-compact .dl-compact select { height: 44px; }
  .fx-compact .jumpbar a { padding: 0 var(--s3); }
  .fx-compact .tcard__lab { flex-basis: 100%; }
  .fx-compact .steps { grid-template-columns: minmax(0, 1fr); }
  .fx-compact .pcards { grid-template-columns: minmax(0, 1fr); }
  .fx-compact .dl-all .btn { min-height: 44px; }
  .fx-compact .dl-feature__panel, .fx-compact .dl-feature__preview { padding: var(--s3); }
}
/* compact: FAQ and its 336x280 ad share one row (FAQ about 2/3, ad 1/3, top-aligned); stacks on phone */
.fx-compact .fx-faqrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.fx-compact .fx-faqrow__ad { min-width: 0; }
.fx-compact .fx-faqrow .faq { column-width: auto; column-count: 1; }
@media (min-width: 768px) { .fx-compact .fx-faqrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s8); } .fx-compact .fx-faqrow__ad .ad { margin: 0 auto; } }

/* compact ad layout: leaderboard under the title band, one in-content unit after our own downloads/product block, 336x280 beside the FAQ,
   phone anchor placeholder, 160x600 rails at 1600px+. Guardrail: a content block always separates an ad from a download control. */
.fx-compact .fx-lb { min-width: 0; margin-top: calc(var(--s2) * -1); }
.fx-compact .fx-lb .ad { margin: 0 auto; }
.ad--970x90 { max-width: 970px; min-height: 90px; }
@media (max-width: 999px) { .fx-compact .fx-lb .ad--970x90 { max-width: 728px; } }
@media (max-width: 939px) { .fx-compact .fx-lb { order: -2; margin-top: 0; } }
.fx-compact .fx-mid { margin-block: var(--s4); }
.fx-compact .fx-mid .ad { min-height: 250px; }
.fx-compact { position: relative; }
.ad--160x600 { max-width: 160px; min-height: 600px; }
.fx-rail { display: none; }
@media (min-width: 1600px) {
  .fx-compact .fx-rail { display: block; position: absolute; top: 0; bottom: 0; width: 160px; }
  .fx-compact .fx-rail--l { right: 100%; margin-right: var(--s4); }
  .fx-compact .fx-rail--r { left: 100%; margin-left: var(--s4); }
  .fx-rail__in { position: sticky; top: var(--s6); }
}
.ad-anchor { display: none; }
@media (max-width: 767px) {
  .ad-anchor { display: flex; align-items: center; justify-content: center; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 50; background: var(--ad-fill); border-top: var(--bd-ad); color: var(--ad-text); font-size: 13px; padding-right: 52px; }
  .ad-anchor[hidden] { display: none; }
  .ad-anchor__close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; }
  body:has(.ad-anchor:not([hidden])) { padding-bottom: 56px; }
}