/* Winning Waters — Phase 1 public styling.
   Placeholder palette (deep pool blue + aqua + sand). Swap once Carol's brand colors land. */
:root {
    --deep: #0b4f6c;
    --blue: #1f7a9c;
    --aqua: #37c6d0;
    --sand: #f4efe6;
    --ink: #1c2b33;
    --muted: #5a6b73;
    --white: #ffffff;
    --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: var(--white);
}
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; color: var(--deep); }

/* Header */
.site-header {
    background: var(--deep);
    color: var(--white);
    position: sticky; top: 0; z-index: 10;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--white); font-weight: 700; font-size: 1.25rem; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--aqua); font-size: 1.5rem; }
.site-nav a { color: var(--white); margin-left: 1.25rem; font-weight: 500; }
.site-nav a:hover { color: var(--aqua); text-decoration: none; }
.nav-cta { background: var(--aqua); color: var(--deep) !important; padding: .4rem .9rem; border-radius: 999px; }
.nav-toggle, .nav-toggle-label { display: none; }

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--deep), var(--blue) 60%, var(--aqua));
    color: var(--white);
    padding: 4rem 0 3.5rem;
}
.hero h1 { color: var(--white); font-size: 2.5rem; margin: 0 0 1rem; }
.hero p.lead { font-size: 1.25rem; max-width: 40ch; opacity: .95; }
.btn {
    display: inline-block; background: var(--aqua); color: var(--deep);
    font-weight: 700; padding: .75rem 1.5rem; border-radius: 999px; margin-top: 1.5rem;
    border: none; cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--white); text-decoration: none; }
.btn-outline { background: transparent; border: 2px solid var(--white); color: var(--white); }

/* Sections */
section { padding: 3rem 0; }
.section-tint { background: var(--sand); }
.section h2 { font-size: 1.9rem; margin-top: 0; }
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--white); border: 1px solid #e3ddd0; border-radius: 12px; padding: 1.5rem; }
.card h3 { margin-top: 0; }

/* Level cards */
.level { border-left: 5px solid var(--aqua); }
.level .meta { color: var(--muted); font-size: .9rem; margin: .25rem 0 .75rem; }
.badge { display: inline-block; background: var(--deep); color: var(--white); font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle; }

/* Pricing table */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid #e3ddd0; }
.price-table th { background: var(--sand); }

/* Forms */
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form-field input, .form-field textarea {
    width: 100%; padding: .6rem .75rem; border: 1px solid #cbd5d9; border-radius: 8px; font: inherit;
}

/* Flash messages */
.flash { padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; }
.flash-success { background: #e3f6e8; color: #15692c; border: 1px solid #a9dcb8; }
.flash-error { background: #fbe6e6; color: #8a1f1f; border: 1px solid #e2a9a9; }

/* Placeholder marker (content pending from Carol) */
.placeholder { background: #fff8e1; border: 1px dashed #d9b85a; border-radius: 8px; padding: .5rem .9rem; color: #7a5c00; font-size: .9rem; }

/* Footer */
.site-footer { background: var(--ink); color: #cdd7db; margin-top: 2rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; padding: 2.5rem 1.25rem; }
.site-footer a { color: var(--aqua); }
.footer-note { font-size: .85rem; opacity: .8; }

/* Responsive */
@media (max-width: 760px) {
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2rem; }
    .nav-toggle-label { display: block; cursor: pointer; }
    .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
        display: block; width: 24px; height: 3px; background: var(--white); border-radius: 2px; position: relative;
    }
    .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; }
    .nav-toggle-label span::before { top: -8px; }
    .nav-toggle-label span::after { top: 8px; }
    .site-nav { display: none; width: 100%; flex-direction: column; padding: .5rem 0; }
    .site-nav a { margin: .4rem 0; }
    .nav-toggle:checked ~ .site-nav { display: flex; }
    .header-inner { flex-wrap: wrap; }
}