/* ClubCruise marketing site + admin console — neutral, clean. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.site {
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2328;
    background: #f6f8fa;
    -webkit-text-size-adjust: 100%;
}
a { color: #1f6feb; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px;
    background: #fff;
    border-bottom: 1px solid #d0d7de;
    position: sticky; top: 0; z-index: 10;
}
.site-header .brand { font-weight: 700; font-size: 20px; color: #0d1117; }
.site-header nav { display: flex; gap: 22px; align-items: center; }
.site-header nav a { color: #424a53; }

main { max-width: 960px; margin: 0 auto; padding: 32px 24px 80px; }

h1 { font-size: 36px; line-height: 1.2; margin: 12px 0 16px; }
h3 { font-size: 18px; margin: 16px 0 8px; }
.muted { color: #57606a; }
.small { font-size: 14px; }
.error { color: #cf222e; margin-top: 12px; min-height: 1.4em; }
.success { color: #1a7f37; margin-top: 12px; min-height: 1.4em; }

.btn {
    display: inline-block; padding: 8px 16px;
    background: #f6f8fa; color: #1f2328; border: 1px solid #d0d7de;
    border-radius: 6px; cursor: pointer; font: inherit;
    transition: background 0.1s, border-color 0.1s;
    text-decoration: none;
}
.btn:hover { background: #f3f4f6; text-decoration: none; }
.btn-primary { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.btn-primary:hover { background: #185fc7; border-color: #185fc7; }
.btn-danger { background: #cf222e; color: #fff; border-color: #cf222e; }
.btn-danger:hover { background: #a40e26; border-color: #a40e26; }
.btn-lg { padding: 12px 24px; font-size: 18px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }

.hero {
    text-align: center; padding: 80px 0 60px;
    background: linear-gradient(180deg, #fff 0%, #f6f8fa 100%);
    border-radius: 12px;
    margin-bottom: 32px;
}
.hero h1 { font-size: 48px; max-width: 720px; margin: 0 auto 18px; }
.hero .lead { font-size: 18px; max-width: 640px; margin: 0 auto 24px; color: #424a53; }

.features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; margin-top: 24px;
}
.features > div {
    background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #d0d7de;
}
.features h3 { margin-top: 0; }

.plan-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-top: 24px;
}
.plan-card {
    background: #fff; padding: 24px; border-radius: 10px; border: 1px solid #d0d7de;
}
.plan-card h3 { margin-top: 0; }
.plan-card .price { font-size: 28px; font-weight: 700; margin: 12px 0; color: #0d1117; }
.plan-card .price small { font-size: 14px; font-weight: 400; color: #57606a; }
.plan-card ul { padding-left: 18px; margin: 0 0 16px; }
.plan-card li { margin: 4px 0; color: #424a53; }

.form-card {
    background: #fff; max-width: 460px; margin: 24px auto;
    padding: 32px; border-radius: 12px; border: 1px solid #d0d7de;
}
.form-card label {
    display: block; margin: 16px 0 4px; font-weight: 500;
}
.form-card label.checkbox {
    display: flex; align-items: flex-start; gap: 8px;
    font-weight: 400; font-size: 14px; margin-top: 16px;
}
.form-card input[type=text], .form-card input[type=email], .form-card input[type=password],
.form-card textarea, .form-card select, .form-card input[type=datetime-local],
.form-card input[type=color], .form-card input[type=number] {
    width: 100%; padding: 8px 12px; font: inherit;
    border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus {
    background: #fff; border-color: #0969da; outline: 2px solid #0969da33;
}
.form-card button { margin-top: 18px; width: 100%; padding: 10px; font-size: 16px; }

.site-footer {
    text-align: center; padding: 32px 16px; color: #57606a;
    border-top: 1px solid #d0d7de; background: #fff;
}
.site-footer a { color: #57606a; margin: 0 4px; }