:root {
  --cream: #E9E7E0;
  --card: #F7F4ED;
  --hero-bg: #F4EEE4;
  --ink: #172021;
  --ink-2: #4A4842;
  --ink-3: #6C6A63;
  --teal-900: #052F31;
  --teal-800: #073B3D;
  --teal-600: #0B6A6E;
  --teal-500: #0E4648;
  --teal-400: #3E6668;
  --accent: #52D9DF;
  --accent-hover: #7FE6EA;
  --danger: #B3261E;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--teal-800); }
::selection { background: var(--accent); color: var(--teal-800); }

.mono {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wordmark { display: inline-flex; align-items: baseline; font: 900 26px/1 'Archivo Black', Archivo, sans-serif; letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; }
.wordmark span.word { color: var(--teal-800); }
.wordmark.on-dark span.word { color: var(--card); }
.wordmark svg { width: 0.53em; height: 0.79em; margin: 0 0.05em -0.045em; display: inline-block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1.5px solid rgba(7,59,61,.14);
  background: rgba(247,244,237,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .actions { display: flex; align-items: center; gap: 16px; }
.pill {
  font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .18em;
  color: var(--teal-600); border: 1.5px solid rgba(7,59,61,.25);
  background: rgba(247,244,237,.7); padding: 8px 12px; border-radius: 999px;
  white-space: nowrap;
}
.link-cta { font: 700 14px/1 Archivo, sans-serif; color: var(--teal-800); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--hero-bg);
}
.hero-bg {
  position: absolute; top: 0; right: 0; width: 72%; height: 100%;
  object-fit: cover; object-position: 30% 20%; pointer-events: none;
}
.hero-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--hero-bg) 0%, var(--hero-bg) 30%, rgba(244,238,228,.82) 40%, rgba(244,238,228,0) 58%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding: 56px 24px 64px;
  display: grid; grid-template-columns: minmax(0,1fr); gap: 40px;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0,1fr) minmax(0,460px); align-items: center; gap: 64px; padding: 56px 48px 64px; }
}
.hero-copy { position: relative; display: flex; flex-direction: column; gap: 22px; }
.hero-copy h1 {
  margin: 0; font: 900 clamp(38px, 7vw, 76px)/0.9 'Archivo Black', Archivo, sans-serif;
  letter-spacing: -0.03em; color: var(--teal-800);
}
.hero-copy p.lede {
  margin: 0; max-width: 500px; font: 700 clamp(17px, 2.6vw, 24px)/1.4 Archivo, sans-serif; color: var(--teal-500);
}
.status-dot-row { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.status-label { font: 600 13px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--teal-600); }

.hero-card {
  position: relative; background: var(--teal-800); border-radius: 24px; padding: 28px;
  box-shadow: 0 30px 70px rgba(7,59,61,.4);
}

/* ---------- Steps ---------- */
.steps {
  background: var(--teal-800); padding: 64px 24px;
}
.steps h3 {
  margin: 0 0 36px; font: 900 clamp(30px, 5vw, 52px)/1 'Archivo Black', Archivo, sans-serif;
  letter-spacing: -0.025em; color: var(--accent);
}
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 24px; }
.step img { width: 100%; height: 151px; object-fit: cover; border-radius: 14px; display: block; }
.step h4 { margin: 14px 0 8px; font: 900 22px/1 'Archivo Black', Archivo, sans-serif; color: var(--card); }
.step p { margin: 0; font: 400 15px/1.5 Archivo, sans-serif; color: rgba(247,244,237,.75); }

