/* ============================================================
   EARTHA — app.css
   App UI on the homepage design system:
   Space Mono · ink & cream · batch-number motif
   ============================================================ */

:root {
  --ink: #404139;
  --ink-soft: #23201A;
  --cream: #F0EADD;
  --cream-deep: #EAE2D0;
  --cream-card: #F5F0E5;
  --cream-text: #F2EBDC;
  --text: #1B1815;
  --text-muted: #55503F;
  --line: rgba(23, 20, 15, 0.35);
  --line-strong: rgba(23, 20, 15, 0.6);
  --line-light: rgba(242, 235, 220, 0.35);

  --ok: #4A5D3A;
  --warn: #8A6D2F;
  --bad: #7A3B2E;

  --font-mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --pad-x: clamp(20px, 4vw, 56px);
  --track: 0.08em;
  --track-wide: 0.18em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

body {
  font-family: var(--font-mono);
  background: var(--cream);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.is-loaded { opacity: 1; }

/* no footer/scroll on the auth page — everything fits in one viewport,
   the auth form itself scrolls internally if its content runs long */
body.lock-viewport {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* ---------- motion: scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------- type helpers ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.page-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.6;
}

.heading-sm {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.6;
}

.body-justified {
  text-align: justify;
  text-justify: inter-word;
  color: var(--text-muted);
}

.muted { color: var(--text-muted); }

.link-underline {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.25s ease;
}
.link-underline:hover { opacity: 0.55; }

.img-label {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 11px;
  letter-spacing: var(--track-wide);
  color: rgba(242, 235, 220, 0.85);
}

.img-card {
  position: relative;
  overflow: hidden;
}

.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* unifying 10%-opacity tint over every photo (raw <img> or CSS
   background-image) so the mismatched source photography reads as one
   consistent palette; excludes the logo, which isn't a photo */
img:not([src*="logo"]),
.hero,
.join,
.about-cta,
.auth-visual,
.benefit-image-drop {
  box-shadow: inset 0 0 0 999px rgba(64, 65, 56, 0.1);
}

/* ============================================================
   APP HEADER
   ============================================================ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  background: var(--cream);
  color: var(--text);
  padding: 14px var(--pad-x);
}

.app-header .logo img { height: 18px; width: auto; }

.app-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  margin-left: auto;
}

.app-nav a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  opacity: 0.65;
  transition: opacity 0.25s ease;
  padding: 4px 0;
}

.app-nav a:hover { opacity: 1; }
.app-nav a.is-current { opacity: 1; border-bottom: 1px solid currentColor; }

.logout-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: rgba(27, 24, 21, 0.6);
  transition: color 0.25s ease;
}
.logout-btn:hover { color: var(--text); }

/* hamburger toggle — hidden on desktop, shown at tablet/mobile widths */
.menu-toggle {
  display: none;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before { position: absolute; left: 0; top: -6px; }
.menu-toggle-bars::after { position: absolute; left: 0; top: 6px; }

.app-header.is-menu-open .menu-toggle-bars { background: transparent; }
.app-header.is-menu-open .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.app-header.is-menu-open .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* tablet + mobile nav */
@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }

  .app-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 4px var(--pad-x) 16px;
  }

  .app-header.is-menu-open .app-nav { display: flex; }

  .app-nav a,
  .app-nav .logout-btn {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .app-nav a:last-child,
  .app-nav .logout-btn:last-child { border-bottom: none; }
}

/* ============================================================
   LAYOUT
   ============================================================ */

.page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad-x) clamp(64px, 8vw, 110px);
}

/* breaks a section out of .page's max-width to run edge-to-edge */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.page-head .batch { font-size: 12px; color: var(--text-muted); letter-spacing: var(--track-wide); }

.section-gap { margin-top: clamp(48px, 7vw, 80px); }

/* ============================================================
   FORMS
   ============================================================ */

.field { margin-bottom: 26px; }

.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.field .hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: var(--track);
  outline: none;
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.field select { appearance: none; cursor: pointer; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: "▾";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: var(--text-muted);
}

.field textarea { resize: vertical; min-height: 90px; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(27, 24, 21, 0.35); text-transform: uppercase; font-size: 12px; }

/* radio row */
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }

.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.radio-pill input:checked + span { background: var(--ink); color: var(--cream-text); }
.radio-pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--text-muted);
}
.checkbox-row input { margin-top: 4px; accent-color: var(--ink); }

/* buttons */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--cream-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 13px 28px;
  border: 1px solid var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
  text-align: center;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream-text); }

.btn-sm { padding: 8px 16px; font-size: 11px; }

.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn-block { display: block; width: 100%; }

