:root {
  --teal: #2C6572;
  --teal-deep: #224F59;
  --yellow: #F8D849;
  --paper: #FFFFFF;
  --mist: #EEF4F5;
  --ink: #17333A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--teal); color: #fff; line-height: 1.6; }
h1, h2, h3 { font-family: 'League Spartan', 'Archivo', sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.marker { font-family: 'Permanent Marker', cursive; color: var(--yellow); font-weight: 400; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--yellow); }

header { padding: 3.5rem 0 2.5rem; }
header img.logo { height: 64px; width: auto; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 1.4rem; text-transform: uppercase; }
.sub { color: #CDE0E4; margin-top: 0.8rem; max-width: 40rem; font-size: 1.05rem; }
.notice {
  margin-top: 1.4rem; background: rgba(248,216,73,0.12); border: 1px solid rgba(248,216,73,0.5);
  border-radius: 10px; padding: 0.9rem 1.2rem; font-size: 0.95rem; max-width: 44rem;
}
section { padding: 2.6rem 0; }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); font-weight: 700; margin-bottom: 1.1rem; }
.cards { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--paper); color: var(--ink); border-radius: 12px; padding: 1.5rem 1.5rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.card h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; }
.card p { font-size: 0.95rem; color: #43585e; }
.card .btn { margin-top: auto; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--mist); color: var(--teal); border-radius: 99px; padding: 0.25rem 0.7rem; width: fit-content; }
.btn {
  display: inline-block; background: var(--teal); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.92rem; padding: 0.7rem 1.2rem; border-radius: 8px; width: fit-content;
}
.btn:hover { background: var(--teal-deep); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: #E8C93B; }
.btn[aria-disabled="true"] { background: #9db9bf; cursor: not-allowed; }
.steps { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 1.4rem 1.6rem; margin-top: 1.4rem; max-width: 44rem; }
.steps ol { margin-left: 1.2rem; }
.steps li { margin-bottom: 0.5rem; font-size: 0.98rem; }
footer { padding: 2.5rem 0 3rem; color: #9fbdc3; font-size: 0.88rem; border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2rem; }