:root {
    /* Aligned to forum.retro-rides.org: teal page, dark slate-teal header, light cards. */
    --ink: #17232a;
    --muted: #52626b;
    --line: #cfdbe0;
    --brand: #293f47;        /* forum dark slate-teal (primary) */
    --brand-dark: #1e2b2e;   /* forum darkest header */
    --teal: #679eb3;         /* forum page background */
    --teal-deep: #3f7d92;
    --bg: #679eb3;
    --card: #ffffff;
    --radius: 12px;
}

* { box-sizing: border-box; }

body.public {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "proxima-nova", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

a { color: var(--brand); }

/* Header */
.pub-header {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 16px 32px;
    background: var(--brand-dark);
    border-bottom: 3px solid var(--teal-deep);
}
.pub-brand { font-weight: 800; font-size: 20px; letter-spacing: 0.3px; color: #fff; text-decoration: none; }
.pub-header nav { margin-left: auto; display: flex; gap: 22px; }
.pub-header nav a { color: #bcd0d8; text-decoration: none; font-size: 15px; }
.pub-header nav a:hover { color: #fff; }

.pub-main { max-width: 980px; margin: 0 auto; padding: 32px; }
.pub-footer { text-align: center; color: #234049; font-size: 13px; padding: 30px; border-top: 1px solid rgba(30,43,46,0.25); margin-top: 40px; }
.pub-footer a { color: #234049; }

/* Hero (centred fallback) */
.hero { text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 12px; }
.hero p { font-size: 18px; color: #22343c; max-width: 620px; margin: 0 auto 24px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Hero split: copy + portrait image */
.hero-split { display: grid; grid-template-columns: 1.2fr auto; gap: 44px; align-items: center; padding: 36px 0 22px; }
.hero-copy h1 { font-size: 42px; line-height: 1.08; margin: 0 0 14px; }
.hero-copy p { font-size: 18px; color: #1f333b; max-width: 520px; margin: 0 0 24px; }
.hero-copy .cta-row { justify-content: flex-start; }

/* Portrait image slot — sized so it can never dominate the page */
.portrait {
    display: block;
    width: 320px;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(16, 29, 34, 0.32);
    background: #dfe8eb;
}
@media (max-width: 800px) {
    .hero-split { grid-template-columns: 1fr; text-align: center; }
    .hero-copy p { margin-left: auto; margin-right: auto; }
    .hero-copy .cta-row { justify-content: center; }
    .hero-split .portrait { margin: 8px auto 0; width: 260px; }
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: rgba(255,255,255,0.85); color: var(--brand); border: 1.5px solid var(--brand); }
.btn.ghost:hover { background: #fff; }

/* Sections */
.section { margin: 44px 0; }
.section h2 { font-size: 26px; margin: 0 0 6px; text-align: center; }
.section .lead { text-align: center; color: #1f333b; margin: 0 auto 26px; max-width: 620px; }

/* Tier cards */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.tier {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(16, 29, 34, 0.12);
}
.tier h3 { margin: 0 0 4px; font-size: 20px; }
.tier .price { font-size: 32px; font-weight: 800; margin: 8px 0 2px; }
.tier .price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.tier .permonth { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; color: var(--muted); font-size: 14px; }
.tier ul li { padding: 4px 0 4px 22px; position: relative; }
.tier ul li::before { content: "✓"; color: var(--teal-deep); position: absolute; left: 0; }

/* Cards / panels */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 8px 22px rgba(16, 29, 34, 0.14); }
.card h2 { margin-top: 0; }

/* Join layout: portrait beside the form */
.join-split { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.join-split .portrait { width: 100%; max-width: 300px; position: sticky; top: 24px; }
@media (max-width: 800px) {
    .join-split { grid-template-columns: 1fr; }
    .join-split .portrait { max-width: 240px; margin: 0 auto; position: static; }
}

/* Forms */
.form-note { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--muted); font-weight: 600; }
.field input, .field select {
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid rgba(63, 125, 146, 0.4); border-color: var(--teal-deep); }

.choice-row { display: flex; gap: 12px; flex-wrap: wrap; }
.choice { flex: 1; min-width: 150px; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.choice input { margin-right: 8px; }
.choice:hover { border-color: var(--teal-deep); }

.form-error { background: #fbe9eb; color: #b0202f; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.form-actions { margin-top: 24px; display: flex; gap: 14px; align-items: center; }

/* Membership summary */
.member-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.member-head h1 { margin: 0; font-size: 28px; }
.member-head .num { color: var(--muted); font-size: 18px; }
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #e6f6ec; color: #1f9d55; }
.badge.lapsed { background: #fbf3e2; color: #b7791f; }
.badge.cancelled { background: #eceef1; color: #5b6470; }
.kvlist { display: grid; grid-template-columns: 160px 1fr; gap: 10px 18px; margin-top: 18px; }
.kvlist dt { color: var(--muted); font-size: 14px; }
.kvlist dd { margin: 0; }
.devnote { background: #fff6e6; border: 1px solid #f0d9a8; color: #8a6d1f; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 20px; }