/* ============================================================================
   /facts/{slug} (sub page system v1.1, 9 Oct 2026): a plain page, no instrument.
   Loaded after log-post.css (the closing ask and the floating ask, shared with the Log).

   THE HEADER: the post's hero art (TimerSitePosts.HeroArt, stored per post and language) is the
   header's figure (.hd-fig): its field of dots drawn on the paper in the brand mark's own two
   states (unlit, lit) with the one that matters in orange, and the product's name under it as a
   record. Still: the old sweep and the pulsing rings are not drawn (a loop with no Pause is not
   allowed). A post without art gets the plain header (the template adds .is-plain).

   THE BODY is stored HTML (BodyHtml, never edited) built from .fx-sec bands:
     .fx-sec > .fx-in > .fx-head (.fx-label > .n, h2.fx-h, p.fx-lead)
                      + .fx-grid > .fx-card > .k .t .d   (items: the system's cards)
                      + .fx-p                            (a paragraph)
                      + .fx-say > .hl                    (the band's one-line statement)
                      + .fx-stats > .fx-stat > .v .l     (figures: the system's numbers)
                      + .fx-panel > table                (a ruled table, .yes marked)
                      + .fx-prices > .fx-price           (the plan cards of /pricing)
     .fx-mq > .fx-mq-vp > .fx-mq-row > .fx-mq-item      (a strip of examples)
   Each band is drawn as one of the system's chapters (it also carries data-ch, added at render
   time): the numbered label, the question and its short answer held still on the left of a
   desktop (columns 1 to 5) while the rest reads on the right (7 to 12); stacked on a phone.
   No alternating backgrounds (.is-alt is ignored): chapters are separated by hairlines.
   The strip is a still row the reader scrolls (the template drops its second, looping copy).
   Tokens only (no hex outside tos-site.css), every rule under .sp.fx, logical properties only.
   ============================================================================ */

/* ---- the header figure: the hero art, still, on the paper ---- */
.sp.fx .fx-art { min-width: 0; }
.sp.fx .fx-ha, .sp.fx .fx-ha-panel { display: block; position: static; }
.sp.fx .fx-ha-field { display: block; width: 100%; height: auto; aspect-ratio: 23 / 16; overflow: visible; color: var(--lp-accent); }
.sp.fx .fx-ha-sweep { display: none; }
.sp.fx .fx-ha-field .d-dim, .sp.fx .fx-ha-field .d-below { fill: var(--lp-dot-off); }
.sp.fx .fx-ha-field .d-lit { fill: var(--lp-ink); }
.sp.fx .fx-ha-field .d-match, .sp.fx .fx-ha-field .d-app { fill: var(--lp-accent); }
.sp.fx .fx-ha-field .d-ring { fill: none; stroke: var(--lp-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp.fx .fx-ha-field .d-ring2 { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp.fx .fx-ha-field .d-link, .sp.fx .fx-ha-field .d-fan { fill: none; stroke: var(--lp-ink-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp.fx .fx-ha-field .d-gate { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.sp.fx .fx-ha-word { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lp-rule); }
.sp.fx .fx-ha-name { font: 600 clamp(24px, 6.4vw, 34px)/1.1 var(--tos-font-mono); letter-spacing: .08em; color: var(--lp-ink); }
.sp.fx .fx-ha-role { font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); }
.sp.fx .fx-top h1 { overflow-wrap: break-word; }

/* ---- a band is a chapter ---- */
.sp.fx .fx-sec { padding-block: 64px 56px; border-top: 1px solid var(--lp-rule); }
.sp.fx .fx-in { max-width: var(--lp-max); margin: 0 auto; padding-inline: var(--dl-g); }
.sp.fx .fx-in > * + * { margin-top: 28px; }
.sp.fx .fx-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font: 600 13px/1.4 var(--tos-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink-2); }
.sp.fx .fx-label .n { font: 600 13px/1.5 var(--tos-font-mono); letter-spacing: 0; color: var(--lp-accent-text); }
.sp.fx .fx-lead { margin-top: 22px; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--lp-ink); }
.sp.fx .fx-p { max-width: 34em; font-size: 17px; line-height: 1.62; color: var(--lp-ink-2); }
.sp.fx .fx-lead strong, .sp.fx .fx-p strong { font-weight: 600; color: var(--lp-ink); }
html[lang^="de"] .sp.fx .fx-doc { -webkit-hyphens: auto; hyphens: auto; }

/* items of one kind: the system's cards (hairline rows, two columns from 760px) */
.sp.fx .fx-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--lp-ink); }
.sp.fx .fx-card { display: block; padding: 18px 0 22px; border-bottom: 1px solid var(--lp-rule); min-width: 0; }
.sp.fx .fx-card .k { display: block; font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); }
.sp.fx .fx-card .t { display: block; margin-top: 6px; font: 600 20px/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); overflow-wrap: break-word; }
.sp.fx .fx-card .d { display: block; margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); max-width: 34em; }