/* ---------- Plan / pricing ---------- */
.plan-section {
  position: relative; overflow: hidden; padding: 64px 24px;
  background: var(--card);
  display: flex; flex-direction: column; gap: 40px;
}
.plan-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; pointer-events: none; opacity: .5; }
.plan-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(247,244,237,.92) 0%, rgba(247,244,237,.8) 38%, rgba(247,244,237,0) 62%), linear-gradient(0deg, rgba(247,244,237,.9) 0%, rgba(247,244,237,0) 38%); }
.plan-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; align-items: center; }
@media (min-width: 900px) { .plan-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; } }
.plan-price { display: flex; align-items: flex-end; gap: 14px; }
.plan-price .amount { font: 900 clamp(56px,10vw,120px)/0.82 'Archivo Black', Archivo, sans-serif; letter-spacing: -.05em; color: var(--teal-800); }
.plan-price .period { font: 900 22px/1 'Archivo Black', Archivo, sans-serif; color: var(--teal-600); padding-bottom: 6px; }
.plan-note { margin: 0; max-width: 460px; font: 400 16px/1.6 Archivo, sans-serif; color: var(--teal-400); }
.plan-tiers { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; }
.tier { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: var(--teal-800); box-shadow: 0 12px 30px rgba(7,59,61,.18); }
.tier .v { font: 900 30px/1 'Archivo Black', Archivo, sans-serif; color: #fff; }
.tier .t { font: 700 14px/1.3 Archivo, sans-serif; color: #fff; }
.tier .d { font: 400 14px/1.5 Archivo, sans-serif; color: #fff; }

.member-card {
  position: relative; width: 100%; max-width: 360px; box-sizing: border-box;
  border-radius: 16px; background: var(--teal-800); padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  box-shadow: 0 30px 60px rgba(7,59,61,.35); transform: rotate(-2deg); overflow: hidden;
}
.member-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; }
.member-card .bottom-row { display: flex; justify-content: space-between; align-items: flex-end; }
.member-card .founding-label { font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .18em; color: var(--accent); }
.member-card .card-num { font: 600 15px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--card); }

.fills-card { background: #fff; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px rgba(7,59,61,.14); max-width: 360px; }
.fills-head { display: flex; justify-content: space-between; align-items: baseline; }
.fills-head .label { font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--teal-600); }
.fills-head .val { font: 900 18px/1 'Archivo Black', Archivo, sans-serif; color: var(--teal-800); }
.fills-grid { display: grid; grid-template-columns: repeat(30, minmax(0,1fr)); gap: 3px; }
.fills-grid .cell { height: 22px; border-radius: 3px; background: rgba(7,59,61,.12); }
.fills-grid .cell.on { background: var(--teal-800); }
.fills-note { margin: 0; font: 400 14px/1.4 Archivo, sans-serif; color: var(--teal-400); }

/* ---------- Building / drinks ---------- */
.build-section {
  position: relative; overflow: hidden; padding: 64px 24px; background: var(--teal-800);
  display: flex; align-items: center;
}
.cups-img { position: absolute; right: -140px; bottom: 0; height: 70%; width: auto; max-width: none; pointer-events: none; display: none; }
@media (min-width: 1100px) { .cups-img { display: block; } }
.build-inner { position: relative; z-index: 1; max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }
.build-inner h3 { margin: 0; font: 900 clamp(34px,6vw,64px)/0.95 'Archivo Black', Archivo, sans-serif; letter-spacing: -.03em; color: var(--card); }
.build-inner h3 .accent { color: var(--accent); }
.build-inner p { margin: 0; max-width: 600px; font: 400 20px/1.5 Archivo, sans-serif; color: var(--card); }
.drink-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 12px; margin-top: 8px; }
.drink-tile { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.drink-tile span { padding: 18px 10px 0; min-height: 46px; font: 900 15px/1.1 'Archivo Black', Archivo, sans-serif; color: var(--teal-800); text-align: center; }
.drink-tile img { position: absolute; left: -4%; bottom: -30px; width: 108%; height: auto; display: block; }
.build-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }

