:root{
  --ink:#14213D; --ink-2:#4A5873; --paper:#F6F8FB; --card:#FFFFFF; --line:#DCE3EC;
  --gold:#F2A900; --gold-soft:#FFF4D6; --up:#0F8052; --down:#C0392B;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#E8EDF5; --ink-2:#A3AFC3; --paper:#0F1A2E; --card:#16233B; --line:#27365292;
    --gold:#FFC23D; --gold-soft:#2A2A1E; --up:#3CCB8A; --down:#FF7A6B; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body)}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}

.top{border-bottom:1px solid var(--line);background:var(--card)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font:800 20px var(--display);text-decoration:none;display:flex;gap:8px;align-items:center}
.brand-mark{color:var(--gold);font-size:22px}
.top nav a{margin-left:18px;text-decoration:none;font-weight:600;color:var(--ink-2)}

.crumbs{font-size:14px;color:var(--ink-2);margin:18px 0 0}
.crumbs a{text-decoration:none}

h1,h2{font-family:var(--display);line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(40px,8vw,72px);font-weight:800;margin:10px 0 12px}
h2{font-size:22px;font-weight:600;margin:0 0 12px}
.lede{font-size:18px;max-width:68ch;color:var(--ink-2)}
.lede strong{color:var(--ink)}
section{margin:0 0 44px}
.hero{margin-bottom:36px}

/* converter: the one bold element on the page */
.conv{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--gold);
  border-radius:4px 14px 14px 4px;padding:8px 70px 12px 18px;max-width:560px;margin-top:22px;position:relative;display:flex;flex-direction:column}
.conv.swapped .r-fiat{order:-1}
.conv .stamp{order:5}
.conv .row{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.conv .unit{font:800 18px var(--display);min-width:64px;color:var(--ink-2)}
.conv input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:800 clamp(28px,6vw,40px) var(--display);font-variant-numeric:tabular-nums;padding:0}
.conv input:focus{outline:none}
.conv .row:focus-within .unit{color:var(--gold)}
.swap{position:absolute;right:16px;top:44px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer}
.swap:hover{border-color:var(--gold)}
.stamp{font-size:13px;color:var(--ink-2);margin:6px 0 0}

.cta-box{margin-top:18px;max-width:560px}
.cta{display:inline-block;background:var(--gold);color:#1B1300;font-weight:700;text-decoration:none;
  padding:12px 20px;border-radius:10px}
.cta:hover{color:#1B1300;filter:brightness(1.05)}
.cta-note{font-size:13px;color:var(--ink-2);margin:6px 0 14px}

table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-size:15px}
th{font-weight:600;color:var(--ink-2);background:var(--paper)}
tr:last-child td{border-bottom:0}
td:nth-child(2){font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
section > table{display:block;overflow-x:auto}

.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0}
.facts div{background:var(--card);padding:12px 14px}
.facts dt{font-size:13px;color:var(--ink-2)}
.facts dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums}

.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--ink-2)}
.more{font-size:15px;margin-top:12px}

.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:600;cursor:pointer}
.faq p{margin:8px 0 0;color:var(--ink-2)}

.cols{columns:3 220px;padding:0;list-style:none;margin:0}
.cols li{break-inside:avoid;padding:4px 0}
.cols small{color:var(--ink-2)}

.foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;font-size:14px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:480px){
  .brand{font-size:17px} .top nav a{margin-left:12px;font-size:15px}
  .conv{padding-right:62px} .conv .unit{min-width:48px;font-size:16px}
}