/* Answer pages (/kerja-rumah-tanpa-berleter/, /sistem-mata-keluarga/ and their /en/ twins). Loads
   after site.css and seasons.css and reuses their tiles (s-trio, s-weeks, s-split, s-feature,
   statement, stats, facts). Only adds the labelled definition block, the attribute list inside the
   comparison cards, a worked-example stats row and a three column facts grid. Tokens only. */

/* definition: a quiet tile with a small label, the one-sentence definition inside */
.a-def { background: var(--tile); border-radius: var(--radius-card); padding: var(--s6) var(--s6) var(--s5); margin: 0; max-width: 60ch; }
.a-def-label { margin: 0 0 var(--s2); font-size: var(--t-meta); font-weight: var(--wt-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.s-hero .a-def .answer { margin: 0; }

/* comparison cards: the facts of each method as a list of label and value rows */
.a-attrs { margin: var(--s6) 0 0; }
.a-attrs div { padding: var(--s3) 0; border-top: 1px solid var(--border); }
.a-attrs dt { font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); }
.a-attrs dd { margin: var(--s1) 0 0; font-size: var(--t-body); line-height: 1.45; color: var(--text); }
.s-trio .a-lede { color: var(--text); font-size: var(--t-body); }

/* worked example: four big numbers on the grey band */
.a-stats b { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.a-stats span { font-size: var(--t-body); }
.a-foot { color: var(--muted); max-width: 62ch; margin: var(--s10) 0 0; }

/* rules and mistakes: hairline rows at body size, rows always full */
.a-facts span { font-size: var(--t-body); line-height: 1.5; }
.a-facts b { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; margin-bottom: var(--s2); }
@media (min-width: 64rem) { .facts.a-facts3 { grid-template-columns: repeat(3, 1fr); } }
.a-facts a { font-weight: var(--wt-medium); }

/* weeks grid reused for steps and point sizes: body-size text */
.s-weeks.a-steps p { font-size: var(--t-body); line-height: 1.5; }
.s-trio.a-steps p { font-size: var(--t-body); line-height: 1.5; }
.s-weeks .s-week-last a { color: var(--on-primary); }
.statement .grad { display: inline; }

/* app screen tile: centre the phone inside its grey tile */
.s-shot picture { display: flex; justify-content: center; width: 100%; }