.btn-accent {
  display: inline-flex; align-items: center; gap: 12px; padding: 20px 36px; border-radius: 16px;
  background: var(--accent); color: var(--teal-800); text-decoration: none;
  font: 900 18px/1 'Archivo Black', Archivo, sans-serif; border: none; cursor: pointer;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-dark {
  display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; border-radius: 14px;
  background: var(--teal-800); color: var(--card); text-decoration: none;
  font: 900 15px/1 'Archivo Black', Archivo, sans-serif; border: none; cursor: pointer;
}
.btn-dark:hover { background: var(--teal-600); }
.btn-dark .arrow { color: var(--accent); }

/* ---------- Founding membership teaser ---------- */
.founding-section {
  position: relative; overflow: hidden; padding: 72px 24px; background: var(--card);
  border-top: 1.5px solid rgba(7,59,61,.14);
  display: grid; grid-template-columns: minmax(0,1fr); gap: 48px; align-items: center;
}
@media (min-width: 900px) { .founding-section { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; } }
.founding-section h4 { margin: 0; font: 900 clamp(32px,5.5vw,54px)/0.95 'Archivo Black', Archivo, sans-serif; letter-spacing: -.03em; color: var(--teal-800); }
.founding-section h4 .accent2 { color: var(--teal-600); }
.founding-section p { margin: 0; max-width: 480px; font: 400 18px/1.55 Archivo, sans-serif; color: var(--teal-800); }
.founding-visual { position: relative; height: 260px; display: none; }
@media (min-width: 700px) { .founding-visual { display: block; } }

/* ---------- FAQ ---------- */
.faq-section { position: relative; overflow: hidden; padding: 72px 24px; background: var(--teal-800); }
.faq-section h3 { margin: 0 0 40px; font: 900 clamp(32px,5.5vw,54px)/0.95 'Archivo Black', Archivo, sans-serif; letter-spacing: -.03em; color: var(--card); }
.faq-section h3 .accent { color: var(--accent); }
.faq-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
@media (min-width: 800px) { .faq-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; } }
.faq-item { padding: 24px 0; border-top: 1.5px solid rgba(247,244,237,.18); display: flex; flex-direction: column; gap: 8px; }
.faq-item h4 { margin: 0; font: 900 19px/1.25 'Archivo Black', Archivo, sans-serif; color: var(--card); }
.faq-item p { margin: 0; font: 400 15px/1.6 Archivo, sans-serif; color: #C9DEDC; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 40px 24px; background: var(--teal-900);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.site-footer .tag { font: 400 14px/1.6 Archivo, sans-serif; color: rgba(247,244,237,.6); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font: 400 14px/1 Archivo, sans-serif; }
.footer-links a { color: var(--accent); }

/* ---------- Fountain / signup form ---------- */
.fountain { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; width: 100%; }
.fountain-form { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { font: 600 11px/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.field.on-dark .field-label { color: rgba(247,244,237,.68); }
.field.on-light .field-label { color: rgba(7,59,61,.68); }

.combo-wrap { position: relative; }
.combo-input, .text-input {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px;
  font: 400 16px/1.4 Archivo, sans-serif; outline: none;
}
.combo-input { padding-left: 42px; padding-right: 40px; }
.on-dark .combo-input, .on-dark .text-input { background: rgba(255,255,255,.08); color: #F7F4ED; border: 1.5px solid rgba(247,244,237,.28); }
.on-light .combo-input, .on-light .text-input { background: #fff; color: #073B3D; border: 1.5px solid rgba(7,59,61,.28); }
.combo-input:focus, .text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(82,217,223,.3); }
.combo-dot {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
}
.on-dark .combo-dot.empty { border: 1.5px dashed rgba(247,244,237,.68); }
.on-light .combo-dot.empty { border: 1.5px dashed rgba(7,59,61,.68); }
.combo-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; }
.on-dark .combo-caret { color: rgba(247,244,237,.68); }
.on-light .combo-caret { color: rgba(7,59,61,.68); }

.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 280px; overflow-y: auto; padding: 4px 0 8px; border-radius: 14px;
  box-shadow: 0 20px 40px rgba(7,59,61,.22); display: none;
}
.combo-list.open { display: block; }
.on-dark .combo-list { background: #0B4A4C; border: 1.5px solid rgba(247,244,237,.2); }
.on-light .combo-list { background: #fff; border: 1.5px solid rgba(7,59,61,.14); }
.combo-head { padding: 12px 14px 6px; font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .18em; text-transform: uppercase; }
.on-dark .combo-head { color: rgba(247,244,237,.68); }
.on-light .combo-head { color: rgba(7,59,61,.68); }
.combo-opt {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin: 0 6px;
  border-radius: 10px; cursor: pointer; font: 600 15px/1.2 Archivo, sans-serif;
}
.on-dark .combo-opt { color: #F7F4ED; }
.on-light .combo-opt { color: #073B3D; }
.combo-opt.active { background: var(--accent); color: #073B3D !important; }
.combo-opt .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(127,127,127,.3); flex: 0 0 auto; }
.combo-opt .hint { margin-left: auto; font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.on-dark .combo-opt .hint { color: rgba(247,244,237,.68); }
.on-light .combo-opt .hint { color: rgba(7,59,61,.68); }
.combo-hint { font: 400 13px/1.4 Archivo, sans-serif; }
.on-dark .combo-hint { color: rgba(247,244,237,.68); }
.on-light .combo-hint { color: rgba(7,59,61,.68); }

.form-error { font: 600 13px/1.4 Archivo, sans-serif; color: #ff8a80; }
.on-light .form-error { color: var(--danger); }
.form-fine { margin: 0; font: 400 13px/1.5 Archivo, sans-serif; }
.on-dark .form-fine { color: rgba(247,244,237,.68); }
.on-light .form-fine { color: rgba(7,59,61,.68); }
.on-dark .form-fine a { color: #F7F4ED; }
.on-light .form-fine a { color: #073B3D; }

.done-box { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: #DDF7F6; border: 1.5px solid rgba(82,217,223,.6); }
.done-box h2 { margin: 0; font: 900 30px/0.95 'Archivo Black', Archivo, sans-serif; letter-spacing: -.01em; color: #073B3D; }
.done-box p { margin: 0; font: 400 15px/1.5 Archivo, sans-serif; color: #073B3D; }
.done-box .listnum { font: 700 12px/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600); }

/* honeypot field, hidden from real visitors */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Simple pages (thanks / preferences) ---------- */
.simple-page { max-width: 760px; margin: 0 auto; background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,.08); min-height: 100vh; }
.simple-header { padding: 22px 32px; background: var(--teal-800); }
@media (min-width: 640px) { .simple-header { padding: 22px 56px; } }
.simple-body { padding: 40px 24px 72px; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 640px) { .simple-body { padding: 56px 56px 96px; } }
.simple-body h2 { margin: 0; font: 900 clamp(40px,9vw,72px)/0.9 'Archivo Black', Archivo, sans-serif; letter-spacing: -.03em; color: var(--teal-800); }
.simple-body > p.lede { margin: 0; max-width: 560px; font: 400 18px/1.55 Archivo, sans-serif; color: rgba(7,59,61,.82); }
.badge-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #DDF7F6; align-self: flex-start; flex-wrap: wrap; }
.badge-row .num { font: 700 13px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--teal-600); }
.badge-row .note { font: 400 13px/1 Archivo, sans-serif; color: rgba(7,59,61,.7); }

.survey-card { border: 2px solid rgba(7,59,61,.16); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.survey-card h3 { margin: 0; font: 700 24px/1.25 Archivo, sans-serif; color: var(--teal-800); }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  min-height: 44px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 Archivo, sans-serif; background: transparent; color: var(--teal-800);
  border: 1.5px solid rgba(7,59,61,.3);
}
.chip.selected { background: var(--teal-800); color: var(--card); border-color: var(--teal-800); }

.pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px;
  background: #fff; border: 1.5px solid rgba(7,59,61,.16); border-radius: 14px;
}
.pref-row .meta { display: flex; flex-direction: column; gap: 3px; }
.pref-row .meta .t { font: 700 16px/1.3 Archivo, sans-serif; color: var(--teal-800); }
.pref-row .meta .d { font: 400 14px/1.45 Archivo, sans-serif; color: rgba(7,59,61,.68); }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: rgba(7,59,61,.2); border-radius: 999px; transition: background .15s ease; cursor: pointer; }
.switch input:checked + .track { background: var(--accent); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.switch input:checked + .track .knob { transform: translateX(20px); }

.btn-primary {
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: none; cursor: pointer;
  font: 900 14px/1 'Archivo Black', sans-serif; letter-spacing: .04em; background: var(--accent); color: var(--teal-800);
}
.btn-ghost {
  min-height: 48px; padding: 0 22px; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 Archivo, sans-serif; background: transparent; color: var(--teal-800); border: 1.5px solid rgba(7,59,61,.3);
}
.hr { height: 1.5px; background: rgba(7,59,61,.16); border: none; margin: 0; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
@media (min-width: 700px) { .two-col { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; } }
.contact-box { background: #DDF7F6; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.contact-box .addr { font: 700 17px/1.3 Archivo, sans-serif; color: var(--teal-800); }
.footnote { font: 500 12px/1.5 'IBM Plex Mono', monospace; color: var(--ink-3); }

.status-banner { padding: 16px 20px; border-radius: 14px; font: 600 14px/1.4 Archivo, sans-serif; }
.status-banner.ok { background: #DDF7F6; color: var(--teal-800); }
.status-banner.err { background: #FDF3E3; color: #6B4A0B; border: 1.5px solid rgba(180,120,20,.3); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }