.rate { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; border-block: 2px solid var(--ink); padding-block: clamp(1.5rem, 3vw, 2.25rem); } .rate-num { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; color: var(--pos-text); } .rate-unit { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.6rem; } .rate-note { display: grid; gap: 0.75rem; max-width: var(--measure-prose); } .rate-note p { color: var(--ink-soft); } .rate-note p.fine { max-width: var(--measure-fine); } @media (min-width: 50rem) { .rate { grid-template-columns: auto 1fr; gap: var(--gap-split); } } .legal { margin-top: 2rem; max-width: var(--measure-fine); opacity: 0.6; } .rates { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .rates th, .rates td { text-align: left; padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--sand-line); } @media (max-width: 40rem) { .rates { font-size: 0.82rem; } .rates th, .rates td { padding: 0.55rem 0.35rem; } .rates td { white-space: nowrap; } .table-scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overscroll-behavior-x: contain; } } .rates th { font-weight: 600; font-size: 0.82rem; letter-spacing: -0.006em; color: var(--ink-soft); } .rates tbody tr:first-child td { font-weight: 600; } .table-note { margin-top: 1rem; max-width: 52ch; } @media (max-width: 47.99rem) { .rates th:first-child, .rates td:first-child { padding-left: 0; } .rates th:last-child, .rates td:last-child { padding-right: 0; } .rates th { vertical-align: bottom; line-height: 1.3; } .rates tbody td:first-child { font-weight: 600; } }