.form-msg { font-size: 12px; margin-top: 14px; min-height: 1.5em; }
.form-msg.is-error { color: var(--bad); }
.form-msg.is-ok { color: var(--ok); }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.badge-pending   { color: var(--warn); }
.badge-accepted  { color: var(--ok); }
.badge-rejected  { color: var(--bad); }
.badge-dispatched{ color: var(--text-muted); }
.badge-collected { color: var(--text-muted); background: rgba(23,20,15,0.06); }
.badge-completed { color: var(--cream-text); background: var(--ink); border-color: var(--ink); }

/* ============================================================
   CARDS / TABLES / GRIDS
   ============================================================ */

.card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  padding: clamp(18px, 2.5vw, 28px);
}

.card + .card { margin-top: 16px; }

.card-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
}

.thumb-64 {
  width: 64px;
  height: 80px;
  object-fit: cover;
  background: var(--cream-deep);
  flex-shrink: 0;
}

.batch-tag {
  font-size: 11px;
  letter-spacing: var(--track-wide);
  color: var(--text-muted);
}

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-strong);
}

td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* list of benefit rows */
.benefit-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.benefit-row {
  background: var(--cream-card);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background 0.2s ease;
}

.benefit-row:hover { background: var(--cream-deep); }

.benefit-thumb {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--cream-text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  object-fit: cover;
}

.benefit-info { flex: 1; min-width: 0; }

.benefit-brand { font-weight: 700; font-size: 13px; letter-spacing: var(--track-wide); text-transform: uppercase; margin-top: 3px; }
.benefit-cat { font-size: 10px; color: var(--text-muted); letter-spacing: var(--track-wide); text-transform: uppercase; }
.benefit-off { font-size: 16px; font-weight: 700; flex: none; width: 90px; }
.benefit-pts { font-size: 11px; color: var(--text-muted); letter-spacing: var(--track-wide); flex: none; width: 100px; }
.benefit-row .btn { flex: none; }

.benefit-actions { display: flex; gap: 14px; flex-wrap: wrap; flex: none; }

.benefit-row-add {
  border: 1px dashed var(--line-strong);
  border-top: none;
  background: none;
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--text-muted);
  text-align: left;
  transition: all 0.2s ease;
}
.benefit-row-add:hover { color: var(--text); border-color: var(--text); }

.benefit-row-form { align-items: flex-start; flex-direction: column; }

.benefit-image-drop {
  border: 1px solid var(--line-strong);
  transition: opacity 0.2s ease;
}
.benefit-image-drop:hover,
.benefit-image-drop:focus-visible { opacity: 0.8; }

@media (max-width: 720px) {
  .benefit-row { flex-wrap: wrap; }
  .benefit-info { flex-basis: 100%; }
  .benefit-off, .benefit-pts { width: auto; }
  .benefit-actions { width: 100%; }
}

/* filter row */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }

.filter-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 8px 14px;
  color: var(--text-muted);
  transition: all 0.2s ease;
}
.filter-btn:hover { border-color: var(--line-strong); color: var(--text); }
.filter-btn.is-active { background: var(--ink); color: var(--cream-text); border-color: var(--ink); }

/* progress */
.progress {
  height: 4px;
  background: rgba(23,20,15,0.12);
  margin-top: 12px;
}
.progress-bar { height: 100%; background: var(--ink); transition: width 0.5s ease; }

/* tabs */
.tabs {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: clamp(24px, 4vw, 40px);
  overflow-x: auto;
}

.tab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 12px 2px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--ink); }

.tab-count {
  font-size: 10px;
  background: var(--ink);
  color: var(--cream-text);
  padding: 1px 7px;
  margin-left: 6px;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* photo upload */
.photo-drop {
  border: 1px dashed var(--line-strong);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 11px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.photo-drop:hover, .photo-drop.is-over { background: var(--cream-card); }

.photo-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.photo-previews .ph {
  position: relative;
  width: 72px;
  height: 90px;
}
.photo-previews img { width: 100%; height: 100%; object-fit: cover; }
.photo-previews .rm {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: var(--ink);
  color: var(--cream-text);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

/* dialogs */
dialog {
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--text);
  padding: clamp(24px, 4vw, 40px);
  max-width: 440px;
  width: calc(100% - 40px);
  font-family: var(--font-mono);
  letter-spacing: var(--track);
  font-size: 13px;
  margin: auto;
}
dialog::backdrop { background: rgba(23, 20, 15, 0.55); }
dialog .dialog-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: 20px;
}
dialog .dialog-actions { display: flex; gap: 12px; margin-top: 24px; }

/* toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  /* Hidden state needs to clear its own height *plus* the 24px bottom
     offset above. 120% of the box's own height covered that for a tall
     multi-line toast, but this is one short line (~43px) — 20% of that is
     under 9px, nowhere near enough to clear the 24px gap, so a ~15px
     sliver stayed permanently visible at the bottom of the viewport even
     at rest. 100% + a fixed clearance beyond the 24px gap covers any
     height. */
  transform: translate(-50%, calc(100% + 40px));
  background: var(--ink);
  color: var(--cream-text);
  font-size: 11px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 12px 22px;
  z-index: 200;
  transition: transform 0.35s ease;
  max-width: calc(100% - 40px);
  text-align: center;
}
.toast.is-visible { transform: translate(-50%, 0); }

