/* Fees section (#fees), version B "two columns", chosen 2 November 2026.
   Left: the earlier price and the price now as two columns, the struck part
   in the deletion colour and the range drawn hatched. Right: the research on
   one 0-100 scale, the sources as numbered notes under it.
   Without JavaScript, or under reduced motion, the final state shows at once;
   the movement plays only when fees.js adds .fx-anim, then .in in view. */
#fees{--fx-or:#FF6A2B;--fx-del:var(--oth-ink,#F2978A);--fx-ins:var(--sys-ink,#8FAEFF)}
#fees .fee-n,#fees .fc-col b,#fees .mkt-n{font-feature-settings:"tnum" 1,"lnum" 1}

/* ---- the two columns ---- */
.fee-cols{margin-top:30px;display:grid;grid-template-columns:auto 1fr;gap:0 26px;align-items:end;max-width:520px}
.fc-chart{display:flex;gap:22px;align-items:end}
.fc-col{display:grid;justify-items:center;gap:8px}
.fc-col b{font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
.fc-col span{font-size:.84rem;color:var(--muted)}
.fc-old b{color:var(--fx-del);text-decoration:line-through;text-decoration-thickness:2px}
.fc-now b{color:var(--fx-ins);white-space:nowrap}
.fc-stack{width:84px;height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.fc-stack i{display:block;width:100%}
.fc-top{height:50%;position:relative;border-radius:3px 3px 0 0;background:rgba(238,242,248,.05)}
.fc-top::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--fx-del) 6px 7.5px)}
.fc-mid{height:20%;background:repeating-linear-gradient(135deg,var(--ink) 0 2px,rgba(238,242,248,.35) 2px 7px)}
.fc-low{height:30%;background:var(--ink)}
.fc-now .fc-mid{border-radius:3px 3px 0 0}
.fc-keys{display:grid;gap:14px;align-content:end;padding-bottom:30px;font-size:.86rem;line-height:1.45}
.fc-keys > div{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start}
.fc-keys i{width:14px;height:14px;border-radius:2px;margin-top:3px}
.fc-keys p{display:grid;gap:1px}
.fc-keys small{font-size:.76rem;color:var(--muted)}
.k-cut{color:var(--muted)}
.k-cut i{box-shadow:inset 0 0 0 1px var(--fx-del);background:repeating-linear-gradient(135deg,transparent 0 3px,var(--fx-del) 3px 4px)}
.k-keep{color:var(--ink-2)}
.k-keep i{background:var(--ink)}
#fees .fee-note{margin-top:22px;color:var(--law-ink);border-inline-start:2px solid var(--law-line);padding-inline-start:12px}

/* ---- the research ---- */
.mkt{margin-top:30px;border-top:1px solid var(--rule);padding-top:18px}
.mkt-head{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.mkt-head b{color:var(--ink);font-weight:600}
.mkt-row{display:grid;grid-template-columns:5.6em 1fr;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--rule-soft);align-items:center}
.mkt-n{font-family:var(--sans);font-weight:600;font-size:1.3rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.mkt-bar{position:relative;height:12px;background:rgba(238,242,248,.07);border-radius:2px}
.mkt-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:2px}
.mkt-bar .v{background:var(--fx-or)}
.mkt-bar .g{box-shadow:inset 0 0 0 1.5px rgba(238,242,248,.4)}
.mkt-row p{grid-column:2;font-size:.88rem;line-height:1.5;color:var(--ink-2);max-width:52ch}
.mkt-row p small{font-size:.8rem;color:var(--muted)}
#fees .mkt sup{font-size:.7em;color:var(--fx-or);margin-inline-start:2px}
.mkt-scale{display:grid;grid-template-columns:5.6em 1fr;gap:14px;padding-top:6px;font-size:.72rem;color:var(--muted)}
.mkt-scale div{display:flex;justify-content:space-between}
.mkt-extra{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.mkt-extra .mkt-n{white-space:nowrap}
.mkt-extra p{font-size:.88rem;line-height:1.5;color:var(--ink-2);max-width:52ch}
.mkt-notes{margin-top:14px;display:grid;gap:2px}
.mkt-notes > div{display:grid;grid-template-columns:1.4em 1fr;font-size:.76rem;line-height:1.5;color:var(--muted)}
.mkt-notes b{color:var(--fx-or);font-weight:600;padding-top:5px}
.mkt-notes a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule);display:inline-block;padding-block:5px}
@media (hover:hover) and (pointer:fine){.mkt-notes a:hover{color:var(--fx-ins)}}

/* ---- movement, once, in view ---- */
#fees.fx-anim .fc-top{background-color:rgba(238,242,248,.62);transition:background-color .9s ease .3s}
#fees.fx-anim .fc-top::after{opacity:0;transition:opacity .9s ease .3s}
#fees.fx-anim .fee-cols.in .fc-top{background-color:rgba(238,242,248,.05)}
#fees.fx-anim .fee-cols.in .fc-top::after{opacity:.5}
#fees.fx-anim .fc-now .fc-mid,#fees.fx-anim .fc-now .fc-low{transform:scaleY(0);transform-origin:bottom;
  transition:transform .9s cubic-bezier(.22,.61,.36,1) 1s}
#fees.fx-anim .fc-now .fc-mid{transition-delay:1.25s}
#fees.fx-anim .fee-cols.in .fc-now .fc-mid,#fees.fx-anim .fee-cols.in .fc-now .fc-low{transform:none}
#fees.fx-anim .mkt-bar i{transform:scaleX(0);transform-origin:right;transition:transform 1s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
html:not([dir="rtl"]) #fees.fx-anim .mkt-bar i{transform-origin:left}
#fees.fx-anim .mkt.in .mkt-bar i{transform:none}

@media (max-width:700px){
  .fee-cols{grid-template-columns:1fr;gap:18px}
  .fc-keys{padding-bottom:0}
  .fc-stack{height:190px;width:76px}
}