/* The currency comparison pages (/dollar-vs-pound, /dollar-vs-gold, /currencies; built by scripts/build-currency-pages.js). The hero, FAQ, sources and related
   blocks are css/stock-page.css, the glass and the jump bar are css/modern.css; this file adds what a comparison needs: a rate card, sections, tables, SVG charts.
   Prefix: cp-. Blue and amber for the two currencies, gold for gold; the up and down colours are blue and red, never green. */
main{ --cp-ink-2:#C9C8DA; --cp-muted:#9A99B5; --cp-blue:#3987E5; --cp-amber:#E0A43A; --cp-gold:#D9B04A; --cp-up:#9EC5F4; --cp-down:#F5A3A3; }

.cp-hero{
  position:relative; isolation:isolate; overflow:clip; padding:clamp(34px, 5.5vw, 70px) 0 clamp(26px, 4vw, 44px);
  background:
    radial-gradient(58% 90% at 88% -8%, oklch(0.52 0.2 285 / .42), transparent 70%),
    radial-gradient(46% 70% at -4% 112%, oklch(0.8 0.14 80 / .15), transparent 70%),
    linear-gradient(180deg, #17172A, #121220);
  border-bottom:1px solid var(--m-edge, rgb(255 255 255 / .12));
}
.cp-hero .wrap.cp-hero-grid{ max-width:1180px; display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, .8fr); gap:clamp(24px, 5vw, 64px); align-items:center; }
.cp-hero h1{ margin:0 0 18px; font-size:clamp(30px, 4.6vw, 52px); line-height:1.05; letter-spacing:-.025em; font-weight:600; }
.cp-hero .stock-page-lede{ font-size:clamp(15.5px, 1.4vw, 17.5px); max-width:64ch; }
.cp-hero .stock-page-lede strong{ color:var(--ink); }
@media (max-width: 900px){ .cp-hero .wrap.cp-hero-grid{ grid-template-columns:1fr; } .cp-card{ max-width:460px; } }

.cp-card{ --m-fill:#181930; padding:clamp(18px, 3vw, 26px); }
.cp-card-lbl{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--cp-muted); }
.cp-card-big{ margin:0 0 6px; font-size:clamp(38px, 7vw, 58px); line-height:1.02; font-weight:600; letter-spacing:-.025em; color:#fff; font-variant-numeric:tabular-nums; }
.cp-card-sub{ margin:0 0 4px; font-size:13.5px; color:var(--cp-ink-2); }
.cp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.cp-chips li{ padding:5px 12px; border-radius:999px; font-size:12.5px; background: rgb(255 255 255 / .07); color:var(--cp-ink-2); }
.cp-chips li b{ color:#fff; }
.cp-chips li.cp-up{ background: rgb(57 135 229 / .16); } .cp-chips li.cp-up b{ color:var(--cp-up); }
.cp-chips li.cp-down{ background: rgb(230 103 103 / .15); } .cp-chips li.cp-down b{ color:var(--cp-down); }

.cp-jump{ position:sticky; top:78px; z-index:40; justify-content:center; }
@media (max-width:720px){ .cp-jump{ justify-content:flex-start; } }

.cp-section{ padding:34px 0 26px; scroll-margin-top:150px; }
.cp-section--alt{ background: rgb(255 255 255 / .025); border-block:1px solid var(--m-edge, rgb(255 255 255 / .08)); }
.cp-section .wrap{ max-width:1040px; }
.cp-section h2{ display:flex; align-items:center; gap:12px; margin:0 0 8px; font-family:'Instrument Sans', sans-serif; font-size:clamp(20px, 2.6vw, 25px); font-weight:600; letter-spacing:-.02em; scroll-margin-top:176px; }
.cp-section h2::before{ content:""; flex:none; width:6px; height:1.05em; border-radius:3px; background: linear-gradient(180deg, #86B6EF, #256ABF); }
.cp-sub{ margin:0 0 18px; max-width:760px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.cp-lead{ margin:0 0 14px; max-width:780px; font-size:16.5px; line-height:1.6; color:var(--cp-ink-2); }
.cp-lead strong, .cp-note strong{ color:#fff; }
.cp-note{ margin:14px 0 0; max-width:800px; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.cp-note a, .cp-lead a, .cp-table a{ color:#BFD8F8; text-underline-offset:3px; }

.cp-two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:14px; margin-bottom:14px; }
.cp-fig{ margin:0 0 14px; padding:14px 14px 10px; border-radius:16px; min-width:0; }
.cp-two .cp-fig{ margin-bottom:0; }
.cp-fig figcaption{ margin:0 0 6px 4px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--cp-ink-2); }
.cp-chart{ display:block; width:100%; height:auto; overflow:visible; }
.cp-grid{ stroke: rgb(255 255 255 / .09); stroke-width:1; }
.cp-base{ stroke: rgb(255 255 255 / .32); stroke-width:1; stroke-dasharray:3 4; }
.cp-ax{ fill: var(--cp-muted); font-size:11px; font-family:'Instrument Sans', sans-serif; }
.cp-line{ fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.cp-line.s1{ stroke:var(--cp-blue); } .cp-line.s2{ stroke:var(--cp-amber); } .cp-line.s3{ stroke:var(--cp-gold); }
.cp-dot{ fill:#121220; stroke-width:2; } .cp-dot.s1{ stroke:var(--cp-blue); } .cp-dot.s2{ stroke:var(--cp-amber); } .cp-dot.s3{ stroke:var(--cp-gold); }
.cp-area.s1{ fill: rgb(57 135 229 / .14); } .cp-area.s2{ fill: rgb(224 164 58 / .12); } .cp-area.s3{ fill: rgb(217 176 74 / .14); }
.cp-key{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 4px 2px; padding:0; list-style:none; font-size:12.5px; color:var(--cp-ink-2); }
.cp-key i{ display:inline-block; width:14px; height:3px; margin-right:7px; border-radius:2px; vertical-align:middle; }
.cp-key i.s1{ background:var(--cp-blue); } .cp-key i.s2{ background:var(--cp-amber); } .cp-key i.s3{ background:var(--cp-gold); }

.cp-table-wrap{ margin:14px 0 0; overflow-x:auto; border:1px solid var(--m-edge, rgb(255 255 255 / .12)); border-radius:14px; background: rgb(255 255 255 / .02); }
.cp-table-wrap::-webkit-scrollbar{ height:8px; } .cp-table-wrap::-webkit-scrollbar-thumb{ background: rgba(139,127,255,.45); border-radius:999px; }
@supports not selector(::-webkit-scrollbar){ .cp-table-wrap{ scrollbar-width:thin; scrollbar-color: rgba(139,127,255,.45) transparent; } }
.cp-table{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; }
.cp-table caption{ padding:12px 14px 4px; text-align:left; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cp-muted); caption-side:top; }
.cp-table th, .cp-table td{ padding:11px 14px; text-align:left; border-top:1px solid rgb(255 255 255 / .07); white-space:nowrap; }
.cp-table thead th{ border-top:0; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--cp-muted); }
.cp-table tbody th{ font-weight:600; color:#fff; }
.cp-table .num{ text-align:right; }
.cp-table small{ display:inline; margin-left:4px; font-size:11.5px; color:var(--cp-muted); }
.cp-up{ color:var(--cp-up); font-weight:700; } .cp-down{ color:var(--cp-down); font-weight:700; }
@media (max-width:720px){ .cp-table th, .cp-table td{ padding:10px; font-size:13px; } }

.cp-faq .stock-faq-item p{ line-height:1.65; }
.cp-related .stock-related-list{ columns:2; column-gap:28px; }
@media (max-width:720px){ .cp-related .stock-related-list{ columns:1; } }
.cp-disclaimer{ margin:14px 0 0; font-size:12.5px; color:var(--cp-muted); }
@media (prefers-reduced-motion: no-preference){ .cp-card{ animation: cp-in .5s ease-out both; } }
@keyframes cp-in{ from{ opacity:0; transform:translateY(10px); } }

/* /equity-risk-premium: the numbered steps and the unit next to the big figure */
.cp-card-big small{ font-size:.38em; font-weight:600; letter-spacing:0; color:var(--cp-muted); }
.cp-steps{ margin:0 0 6px; padding-left:22px; max-width:820px; font-size:15px; line-height:1.65; color:var(--cp-ink-2); }
.cp-steps li{ margin:0 0 10px; padding-left:4px; }
.cp-steps strong{ color:#fff; }