:root { color-scheme: light; font: 16px/1.5 "DM Sans", system-ui, sans-serif; color: #193b30; background: #f8f5eb; }
.demo-notice { border: 2px solid #8c521c; background: #fff0c6; color: #542d13; padding: .85rem; font-weight: 800; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main { width: min(100% - 2rem, 65rem); margin-inline: auto; }
header { padding-block: 1.3rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
a { color: inherit; }
.brand { text-decoration: none; }
nav { display: flex; gap: .65rem; }
[aria-current] { font-weight: 800; }
.hero { background: #20463a; color: #fbf8ed; border-radius: 1rem; padding: clamp(1rem, 5vw, 3rem); }
.hero > p { margin: 0; }
h1 { font: 600 clamp(2rem, 7vw, 4.25rem)/1.03 Georgia, serif; margin: .75rem 0 1.5rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: 1rem; }
article { background: #fbf8ed; color: #193b30; border-radius: .65rem; padding: 1rem; }
article h2, .rate { margin: 0 0 .55rem; }
.rate { font-size: 1.5rem; font-weight: 700; }
.rate span { font-size: 1rem; font-weight: 500; }
.account { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; }
.account form { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
label { display: grid; gap: .2rem; }
input, select, button { font: inherit; padding: .5rem .75rem; border-radius: .4rem; border: 1px solid #788c81; }
button { background: #20463a; color: #fff; cursor: pointer; }
button.secondary { background: transparent; color: #20463a; }
.contests { list-style: none; padding: 0; }
.contests li { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; padding: .8rem 0; border-top: 1px solid #c3cec4; }
.contests li > div { flex: 1 0 14rem; }
.contests span, time { display: inline-block; margin-left: .5rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.plan-actions form { margin: 0; }
.plan-actions .plan-try, .plan-actions .plan-rent { display: inline-flex; align-items: center; justify-content: center; min-height: 2.85rem; padding: .6rem .9rem; color: #fff; border-radius: .45rem; font-weight: 700; text-decoration: none; text-align: center; }
.plan-actions .plan-try { background: #176449; }
.plan-actions .plan-rent { background: #214e86; }
@media(max-width: 480px) { .plan-actions form, .plan-actions .plan-try, .plan-actions .plan-rent { width: 100%; } }