/* Customer-facing layout: fluid sizing without changing the admin screens. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { min-width: 0; min-height: 100svh; }
button, input, select, textarea { font-size: 1rem; }
button, a, input, select, textarea { touch-action: manipulation; }
button { min-height: 44px; }
img, video, canvas { max-width: 100%; height: auto; }
.wrap { width: 100%; padding: 32px clamp(16px, 3vw, 32px) 64px; }
.hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; }
.hero > *, .lower > *, .tradeHead > *, .quote > *, .detailGrid > *,
.kv > *, .historyRow > *, .miniTrade > *, .modalHead > * { min-width: 0; }
.intro { min-height: 0; padding: clamp(24px, 3.5vw, 44px); }
.eyebrow { font-size: .75rem; line-height: 1.6; letter-spacing: .1em; margin-bottom: clamp(28px, 5vw, 64px); }
.intro h1 { font-size: clamp(2rem, 4.3vw, 3.75rem); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: break-word; }
.intro p { font-size: 1rem; line-height: 1.6; }
.signal { margin-top: 24px; }
.signal span { font-size: .75rem; line-height: 1.4; letter-spacing: .025em; }
.trade { padding: clamp(20px, 2.4vw, 28px); }
.tradeHead { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.tradeHead h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); line-height: 1.2; }
.tradeHead p { font-size: .875rem; line-height: 1.5; }
.pill { font-size: .75rem; line-height: 1.4; letter-spacing: .025em; max-width: 100%; overflow-wrap: anywhere; }
.label, .field label { font-size: .875rem; line-height: 1.4; letter-spacing: .04em; }
.amount input { width: 100%; font-size: clamp(1.5rem, 3.4vw, 2.375rem); letter-spacing: -.04em; }
.asset { flex-shrink: 0; font-size: .875rem; }
.btcIcon { flex-shrink: 0; }
.select, .field input, .field select, .field textarea { min-width: 0; max-width: 100%; font-size: 1rem; }
.quote { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.quote small { font-size: .75rem; line-height: 1.5; }
.quote strong { display: block; font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.quote .meta { text-align: left; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.cta { font-size: 1rem; }
.micro { font-size: .875rem; line-height: 1.6; }
.recentTop { gap: 12px; flex-wrap: wrap; }
.recentTop b, .recentTop button, .miniTrade strong { font-size: .875rem; }
.miniTrade { flex-wrap: wrap; overflow-wrap: anywhere; }
.miniTrade span { font-size: .75rem; line-height: 1.5; }
.lower { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.streetPanel, .historyCard { padding: clamp(20px, 2.4vw, 28px); }
.streetPanel h3 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); line-height: 1.2; }
.flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow div { min-height: 0; padding: 14px; }
.flow b { font-size: .75rem; }
.flow p, .historyCard p { font-size: 1rem; line-height: 1.5; }
.historyCard h3 { line-height: 1.25; }
.top { height: auto; min-height: 76px; gap: 16px; padding: 12px clamp(16px, 3vw, 34px); }
.clmx-logo { flex-shrink: 0; }
.topnav { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.topnav a, .topnav button { font-size: .875rem; overflow-wrap: anywhere; }
.modalBack { padding: 16px; }
.modal { max-height: calc(100dvh - 32px); overscroll-behavior: contain; overflow-wrap: anywhere; }
.modalHead h3 { font-size: clamp(1.25rem, 4vw, 1.5625rem); line-height: 1.25; }
.modalHead p, .listCard p, .timeline div, .empty { font-size: .875rem; line-height: 1.6; }
.close { flex-shrink: 0; width: 44px; height: 44px; }
.authTabs { flex-wrap: wrap; }
.authTabs button, .btn.small, .historyRow button, .listCard h4, .kv b, .historyRow b { font-size: .875rem; }
.kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv span { font-size: .75rem; line-height: 1.4; }
.kv b { line-height: 1.5; overflow-wrap: anywhere; }
.timeline i { flex-shrink: 0; }
.historyRow { grid-template-columns: minmax(0, 1fr) auto; }
.toast { max-width: min(360px, calc(100vw - 32px)); font-size: .875rem; overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .intro { padding: 28px; }
  .eyebrow { margin-bottom: 20px; }
  .intro h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 16px; }
  .intro p { max-width: 640px; margin-bottom: 0; }
  .signal { margin-top: 18px; }
  .lower { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .wrap { padding-top: 16px; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); padding: 6px; }
  .bottom button { min-width: 0; font-size: .75rem; line-height: 1.3; }
  .bottom button b { font-size: 1.125rem; }
  .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  #sell, #how { scroll-margin-top: 96px; }
}

@media (max-width: 640px) {
  .top { min-height: 64px; gap: 8px; }
  #historyTop { display: none; } /* Available in the mobile bottom navigation. */
  .topnav .login { max-width: 180px; }
  .hero, .lower { gap: 16px; }
  .intro { padding: 24px 20px; }
  .intro h1 { font-size: clamp(2rem, 7.6vw, 2.875rem); }
  .intro p { font-size: 1rem; }
  .signal { gap: 6px; }
  .signal span { padding: 7px 9px; }
  .trade { padding: 20px 16px; }
  .amount { padding-left: 12px; }
  .asset { padding: 10px; }
  .modalBack { padding: 0; align-items: flex-end; }
  .modal { width: 100%; max-height: calc(100dvh - 16px); padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; }
  .detailGrid, .historyRow { grid-template-columns: minmax(0, 1fr); }
  .historyRow > div:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 380px) {
  .flow, .kv { grid-template-columns: minmax(0, 1fr); }
  .flow div { padding: 12px; }
  .flow p { margin-top: 4px; }
  .intro, .streetPanel, .historyCard { padding: 20px 16px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .top { position: relative; }
  .modalBack { align-items: center; padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); border-radius: 16px; }
}

/* USD entry paired with the calculated Bitcoin amount. */
.amountSplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.amountSplit > div { min-width: 0; }
.amountSplit .label { display: block; }
.amountSplit .amount { min-height: 68px; padding: 10px; gap: 8px; }
.amountSplit input { font-size: clamp(1rem, 1.8vw, 1.375rem); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.amountSplit .asset { padding: 10px 8px; gap: 5px; }
.amountSplit .calculated { background: #f6f7fa; }
.amountHelp { margin: 10px 0 0; color: #777d89; font-size: .875rem; line-height: 1.5; }
.cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (max-width: 600px) { .amountSplit { grid-template-columns: minmax(0, 1fr); gap: 0; } .amountSplit input { font-size: 1.5rem; } }