/* Visual direction from the supplied trading-site reference.
   Functional quote and responsive control styles remain in exchange-page.css. */
 .exchange-page { background:#050606; }
.exchange-page .header { background:#101212;border-color:#ffffff18;box-shadow:none; }
.exchange-page main { position:relative;isolation:isolate; }
.exchange-page .exchange-hero { position:relative;isolation:isolate;gap:72px;padding-block:64px 76px; }
.exchange-page .exchange-hero::before {
  content:"";position:absolute;inset:0 0 12%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 16px,#b1bbad09 16px 17px,transparent 17px 21px,#b1bbad04 21px 24px),repeating-linear-gradient(0deg,transparent 0 8px,#9aa99a07 8px 10px,transparent 10px 18px);
  mask-image:linear-gradient(180deg,transparent,#0009 20%,#0005 65%,transparent);
}
.exchange-page .exchange-hero h1 { font-size:clamp(60px,6.6vw,94px);font-weight:500;line-height:.99;letter-spacing:-5px; }
.exchange-page .exchange-hero h1 span { color:#a9afad; }
.exchange-eyebrow { display:inline-flex;border:1px solid #ffffff22;border-radius:3px;padding:4px 8px;color:#bdc4bd;font-size:9px;font-weight:500;letter-spacing:1.6px;margin-bottom:24px;background:#0c100dcc; }
.exchange-lead { font-size:15px;line-height:1.8;max-width:37ch;color:#a8aeab;margin-top:26px; }
.exchange-browse { background:var(--yellow);color:#0a0d09;padding:12px 18px;gap:26px;font-size:12px;font-weight:700;border-radius:3px;margin-top:26px;transition:background .2s; }
.exchange-browse:hover { background:#ffe35b; }
.exchange-browse .icon { color:inherit;width:15px;height:15px; }
.exchange-facts { border-top:0;padding-top:0;margin-top:38px;gap:40px; }
.exchange-facts>span { flex-direction:column;gap:1px;align-items:flex-start; }
.exchange-facts strong { font-size:29px;font-weight:500;line-height:1.25;letter-spacing:-1px; }
.exchange-facts small { font-size:10px;letter-spacing:.2px;color:#909a94; }
.exchange-quote-wrap { position:relative;border:1px solid #ffffff26;border-radius:13px;background:#0b0e0d;box-shadow:0 22px 70px #000b,0 0 70px #7e9b7a07; }
.exchange-quote-wrap::before { content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid #ffffff06;border-radius:7px; }
.exchange-page .quote-panel { border:0;border-radius:0;background:transparent;box-shadow:none;padding:22px 26px 18px; }
.exchange-page .quote-panel::before { display:none; }
.exchange-page .quote-panel .panel-top { font-size:13px;margin-bottom:16px; }
.exchange-page .quote-panel .segmented { background:#050807;border-radius:5px;margin-top:0;margin-bottom:14px; }
.exchange-page .quote-panel .segmented button { border-radius:3px; }
.exchange-page .quote-panel .segmented .selected { background:#252b19;color:#f3de5f;box-shadow:inset 0 -2px 0 var(--yellow); }
.exchange-page .quote-panel .exchange-field { background:#090c0b;border-color:#ffffff1a;border-radius:6px;padding:15px; }
.exchange-page .quote-panel .amount-field input { font-weight:500; }
.exchange-page .quote-panel .exchange-divider button { border-radius:5px;background:#151a16;border-color:#5e613d;width:32px;height:32px; }
.exchange-page .quote-panel .quote-result { min-height:56px; }
.exchange-page .quote-panel .quote-call { border-radius:3px;min-height:46px;font-size:12px; }
.exchange-branch-choice { margin-top:14px; }
.exchange-branch-choice button { border-radius:4px;min-height:58px;padding:10px;background:#0d110e; }
.exchange-branch-choice button[aria-pressed=true] { background:#1b2015;border-color:#77743e; }
.exchange-page .quote-panel .quote-footnote { font-size:10px; }
.exchange-page h2 { font-size:clamp(36px,4vw,54px);font-weight:500;line-height:1.08;letter-spacing:-2px; }
.exchange-asset:hover { background:#171e15;border-color:#c7c74b65; }
.exchange-crypto { display:block;border:0;border-radius:0;background:transparent;padding:34px 0 60px; }
.exchange-crypto-copy { text-align:center; }
.exchange-crypto-copy .exchange-eyebrow { margin-bottom:18px; }
.exchange-page .exchange-crypto h2 span { color:#919b94; }
.exchange-crypto-copy>p:not(.exchange-eyebrow) { max-width:50ch;margin:20px auto 0;font-size:13px;color:#9ca69e; }
.exchange-commission { justify-content:center;text-align:left;max-width:460px;margin:24px auto 30px;padding-top:0;border:0;gap:18px; }
.exchange-commission>strong { font-size:35px;letter-spacing:-1.6px;font-weight:500; }
.exchange-commission>strong span { font-size:19px; }
.exchange-commission b { font-size:12px; }
.exchange-commission p { font-size:10px;max-width:42ch; }
.exchange-crypto-options { max-width:900px;margin:auto; }
.exchange-asset-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.exchange-asset { display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;padding:18px;background:linear-gradient(125deg,#141915,#090c0a);border-color:#ffffff17;border-radius:5px; }
.exchange-asset img { grid-row:span 2;width:32px;height:32px;margin:0; }
.exchange-asset strong { font-size:14px;line-height:1.4; }
.exchange-asset>span { font-size:10px;margin:0; }
.exchange-asset>.icon { width:11px;height:11px;top:10px;right:8px;color:#7b8b7c; }
.exchange-networks { text-align:center;margin-top:25px; }
.exchange-networks h3 { font-size:11px;font-weight:500;color:#c3ccc5;margin-bottom:10px; }
.exchange-networks ul { justify-content:center;gap:6px; }
.exchange-networks li { border-color:#ffffff15;border-radius:3px;color:#a7b1a9;font-size:9px; }
.exchange-networks p { font-size:10px;color:#8c9990; }
.exchange-how { position:relative;isolation:isolate;padding-block:50px 66px; }
.exchange-how::before { content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 100%,#3559662e,transparent 68%);pointer-events:none; }
.exchange-page .exchange-how h2 { text-align:center;font-size:clamp(34px,4vw,50px);margin-bottom:38px; }
.exchange-steps { gap:18px;max-width:1000px;margin:auto; }
.exchange-steps article { position:relative;padding:26px 24px;border:1px solid #ffffff16;background:linear-gradient(145deg,#101714,#080c0b);border-radius:7px; }
.exchange-steps article:nth-child(2) { border-color:#c8b53060;background:linear-gradient(140deg,#1a2017,#0b100d); }
.exchange-steps article>span { display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #d6c84b45;border-radius:50%;font-size:10px; }
.exchange-steps h3 { font-size:24px;font-weight:500;margin:22px 0 8px;letter-spacing:-.8px; }
.exchange-steps p { font-size:12px;color:#a4afa7; }
.exchange-faq { padding-block:36px 50px;gap:70px;border-top-color:#ffffff12; }
.exchange-page .exchange-faq h2 { font-size:36px; }
.exchange-faq summary { font-size:14px;font-weight:500; }
.exchange-faq details p { font-size:12px; }
.exchange-visit { position:relative;isolation:isolate;overflow:hidden;border:1px solid #9ebbc330;border-radius:8px;padding:44px;background:linear-gradient(180deg,#0a1114,#1d3541 67%,#14232d); }
.exchange-visit::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#b7d6df55 .6px,transparent .8px);background-size:29px 29px;mask-image:linear-gradient(#0006,transparent 75%); }
.exchange-visit::after { content:"";position:absolute;left:5%;right:5%;height:140px;bottom:-130px;border-radius:50%;box-shadow:0 0 65px 35px #759eb860;border-top:1px solid #dddc6d77;z-index:-1;pointer-events:none; }
.exchange-visit .exchange-section-heading { display:block;text-align:center;margin-bottom:32px; }
.exchange-visit .exchange-eyebrow { background:#0c171e;color:#d2dbe0;margin-bottom:18px; }
.exchange-page .exchange-visit h2 { font-size:52px;font-weight:500; }
.exchange-visit .text-link { margin-top:16px; }
.exchange-visit-grid { gap:26px; }
.exchange-visit article { padding:24px;background:#060d135c;border:1px solid #b3ced327;border-radius:5px; }
.exchange-visit h3 { font-weight:500;font-size:20px;letter-spacing:-.5px; }
.exchange-visit article>p { color:#b3c3ca; }
.exchange-visit article>div { gap:18px; }
.exchange-visit article a { font-size:13px; }
.exchange-page .footer { padding-top:48px; }
.exchange-page .asset-picker-options { background:#0d1210;border-color:#768064;border-radius:7px;box-shadow:0 14px 45px #000c;touch-action:pan-y pinch-zoom; }
.exchange-page .asset-picker-option { border-radius:4px;min-height:60px; }
.exchange-page .asset-picker-option[aria-selected="true"] { background:#222719;border-color:#bcae4255; }
.exchange-page .asset-picker-label small { color:#b0b9b1; }
.exchange-reveal-word { display:inline-block;max-width:100%;overflow-wrap:anywhere; }
.exchange-page .exchange-hero h1 .exchange-reveal-word,
.exchange-page .exchange-crypto h2 .exchange-reveal-word { color:inherit; }
@media(min-width:1101px) {
  .exchange-page .header { height:84px;border-radius:8px; }
  .exchange-page .header .brand-logo { width:151px;height:52px; }
  .exchange-page .header-call { border-radius:3px; }
}
@media(max-width:1100px) {
  .exchange-page .exchange-hero { gap:32px;padding-block:44px 56px; }
  .exchange-page .exchange-hero h1 { font-size:clamp(54px,6.9vw,78px);letter-spacing:-3.5px; }
  .exchange-page .quote-panel { padding:18px; }
  .exchange-facts { gap:28px; }
  .exchange-asset { padding:17px 12px;gap:0 9px; }
}
@media(max-width:760px) {
  .exchange-page .exchange-hero { gap:30px;padding-block:34px 40px; }
  .exchange-page .exchange-hero h1 { font-size:clamp(52px,12vw,76px);line-height:1.02;letter-spacing:-3px; }
  .exchange-hero .exchange-eyebrow { margin-bottom:20px; }
  .exchange-lead { font-size:14px;max-width:33ch;margin-top:21px; }
  .exchange-browse { margin-top:20px;min-height:46px;font-size:11px; }
  .exchange-facts { gap:32px;margin-top:26px;padding-top:0; }
  .exchange-facts>span { align-items:center; }
  .exchange-facts strong { font-size:25px; }
  .exchange-facts small { font-size:9px; }
  .exchange-page .quote-panel { padding:18px 16px 14px;border-radius:0; }
  .exchange-page .quote-panel .panel-top { font-size:12px; }
  .exchange-page .quote-panel .exchange-field { padding:14px 12px; }
  .exchange-page h2 { font-size:35px;font-weight:500;letter-spacing:-1.4px; }
  .exchange-crypto { padding:30px 0 34px; }
  .exchange-crypto-copy>p:not(.exchange-eyebrow) { font-size:12px;max-width:38ch;padding-inline:5px;margin-top:16px; }
  .exchange-commission { gap:16px;margin:24px auto;max-width:320px;padding-inline:10px; }
  .exchange-commission>strong { font-size:32px; }
  .exchange-commission b { font-size:11px; }
  .exchange-commission p { font-size:10px; }
  .exchange-asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exchange-asset { padding:17px 12px;grid-template-columns:28px minmax(0,1fr);gap:0 9px; }
  .exchange-asset img { width:28px;height:28px; }
  .exchange-asset strong { font-size:13px; }
  .exchange-networks { margin-top:22px; }
  .exchange-networks p { max-width:38ch;margin:12px auto 0; }
  .exchange-how { padding-block:32px 36px; }
  .exchange-page .exchange-how h2 { font-size:34px;margin-bottom:24px; }
  .exchange-steps { gap:10px; }
  .exchange-steps article { padding:20px;grid-template-columns:30px minmax(0,1fr);gap:0 15px; }
  .exchange-steps article>span { padding:0;margin-top:0; }
  .exchange-steps h3 { font-size:22px;margin:0 0 7px; }
  .exchange-steps p { font-size:12px; }
  .exchange-faq { padding-block:26px 34px;gap:14px; }
  .exchange-page .exchange-faq h2 { font-size:32px; }
  .exchange-faq summary { font-size:13px; }
  .exchange-visit { padding:30px 18px; }
  .exchange-visit .exchange-section-heading { margin-bottom:24px; }
  .exchange-page .exchange-visit h2 { font-size:39px; }
  .exchange-visit .exchange-eyebrow { font-size:8px;letter-spacing:1px; }
  .exchange-visit-grid { gap:12px; }
  .exchange-visit article { padding:20px 16px; }
  .exchange-visit h3 { font-size:20px; }
  .exchange-visit article>div { gap:0 16px; }
  .exchange-visit article a { font-size:12px; }
  .exchange-page .footer { padding-top:32px; }
}

/* Dark calculator card matching the home page hero. */
.exchange-page .exchange-quote-wrap { padding:17px;background:#030502;color:#f3f4e9;border:1px solid #a89f4320;border-radius:26px;box-shadow:0 24px 60px #0008,0 0 90px #eed3210b; }
.exchange-page .exchange-quote-wrap::before { display:none; }
.exchange-page .quote-panel { padding:19px;background:#090c07;border:1px solid #a18b21;border-radius:16px;box-shadow:inset 0 0 20px #d1bd1e04,0 0 15px #dec41b0c; }
.exchange-page .quote-panel .tag { color:#bfc1aa;border-color:#ffffff18; }
.exchange-page .quote-panel .segmented { padding:3px;background:#030502;border-color:#ffffff0c;border-radius:10px; }
.exchange-page .quote-panel .segmented button { color:#979d8d;border-radius:8px; }
.exchange-page .quote-panel .segmented .selected { background:#272b18;color:#f5e690;box-shadow:none; }
.exchange-page .quote-panel .exchange-field { padding:17px 17px 18px;background:#050704;border:1px solid #c9b42c80;border-radius:13px;box-shadow:0 0 0 1px #b9a51b08; }
.exchange-page .quote-panel .field-label,.exchange-page .quote-panel .receive-row { color:#d5d9c9; }
.exchange-page .quote-panel .quote-result { align-items:flex-start;text-align:left; }
.exchange-page .quote-panel .quote-result p { color:#abb49c; }
.exchange-page .quote-panel .amount-field input { font-weight:650; }
.exchange-page .quote-panel .quote-footnote { color:#adb2a5; }
.exchange-page .quote-panel .amount-field input,.exchange-page .quote-panel .receive-row strong,.exchange-page .quote-panel .quote-dash { color:#f4f6ea; }
.exchange-page .quote-panel .receive-row strong span { color:#9ba38c; }
.exchange-page .quote-panel .asset-picker-trigger { background:#ffffff04;border-color:#ffffff18;color:#f3f4e9; }
.exchange-page .quote-panel .asset-picker-trigger:hover,.exchange-page .quote-panel .asset-picker-trigger[aria-expanded="true"] { background:#f4ce210b;border-color:#f4ce2170; }
.exchange-page .quote-panel .exchange-divider button { background:#111609;color:#ebd43b;border:2px solid #bfa726;border-radius:50%;box-shadow:0 0 0 5px #070a05; }
.exchange-page .quote-panel .quote-call { border-radius:24px;background:linear-gradient(#ffe85b,#e9c20c);box-shadow:0 0 20px #f4ce2118; }
.exchange-page .exchange-branch-choice button { background:#050704;color:#f3f4e9;border-color:#ffffff18;border-radius:13px; }
.exchange-page .exchange-branch-choice small { color:#abb49c; }
.exchange-page .exchange-branch-choice button[aria-pressed=true] { background:#272b18;color:#f5e690;border-color:#c9b42c80; }
@media (max-width:1100px) {
  .exchange-page .exchange-quote-wrap { padding:12px; }
  .exchange-page .quote-panel { padding:16px; }
}