/* The explainer modules (explainer.js). Every class starts x- and every rule sits under .explainer, so nothing here
   reaches the rest of the page and the page's own classes (.spot, .big, .track, .card) never reach in.
   Motion and the hidden game answers apply only once story.js has added .x-js: without script, every picture,
   chart and answer shows as it is. House tokens: ink #111827, greys #374151 #6B7280 #E5E7EB, accent #0F766E. */
@font-face{font-family:"Source Serif 4";font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin.woff2) format("woff2")}
.explainer{--x-ink:#111827;--x-g7:#374151;--x-g5:#6B7280;--x-g2:#E5E7EB;--x-acc:#0F766E;--x-tint:#F0FDFA;color:var(--x-ink);font:400 16px/1.5 Inter,system-ui,sans-serif;padding:0;margin:0;background:transparent;border-top:1px solid #E7E1D6}
.explainer *{box-sizing:border-box}
/* inside a narrow page column (the US page), the module spans the window */
.explainer.x-bleed{width:100vw;position:relative;left:50%;margin:32px 0 0 -50vw}
html:has(.explainer.x-bleed){overflow-x:clip}
.explainer a{color:var(--x-acc);text-underline-offset:2px}
.explainer .x-hero{max-width:760px;margin:0 auto;padding:56px 24px 24px}
.explainer .x-kicker{font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--x-acc);margin:0}
.explainer .x-hero h2{font:700 40px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.015em;margin:10px 0 12px;text-wrap:balance}
.explainer .x-dek{font:400 21px/1.5 "Source Serif 4",Georgia,serif;color:var(--x-g7);margin:0 0 12px}
.explainer .x-skip{font:500 14px Inter,system-ui,sans-serif}
.explainer .x-step{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"pic txt" "data data";gap:28px 56px;max-width:1120px;margin:0 auto;padding:72px 24px;border-top:1px solid #F3F4F6;align-items:center}
.explainer .x-step.x-r{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"txt pic" "data data"}
.explainer .x-pic-col{grid-area:pic}.explainer .x-txt{grid-area:txt}.explainer .x-data{grid-area:data;max-width:760px;width:100%;justify-self:center}
.explainer .x-pic{position:relative;margin:0}
.explainer .x-pic img{width:100%;height:auto;display:block;border-radius:14px}
.explainer .x-sharebtn{all:unset;cursor:pointer;font:500 13px Inter,system-ui,sans-serif;color:var(--x-acc);margin-left:14px;letter-spacing:0;text-decoration:underline;text-underline-offset:2px;min-height:24px;display:inline-block}.explainer .x-sharebtn:focus-visible{outline:2px solid var(--x-acc);outline-offset:2px}
.explainer:not(.x-js) .x-sharebtn{display:none}
.explainer .x-kick{font:600 13px/1 Inter,system-ui,sans-serif;color:var(--x-acc);letter-spacing:.06em;margin:0}
.explainer .x-txt h3{font:700 30px/1.15 Inter,system-ui,sans-serif;margin:6px 0 14px;text-wrap:balance}
.explainer .x-txt p{font:400 20px/1.55 "Source Serif 4",Georgia,serif;margin:0 0 12px;color:var(--x-ink);max-width:38em}
.explainer .x-txt p.x-turn{font:600 20px/1.45 Inter,system-ui,sans-serif}
.explainer .x-txt p.x-label{font:12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5)}
.explainer .x-txt p.x-kick{font:600 13px/1 Inter,system-ui,sans-serif;color:var(--x-acc);margin:0}
.explainer .x-src,.explainer .x-txt p.x-src{text-wrap:pretty;font:12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5);margin:10px 0 0}
.explainer .x-big{margin-top:14px}
.explainer .x-bn{font:700 54px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.explainer .x-bl{font:15px/1.4 Inter,system-ui,sans-serif;color:var(--x-g7);margin-top:4px;max-width:30ch}
.explainer .x-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.explainer .x-det{margin-top:18px;border-top:1px solid var(--x-g2);padding-top:10px}
.explainer .x-det summary{font:600 14px Inter,system-ui,sans-serif;color:var(--x-acc);cursor:pointer;min-height:32px;display:list-item}
.explainer .x-det p{font:14px/1.55 Inter,system-ui,sans-serif;color:var(--x-g7);margin:8px 0}
.explainer .x-det p.x-src{font:12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5)}
/* SVG text */
.explainer svg{display:block;overflow:visible}
.explainer svg .x-lbl{font:13px Inter,system-ui,sans-serif;fill:var(--x-g7)}
.explainer svg .x-lblb{font:600 13px Inter,system-ui,sans-serif;fill:var(--x-ink)}
.explainer svg .x-num{font:600 15px Inter,system-ui,sans-serif;fill:var(--x-ink)}
.explainer svg .x-tiny{font:11px "JetBrains Mono",ui-monospace,monospace;fill:var(--x-g5)}
.explainer .x-d{display:block}.explainer .x-m{display:none}
.explainer .x-d,.explainer .x-m{margin-top:20px}
/* the provenance trail and the calculator */
.explainer .x-trail{list-style:none;margin:0 0 24px;padding:0 0 0 18px;border-left:1px solid #D1D5DB}
.explainer .x-trail li{margin:0 0 16px;position:relative}
.explainer .x-trail li::before{content:"";position:absolute;left:-22px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--x-ink)}
.explainer .x-k{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--x-g5);display:block;margin-bottom:4px}
.explainer .x-v{font:400 15px/1.45 Inter,system-ui,sans-serif;display:block}
.explainer .x-v q{font:400 15px/1.5 "Source Serif 4",Georgia,serif}
.explainer .x-unit{font:11px/1.45 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5)}
.explainer .x-calc{display:grid;grid-template-columns:1fr;gap:18px}
.explainer .x-wtab{width:100%;border-collapse:collapse;font:13px Inter,system-ui,sans-serif}
.explainer .x-wtab td,.explainer .x-wtab th{padding:3px 0;border-bottom:1px solid #F3F4F6;text-align:left;font-weight:400}
.explainer .x-wtab th.x-r{text-align:right}
.explainer .x-wtab caption,.explainer .x-cases caption{text-align:left;font:600 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--x-g5);padding:0 0 10px}
.explainer .x-cases th{text-align:left;font:400 11px "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5);padding:0 8px 4px 0;border-bottom:1px solid var(--x-g2)}
.explainer .x-wtab td.x-r{text-align:right;font-variant-numeric:tabular-nums}
.explainer .x-again{margin-top:12px}
.explainer .x-run{font:600 14px Inter,system-ui,sans-serif;background:#fff;color:var(--x-ink);border:1px solid var(--x-ink);border-radius:8px;padding:10px 14px;min-height:44px;cursor:pointer}
.explainer .x-run:focus-visible,.explainer select:focus-visible,.explainer .x-opt:focus-visible,.explainer input:focus-visible{outline:2px solid var(--x-acc);outline-offset:2px}
.explainer .x-runs{font:12px/1.6 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g7);max-height:96px;overflow:auto;margin-top:8px}
/* the money step and the FTC cases */
.explainer .x-ledger h4,.explainer .x-cases h4{font:600 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--x-g5);margin:0 0 10px}
.explainer .x-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.explainer .x-lc{border:1px solid var(--x-g2);padding:12px 14px;border-radius:8px;background:#fff}
.explainer .x-kind{font:600 11px/1.3 Inter,system-ui,sans-serif;color:var(--x-g7);text-transform:uppercase;letter-spacing:.04em}
.explainer .x-fig{font:600 20px/1.2 Inter,system-ui,sans-serif;margin:6px 0 4px}.explainer .x-fig span{font-weight:400;font-size:15px}
.explainer .x-who{font:13px/1.45 Inter,system-ui,sans-serif;color:var(--x-g7)}
.explainer .x-lct .x-who{font:14px/1.5 "Source Serif 4",Georgia,serif;color:var(--x-ink)}
.explainer .x-doc{font:11px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5);margin-top:6px}
.explainer .x-cases table{width:100%;border-collapse:collapse;font:14px Inter,system-ui,sans-serif}
.explainer .x-cases td{padding:6px 8px 6px 0;border-bottom:1px solid #F3F4F6;vertical-align:top}
.explainer .x-cases td.x-unit{white-space:nowrap}
/* games */
.explainer .x-game{border:1px solid var(--x-g2);border-radius:12px;padding:18px;margin:6px 0 18px}
.explainer .x-gq{display:block;font:600 16px Inter,system-ui,sans-serif;margin-bottom:8px}
.explainer .x-grow{display:flex;gap:14px;align-items:center}
.explainer .x-grow input{flex:1;accent-color:var(--x-ink);height:32px;min-width:0}
.explainer .x-gv{font:700 28px Inter,system-ui,sans-serif;min-width:3ch;text-align:right}
.explainer .x-lock{margin-top:10px}.explainer .x-lock:disabled{opacity:.45;cursor:default}
.explainer .x-hint{font:13px Inter,system-ui,sans-serif;color:var(--x-g5);margin-left:10px}.explainer .x-hint[hidden]{display:none}
.explainer .x-reveal{margin-top:14px}
.explainer .x-track{position:relative;height:28px;border-bottom:2px solid var(--x-g2);margin:22px 0 28px}
.explainer .x-tick{position:absolute;bottom:-6px;width:3px;height:22px;transform:translateX(-50%)}
.explainer .x-tick.x-you{background:#9CA3AF}.explainer .x-tick.x-ans{background:var(--x-ink);width:4px}
.explainer .x-tick i{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:11px Inter,system-ui,sans-serif;font-style:normal;white-space:nowrap;color:var(--x-g7)}
.explainer .x-end{position:absolute;bottom:-22px;font:11px "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5)}.explainer .x-el{left:0}.explainer .x-er{right:0}
.explainer .x-rv{font:600 17px/1.45 Inter,system-ui,sans-serif;margin:0 0 12px}
.explainer .x-rv2{font:15px/1.5 Inter,system-ui,sans-serif;color:var(--x-g7);margin:0 0 12px}
.explainer .x-dim{position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;transition:opacity .25s}
.explainer .x-pic.x-lit .x-dim{opacity:1}
.explainer .x-spot{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:2px solid var(--x-ink);background:#fff;font:700 15px Inter,system-ui,sans-serif;color:var(--x-ink);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);padding:0}
.explainer .x-spot.x-on{background:var(--x-ink);color:#fff}
.explainer .x-spot:focus-visible{outline:3px solid var(--x-acc);outline-offset:2px}
.explainer .x-holders{font:15px/1.5 Inter,system-ui,sans-serif;padding-left:22px;columns:2;column-gap:28px;margin:0 0 12px}
.explainer .x-holders li{margin:0 0 6px;break-inside:avoid}.explainer .x-holders li.x-on{background:var(--x-tint)}
.explainer .x-quiz fieldset{border:0;border-top:1px solid #F3F4F6;padding:12px 0;margin:0;min-width:0}
.explainer .x-quiz legend{font:600 16px/1.4 Inter,system-ui,sans-serif;padding:0}
.explainer .x-opt{font:600 15px Inter,system-ui,sans-serif;margin:8px 8px 0 0;padding:8px 18px;min-height:44px;border:1px solid #6B7280;background:#fff;color:var(--x-ink);border-radius:999px;cursor:pointer}
.explainer .x-opt.x-picked{border-color:var(--x-ink);background:var(--x-ink);color:#fff}
.explainer .x-opt.x-picked.x-wrong{background:#fff;color:var(--x-ink);border:2px dashed var(--x-ink)}
.explainer .x-opt.x-picked.x-right::after,.explainer .x-opt.x-answer::after{content:" \2713"}.explainer .x-opt.x-answer{border:2px solid var(--x-ink)}.explainer .x-opt.x-picked.x-wrong::after{content:" \2717"}
.explainer .x-why{font:15px/1.5 Inter,system-ui,sans-serif;color:var(--x-g7);margin:8px 0 0}
.explainer .x-qres{font:700 20px/1.4 Inter,system-ui,sans-serif;margin:14px 0}
.explainer .x-ways{font:15px/1.6 Inter,system-ui,sans-serif;padding-left:20px}
.explainer .x-quotes blockquote{margin:0 0 16px;padding:0 0 0 16px;border-left:3px solid var(--x-g2)}
.explainer .x-quotes blockquote p{font:italic 400 20px/1.45 "Source Serif 4",Georgia,serif;margin:0 0 4px}
.explainer .x-quotes cite{font:12px "JetBrains Mono",ui-monospace,monospace;color:var(--x-g5);font-style:normal}
.explainer .x-reality{font:17px/1.55 Inter,system-ui,sans-serif;padding-left:22px}.explainer .x-reality li{margin:0 0 8px}.explainer .x-reality a{color:var(--x-ink)}
.explainer .x-lookup label{display:block;font:600 14px Inter,system-ui,sans-serif;margin-bottom:6px}
.explainer .x-lookup select{font:16px Inter,system-ui,sans-serif;padding:10px 12px;min-height:48px;border:1px solid #9CA3AF;border-radius:8px;background:#fff;width:100%;max-width:360px;color:var(--x-ink)}
.explainer .x-csent{font:600 22px/1.4 Inter,system-ui,sans-serif;margin:12px 0 4px;text-wrap:balance}
.explainer .x-soon{background:#F9FAFB;border:1px solid #D1D5DB;color:var(--x-g7);font:600 13px/1.3 Inter,system-ui,sans-serif;padding:8px 10px;border-radius:6px;margin:0 0 12px}
.explainer .x-foot{max-width:760px;margin:0 auto;padding:24px 24px 72px;border-top:1px solid #F3F4F6}
/* with script: hide the answers until the reader guesses, fade the pictures in */
.explainer.x-js .x-game:not(.x-done) .x-reveal{display:none}
.explainer.x-js .x-step:not(.x-guessed) .x-after{display:none}
.explainer.x-js .x-qq:not(.x-done) .x-why{display:none}
.explainer:not(.x-js) .x-grow,.explainer:not(.x-js) .x-lock,.explainer:not(.x-js) .x-hint,.explainer:not(.x-js) .x-share,.explainer:not(.x-js) .x-spot,.explainer:not(.x-js) .x-recalc,.explainer:not(.x-js) .x-opt{display:none}
.explainer.x-js .x-fade{opacity:0;transform:translateY(16px);transition:opacity .3s ease-out,transform .3s ease-out}
.explainer.x-js .x-fade.x-in{opacity:1;transform:none}
@media (max-width:820px){
 .explainer .x-step,.explainer .x-step.x-r{grid-template-columns:1fr;grid-template-areas:"pic" "txt" "data";padding:44px 16px;gap:18px}
 .explainer .x-hero{padding:40px 16px 16px}
 .explainer .x-hero h2{font-size:32px}.explainer .x-txt h3{font-size:26px}.explainer .x-txt p{font-size:18px;line-height:1.55}
 .explainer .x-bn{font-size:44px}.explainer .x-pair{grid-template-columns:1fr}.explainer .x-holders{columns:1}
 .explainer .x-cards{grid-template-columns:1fr}
 .explainer .x-d{display:none}.explainer .x-m{display:block}
 .explainer .x-spot{width:30px;height:30px;font-size:13px}
 .explainer .x-foot{padding:24px 16px 56px}
}
@media (prefers-reduced-motion:reduce){
 .explainer.x-js .x-fade{opacity:1;transform:none;transition:none}
 .explainer .x-dim{transition:none}
}
@media print{
 .explainer{border:0}
 .explainer .x-skip{display:none}
 .explainer .x-step,.explainer .x-step.x-r{display:grid!important;grid-template-columns:42% 1fr!important;grid-template-areas:"pic txt" "data data"!important;gap:6px 18px!important;padding:12px 0;break-inside:auto;border-top:1px solid var(--x-g2)}
 .explainer .x-txt h3{font-size:17pt}.explainer .x-txt p{font-size:11.5pt!important;line-height:1.4!important}.explainer .x-txt p.x-turn{font-size:11.5pt!important}.explainer .x-bn{font-size:28pt}
 .explainer .x-det p{font-size:9pt;line-height:1.35}
 .explainer .x-pic-col,.explainer .x-txt{break-inside:avoid}.explainer .x-txt{break-before:avoid}
 .explainer .x-data svg,.explainer .x-big,.explainer .x-lc,.explainer fieldset{break-inside:avoid}
 .explainer .x-pic img{max-height:62mm;width:100%;object-fit:contain}
 .explainer .x-data{break-before:avoid;break-inside:auto}.explainer details{break-inside:auto}
 .explainer .x-fade{opacity:1!important;transform:none!important}
 .explainer .x-reveal,.explainer .x-why,.explainer .x-after{display:block!important}
 .explainer .x-lock,.explainer .x-hint,.explainer .x-opt,.explainer .x-share,.explainer .x-run,.explainer input[type=range],.explainer .x-gv,.explainer .x-tick.x-you,.explainer .x-grow,.explainer .x-gq{display:none!important}
 .explainer .x-game{border:0;padding:0}
 .explainer .x-data svg{max-width:150mm;margin:0 auto}
 .explainer .x-d{display:block!important}.explainer .x-m{display:none!important}
 .explainer .x-dim{display:none!important}.explainer .x-spot{display:block!important}
 .explainer details>summary{list-style:none}
 .explainer .x-sharebtn{display:none}
 .explainer details::details-content{content-visibility:visible;display:block}
}
/* the US page hands the reader on to the family page after Sam's story */
.explainer .x-next{max-width:1120px;margin:0 auto;padding:32px 24px 8px}
.explainer .x-next > a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:center;text-decoration:none;color:var(--x-ink);background:#fff;border:1px solid #E7E1D6;border-radius:14px;padding:18px}
.explainer .x-next img{width:100%;height:auto;border-radius:10px;display:block}
.explainer .x-next span{font:400 18px/1.5 "Source Serif 4",Georgia,serif;color:var(--x-g7)}
.explainer .x-next .x-k{display:block;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--x-acc);margin-bottom:8px}
.explainer .x-next .x-nt{display:block;font:700 26px/1.2 Inter,system-ui,sans-serif;color:var(--x-ink);margin-bottom:6px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.explainer .x-next > a:hover .x-nt{text-decoration-color:var(--x-acc)}
.explainer .x-next > a:focus-visible{outline:3px solid var(--x-acc);outline-offset:3px}
@media (max-width:820px){.explainer .x-next > a{grid-template-columns:1fr;gap:12px}.explainer .x-next .x-nt{font-size:22px}}
@media print{.explainer .x-next{display:none}}
/* phones: the slider hint sits on its own line under the button, at the left, clear of the Ask the index button that
   floats at the bottom right (launch QA, 3 Oct) */
@media (max-width:820px){.explainer .x-hint{display:block;margin:8px 0 0;max-width:calc(100% - 190px)}}
.explainer .x-next-p > a{grid-template-columns:96px minmax(0,1fr)}.explainer .x-next-p img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:top;background:#F3F4F6}
.explainer .x-next > .x-src{margin:10px 0 0;font:500 15px/1.4 Inter,system-ui,sans-serif}
@media (max-width:820px){.explainer .x-next-p > a{grid-template-columns:72px minmax(0,1fr)}.explainer .x-next-p img{width:72px;height:72px}}