/* A shared live/current and trailing rate display. Numbers arrive from Morpho. */
.morpho-rates { --rate-ink:#19332b; --rate-muted:#64735b; --rate-rule:#bfccb2; --rate-accent:#507437; color:var(--rate-ink); width:100%; max-width:470px; padding:21px 0 18px; margin-top:26px; border-block:1px solid var(--rate-rule); }
.morpho-rate-grid { display:grid; grid-template-columns:1fr 1.14fr; gap:24px; }
.morpho-rate-grid > div { min-width:0; }
.morpho-rate-trailing { padding-left:24px; border-left:1px solid var(--rate-rule); }
.morpho-rate-label { display:flex; align-items:center; gap:8px; font-size:10px; line-height:1.6; font-weight:500; color:var(--rate-muted); }
.morpho-rate-label > i { width:6px; height:6px; flex:none; border-radius:50%; background:#8d9b87; }
.morpho-rates[data-rate-state="live"] .morpho-rate-label > i { background:var(--rate-accent); box-shadow:0 0 0 4px #779d4020; }
.morpho-rates[data-rate-state="cached"] .morpho-rate-label > i { background:#b08e45; }
.morpho-rate-grid strong { display:flex; align-items:baseline; gap:2px; font-size:43px; line-height:1.25; letter-spacing:-2px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; color:var(--rate-ink); }
.morpho-rate-grid strong small { font-size:23px; letter-spacing:-.6px; font-weight:400; }
.morpho-rate-current strong { color:var(--rate-accent); }
.morpho-rates .morpho-rate-message { font-size:10px; line-height:1.8; margin:8px 0 0; color:var(--rate-muted); }
.morpho-rates--dark { --rate-ink:#eff5eb; --rate-muted:#b4c9b8; --rate-rule:#b8d6bd30; --rate-accent:#d1ff71; }
.morpho-rates--lime { --rate-ink:#18362a; --rate-muted:#516d35; --rate-rule:#8fac5755; --rate-accent:#18362a; }
.hero-cafe .home-morpho-rates { max-width:452px; margin-top:23px; }
.apy-marker > [data-rate-value] { display:inline; }
.sb-rate-tile { width:330px; padding:23px 25px; }
.sb-rate-tile > .morpho-rates { margin:0; padding:0; border:0; max-width:none; }
.sb-rate-tile .morpho-rate-grid { grid-template-columns:1fr 1.1fr; gap:17px; }
.sb-rate-tile .morpho-rate-trailing { padding-left:17px; }
.sb-rate-tile .morpho-rate-grid strong { font-size:35px; letter-spacing:-1.9px; }
.sb-rate-tile .morpho-rate-grid strong small { font-size:19px; }
.sb-rate-tile .morpho-rate-label { font-size:10px; }
.sb-result-rate > strong > [data-rate-value] { display:inline; }
.pp-hero-copy .morpho-rates { max-width:430px; padding-block:17px 15px; margin-top:24px; }
.pp-hero-copy .morpho-rate-grid strong { font-size:35px; }
.pp-hero-copy .morpho-rate-grid strong small { font-size:19px; }
.v-page main .morpho-rates .morpho-rate-message { font-size:10px; line-height:1.8; }
.pp-trailing-badge { border-left:1px solid #66816a; padding-left:28px; }
.pp-trailing-badge > strong { font-weight:500; font-size:49px; line-height:1.15; letter-spacing:-2.5px; color:var(--lime); }
.pp-trailing-badge > strong > small { font-size:26px; font-weight:400; letter-spacing:-1px; }
.product-page main .pp-trailing-badge > p { font-size:10px; color:#b5ccb8; line-height:1.8; margin-top:10px; }
.rt-earn-copy > .morpho-rates { max-width:440px; margin:24px 0 18px; }
.rt-earn-copy .morpho-rate-grid strong { font-size:39px; }
.rt-earn-copy .morpho-rate-grid strong small { font-size:22px; }
@media(max-width:1100px) {
  .hero-cafe .morpho-rate-grid strong { font-size:37px; }
  .hero-cafe .morpho-rate-label { font-size:10px; }
  .sb-rate-tile { width:295px; padding:21px 23px; }
  .sb-rate-tile .morpho-rate-grid strong { font-size:31px; }
}
@media(max-width:680px) {
  .morpho-rates { padding:17px 0 15px; margin-top:22px; }
  .morpho-rate-grid { gap:18px; }
  .morpho-rate-trailing { padding-left:18px; }
  .morpho-rate-grid strong,.hero-cafe .morpho-rate-grid strong { font-size:36px; letter-spacing:-1.8px; }
  .morpho-rate-grid strong small { font-size:21px; }
  .morpho-rate-label,.hero-cafe .morpho-rate-label { font-size:10px; }
  .sb-rate-tile { width:276px; padding:19px 22px; }
  .sb-rate-tile .morpho-rate-grid { gap:14px; }
  .sb-rate-tile .morpho-rate-trailing { padding-left:14px; }
  .sb-rate-tile .morpho-rate-grid strong { font-size:29px; }
  .sb-rate-tile .morpho-rate-grid strong small { font-size:17px; }
  .sb-rate-tile .morpho-rate-label { font-size:10px; gap:5px; }
  .pp-hero-copy .morpho-rate-grid strong { font-size:34px; }
  .pp-trailing-badge { margin-top:26px; border-left:0; border-top:1px solid #66816a; padding:19px 0 0; }
  .pp-trailing-badge > strong { font-size:41px; }
  .rt-earn-copy .morpho-rate-grid strong { font-size:35px; }
}

/* Keep rate context readable and attached to the figures on every screen. */
.morpho-rates { --rate-note:#294532; }
.morpho-rates--dark { --rate-note:#dbe8dd; }
.morpho-rates--lime { --rate-note:#23432a; }
.morpho-rates .morpho-rate-disclosure,
.v-page main .morpho-rates .morpho-rate-disclosure { margin:12px 0 0; font-size:14px; line-height:1.65; color:var(--rate-note); max-width:none; }
.morpho-rate-disclosure a { color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.morpho-rate-disclosure a:hover { text-decoration-thickness:2px; }
.morpho-rate-disclosure a:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:2px; }