/* The interface-impact article: a research paper laid out on its own, scoped under .fsa. */

/* Layout: a centred research paper — results band first, then a reading column
   with a sticky contents rail; every chart sits in a white figure card. */
.fsa {
  --bg: #ffffff; --surface: #f6f7f4; --card: #ffffff; --ink: #222222; --ink-2: #454745; --muted: #636862;
  --line: #ebece8; --line-strong: #d9dbd4; --brand: #163300; --brand-ink: #ffffff; --lime: #9fe870;
  --sky: #edf8ff; --sky-strong: #d8ecfd; --sky-ink: #0e3dd5; --peach: #fff6eb; --peach-ink: #a1480b;
  --halo: #ffffff; --ours: #163300;
  --free: #008300; --proposed: #4a3aa7; --prefilled: #e34948;
  --font-display: var(--font-family-bricolage), "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-family-body), "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* Tabular digits only: the font's tabular-nums also widens . and , to a digit. */
  --font-figures: "Schibsted Grotesk Figures", var(--font-body);
}

.fsa, :where(.fsa) * { box-sizing: border-box; }
.fsa { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(.fsa) h1:not(.shot *), :where(.fsa) h2:not(.shot *), :where(.fsa) h3:not(.shot *), :where(.fsa) h4:not(.shot *), :where(.fsa) p:not(.shot *), :where(.fsa) figure:not(.shot *), :where(.fsa) ul:not(.shot *), :where(.fsa) ol:not(.shot *), :where(.fsa) table:not(.shot *) { margin: 0; }
:where(.fsa) ul:not(.shot *), :where(.fsa) ol:not(.shot *) { padding: 0; }
:where(.fsa) a:not(.shot *) { color: var(--brand); text-underline-offset: 3px; }
:where(.fsa) :root[data-theme="dark"] a, :where(.fsa) a:not(.shot *) { }
:where(.fsa) h1:not(.shot *), :where(.fsa) h2:not(.shot *), :where(.fsa) h3:not(.shot *) { font-family: var(--font-display); text-wrap: balance; letter-spacing: -0.03em; color: var(--ink); }
.fsa .num, .fsa td.n, .fsa .tab { font-family: var(--font-figures); }
:where(.fsa) :focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 3px; border-radius: 6px; }

.fsa .page { padding-inline: clamp(16px, 4vw, 48px); }
.fsa .wrap { max-width: 1180px; margin: 0 auto; }

