:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #101521;
  color: #f1f5f9;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 20rem; }

main { width: min(100% - 2rem, 68rem); margin: 0 auto; padding: 4rem 0; }

header { max-width: 43rem; }

h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; margin: .25rem 0 1rem; }

h2 { margin: .25rem 0 .5rem; }

p { line-height: 1.55; }

.eyebrow { color: #7dd3fc; font-size: .85rem; font-weight: 700; letter-spacing: .1em; margin: 0; text-transform: uppercase; }

.offers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 2.5rem 0; }

.offer { background: #182235; border: 1px solid #334155; border-radius: 1rem; display: flex; flex-direction: column; min-height: 17rem; padding: 1.5rem; }

.featured { border-color: #38bdf8; }

.price { color: #fef08a; font-size: 1.5rem; font-weight: 700; margin: .25rem 0; }

.button { background: #38bdf8; border: 0; border-radius: .5rem; color: #0f172a; cursor: pointer; font: inherit; font-weight: 700; margin-top: auto; padding: .75rem 1rem; text-align: center; text-decoration: none; }

a:not([aria-disabled="true"]):focus-visible, button:focus-visible { outline: .2rem solid #fef08a; outline-offset: .2rem; }

a[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

button:disabled { cursor: wait; opacity: .7; }

.checkout-error { color: #fecaca; font-size: .9rem; margin: .75rem 0 0; }

.notice { background: #78350f; border-radius: .5rem; padding: 1rem; }

.manage a { color: #7dd3fc; }

@media (max-width: 24rem) { main { width: min(100% - 1.25rem, 68rem); padding: 2rem 0; } }