/* auth layout */
.auth-page {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: calc(100vh - 47px);
}

.auth-visual {
  background: url("../images/image-9.68065909bd0e.jpg") center / cover no-repeat;
  position: sticky;
  top: 0;
  height: calc(100vh - 47px);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.auth-switch { display: flex; gap: 24px; margin-bottom: 36px; }

.auth-panel form {
  max-height: 80vh;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  /* stacked layout shouldn't force full-viewport height or vertically
     center a short form in it — that just strands it in empty space */
  body.lock-viewport { height: auto; min-height: 100vh; overflow: visible; }
  .auth-page { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual { position: relative; top: auto; height: 220px; }
  .auth-panel { justify-content: flex-start; padding-top: clamp(32px, 6vw, 56px); }
}

/* drag reorder */
.drag-row { cursor: grab; }
.drag-row.is-dragging { opacity: 0.4; }
.drag-handle { color: var(--text-muted); cursor: grab; user-select: none; padding-right: 10px; }

/* empty state */
.empty {
  border: 1px dashed var(--line);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* about / contact public extras */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.step-num { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.step-title { font-weight: 700; font-size: 13px; letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: 8px; }

.stats-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: var(--ink);
  color: var(--cream-text);
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
}

/* dashboard's stats-band has 4 items instead of about.html's 3 */
.stats-band.stats-band-4 { grid-template-columns: repeat(4, 1fr); }

.stat-num { font-size: clamp(24px, 4vw, 40px); font-weight: 700; }
.stat-label { font-size: 11px; letter-spacing: var(--track-wide); color: rgba(242,235,220,0.7); text-transform: uppercase; margin-top: 6px; }

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.partner-logos span {
  border: 1px solid var(--line);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .steps-grid, .stats-band, .stats-band.stats-band-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */

.hero {
  position: relative;
  /* cover zooms in further as the box gets wider (it's scaled to always fill
     the width), which pushes the bottom-anchored subject up toward the copy;
     the vw term keeps the floor rising with width so wide+short windows
     still clear her, while the px floor/ceiling cover normal desktop sizes */
  min-height: clamp(760px, max(calc(100vh - 54px), 34vw), 960px);
  background:
    linear-gradient(to bottom, rgba(23, 20, 15, 0.14), rgba(23, 20, 15, 0) 30%),
    url("../images/hero-image.709c85a98ac0.jpg") center 80% / cover no-repeat;
  display: flex;
  justify-content: center;
}

.hero-copy {
  text-align: center;
  padding: clamp(48px, 8vh, 96px) var(--pad-x) 0;
  color: var(--cream-text);
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: var(--track-wide);
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  line-height: 1.8;
  margin-bottom: 28px;
}

.hero-sub {
  font-size: 13px;
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 28px;
  color: var(--cream-text);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   HOMEPAGE — SECOND SHAPE
   ============================================================ */

.second-shape {
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
}

.second-shape-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.15fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

.second-shape-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  max-width: 340px;
}

.second-shape-text .link-underline { align-self: flex-start; margin-top: 12px; }

.second-shape .img-card { aspect-ratio: 3 / 4; max-height: 640px; }

/* ============================================================
   HOMEPAGE — WHAT WE ACCEPT
   ============================================================ */

.accept {
  background: var(--cream-deep);
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
}

.accept-header {
  margin-bottom: 36px;
}

/* Infinite right-to-left marquee. main.js clones the card group, so the track
   holds exactly two copies and the strip can wrap by one full group before
   restarting, which reads as a seamless loop. The gap lives on the cards rather
   than the flex container so that a group ends on an exact card boundary.
   The travel is driven by main.js as real scroll position rather than a CSS
   transform — that is what keeps the strip swipeable while it animates, since
   touch and trackpad are then just native scrolling and the loop keeps running
   from wherever the finger left it. Without JS it stays a plain scroller. */
.accept-marquee {
  --accept-gap: clamp(16px, 2vw, 28px);
  margin: 0 calc(var(--pad-x) * -1);
  padding: 0 var(--pad-x);
  overflow-x: auto;
  scrollbar-width: none;
  /* a horizontal overscroll here must not become a back-navigation swipe */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.accept-marquee::-webkit-scrollbar { display: none; }

/* touch swipes come free with the scroller; main.js adds drag for the mouse,
   so say so with the cursor */
.accept-marquee.is-marquee { cursor: grab; }
.accept-marquee.is-grabbing { cursor: grabbing; user-select: none; }

.accept-track,
.accept-group {
  display: flex;
  width: max-content;
}

.accept-card {
  --accept-card-w: clamp(240px, 30vw, 420px);
  flex: 0 0 var(--accept-card-w);
  margin-right: var(--accept-gap);
}

.accept-img {
  /* .accept-track/.accept-group are sized via width:max-content, which
     forces the browser to compute each card's own intrinsic (max-content)
     width. .accept-img's old width:100% is a percentage — indefinite for
     that computation — so Firefox fell back to the raw <img> pixel size
     instead of the card's clamp() above (Chrome doesn't; hence the two
     rendering hundreds of pixels apart from each other). Giving it the same
     definite width as the card removes the ambiguity. */
  width: var(--accept-card-w);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 20px;
}

.accept-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  box-shadow: none;
}

.accept-card:hover .accept-img img { transform: scale(1.03); }

.card-num {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
}

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: var(--track);
  margin-top: 2px;
}

/* ============================================================
   HOMEPAGE — REWARDS
   ============================================================ */

.rewards {
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
}

.rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: center;
}

.rewards .img-card { aspect-ratio: 3 / 4; max-height: 620px; }

.rewards-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 400px;
  justify-self: end;
}

.rewards-text .link-underline { align-self: flex-start; margin-top: 12px; }

/* ============================================================
   HOMEPAGE — BATCH BAND / NEWSLETTER
   ============================================================ */

.batch-band {
  background: var(--ink);
  color: var(--cream-text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  align-items: start;
}

.newsletter { min-width: 380px; }

.batch-num {
  font-size: 12px;
  letter-spacing: var(--track-wide);
}

.batch-copy {
  font-size: 12px;
  letter-spacing: var(--track);
  color: rgba(242, 235, 220, 0.85);
}

.newsletter-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  margin-bottom: 6px;
}

.newsletter-sub {
  font-size: 12px;
  color: rgba(242, 235, 220, 0.75);
  margin-bottom: 22px;
}

.newsletter-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 8px;
}

