:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #071522; background: #f6f8fa; --fi-navy: #0B1F33; --fi-navy-soft: #173A5E; --fi-cyan: #007F86; --fi-cyan-bright: #38D6DC; --fi-amber: #FFB547; --fi-lime: #A8D93F; --fi-surface: #F6F8FA; --fi-ink: #071522; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
a { color: #007f86; text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.2rem 6vw; background: white; border-bottom: 1px solid #e7edf1; }
.brand { color: var(--fi-navy); font-size: 1.35rem; font-weight: 900; letter-spacing: -.04em; }
.site-header nav, .site-footer span:last-child { display: flex; gap: 1.25rem; align-items: center; }
.site-header nav a, .site-footer a { color: var(--fi-navy-soft); font-weight: 650; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 6vw; flex-wrap: wrap; background: white; border-top: 1px solid #e7edf1; }
.page-section { padding: 5rem 6vw; max-width: 1200px; margin: auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 4rem; align-items: center; min-height: 70vh; }
.hero, .callout { color: white; background: var(--fi-navy); max-width: none; }
.hero-copy { max-width: 700px; }
h1, h2, h3 { line-height: 1.1; }
h1 { font-size: clamp(2.7rem, 8vw, 5.8rem); margin: .3rem 0 1.5rem; letter-spacing: -.05em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.lead { font-size: 1.25rem; max-width: 650px; }
.eyebrow { color: var(--fi-cyan-bright); font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
.button { display: inline-block; margin-top: 1rem; padding: .8rem 1.2rem; border-radius: 999px; color: var(--fi-navy); background: var(--fi-cyan-bright); font-weight: 700; }
.button.secondary { color: white; background: var(--fi-navy-soft); }
.activity-card { max-width: 390px; padding: 1.5rem; color: var(--fi-ink); background: white; border: 6px solid var(--fi-navy-soft); border-radius: 20px; box-shadow: 14px 14px 0 var(--fi-cyan); }
.activity-card-top, .spot-summary, .member-row, .card-footer { display: flex; align-items: center; }
.activity-card-top, .spot-summary { justify-content: space-between; gap: 1rem; }
.card-kicker { color: var(--fi-cyan); font-size: .7rem; font-weight: 850; letter-spacing: .13em; }
.status-pill { padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.status-pill.open { color: #315800; background: #e9f7c9; }
.activity-card h2 { margin: 1rem 0 .25rem; font-size: 2rem; }
.activity-meta { margin: 0; color: #546473; font-size: .9rem; }
.spot-summary { margin-top: 1.5rem; }
.spot-summary strong { font-size: 1.15rem; }
.spot-summary span { color: #546473; font-size: .85rem; }
.spot-bar { height: 8px; margin: .65rem 0 1rem; overflow: hidden; border-radius: 999px; background: #e7edf1; }
.spot-bar span { display: block; width: 66%; height: 100%; border-radius: inherit; background: var(--fi-cyan); }
.member-row { gap: .65rem; padding: .55rem 0; border-top: 1px solid #edf1f3; font-size: .88rem; }
.member-row > span:nth-child(2) { flex: 1; }
.member-state { color: var(--fi-cyan); font-size: .75rem; font-weight: 800; }
.muted-row { color: #546473; }
.avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--fi-navy); font-size: .65rem; font-weight: 850; }
.avatar-cyan { background: var(--fi-cyan-bright); }
.avatar-amber { background: var(--fi-amber); }
.avatar-lime { background: var(--fi-lime); }
.card-footer { gap: .5rem; margin-top: 1rem; color: var(--fi-navy-soft); font-size: .78rem; font-weight: 750; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fi-cyan); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.steps article { padding: 1.5rem; background: white; border: 1px solid #e7edf1; border-radius: 20px; }
.steps span { color: var(--fi-cyan); font-weight: 800; }
.callout { text-align: center; }
.callout h2 { margin-top: 0; }
.narrow { max-width: 820px; }
.invite-page { min-height: 65vh; }
@media (max-width: 700px) { .site-header { align-items: flex-start; flex-direction: column; gap: .65rem; } .site-header nav { gap: .8rem; font-size: .9rem; } .hero, .split-section { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .activity-card { max-width: none; box-shadow: 8px 8px 0 var(--fi-cyan); } .page-section { padding: 3.5rem 6vw; } }