/* Header */
.fsa .hero { padding-block: clamp(28px, 5vw, 56px) 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.fsa .crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.fsa .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fsa .pill { padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--sky); color: var(--sky-ink); }
.fsa .pill.live { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: var(--brand-ink); }
.fsa .pill.live i { width: 8px; height: 8px; border-radius: 99px; background: var(--lime); box-shadow: 0 0 0 3px rgba(159, 232, 112, .3); animation: ping 2s ease-in-out infinite; }
@keyframes ping { 50% { box-shadow: 0 0 0 6px rgba(159, 232, 112, 0); } }
@media (prefers-reduced-motion: reduce) { .fsa .pill.live i { animation: none; } }
.fsa .hero h1 { max-width: 18ch; font-size: clamp(38px, 6vw, 66px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
.fsa .dek { max-width: 60ch; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.fsa .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 14px; color: var(--muted); }

.fsa .preface { max-width: 64rem; margin: 0 auto 8px; padding: 22px 26px; border-radius: 24px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.fsa .preface-k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fsa .preface-body { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); font-style: italic; }
@media (min-width: 900px) { .fsa .preface-body { column-count: 2; column-gap: 40px; } }
.fsa .preface-sign { font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* Results band */
.fsa .results { padding-block: clamp(36px, 5vw, 64px); background: linear-gradient(180deg, transparent 0%, var(--sky-strong) 18%, var(--sky-strong) 82%, transparent 100%); }
.fsa .results > .wrap > h2 { text-align: center; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin-bottom: 24px; }
.fsa .screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; list-style: none; }
.fsa .screen { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 6px 30px rgba(0, 0, 0, .04); min-width: 0; }
.fsa .tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fsa .tier { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fsa .tier b { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.fsa .tier span { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.fsa .tier small { font-size: 12px; color: var(--muted); }
.fsa .mult { align-self: flex-start; font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 99px; margin: 2px 0; color: var(--ink); background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); }
.fsa .mult.ref { font-weight: 500; color: var(--muted); background: var(--surface); }
.fsa .screen .count { font-size: 14px; color: var(--ink-2); }
.fsa .screen .count b { color: var(--ink); }
.fsa .shot { margin-top: 4px; border-radius: 16px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fsa .shot img { width: 100%; max-width: 300px; height: auto; display: block; border-radius: 12px; }
.fsa .shot figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.fsa .screen > h3 { font-family: var(--font-body); letter-spacing: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fsa .screen > h3 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fsa .screen > .what { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: -6px; min-height: 4.4em; }
.fsa .big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fsa .big b { font-family: var(--font-display); font-size: 48px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.fsa .big span { font-size: 14px; color: var(--ink-2); }
.fsa .range { font-size: 13px; color: var(--muted); margin-top: -8px; }
.fsa .stats { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.fsa .bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fsa .bar i { display: block; height: 100%; border-radius: 99px; }
.fsa .caveat { display: flex; gap: 12px; align-items: flex-start; max-width: 48rem; margin: 22px auto 0; padding: 16px 18px; border-radius: 18px; background: var(--peach); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fsa .caveat svg { flex: 0 0 auto; margin-top: 3px; color: var(--peach-ink); }
.fsa .caveat strong { color: var(--ink); }

/* Body */
.fsa .body { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(28px, 4vw, 56px); padding-block: 40px 24px; }
.fsa .toc { flex: 1 1 240px; max-width: 100%; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
.fsa .toc details { padding: 18px; border-radius: 22px; background: var(--surface); }
.fsa .toc summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; }
.fsa .toc summary::-webkit-details-marker { display: none; }
.fsa .toc ol { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 1px; }
.fsa .toc li.part { margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-left: 8px; }
.fsa .toc a { display: block; padding: 5px 8px; border-radius: 9px; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.fsa .toc a:hover, .fsa .toc a.on { background: var(--card); color: var(--ink); }
.fsa .toc a.on { font-weight: 600; }
@media (max-width: 900px) { .fsa .toc { position: static; } }
:where(.fsa) article:not(.shot *) { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fsa .part-head { margin-top: 36px; padding-top: 22px; border-top: 2px solid var(--brand); display: flex; flex-direction: column; gap: 6px; }
.fsa .part-head:first-child { margin-top: 0; }
.fsa .part-head .k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fsa .part-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; font-weight: 700; }
.fsa section.s { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.fsa section.s > h3 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; font-weight: 700; margin-top: 18px; }
.fsa section.s > h3 .q { color: var(--muted); font-weight: 600; }
.fsa .prose { color: var(--ink); }
.fsa .prose + .prose { margin-top: -4px; }
.fsa .hint { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.fsa figure.card { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fsa figure.card figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fsa .fig-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.fsa .chartbox { position: relative; width: 100%; }
.fsa .chartbox svg { width: 100%; height: auto; display: block; overflow: visible; }
.fsa .tools { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; }
.fsa .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fsa .seg button { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); border-radius: 99px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; }
.fsa .seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.fsa .seg button.series[aria-pressed="false"] { opacity: .55; }
.fsa .seg button i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Controls by kind: tabs pick the pots counted, checkboxes the curves shown,
   a labelled segmented control the time. */
.fsa .tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); }
.fsa .tabs button { border: 0; background: none; padding: 8px 0 10px; margin-bottom: -1px; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.fsa .tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.fsa .checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fsa .check { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.fsa .check i { width: 16px; height: 16px; border-radius: 4px; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.fsa .check svg { width: 11px; height: 11px; }
.fsa .check[aria-pressed="false"] { color: var(--muted); }
.fsa .check[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.fsa .check[aria-pressed="false"] svg { visibility: hidden; }
.fsa .labelled { display: inline-flex; align-items: center; gap: 8px; }
.fsa .toggles { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.fsa .seg-k { font-size: 13px; color: var(--muted); }
.fsa .grid-pick { margin-bottom: 12px; }
.fsa tr.by-grid td { color: var(--ink-2); font-size: 13px; }
.fsa .grid-row { padding-left: 17px; white-space: nowrap; }
.fsa table.detail th, .fsa table.detail td { padding-left: 8px; padding-right: 8px; }
.fsa caption.detail-note { caption-side: top; padding: 10px 8px; text-align: left; font-size: 12.5px; color: var(--muted); }
.fsa .seg-a { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); }
.fsa .seg-a button, .fsa .seg-a a { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer; }
.fsa .seg-a [aria-pressed="true"], .fsa .seg-a [aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.fsa .period { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 46rem; }
.fsa .period p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fsa .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); list-style: none; }
.fsa .legend li { display: inline-flex; align-items: center; gap: 7px; }
.fsa .legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.fsa .legend i.dot { width: 10px; height: 10px; border-radius: 99px; }
.fsa .legend i.dia { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); outline: 1.5px solid var(--ink); }
.fsa .note { padding: 16px 18px; border-radius: 18px; background: var(--peach); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fsa .note b { display: block; color: var(--ink); margin-bottom: 4px; }
.fsa .note.sky { background: var(--sky); }
.fsa .note p + p { margin-top: 8px; }
.fsa .tablewrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--card); }
:where(.fsa) table:not(.shot *) { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
:where(.fsa) th:not(.shot *), :where(.fsa) td:not(.shot *) { padding: 9px 12px; text-align: left; vertical-align: top; }
:where(.fsa) thead:not(.shot *) th { background: var(--surface); font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
:where(.fsa) tbody:not(.shot *) tr + tr td { border-top: 1px solid var(--line); }
:where(.fsa) tbody:not(.shot *) + tbody tr:first-child td, :where(.fsa) tbody:not(.shot *) + tbody th { border-top: 2px solid var(--line-strong); }
.fsa td.n, .fsa th.n { text-align: right; white-space: nowrap; font-family: var(--font-figures); }
.fsa td .sub, .fsa th .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
:where(.fsa) th:not(.shot *)[scope="rowgroup"] { font-weight: 600; font-size: 13.5px; color: var(--ink); background: transparent; }
.fsa .key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.fsa details.more { border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.fsa details.more summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.fsa details.more[open] summary { margin-bottom: 10px; }
.fsa .tip { position: absolute; pointer-events: none; z-index: 5; min-width: 200px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); font-size: 13px; line-height: 1.4; color: var(--ink); }
.fsa .tip .head { font-weight: 600; margin-bottom: 6px; }
.fsa .tip .row { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; }
.fsa .tip .row i { width: 9px; height: 9px; border-radius: 3px; margin-top: 5px; flex: 0 0 auto; }
.fsa .tip small { color: var(--muted); }
.fsa .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.fsa .law td:first-child { font-weight: 600; min-width: 150px; }
.fsa .law td { font-size: 13.5px; }
.fsa .law q { quotes: "« " " »"; }
.fsa .questions { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: q; }
.fsa .questions li { counter-increment: q; padding-left: 38px; position: relative; }
.fsa .questions li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.fsa .limits { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fsa .limits li { padding-left: 18px; position: relative; }
.fsa .limits li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 2px; background: var(--muted); }
.fsa .data-box { padding: 24px; border-radius: 24px; background: var(--sky); display: flex; flex-direction: column; gap: 12px; }
.fsa .cite { padding: 14px 16px; border-radius: 14px; background: var(--card); font-size: 14.5px; display: flex; flex-direction: column; gap: 10px; }
.fsa .cite button { align-self: flex-start; border: 0; border-radius: 99px; padding: 7px 14px; background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 13.5px; cursor: pointer; min-height: 36px; }
.fsa .series-nav { padding-block: 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.fsa .series-nav h2 { font-size: 26px; }
.fsa .series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; list-style: none; }
.fsa .series-grid li { padding: 20px; border-radius: 22px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fsa .series-grid li.here { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.fsa .series-grid .chip { align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink-2); }
.fsa .series-grid li.here .chip { background: rgba(159, 232, 112, .25); color: inherit; }
.fsa .series-grid .t { font-family: var(--font-display); font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.fsa .series-grid .s { font-size: 13px; opacity: .75; }

/* SVG */
.fsa .g-grid { stroke: var(--line); stroke-width: 1; }
.fsa .g-axis { stroke: var(--line-strong); stroke-width: 1; }
.fsa .g-tick { font-size: 11.5px; fill: var(--muted); font-family: var(--font-body); }
.fsa .g-label { font-size: 12.5px; fill: var(--ink-2); font-family: var(--font-body); }
.fsa .g-title { font-size: 13.5px; font-weight: 600; fill: var(--ink); font-family: var(--font-body); }
.fsa .g-unit { font-size: 12px; font-weight: 400; fill: var(--muted); }
.fsa .g-name { font-size: 12.5px; font-weight: 600; font-family: var(--font-body); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; stroke-linejoin: round; }
.fsa .g-val { font-size: 11.5px; font-weight: 600; fill: var(--ink); font-family: var(--font-body); paint-order: stroke; stroke: var(--halo); stroke-width: 3px; stroke-linejoin: round; }
.fsa .g-muted { fill: var(--muted); font-weight: 500; }
.fsa .g-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fsa .g-thick { stroke-width: 3.5; }
.fsa .g-dash { stroke-dasharray: 6 5; }
.fsa .g-dot-hollow { fill: var(--card); stroke-width: 2; }
.fsa .g-whisker { stroke-width: 2; stroke-linecap: round; opacity: .35; }
.fsa .g-overlay { fill: transparent; cursor: crosshair; }
.fsa .g-average { stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .6; }
.fsa .g-dia { stroke: var(--ink); stroke-width: 1.8; }
.fsa .g-ink { fill: var(--ink); }
.fsa .g-ours { stroke: var(--ours); }
.fsa .g-oursf { fill: var(--ours); }
.fsa .g-gap { fill: var(--sky-ink); opacity: .12; }
.fsa .g-gapline { stroke: var(--sky-ink); stroke-width: 2; }
.fsa .g-gaptext { fill: var(--sky-ink); font-weight: 700; }
.fsa .duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.fsa .duel-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fsa .duel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.fsa .duel-head b { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; }
.fsa .duel-head span { font-size: 13px; color: var(--muted); }
.fsa .duel-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.fsa .duel-cols { font-size: 12px; color: var(--muted); line-height: 1.3; }
.fsa .duel-name { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.fsa .duel-name i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.fsa .duel-name small, .fsa .duel-cell small { font-weight: 400; font-size: 12px; color: var(--muted); }
.fsa .duel-cell { display: flex; flex-direction: column; gap: 4px; }
.fsa .duel-cell b { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.fsa .duel-ratio { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--ink); }
.fsa .duel-ratio2 { border-top: 0; padding-top: 0; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.fsa .duel-ref { padding-bottom: 8px; border-bottom: 1px dashed var(--line-strong); }
.fsa .duel-ref .duel-cell b { font-size: 20px; color: var(--ink-2); }
.fsa .mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.fsa .mini > div { border: 1px solid var(--line); border-radius: 16px; padding: 12px; min-width: 0; }
.fsa .mini h4 { font-size: 14px; margin-bottom: 2px; display: flex; align-items: center; gap: 7px; }
.fsa .mini h4 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fsa .mini p { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }


/* On the blog's own ground; cards and the contents stay white or tinted on it. */
.fsa { --bg: var(--background-screen, #fcfaf7); --surface: #f4f1eb; }
/* The real screens, without the staged browser window around them. */
.fsa .shot .dark-pattern-preview__caption, .fsa .shot .dark-pattern-preview__chrome { display: none; }
.fsa .shot .dark-pattern-preview, .fsa .shot .dark-pattern-preview__window { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.fsa .shot .dark-pattern-preview__screen { border-radius: 12px; overflow: hidden; }
.fsa .screen .shot { padding: 0; background: transparent; }
.fsa .screen .shot > div { width: 100%; }
/* At a third of the page the two payment buttons stand one under the other, as on a phone. */
.fsa .shot .application-fee-two-buttons-v1__choices { grid-template-columns: minmax(0, 1fr); }
.fsa .page:first-child { padding-top: 8px; }

/* "voir" after every screen's name, and the dialog it opens. */
.fsa .see { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; text-decoration: underline; text-decoration-color: var(--sky-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.fsa .see:hover { color: var(--sky-ink); }
.fsa .screen-dialog { width: min(92vw, 380px); max-height: 92vh; padding: 16px; border: 0; border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.fsa .screen-dialog::backdrop { background: rgba(16, 24, 12, .45); }
.fsa .screen-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.fsa .screen-dialog-head button { border: 0; border-radius: 99px; padding: 6px 12px; min-height: 36px; background: var(--surface); font-weight: 600; cursor: pointer; }
.fsa .screen-dialog figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.fsa .versions { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.fsa .versions summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.fsa .versions-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fsa .versions-body ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fsa .versions-body ul a { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 500; }
.fsa .versions-body ul a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.fsa .versions-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.fsa .versions-pick input { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; }
.fsa .versions-pick button { border: 0; border-radius: 99px; padding: 7px 14px; background: var(--brand); color: var(--brand-ink); font-weight: 600; cursor: pointer; }
.fsa .versions-now { font-weight: 600; }
.fsa .legend .legend-k { color: var(--muted); }
.fsa .legend i.thick { height: 6px; }
.fsa .legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px) !important; }
.fsa .slopes .legend { margin-bottom: 12px; }
.fsa .slopes .legend li, .fsa .slopes .g-pick { cursor: default; }
.fsa .slopes [data-k] { transition: opacity .15s; }
.fsa .slopes.focus [data-k]:not(.on) { opacity: .12; }
.fsa .slopes.focus .legend li:not(.on) { opacity: .45; }
.fsa .slopes.focus path.on:not(.g-thick) { stroke-width: 3.5 !important; }
.fsa .g-cross-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.fsa tbody.total td, .fsa tbody.total th { background: var(--surface); font-weight: 600; }
.fsa .tip:has(.tip-table) { width: max-content; max-width: min(480px, 100%); }
.fsa .tip .tip-table { width: auto; font-size: 12.5px; margin-bottom: 6px; }
.fsa .tip .tip-table th, .fsa .tip .tip-table td { padding: 4px 6px; border: 0; white-space: nowrap; }
.fsa .tip .tip-table th { background: none; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.fsa .tip .tip-table tbody tr + tr td { border-top: 1px solid var(--line); }
.fsa .tip .tip-table tfoot td { border-top: 1px solid var(--line-strong); color: var(--ink-2); }
.fsa .series-grid li:has(> a) { padding: 0; }
.fsa .series-grid li > a { padding: 20px; display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; border-radius: 22px; }
.fsa .series-grid li > a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
/* The one related article, as a feature: a capture of its chart beside what it offers. */
.fsa .read-next { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 0; border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .05); transition: transform .2s ease, box-shadow .2s ease; }
.fsa .read-next:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(0, 0, 0, .08); }
.fsa .read-next-shot { align-self: stretch; display: flex; align-items: center; padding: 18px; background: var(--surface); }
.fsa .read-next-shot img { width: 100%; height: auto; display: block; border-radius: 14px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
.fsa .read-next-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 36px); }
.fsa .read-next .chip { align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--sky); color: var(--sky-ink); }
.fsa .read-next .t { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
.fsa .read-next .s { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.fsa .read-next-points { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink); }
.fsa .read-next-points li { display: flex; gap: 8px; align-items: baseline; }
.fsa .read-next-points li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 99px; background: var(--lime); transform: translateY(-1px); }
.fsa .read-next-cta { align-self: flex-start; margin-top: 4px; padding: 10px 18px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-size: 14.5px; font-weight: 600; }
@media (max-width: 760px) { .fsa .read-next { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fsa .read-next, .fsa .read-next:hover { transition: none; transform: none; } }