.newsletter-form input {
  flex: 1;
  background: none;
  border: none;
  color: var(--cream-text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: var(--track-wide);
  outline: none;
}

.newsletter-form input::placeholder { color: rgba(242, 235, 220, 0.55); }

.newsletter-form button {
  font-size: 13px;
  padding-left: 12px;
  transition: transform 0.25s ease;
}

.newsletter-form button:hover { transform: translateX(4px); }

.newsletter-msg {
  font-size: 11px;
  margin-top: 10px;
  min-height: 1.4em;
  color: rgba(242, 235, 220, 0.75);
}

/* ============================================================
   HOMEPAGE — JOIN / PRE-FOOTER
   ============================================================ */

.join {
  position: relative;
  min-height: 92vh;
  background:
    /* the lower scrim has to clear the whole copy stack, not just the CTAs */
    linear-gradient(to bottom, rgba(23, 20, 15, 0.3), rgba(23, 20, 15, 0) 22%, rgba(23, 20, 15, 0) 32%, rgba(23, 20, 15, 0.72)),
    url("../images/image-8.edb7e43e2a49.jpg") center / cover no-repeat;
  color: var(--cream-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: clamp(48px, 7vh, 80px) var(--pad-x);
}

.join-mark {
  width: 22px;
  height: auto;
  margin: 0 auto 20px;
  color: var(--cream-text);
}

.join-follow {
  font-size: 12px;
  letter-spacing: var(--track-wide);
  line-height: 2;
}

.join-headline {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  line-height: 1.8;
  margin-bottom: 18px;
}

.join-copy {
  font-size: 12px;
  letter-spacing: var(--track-wide);
  line-height: 2;
  margin-bottom: 26px;
  max-width: 60ch;
}

/* the two copy lines sit as one stack; only the last one clears the CTAs */
.join-copy:not(:last-of-type) { margin-bottom: 14px; }

.join-links {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   HOMEPAGE — SITE FOOTER
   ============================================================ */

.site-footer {
  background: var(--cream-deep);
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  align-items: start;
}

.footer-brand img { height: 24px; width: auto; margin-bottom: 18px; }

.footer-tag {
  font-size: 11px;
  letter-spacing: var(--track);
  color: var(--text-muted);
  line-height: 1.8;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: clamp(32px, 4vw, 72px);
}

.footer-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: 12px;
  letter-spacing: var(--track);
  color: rgba(27, 24, 21, 0.75);
  padding: 4px 0;
  transition: color 0.25s ease;
}

.footer-col a:hover { color: var(--text); }

/* ============================================================
   ABOUT PAGE — same rhythm as the homepage marketing sections
   ============================================================ */

.about-hero {
  background: var(--cream);
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
}

.about-mission {
  background: var(--cream-deep);
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
}

.about-hero-grid,
.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.15fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

.about-mission-grid { grid-template-columns: 1.15fr 1.15fr 1fr; }

.about-hero-text,
.about-mission-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  max-width: 340px;
}

.about-hero-text .link-underline,
.about-mission-text .link-underline { align-self: flex-start; margin-top: 12px; }

.about-hero-text .heading-sm { font-size: clamp(16px, 2.2vw, 22px); }

.about-hero .img-card,
.about-mission .img-card { aspect-ratio: 3 / 4; max-height: 640px; }

.about-steps,
.about-partners {
  background: var(--cream-deep);
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
}

.about-partners {
  background: var(--cream);
  text-align: center;
}

.about-steps .eyebrow { margin-bottom: 12px; }
.about-steps .heading-sm { margin-bottom: 36px; }
.about-partners .eyebrow { margin-bottom: 20px; }
.about-partners .partner-logos { justify-content: center; }

.about-cta {
  position: relative;
  min-height: 70vh;
  background:
    linear-gradient(to bottom, rgba(23, 20, 15, 0.35), rgba(23, 20, 15, 0.15) 40%, rgba(23, 20, 15, 0.5)),
    url("../images/image-14.b8103807f3f8.jpg") center / cover no-repeat;
  color: var(--cream-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: clamp(48px, 7vh, 80px) var(--pad-x);
}

.about-cta-tag {
  font-size: 12px;
  letter-spacing: var(--track-wide);
  line-height: 2;
}

.about-cta-copy {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 20px;
}

/* ============================================================
   CONTACT PAGE — same rhythm as homepage/about
   ============================================================ */

/* reuses .hero's exact treatment (height logic, gradient, centered copy) —
   only the photo differs, so the contact hero reads as the same component */
.contact-hero-bg {
  background:
    linear-gradient(to bottom, rgba(23, 20, 15, 0.14), rgba(23, 20, 15, 0) 30%),
    url("../images/image-12.33116b5502c9.jpg") center / cover no-repeat;
}

.contact-form-section {
  background: var(--cream-deep);
  padding: clamp(56px, 8vw, 110px) var(--pad-x);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-aside .eyebrow { margin-bottom: 12px; }
.contact-aside .eyebrow ~ .eyebrow { margin-top: 24px; }

.contact-link-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.card-dark {
  background: var(--ink);
  color: var(--cream-text);
  border-color: var(--ink);
}

.card-dark .card-sub { color: rgba(242, 235, 220, 0.8); }

/* ============================================================
   HOMEPAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .second-shape-grid,
  .about-hero-grid,
  .about-mission-grid {
    grid-template-columns: 1fr 1fr;
  }
  .second-shape-text,
  .about-hero-text,
  .about-mission-text {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .rewards-grid { grid-template-columns: 1fr 1fr; }
  .rewards-text {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 520px;
  }
  .batch-band { grid-template-columns: auto 1fr; }
  .newsletter { grid-column: 1 / -1; }

  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero { min-height: 88vh; }

  .second-shape-grid,
  .rewards-grid,
  .about-hero-grid,
  .about-mission-grid,
  .contact-form-grid { grid-template-columns: 1fr; }

  .about-mission-grid .img-card { order: -1; }

  /* narrower cards so more than one is on screen as the marquee runs.
     Overriding --accept-card-w itself, not flex-basis directly — .accept-img
     reads the same variable for its own width, so setting flex-basis alone
     left the image (still sized off the desktop clamp()) out of sync with
     its card box, opening a gap between the image and the next card. */
  .accept-marquee { --accept-gap: 16px; }
  .accept-card { --accept-card-w: min(78vw, 320px); }

  .batch-band { grid-template-columns: 1fr; gap: 28px; }

  .site-footer { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }

  /* wrap instead of relying on an unsigned horizontal scroll — the tab
     bar has no fade/affordance, so overflow just reads as clipped text */
  .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 12px; }
}