/* the band's one-line statement: larger, under an ink rule; the words it leans on in ink */
.sp.fx .fx-say { max-width: 30em; padding-top: 18px; border-top: 1px solid var(--lp-ink); font: 500 clamp(21px, 5.4vw, 26px)/1.35 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink-2); text-wrap: pretty; }
.sp.fx .fx-say .hl { font-weight: 600; color: var(--lp-ink); }

/* figures: the system's numbers. On a phone one per row, the figure beside its sentence */
.sp.fx .fx-stats { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--lp-ink); }
.sp.fx .fx-stat { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 16px 0 18px; border-bottom: 1px solid var(--lp-rule); }
.sp.fx .fx-stat .v { font: 600 clamp(36px, 9vw, 52px)/1 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.sp.fx .fx-stat .l { font-size: 15px; line-height: 1.45; color: var(--lp-ink-2); }

/* a ruled table (two columns: what you need, in Timer); "Included" carries the orange square */
.sp.fx .fx-panel table { width: 100%; border-collapse: collapse; }
.sp.fx .fx-panel caption { padding-bottom: 10px; text-align: start; font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); caption-side: top; }
.sp.fx .fx-panel th, .sp.fx .fx-panel td { padding: 12px 12px 12px 0; text-align: start; vertical-align: top; border-bottom: 1px solid var(--lp-rule); }
.sp.fx .fx-panel thead th { padding-block: 0 10px; font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); border-bottom-color: var(--lp-ink); }
.sp.fx .fx-panel tbody th { font: 600 16px/1.4 var(--tos-font-body); color: var(--lp-ink); overflow-wrap: break-word; }
.sp.fx .fx-panel td { font-size: 16px; line-height: 1.4; color: var(--lp-ink-2); }
.sp.fx .fx-panel td.yes { color: var(--lp-ink); font-weight: 600; white-space: nowrap; }
.sp.fx .fx-panel td.yes::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; background: var(--lp-accent); vertical-align: .1em; }
.sp.fx .fx-panel th:last-child, .sp.fx .fx-panel td:last-child { padding-inline-end: 0; }

/* the plans: the square framed cards of /pricing */
.sp.fx .fx-prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sp.fx .fx-price { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); }
.sp.fx .fx-price .fx-tier { font: 600 20px/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); }
.sp.fx .fx-price .fx-amt { margin-top: 18px; font: 600 clamp(44px, 12vw, 56px)/1 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.sp.fx .fx-price .fx-per { margin-inline-start: 6px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lp-muted); }
.sp.fx .fx-price .fx-who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lp-rule); font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }

/* a strip of examples: a still row the reader scrolls, hairline cells, no frames */
.sp.fx .fx-mq { max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--dl-g) 48px; }
.sp.fx .fx-mq-vp { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--lp-rule-2) transparent; border-top: 1px solid var(--lp-ink); }
.sp.fx .fx-mq-row { display: flex; width: max-content; }
.sp.fx .fx-mq-item { flex: 0 0 240px; padding: 14px 18px 20px; border-inline-end: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule); scroll-snap-align: start; }
.sp.fx .fx-mq-item:first-child { padding-inline-start: 0; }
.sp.fx .fx-mq-item .k { display: block; font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); }
.sp.fx .fx-mq-item .t { display: block; margin-top: 6px; font: 600 17px/1.3 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); }
.sp.fx .fx-mq-item .d { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); white-space: normal; }

@media (min-width: 600px) {
  .sp.fx .fx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .sp.fx .fx-stat { display: block; }
  .sp.fx .fx-stat .l { display: block; margin-top: 10px; }
}
@media (min-width: 760px) {
  .sp.fx .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .sp.fx .fx-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp.fx .fx-price { padding: 24px; }
  .sp.fx .fx-price .fx-who { margin-top: auto; }
  .sp.fx .fx-price .fx-amt { margin-bottom: 18px; }
  .sp.fx .fx-mq-item { flex-basis: 270px; }
}
@media (min-width: 1180px) {
  /* the header: words left, the art right, one screen tall (the system's .sp-head) */
  .sp.fx .fx-top.has-art > .hd-fig { grid-column: 8 / span 5; }
  /* a band: its head holds still on the left while the rest reads on the right */
  .sp.fx .fx-sec { padding-block: 120px; }
  .sp.fx .fx-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .sp.fx .fx-in > .fx-head { grid-column: 1 / span 5; grid-row: 1 / span 30; position: sticky; top: calc(var(--lp-nav-h) + 48px); }
  .sp.fx .fx-in > :not(.fx-head) { grid-column: 7 / span 6; min-width: 0; }
  .sp.fx .fx-in > * + * { margin-top: 36px; }
  .sp.fx .fx-in > .fx-head + * { margin-top: 0; }
  .sp.fx .fx-in > .fx-head + .fx-p, .sp.fx .fx-in > .fx-head + .fx-say { margin-top: 34px; }
  .sp.fx .fx-lead { font-size: 19px; }
  .sp.fx .fx-p { font-size: 18px; }
  .sp.fx .fx-card .t { font-size: 21px; }
  .sp.fx .fx-mq-item { flex-basis: 290px; padding: 18px 22px 22px; }
  .sp.fx .fx-mq-item:first-child { padding-inline-start: 0; }
}