/* Keep intrinsic text and form widths from expanding mobile layout tracks. */
.header>.brand,.header .header-actions,.hero-intro>*{min-width:0}
.header .brand .brand-logo{max-width:100%}
.hero-intro{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.hero .quote-panel,.hero .exchange-field,.hero .amount-field,
.hero .receive-row,.hero .quote-result{min-width:0;max-width:100%}
.hero .amount-field input{flex:1 1 0;width:0;min-width:0}
.hero .receive-row{flex-wrap:wrap;gap:8px 12px}
.hero .quote-result p{min-width:0;overflow-wrap:anywhere}
.hero-atmosphere{overflow:clip}
@media(max-width:850px){
  .hero-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:700px){
  .hero-intro{display:flex;flex-direction:column;align-items:stretch;gap:48px;max-width:440px;margin-inline:auto;padding-inline:0}
  .hero-copy,.hero-quote-wrap{width:100%;max-width:100%;min-width:0}
  .hero-copy h1,.hero-description{max-width:100%;overflow-wrap:anywhere}
  .hero-copy .reveal-word{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .hero-buttons{flex-wrap:wrap}
  .hero-asset-intro{flex-wrap:wrap}
  .header.wrap{grid-template-columns:minmax(0,1fr) 44px auto;gap:8px;padding-inline:12px}
  .header>.brand{width:100%;max-width:134px}
  .header .header-actions{gap:0}
  .header .language{white-space:nowrap}
}
@media(max-width:360px){
  .header .brand .brand-logo{width:116px}
  .hero .quote-panel{padding:12px}
  .hero .exchange-field{padding-inline:12px}
  .hero .amount-field{gap:8px}
  .hero-quote-caption{font-size:8px;letter-spacing:.7px}
}

/* A centered, quieter introduction on phones. */
@media(max-width:700px){
  .hero{padding-top:32px}
  .hero-copy{text-align:center}
  .hero-copy a.eyebrow-pill{font-size:11px;padding:6px 8px 6px 11px;gap:7px}
  .hero-copy .eyebrow-pill+h1{margin-top:22px}
  .hero-copy h1{margin:22px 0 20px;font-size:clamp(29px,7.9vw,42px);line-height:1.14;letter-spacing:-1.25px;font-weight:750;text-wrap:balance}
  .hero-copy h1>[data-i18n="heroLine3"]{font-size:.88em;line-height:1.2;font-weight:650;letter-spacing:-.9px;margin-top:8px;color:#eceee6}
  .hero-copy .hero-description{max-width:34ch;margin-inline:auto;font-size:15px;line-height:1.8;font-weight:400;color:#b4b9ae;text-wrap:pretty}
  .hero-asset-intro{justify-content:center;width:fit-content;max-width:100%;margin:20px auto 0;gap:10px;padding:7px 11px;border:1px solid #ffffff0a;border-radius:30px;background:#ffffff03;font-size:9px;font-weight:600;letter-spacing:.25px;color:#bfc5b7}
  .hero-coin-stack .coin{width:22px;height:22px;font-size:15px}
  .hero-coin-stack .coin svg{width:15px;height:15px}
  .hero-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:380px;margin:24px auto 0;align-items:stretch}
  .hero-buttons .button,.hero-buttons .text-link{min-width:0;min-height:48px;padding:12px 10px;font-size:12px;gap:8px;line-height:1.5}
  .hero-buttons .icon{width:16px;height:16px;flex-shrink:0}
}
@media(max-width:380px){
  .hero-copy .hero-description{font-size:14px;max-width:32ch}
  .hero-buttons{grid-template-columns:1fr;max-width:290px;gap:4px;margin-top:22px}
  .hero-buttons .button{font-size:13px}
  .hero-buttons .text-link{min-height:42px;border-color:transparent;font-size:12px;color:#c7cdbf}
}