/* ============================================================
   Together — Design System
   Brand-aligned tokens grounded in the logo palette.
   Light-first: marketing, dashboards, supporter flows.
   Dark canvas: creative surface only.
   ============================================================ */

:root {
  /* ---- Brand palette (from the logo) ---- */
  --coral:        #F06A92;
  --coral-soft:   #FADCE7;
  --coral-strong: #D84A78;
  --sky:          #5B9EEE;
  --sky-soft:     #DDEAFA;
  --sky-strong:   #3A7FD4;
  --amber:        #F6A765;
  --amber-soft:   #FBE5CA;
  --plum:         #6B4A8E;
  --plum-soft:    #E5DCEE;

  /* Subtlest possible foreground gradient using your "soft" palette */
    --fg-gradient: linear-gradient(135deg, 
      rgba(250, 220, 231, 0.4) 0%, 
      rgba(221, 234, 250, 0.4) 50%, 
      rgba(229, 220, 238, 0.4) 100%);

  /* ---- Signature gradient — the Together gradient ---- */
  --grad-together:   linear-gradient(135deg, #5B9EEE 0%, #B87ABD 45%, #F06A92 100%);
  --grad-warm:       linear-gradient(135deg, #F06A92 0%, #F6A765 100%);
  --grad-cool:       linear-gradient(135deg, #5B9EEE 0%, #6B4A8E 100%);
  --grad-soft:       linear-gradient(135deg, rgba(91,158,238,0.14) 0%, rgba(240,106,146,0.14) 100%);

  /* ---- Neutrals (warm, not grey) ---- */
  --cream:        #FDF8F4;
  --cream-sunk:   #F6EFE8;
  --ink:          #1A1428;
  --ink-muted:    #6B6277;
  --ink-soft:     #9992A5;
  --line:         #ECE4EE;
  --line-strong:  #DCD1E0;
  --surface:      #FFFFFF;
  --surface-sunk: #FAF5F7;

  /* ---- Canvas (dark) tokens — used on .page-campaign ---- */
  --canvas-bg:    #0F0B1A;
  --canvas-surface: rgba(22, 18, 36, 0.72);
  --canvas-line:  rgba(255, 255, 255, 0.10);
  --canvas-ink:   #F4F0FA;
  --canvas-ink-muted: #B5ADC4;

  /* ---- Type ---- */
  --font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Outfit", var(--font-sans);

  /* ---- Scale ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-xs: 0 1px 2px rgba(26, 20, 40, 0.06);
  --shadow-sm: 0 2px 8px rgba(26, 20, 40, 0.06), 0 1px 2px rgba(26,20,40,0.04);
  --shadow-md: 0 8px 24px rgba(107, 74, 142, 0.10), 0 2px 6px rgba(26,20,40,0.04);
  --shadow-lg: 0 20px 40px rgba(107, 74, 142, 0.14), 0 4px 10px rgba(26,20,40,0.06);
  --shadow-glow-coral: 0 12px 40px rgba(240, 106, 146, 0.30);
  --shadow-glow-sky:   0 12px 40px rgba(91, 158, 238, 0.30);
}

/*===Added styles by Sohail====*/
.container{
  width: 1280px;
  max-width: 1280px;
  padding: 0 30px;
  margin: 0 auto;
}
/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }

/* ============================================================
   Ambient page background — subtle coloured glow
   ============================================================ */

.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 85% 0%, rgba(240, 106, 146, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 20%, rgba(91, 158, 238, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(246, 167, 101, 0.06), transparent 60%),
    var(--cream);
}

/* ============================================================
   Header & nav
   ============================================================ */

/* ── Site masthead: glass, sticky, matches campaign-page chrome ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-6);
  gap: var(--space-4);
  background:var(--surface);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  
  min-height: 64px;
}

/* Brand cluster — mark + wordmark + beta chip. Flexes left. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 10px;
}
.brand-wordmark {
  line-height: 1;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-tag {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral, #F06A92);
  background: rgba(240,106,146,0.1);
  padding: 3px 6px;
  border-radius: 5px;
  margin-left: 2px;
}

/* Primary nav links — icon + label, hover tint, active accent */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out);
  white-space: nowrap;
  position: relative;
}
.nav-link:hover { color: var(--ink); background: var(--surface-sunk); }
.nav-link__icon {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  opacity: 0.85;
}
.nav-link:hover .nav-link__icon { opacity: 1; }

/* Active route: coral tint + subtle underline accent. */
.nav-link.is-active {
  color: var(--coral, #F06A92);
  background: rgba(240,106,146,0.08);
}
.nav-link.is-active .nav-link__icon { opacity: 1; }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral, #F06A92);
}

.nav-link--ghost {
  color: var(--ink-muted);
  font-weight: 500;
}

/* Gradient CTA (New campaign / Get started) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--grad-together);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-glow-coral);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  white-space: nowrap;
}
.nav-cta:hover {
  transform: translateY(-1px);
  color: white;
  box-shadow: 0 14px 32px rgba(240,106,146,0.4);
}
.nav-cta svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── User menu (avatar + dropdown) ────────────────────────── */

.user-menu { position: relative; }

.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  font-family: var(--font-sans);
}
.user-menu__trigger:hover { background: var(--surface-sunk); border-color: var(--line); }
.user-menu.is-open .user-menu__trigger { background: var(--surface-sunk); border-color: var(--line-strong); }

.user-menu__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: uppercase;
  flex: 0 0 auto;
  overflow: hidden;
}
.user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-menu__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__chev {
  width: 14px; height: 14px;
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s var(--ease-out);
}
.user-menu.is-open .user-menu__chev { transform: rotate(180deg); }

.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  z-index: 55;
}
.user-menu.is-open .user-menu__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.user-menu__header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.user-menu__greeting {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.user-menu__user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.user-menu__role {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(184,122,189,0.18), rgba(91,158,238,0.18));
  color: var(--plum, #6B4A8E);
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.user-menu__item:hover { background: var(--surface-sunk); color: var(--ink); }
.user-menu__item svg {
  width: 16px; height: 16px;
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.user-menu__item:hover svg { stroke: var(--coral, #F06A92); }

.user-menu__item--danger { color: var(--coral, #F06A92); }
.user-menu__item--danger svg { stroke: var(--coral, #F06A92); }
.user-menu__item--danger:hover { background: rgba(240,106,146,0.08); color: var(--coral, #F06A92); }

.user-menu__divider {
  height: 1px;
  background: var(--line);
  margin: 4px 8px;
}

.user-menu__form { margin: 0; }

/* Hide entire desktop nav + actions cluster on mobile */
@media (max-width: 860px) {
  .site-nav--desktop { display: none !important; }
  /* Brand stays in full strength on mobile — gradient mark + wordmark.
     Identity > horizontal-space optimisation; the mobile bar was
     reading as empty without these. */
  .site-header { padding: 8px var(--space-3); min-height: 60px; }
  .brand { gap: 8px; font-size: 1.0625rem; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-logo { width: 34px; height: 34px; border-radius: 9px; }
  .brand-tag { font-size: 0.5625rem; padding: 2px 5px; }
}
@media (max-width: 380px) {
  /* Drop the beta chip on truly narrow widths to keep wordmark room. */
  .brand-tag { display: none; }
}
@media (max-width: 320px) {
  /* iPhone SE 1st-gen and similar — only then collapse the wordmark. */
  .brand-wordmark { display: none; }
}

/* ============================================================
   Messages
   ============================================================ */

.site-messages {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-message {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
}
.site-message--success { border-left: 3px solid var(--coral); }
.site-message--info    { border-left: 3px solid var(--sky); }
.site-message--error   { border-left: 3px solid var(--coral-strong); }

/* ============================================================
   Layout
   ============================================================ */

.site-main { min-height: 70vh; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-8); }
.container--narrow { max-width: 780px; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--gradient { background: var(--grad-together); color: white; box-shadow: var(--shadow-glow-coral); }
.btn--gradient:hover { box-shadow: 0 18px 44px rgba(240, 106, 146, 0.38); color: white; }

.btn--coral { background: var(--coral); color: white; box-shadow: var(--shadow-glow-coral); }
.btn--coral:hover { background: var(--coral-strong); color: white; }

.btn--sky { background: var(--sky); color: white; box-shadow: var(--shadow-glow-sky); }
.btn--sky:hover { background: var(--sky-strong); color: white; }

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

.btn--lg { padding: var(--space-4) var(--space-8); font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ============================================================
   Eyebrows, pills
   ============================================================ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-2);
}
.eyebrow--muted { color: var(--ink-soft); }
.eyebrow--on-dark { color: var(--coral); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}
.pill--live { background: var(--coral-soft); color: var(--coral-strong); border-color: transparent; }
.pill--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(240,106,146,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pill--verified { background: var(--sky-soft); color: var(--sky-strong); border-color: transparent; }
.pill--charity { background: var(--plum-soft); color: var(--plum); border-color: transparent; }

/* ============================================================
   Hero (home page + creator landing)
   ============================================================ */
/*===Added styles by Sohail===*/
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* STEP 1: PIXELS AT THE ABSOLUTE BOTTOM */
  .galaxy-container {
    position: absolute;
    inset: 0;
    z-index: 1; /* Lowest index */
    perspective: 1200px;
    pointer-events: none;
  }

  .star-layer {
    position: absolute;
    inset: -50%;
    background-image: 
      radial-gradient(2px 2px at 15% 15%, var(--sky) 100%, transparent 0),
      radial-gradient(1.5px 1.5px at 40% 60%, var(--coral) 100%, transparent 0),
      radial-gradient(2px 2px at 60% 20%, var(--amber) 100%, transparent 0),
      radial-gradient(1.5px 1.5px at 80% 80%, var(--plum) 100%, transparent 0);
    background-size: 250px 250px;
    opacity: 0.6;
    animation: galaxyRotate 80s infinite linear;
  }

  .star-layer.warp {
    background-size: 180px 180px;
    animation: warpSpeed 12s infinite linear;
    opacity: 0.3;
  }

  /* STEP 2: AMBIENT GLOWS JUST ABOVE PIXELS */
  .core-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--plum) 0%, transparent 70%);
    filter: blur(120px);
    opacity: 0.15;
    z-index: 2;
    pointer-events: none;
  }

  /* STEP 3: CURVED FOREGROUND OVERLAY */
  .foreground {
    position: absolute;
    inset: 0;
    background:url('../img/hero-bg.webp') center center no-repeat;
    background-size:cover;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    /* Soft masking for the curved 'lens' effect */
    mask-image: radial-gradient(ellipse 120% 100% at 90% 90%, black 10%, transparent 80%);
  }

  /* Content - Sitting above the movement */
  .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
  }

  .hero-content h1 {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    margin: 0;
    letter-spacing: -2px;
    background: linear-gradient(to bottom, #fff, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(91, 158, 238, 0.3));
  }

  /* Starfield Animations */
  @keyframes galaxyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes warpSpeed {
    0% {
      transform: translateZ(0) scale(1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateZ(500px) scale(1.5);
      opacity: 0;
    }
  }

  /* Ambient center glow */
  .core-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--plum) 0%, transparent 70%);
    filter: blur(100px);
    opacity: 0.2;
    z-index: 0;
  }
/*===Added styles by Sohail===*/
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Mobile hero: tighten everything so the text + ticker grid both fit
   above the fold on a typical phone (375×800-ish). The full hero is
   the brand promise — splitting it across a scroll loses the impact. */
@media (max-width: 860px) {
  .hero { padding: var(--space-5) var(--space-4) var(--space-8); }
  .hero__inner { gap: var(--space-5); }
  .hero__title { margin-bottom: var(--space-3); }
  .hero__lede { font-size: 0.9375rem; margin-bottom: var(--space-4); line-height: 1.45; }
  .hero__actions { gap: 8px; }
  .hero__actions .btn { flex: 1; min-width: 0; }
  /* Tighter stats — keep them visible on mobile but compress. */
  .hero__stats {
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
  }
  .hero__stat-value { font-size: 1.25rem; }
  .hero__stat-label { font-size: 0.625rem; }
  /* Ticker grid: shorter on mobile so it fits under the text without
     pushing the page to scroll. Aspect-ratio swaps from 4:5 (tall)
     to 5:4 (wider, shorter) and a hard max-height keeps it bounded. */
  .hero__visual {
    aspect-ratio: 5 / 4;
    max-height: 56vh;
  }
  .hero__visual-frame { inset: var(--space-4); }
}

@media (max-width: 480px) {
  /* Phone-portrait specifically — every pixel of vertical space matters. */
  .hero { padding: var(--space-4) var(--space-3) var(--space-6); }
  .hero__title { font-size: clamp(1.875rem, 9vw, 2.375rem); }
  .hero__lede { font-size: 0.875rem; }
  .hero__visual { aspect-ratio: 1 / 1; max-height: 50vh; }
  .hero__visual-frame { inset: var(--space-3); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--space-5);
}

.hero__title em {
  font-style: normal;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 1.1875rem;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero__meta {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.hero__meta-item { display: flex; flex-direction: column; gap: var(--space-1); }
.hero__meta-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.hero__meta-label { font-size: 0.8125rem; color: var(--ink-muted); }

/* Hero live-stats strip — three quick proof numbers under the CTA. */
/*==== Added styles by Sohail===*/
.hero__stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.hero__stat-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 560px) {
  .hero__stats { gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); }
  .hero__stat-value { font-size: 1.375rem; }
}

/* ============================================================
   Home page sections — narrative layout
   ============================================================ */

/* Section reveal — fade + lift as each `.reveal` scrolls into view.
   Gets `.is-visible` from the IO in home.html's <script> block. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Section head centring variant + live-dot eyebrow */
.section-head--center {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.section-head--center .section-lede { max-width: 58ch; margin-left: auto; margin-right: auto; }

.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--coral);
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: eyebrowDot 1.8s ease-in-out infinite;
}
@keyframes eyebrowDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(240,106,146,0); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow__dot { animation: none; }
}

/* --- Centered Steps Layout --- */

/* ── Two doors (creator / supporter) ────────────────────────── */

/* Section Background (Context) */
.section--doors {
  background: var(--surface);
  padding: 120px 0;
}

.section--doors {
  background:var(--surface) url('../img/pixel_scattered.webp') center center no-repeat;
  background-size:60%;
  background-attachment: fixed;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.section--doors .section-head{
  align-items: center;
}

/* Glow + Disappear + Reappear */
@keyframes starTwinkleA {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  25% { opacity: 0.8; transform: scale(1.3); }
  50% { opacity: 0.2; }
  75% { opacity: 0.9; }
}

@keyframes starTwinkleB {
  0%, 100% { opacity: 0.1; transform: scale(0.9); }
  30% { opacity: 0.7; transform: scale(1.2); }
  60% { opacity: 0; }
  85% { opacity: 0.6; }
}

/* Movement = new positions illusion */
@keyframes starMoveA {
  from { transform: translate(0, 0); }
  to { transform: translate(-120px, -80px); }
}

@keyframes starMoveB {
  from { transform: translate(0, 0); }
  to { transform: translate(100px, 140px); }
}

/* --- Grid & Layout --- */
.doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 64px auto 0;
  position: relative;
}

@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
}

/* --- The Door Card --- */
.door {
  display: flex;
  flex-direction: column;
  padding: 60px 48px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Rim Light */
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  background:var(--grad-soft);
  pointer-events: none;
}

.door:hover {
  transform: translateY(-12px);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Creator Door - Using the Coral Palette */
.door--creator {
  border: 2px solid rgba(240, 106, 146, 0.3); /* --coral with transparency */
  
}

.door--creator:hover {
  border-color: var(--coral); /* Sharpens to solid coral on hover */
  box-shadow: 0 30px 60px -12px rgba(216, 74, 120, 0.2); /* --coral-strong glow */
}

/* Supporter Door - Using the Sky Palette */
.door--supporter {
  border: 2px solid rgba(91, 158, 238, 0.3); /* --sky with transparency */
  
}

.door--supporter:hover {
  border-color: var(--sky); /* Sharpens to solid sky on hover */
  box-shadow: 0 30px 60px -12px rgba(58, 127, 212, 0.2); /* --sky-strong glow */
}
/* Glow Effects */
.door--creator:hover {
  box-shadow: 0 40px 100px -20px rgba(240, 106, 146, 0.2);
}

.door--supporter:hover {
  box-shadow: 0 40px 100px -20px rgba(91, 158, 238, 0.2);
}

/* --- Elements --- */
.door__eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}

.door--supporter .door__eyebrow {
  color: var(--sky);
}

.door__title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}

.door__lede {
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 40px;
}

.door__list {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-grow: 1;
}

.door__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1rem;
  color:var(--ink);
}

.door__bullet {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--coral);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.door--supporter .door__bullet {
  color: var(--sky);
}

.door:hover .door__bullet {
  background: #FFFFFF;
  color: var(--plum-base);
  transform: scale(1.1) rotate(10deg);
}

.door__cta {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--coral);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.3s ease;
}

.door--supporter .door__cta {
  color: var(--sky);
}

.door:hover .door__cta {
  gap: 18px;
}
/* ── Moments timeline (how it works) ────────────────────────── */
/*====Added styles by Sohail===*/
.section--how{
  padding:150px 0 250px 0;
  background:var(--surface) url('../img/soft-grad.webp') center center no-repeat;
  background-size:cover;
}
.section--how.reveal .section-head{
  align-items: center;
}
/* --- Centered Steps Layout --- */


.moments{
  display:grid;
  grid-template-columns:repeat(4,minmax(280px,1fr));
  gap:34px;

  width:min(1600px,92%);
  margin:100px auto 0;
  padding:20px;

  list-style:none;
  position:relative;
}

/* background glow */
.moments::before{
  content:"";
  position:absolute;
  inset:-10%;

  background:
    radial-gradient(circle at 10% 20%, rgba(255,92,138,.14), transparent 2%),
    radial-gradient(circle at 90% 30%, rgba(95,168,255,.14), transparent 2%),
    radial-gradient(circle at 50% 100%, rgba(176,132,255,.14), transparent 6%);

  filter:blur(10px);
  z-index:-2;
  pointer-events:none;
}

/* =========================================
   CARD
========================================= */

.moments{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* =========================
   CARD BASE (SOBER + CLEAN)
========================= */

.moment{
  --accent: #6b7cff;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  min-height:400px;
  padding:46px 40px;

  border-radius:28px;

  background:var(--surface);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(14px);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.10);

  transition:
    transform .45s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

/* subtle top light only (very restrained) */
.moment::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.06),
      transparent 60%
    );

  pointer-events:none;
}

/* =========================
   ACCENTS (SOFT TINT SYSTEM)
========================= */

.moment:nth-child(1){ --accent:#4f7cff; }
.moment:nth-child(2){ --accent:#d48a3a; }
.moment:nth-child(3){ --accent:#3a9bdc; }
.moment:nth-child(4){ --accent:#8a6cff; }

/* =========================
   NUMBER (MINIMAL + CONTROLLED)
========================= */

.moment__num{
  width:64px;
  height:64px;

  display:grid;
  place-items:center;

  margin-bottom:28px;

  border-radius:16px;

  font-size:1.05rem;
  font-weight:700;

  color:#fff;

  background:var(--accent);

  border:1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 6px 14px rgba(0,0,0,0.12);
}

/* =========================
   TITLE (TYPOGRAPHY FIRST)
========================= */

.moment__title{
  font-size:1.6rem;
  line-height:1.2;

  font-weight:700;

  color:var(--accent);

  margin-bottom:14px;

  letter-spacing:-0.02em;
}

/* subtle accent line */
.moment__title::after{
  content:"";
  display:block;

  width:42px;
  height:2px;

  margin-top:12px;

  border-radius:999px;

  background: var(--accent);

  opacity:.6;

  transition: width .3s ease, opacity .3s ease;
}

/* =========================
   BODY (READABILITY FIRST)
========================= */

.moment__body{
  margin-top:auto;

  font-size:1rem;
  line-height:1.75;

  color:var(--ink);
}

/* =========================
   HOVER (VERY SUBTLE)
========================= */

.moment:hover{
  transform: translateY(-6px);

  border-color: rgba(255,255,255,0.14);

  box-shadow:
    0 12px 28px rgba(0,0,0,0.14);
}

.moment:hover .moment__title::after{
  width:64px;
  opacity:.9;
}

/* soften surrounding cards slightly */
.moments:hover .moment:not(:hover){
  opacity:.75;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1100px){
  .moments{
    grid-template-columns:repeat(2,1fr);
  }
  /*--Added styles by Sohail--*/
  .container{
    width: 98%;
  }
  .hero{
    height: 80vh;
    
  }
  .foreground{
    background-position: 0 -20vh;
  }
  .doors{
    max-width: 100%;
    display: block;
  }
  .door--creator{
    margin: 0 0 25px 0;
  }
  .section--how{
    padding: 100px 0 200px 0;
  }
}
@media (min-width:767px) and (max-width: 992px){
  .hero{
    height: 100vh;
  }
  .hero,{
    text-align: center;
  }
  .hero__stats{
    justify-content: center;
  }

  .foreground{
    background-position: center center;
  }
  .hero__visual{
    width: 80%;
    margin: 0 auto;
    min-height: auto;
  }
}
@media (max-width:767px){
  .moments{
    grid-template-columns:1fr;
  }

  .moment{
    min-height:auto;
    padding:34px 28px;
  }

  .moment__title{
    font-size:1.4rem;
  }
  .hero{
    height: 90vh;
  }
  .hero{
    text-align: center;
  }
  .hero__stats{
    justify-content: center;
  }

  .foreground{
    background-position: 0 -10vh;
  }
  .hero__visual{
    width: 80%;
    margin: 0 auto;
    min-height: auto;
  }
  .site-footer{
    text-align: left !important;
  }
}
/* ── Capabilities grid ──────────────────────────────────────── */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 60px auto 0;
}

/* CARD */
.capability {
  position: relative;
  padding: 28px;
  background:var(--grad-soft);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  transition: all 0.25s ease;
  overflow: hidden;
}

/* subtle gradient glow border */
.capability::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240,106,146,0.35), rgba(91,158,238,0.25), rgba(212,133,54,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: 0.25s ease;
}

.capability:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.capability:hover::before {
  opacity: 1;
}

/* ICON */
.capability__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(240,106,146,0.10), rgba(91,158,238,0.08));
}
/* SVG ICON STYLE */
.capability__icon svg{
  width: 32px;
  height: 32px;
}

/* TYPOGRAPHY */
.capability__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.capability__body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.62);
}

/* ICON COLORS */
.capability__icon--hex { color: var(--plum); }
.capability__icon--live { color: var(--coral); }
.capability__icon--star { color: #D48536; }
.capability__icon--zone { color: var(--sky); }
.capability__icon--heart { color: var(--coral); }
.capability__icon--verified { color: var(--sky-strong); }

/* RESPONSIVE */
@media (max-width: 860px) {
  .capabilities { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .capabilities { grid-template-columns: 1fr; }
}


/*=== Added styles by sohail===*/
.section--empty{
  display: none;
}
.section--features{
  background: var(--surface);
}
.section--features .section-head{
  align-items: center;
}

/* ── Causes grid ────────────────────────────────────────────── */

.causes-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-8) auto 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.cause-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.cause-chip:hover {
  border-color: var(--coral);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(240, 106, 146, 0.12);
}
.cause-chip__mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184,122,189,0.2), rgba(91,158,238,0.2));
  color: var(--plum);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  flex: 0 0 auto;
}
.cause-chip__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Finale CTA block ───────────────────────────────────────── */
.section--finale{
  background: var(--surface);
}
.finale {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.finale__inner {
  position: relative;
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-xl);
  background:var(--fg-gradient);
  border: 1px solid rgba(240,106,146,0.18);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(240,106,146,0.14);
}
.finale__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.finale__lede {
  font-size: 1.125rem;
  color: var(--ink);
  max-width: 50ch;
  margin: 0 auto var(--space-6);
  line-height: 1.5;
}
.finale__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .finale__inner { padding: var(--space-8) var(--space-5); }
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.hero__visual-frame {
  position: absolute;
  inset: var(--space-6);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__visual-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.hero__visual-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.hero__visual-canvas { flex: 1; padding: var(--space-4); background: var(--cream-sunk); position: relative; }

.hero__visual-grid {
  position: absolute;
  inset: var(--space-4);
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(24, 1fr);
  gap: 2px;
}

.hero__visual-pixel {
  background: white;
  border-radius: 2px;
  will-change: transform;
  transform-origin: center;
}

.hero__visual-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
}
.hero__visual-toast-emoji { margin-right: 6px; }

/* ── Ambient floating pixels (behind the frame) ───────────── */
.hero__visual-float {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.hero__visual-float-pixel {
  position: absolute;
  display: block;
  border-radius: 2px;
  opacity: 0;
  filter: blur(0.4px);
  will-change: transform, opacity;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual-float { display: none; }
}

/* ── Centered CTA pill (Enter the wall) ───────────────────── */
.hero__visual-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow:
    0 10px 30px rgba(240,106,146,0.28),
    0 4px 12px rgba(91,158,238,0.22),
    0 0 0 1px rgba(15,23,42,0.04);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  transition:
    transform 0.25s cubic-bezier(.2,.9,.3,1),
    box-shadow 0.25s ease,
    background 0.25s ease;
  overflow: visible;
  min-height: 44px;  /* comfortable tap target */
}

/* Gradient glow ring that breathes behind the pill */
.hero__visual-cta::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: var(--grad-together, linear-gradient(135deg,#F06A92,#B87ABD,#5B9EEE));
  z-index: -1;
  filter: blur(14px);
  opacity: 0.55;
  animation: heroCtaBreathe 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroCtaBreathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.06); }
}

.hero__visual-cta__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral, #F06A92);
  box-shadow: 0 0 0 0 rgba(240,106,146,0.55);
  animation: heroCtaDot 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes heroCtaDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(240,106,146,0);  }
}

.hero__visual-cta__label { line-height: 1; }
.hero__visual-cta__arrow {
  line-height: 1;
  font-size: 1.05rem;
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1);
}

.hero__visual-cta:hover,
.hero__visual-cta:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: #ffffff;
  box-shadow:
    0 16px 40px rgba(240,106,146,0.38),
    0 6px 18px rgba(91,158,238,0.3),
    0 0 0 1px rgba(15,23,42,0.05);
  outline: none;
}
.hero__visual-cta:hover .hero__visual-cta__arrow,
.hero__visual-cta:focus-visible .hero__visual-cta__arrow {
  transform: translateX(4px);
}
.hero__visual-cta:active {
  transform: translate(-50%, -50%) scale(0.98);
}
.hero__visual-cta:focus-visible {
  outline: 2px solid var(--coral, #F06A92);
  outline-offset: 3px;
}

/* ── Mobile tuning ─────────────────────────────────────────── */
@media (max-width: 560px) {
  .hero__visual-cta {
    padding: 10px 16px;
    font-size: 0.875rem;
    gap: 8px;
  }
  .hero__visual-cta::before { inset: -4px; filter: blur(10px); }
}
@media (max-width: 360px) {
  .hero__visual-cta__label { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual-cta::before,
  .hero__visual-cta__dot { animation: none; }
  .hero__visual-cta,
  .hero__visual-cta__arrow { transition: none; }
}

@media (max-width: 480px) {
  .hero__visual-toast { display: none; }  /* keep very small screens uncluttered */
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual-pixel { will-change: auto; }
  .hero__visual-toast { display: none; }
}

.hero__visual-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__visual-progress {
  flex: 1;
  height: 6px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hero__visual-progress-fill {
  height: 100%; width: 38%;
  background: var(--grad-together);
  border-radius: var(--radius-pill);
  transition: width 0.7s cubic-bezier(.2,.9,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual-progress-fill { transition: none; }
}
.hero__visual-percent { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }

.hero__visual::before, .hero__visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  pointer-events: none;
}
.hero__visual::before { top: -40px; right: -40px; width: 220px; height: 220px; background: var(--coral); }
.hero__visual::after  { bottom: -40px; left: -40px; width: 220px; height: 220px; background: var(--sky); }

/* ============================================================
   Section — generic
   ============================================================ */

.section { padding: var(--space-16);}
.section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-lede { color: var(--ink); font-size: 1.0625rem; max-width: 60ch; margin-top: var(--space-2); }

/* ============================================================
   Campaign cards (grid)
   ============================================================ */

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* ── Wall card — every card is a snapshot of a live wall ─────── */

.wall-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.3s cubic-bezier(.2,.7,.2,1),
    border-color 0.3s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
}
.wall-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  border-color: var(--line-strong);
}

.wall-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ── Thumbnail: actual server-rendered z=0 wall preview ─── */

.wall-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #FBF5EE, #F5EBE7);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.wall-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;        /* keep the wall's chunky look */
  image-rendering: crisp-edges;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.wall-card:hover .wall-card__thumb-img {
  transform: scale(1.03);
}

/* "Live" badge — top right, glass pill with pulsing coral dot */
.wall-card__live {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
.wall-card__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: wallCardLiveDot 1.8s ease-in-out infinite;
}
.wall-card:hover .wall-card__live-dot {
  animation-duration: 0.9s;
}
@keyframes wallCardLiveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(240,106,146,0); }
}

/* Momentum chip — bottom left, glass pill with coral pulse */
.wall-card__momentum {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
  font-variant-numeric: tabular-nums;
}
.wall-card__momentum-pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
  animation: wallCardLiveDot 1.8s ease-in-out infinite;
}

/* ── Body ──────────────────────────────────────────────── */

.wall-card__body {
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

/* Identity strip: avatar + creator handle + cause */
.wall-card__identity {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  min-width: 0;
  margin-bottom: 2px;
}
.wall-card__avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  flex: 0 0 auto;
  overflow: hidden;
  margin-right: 2px;
}
.wall-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wall-card__creator {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-card__sep {
  color: var(--ink-soft, rgba(15,23,42,0.35));
  flex: 0 0 auto;
}
.wall-card__cause {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wall-card__verified {
  display: inline-block;
  margin-left: 3px;
  color: var(--sky-strong, #3D7ED0);
  font-weight: 700;
  font-size: 0.75rem;
}

/* Title + tagline */
.wall-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.wall-card__tagline {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.4;
  margin: 0;
  /* clamp to 1 line so cards stay rhythmic */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress */
.wall-card__progress {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.wall-card__bar {
  height: 4px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.wall-card__fill {
  height: 100%;
  background: var(--grad-together);
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out);
}
.wall-card__numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  color: var(--ink-muted);
  gap: 8px;
}
.wall-card__count strong {
  color: var(--ink);
  font-weight: 700;
}
.wall-card__count-sep,
.wall-card__count-unit {
  opacity: 0.7;
}
.wall-card__pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* CTA */
.wall-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--coral);
  letter-spacing: 0.005em;
}
.wall-card__cta-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.wall-card:hover .wall-card__cta-arrow {
  transform: translateX(4px);
}

/* ── State variants ──────────────────────────────────────── */

/* Just launched — softer coral border glow + special CTA copy */
.wall-card.is-fresh {
  border-color: rgba(240, 106, 146, 0.3);
  box-shadow: 0 0 0 1px rgba(240,106,146,0.12), var(--shadow-sm);
}
.wall-card.is-fresh:hover {
  box-shadow: 0 0 0 1px rgba(240,106,146,0.22), 0 18px 40px rgba(240,106,146,0.18);
}
.wall-card.is-fresh .wall-card__cta { color: var(--coral); }

/* Almost there — amber accent + bar urgency */
.wall-card.is-almost {
  border-color: rgba(246, 167, 101, 0.45);
}
.wall-card.is-almost:hover {
  box-shadow: 0 0 0 1px rgba(246,167,101,0.3), 0 18px 40px rgba(246,167,101,0.18);
}
.wall-card.is-almost .wall-card__cta {
  color: var(--amber, #D48536);
}
.wall-card.is-almost .wall-card__live { color: var(--amber, #D48536); }
.wall-card.is-almost .wall-card__live-dot { background: var(--amber, #D48536); }

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wall-card,
  .wall-card__thumb-img,
  .wall-card__cta-arrow {
    transition: none;
  }
  .wall-card:hover { transform: none; }
  .wall-card:hover .wall-card__thumb-img { transform: none; }
  .wall-card__live-dot,
  .wall-card__momentum-pulse { animation: none; }
}

/* ── Mobile tuning ──────────────────────────────────────── */

@media (max-width: 560px) {
  .wall-card__thumb { aspect-ratio: 16 / 9; }
  .wall-card__body { padding: var(--space-3) var(--space-3) var(--space-3); gap: 6px; }
  .wall-card__title { font-size: 1.0625rem; }
  .wall-card__tagline { display: none; }
  .wall-card__count-unit { display: none; }
  .wall-card__live { top: 8px; right: 8px; padding: 3px 8px 3px 6px; }
  .wall-card__momentum { left: 8px; bottom: 8px; padding: 4px 8px 4px 7px; font-size: 0.625rem; }
}

.campaign-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.campaign-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.campaign-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-together);
  opacity: 0.8;
}

.campaign-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.campaign-card__creator { font-size: 0.875rem; font-weight: 600; color: var(--plum); }

.card-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.card-title a { color: inherit; }
.card-title a:hover { color: var(--plum); }

.card-tagline {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-5);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.card-cause { font-size: 0.8125rem; color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-1); }
.card-cause strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   Progress bar
   ============================================================ */

.progress-bar {
  position: relative;
  height: 8px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--space-3) 0 var(--space-2);
}

.progress-bar--card { height: 6px; }

.progress-bar__fill {
  position: absolute;
  inset: 0;
  right: auto;
  background: var(--grad-together);
  border-radius: var(--radius-pill);
  transition: width 0.8s var(--ease-out);
}

.progress-bar__shine {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shine 2.5s infinite;
}

@keyframes shine { 0% { transform: translateX(-30px); } 100% { transform: translateX(400px); } }

/* ============================================================
   Discover page
   ============================================================ */

/* ── Hero pulse banner ────────────────────────────────────── */

.discover-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-6);
  position: relative;
}
@media (max-width: 680px) {
  .discover-hero { padding: var(--space-6) var(--space-4) var(--space-4); }
}

.discover-hero__inner {
  max-width: 800px;
}

.discover-hero__pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(240, 106, 146, 0.08);
  border: 1px solid rgba(240, 106, 146, 0.22);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-5);
}
.discover-hero__pulse strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--coral);
}
.discover-hero__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  animation: discoverHeroDot 1.8s ease-in-out infinite;
}
@keyframes discoverHeroDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(240,106,146,0); }
}
@media (prefers-reduced-motion: reduce) {
  .discover-hero__dot { animation: none; }
}

.discover-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.discover-hero__title em {
  font-style: normal;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.discover-hero__lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
  max-width: 56ch;
}
.discover-hero__clear {
  margin-left: var(--space-2);
  font-weight: 700;
  color: var(--coral);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s var(--ease-out);
}
.discover-hero__clear:hover { border-bottom-color: var(--coral); color: var(--coral); }

/* ── Featured wall (editor's pick) ──────────────────────── */

.section--featured {
  padding-top: 0;
  padding-bottom: var(--space-6);
}

.featured-wall {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(240, 106, 146, 0.22);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(240,106,146,0.06),
    0 24px 50px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.featured-wall:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 4px rgba(240,106,146,0.12),
    0 28px 60px rgba(240, 106, 146, 0.16);
}

.featured-wall__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-5);
  background: linear-gradient(90deg, rgba(240,106,146,0.1), rgba(91,158,238,0.06));
  border-bottom: 1px solid rgba(240, 106, 146, 0.18);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}
.featured-wall__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: discoverHeroDot 1.8s ease-in-out infinite;
}

.featured-wall__link {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 860px) {
  .featured-wall__link { grid-template-columns: 1fr; }
}

.featured-wall__thumb {
  position: relative;
  min-height: 320px;
  background: linear-gradient(135deg, #FBF5EE, #F5EBE7);
  overflow: hidden;
  border-right: 1px solid var(--line);
}
@media (max-width: 860px) {
  .featured-wall__thumb {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}
.featured-wall__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.featured-wall:hover .featured-wall__thumb-img { transform: scale(1.02); }

.featured-wall__live {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
.featured-wall__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  animation: discoverHeroDot 1.8s ease-in-out infinite;
}

.featured-wall__momentum {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(15,23,42,0.12);
  font-variant-numeric: tabular-nums;
}
.featured-wall__momentum-pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
  animation: discoverHeroDot 1.8s ease-in-out infinite;
}

.featured-wall__body {
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.featured-wall__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink-muted);
  min-width: 0;
}
.featured-wall__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;
}
.featured-wall__avatar img { width: 100%; height: 100%; object-fit: cover; }
.featured-wall__creator {
  font-weight: 700;
  color: var(--ink);
}
.featured-wall__sep { color: var(--ink-soft, rgba(15,23,42,0.35)); }
.featured-wall__verified {
  margin-left: 4px;
  color: var(--sky-strong, #3D7ED0);
  font-weight: 700;
}

.featured-wall__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.featured-wall__tagline {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-wall__progress {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.featured-wall__bar {
  height: 6px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.featured-wall__fill {
  height: 100%;
  background: var(--grad-together);
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out);
}
.featured-wall__numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.featured-wall__count strong {
  color: var(--ink);
  font-weight: 700;
}
.featured-wall__count-sep { opacity: 0.6; margin: 0 2px; }
.featured-wall__pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.featured-wall__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--grad-together);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  align-self: flex-start;
  box-shadow: var(--shadow-glow-coral);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.featured-wall:hover .featured-wall__cta {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(240,106,146,0.4);
}
.featured-wall__cta-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.featured-wall:hover .featured-wall__cta-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .featured-wall,
  .featured-wall__thumb-img,
  .featured-wall__cta,
  .featured-wall__cta-arrow { transition: none; }
  .featured-wall:hover { transform: none; }
  .featured-wall:hover .featured-wall__thumb-img { transform: none; }
  .featured-wall:hover .featured-wall__cta-arrow { transform: none; }
  .featured-wall__live-dot,
  .featured-wall__momentum-pulse,
  .featured-wall__eyebrow-dot { animation: none; }
}

/* ── Sort chips ────────────────────────────────────────── */

.sort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-6);
}
.sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  transition: border-color 0.18s var(--ease-out), background 0.18s, color 0.18s, box-shadow 0.18s;
  text-decoration: none;
}
.sort-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.sort-chip__icon { font-size: 0.9375rem; line-height: 1; }
.sort-chip.is-active {
  background: var(--grad-together);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow-coral);
}
.sort-chip.is-active:hover { color: white; }

/* ── Cause spotlight ───────────────────────────────────── */

.section--causes-spotlight { padding-top: var(--space-6); }

.cause-spotlight {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .cause-spotlight {
    grid-template-columns: 1fr;
  }
}

.cause-spotlight__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.cause-spotlight__chip:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(240,106,146,0.14);
}
.cause-spotlight__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184,122,189,0.22), rgba(91,158,238,0.22));
  color: var(--plum);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
.cause-spotlight__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cause-spotlight__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cause-spotlight__count {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.cause-spotlight__arrow {
  color: var(--ink-muted);
  font-weight: 700;
  transition: transform 0.18s var(--ease-out), color 0.18s;
}
.cause-spotlight__chip:hover .cause-spotlight__arrow {
  color: var(--coral);
  transform: translateX(3px);
}

/* ── Discover footer CTA ───────────────────────────────── */

.section--discover-cta { padding-bottom: var(--space-12); }

.discover-cta {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%, rgba(240,106,146,0.20), transparent 60%),
    radial-gradient(ellipse 60% 70% at 20% 80%, rgba(91,158,238,0.20), transparent 60%),
    linear-gradient(135deg, #FFF4F1, #F2EFFA);
  border: 1px solid rgba(240,106,146,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  box-shadow: 0 18px 44px rgba(240,106,146,0.10);
}
@media (max-width: 680px) {
  .discover-cta { padding: var(--space-6) var(--space-5); flex-direction: column; align-items: flex-start; }
}
.discover-cta__body { flex: 1; min-width: 280px; }
.discover-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 8px;
}
.discover-cta__lede {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}
.discover-cta__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Discover empty state ──────────────────────────────── */

.discover-empty {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  color: var(--ink-muted);
  background: var(--surface);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin: 0 auto;
}
.discover-empty p { margin: 0 0 8px; }
.discover-empty p:last-child { margin-bottom: 0; }
.discover-empty a {
  color: var(--coral);
  font-weight: 700;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s;
}
.discover-empty a:hover { border-bottom-color: var(--coral); }
.discover-empty--full { padding: var(--space-12) var(--space-6); }

/* ============================================================
   Empty state
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--ink-muted);
  background: var(--surface);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.empty-state a { color: var(--coral-strong); font-weight: 600; border-bottom: 1.5px solid currentColor; }
.empty-state code { background: var(--surface-sunk); padding: 2px 8px; border-radius: 4px; font-size: 0.875em; }

/* ============================================================
   Forms (light surfaces)
   ============================================================ */

.form-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

.form-card__header { text-align: center; margin-bottom: var(--space-8); }
.form-card__title { font-size: 1.875rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.form-card__lede { color: var(--ink-muted); }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field__label { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.form-field__help { font-size: 0.8125rem; color: var(--ink-muted); }
.form-field__error { font-size: 0.8125rem; color: var(--coral-strong); font-weight: 500; }

.auth-input,
.form-input,
input[type="text"].auth-input,
input[type="email"].auth-input,
input[type="password"].auth-input,
input[type="number"].auth-input,
textarea.auth-input,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="number"].form-input,
input[type="url"].form-input,
textarea.form-input,
select.form-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.auth-input:focus,
.form-input:focus,
textarea.auth-input:focus,
textarea.form-input:focus {
  outline: none;
  border-color: var(--sky);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(91, 158, 238, 0.15);
}

textarea.auth-input, textarea.form-input { resize: vertical; min-height: 100px; }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--space-5);
  transition: background 0.2s var(--ease-out);
}
.form-checkbox:hover { background: var(--cream-sunk); }

.auth-checkbox, .form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--coral);
  cursor: pointer;
}

.form-checkbox__body { flex: 1; font-size: 0.9375rem; color: var(--ink); }
.form-checkbox__hint { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.form-footer__aside { font-size: 0.9375rem; color: var(--ink-muted); }
.form-footer__aside a { color: var(--coral-strong); font-weight: 600; }

/* ============================================================
   Auth pages
   ============================================================ */

.auth-wrap {
  max-width: 480px;
  margin: var(--space-10) auto var(--space-16);
  padding: 0 var(--space-5);
}

.auth-role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  background: var(--surface-sunk);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
}

.auth-role-toggle__btn {
  padding: var(--space-3);
  text-align: center;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-decoration: none;
  display: inline-block;
}

.auth-role-toggle__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ============================================================
   Wizard (creator onboarding)
   ============================================================ */

.wizard {
  max-width: 1080px;
  margin: var(--space-8) auto var(--space-16);
  padding: 0 var(--space-6);
}

.wizard__header { text-align: center; margin-bottom: var(--space-10); }

.wizard__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-2);
}

.wizard__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.wizard__lede { color: var(--ink-muted); font-size: 1.0625rem; max-width: 54ch; margin: 0 auto; }

.wizard__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.wizard__step { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: 0.875rem; font-weight: 500; }

.wizard__step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.wizard__step.is-done .wizard__step-dot { background: var(--grad-together); border-color: transparent; color: white; }
.wizard__step.is-active { color: var(--ink); font-weight: 600; }
.wizard__step.is-active .wizard__step-dot { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.wizard__step-bar { width: 40px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.wizard__step.is-done + .wizard__step-bar { background: var(--grad-together); }

.wizard__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .wizard__body { grid-template-columns: 1fr; } }

.wizard__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.wizard__preview { position: sticky; top: var(--space-8); }

/* ============================================================
   Tier picker — wizard step 1 (Basic vs Advanced)
   ============================================================ */

.tier-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-2);
}
@media (max-width: 680px) {
  .tier-picker { grid-template-columns: 1fr; }
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  min-height: 180px;
}
.tier-card:hover { border-color: var(--sky); background: var(--sky-soft); }
.tier-card.is-selected {
  border-color: var(--coral);
  background: var(--coral-soft);
  box-shadow: 0 0 0 3px rgba(240,106,146,0.18);
}

/* The actual radio input is hidden — the whole card is the click target. */
.tier-card__radio { position: absolute; opacity: 0; pointer-events: none; }

.tier-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tier-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--grad-together, linear-gradient(135deg,#F06A92,#B87ABD,#5B9EEE));
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tier-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}

.tier-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.tier-card__list li {
  position: relative;
  padding-left: 18px;
}
.tier-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--coral);
  font-weight: 700;
}

.tier-card__note {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   Cause selector
   ============================================================ */

.cause-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-2);
  margin: 0 -2px;
}

.cause-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.cause-card:hover { border-color: var(--sky); background: var(--sky-soft); }
.cause-card.is-selected { border-color: var(--coral); background: var(--coral-soft); box-shadow: 0 0 0 3px rgba(240,106,146,0.15); }

.cause-card__logo {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  object-fit: contain;
  flex-shrink: 0;
  padding: var(--space-1);
  display: grid;
  place-items: center;
  color: var(--plum);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.cause-card__body { flex: 1; min-width: 0; }

.cause-card__name {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cause-card__summary {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================================
   Goal picker (presets)
   ============================================================ */

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.goal-chip {
  padding: var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: inherit;
}

.goal-chip__amount { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.goal-chip__hint { font-size: 0.75rem; color: var(--ink-muted); margin-top: 2px; }

.goal-chip:hover { border-color: var(--sky); }
.goal-chip.is-selected { border-color: var(--coral); background: var(--coral-soft); }

/* ============================================================
   Milestone editor cards
   ============================================================ */

.milestone-editor { display: flex; flex-direction: column; gap: var(--space-3); }

.milestone-edit-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.milestone-edit-card__badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.milestone-edit-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

.milestone-edit-card__title-input {
  font-weight: 600;
  font-size: 1rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  color: var(--ink);
}
.milestone-edit-card__title-input:focus { outline: none; border-color: var(--sky); }

.milestone-edit-card__desc {
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 56px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.milestone-edit-card__desc:focus { outline: none; border-color: var(--sky); }

/* ============================================================
   Preview mini-card (wizard right column)
   ============================================================ */

.preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.preview-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-together);
}

.preview-card__eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: var(--space-3);
}

.preview-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-2);
  min-height: 1.2em;
}

.preview-card__tagline { color: var(--ink-muted); font-size: 0.9375rem; margin-bottom: var(--space-5); min-height: 1.5em; }
.preview-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--ink-muted); }

.preview-canvas {
  margin-top: var(--space-4);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--cream-sunk);
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}

.preview-canvas__grid {
  position: absolute;
  inset: var(--space-3);
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 2px;
}

.preview-canvas__pixel { background: white; border-radius: 2px; }

/* ============================================================
   Studio / dashboard
   ============================================================ */

.studio { max-width: 1280px; margin: 0 auto; padding: var(--space-8); }

.studio__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.studio__title { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.studio__subtitle { color: var(--ink-muted); margin-top: var(--space-1); }

.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }

.studio-campaign-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.studio-campaign-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.studio-campaign-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.studio-campaign-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.studio-campaign-card__tagline { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.4; margin-bottom: var(--space-4); }

.studio-campaign-card__stats {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--space-4) 0;
}

.studio-stat__value { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.studio-stat__label { font-size: 0.75rem; color: var(--ink-muted); letter-spacing: 0.05em; text-transform: uppercase; }

.studio-campaign-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.studio-campaign-card__action {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-decoration: none;
}

.studio-campaign-card__action:hover { background: var(--ink); color: var(--cream); }
.studio-campaign-card__action--primary { background: var(--ink); color: var(--cream); }
.studio-campaign-card__action--primary:hover { background: var(--plum); }

.studio-empty {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  border: 1px solid var(--line);
}

.studio-empty__icon {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--grad-soft);
  display: grid;
  place-items: center;
  font-size: 2.5rem;
}

.studio-empty__title { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.studio-empty__lede { color: var(--ink-muted); max-width: 44ch; margin: 0 auto var(--space-6); }

/* ============================================================
   Share kit
   ============================================================ */

.sharekit { max-width: 1080px; margin: 0 auto; padding: var(--space-8); }

.sharekit__celebrate {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--grad-soft);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}

.sharekit__celebrate::before, .sharekit__celebrate::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.sharekit__celebrate::before { top: -30px; right: 10%; width: 160px; height: 160px; background: rgba(240,106,146,0.35); }
.sharekit__celebrate::after  { bottom: -30px; left: 10%; width: 160px; height: 160px; background: rgba(91,158,238,0.3); }

.sharekit__celebrate > * { position: relative; }

.sharekit__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-3);
}

.sharekit__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.sharekit__lede { color: var(--ink-muted); max-width: 50ch; margin: 0 auto; }

.sharekit__url {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 560px;
  margin: var(--space-6) auto 0;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  box-shadow: var(--shadow-md);
}

.sharekit__url-text {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sharekit__url-copy {
  background: var(--ink);
  color: var(--cream);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.sharekit__url-copy:hover { background: var(--plum); }
.sharekit__url-copy.is-copied { background: var(--coral); }

.sharekit__assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.asset-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease-out);
}

.asset-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.asset-card__preview {
  background: var(--cream-sunk);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  position: relative;
}

.asset-card__preview--story { aspect-ratio: 9 / 16; }
.asset-card__preview--feed { aspect-ratio: 1 / 1; }
.asset-card__preview--wide { aspect-ratio: 16 / 9; }

.asset-card__preview img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

.asset-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.asset-card__label { font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.asset-card__hint { font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: var(--space-4); }

.asset-card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--coral-strong);
  font-weight: 600;
  font-size: 0.9375rem;
}

.caption-box {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.caption-box__label { font-weight: 600; margin-bottom: var(--space-2); display: block; color: var(--ink); font-size: 0.9375rem; }
.caption-box__text { font-size: 0.9375rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }

/* ============================================================
   Supporter "Your walls"
   ============================================================ */

.walls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.wall-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.wall-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.wall-card__header {
  padding: var(--space-4) var(--space-5);
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wall-card__pixel-badge {
  width: 36px; height: 36px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm), inset 0 0 0 2px rgba(255,255,255,0.8);
}

.wall-card__creator { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.wall-card__pos { font-size: 0.75rem; color: var(--ink-muted); font-family: 'DM Sans', monospace; }

.wall-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }

.wall-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.wall-card__tagline { color: var(--ink-muted); font-size: 0.875rem; margin-bottom: var(--space-4); flex: 1; }

.wall-card__foot {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ============================================================
   Canvas page — LIGHT THEME (canvas-first layout)
   Full-width wall, thin top strip, pinned bottom progress,
   info + claim drawers that slide in from the right.
   ============================================================ */

body.page-campaign {
  background: var(--cream);
  color: var(--ink);
  /* Root grid: header / campaign-strip / canvas / progress-strip */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-campaign .site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical for flex children to size correctly */
}

body.page-campaign .site-footer { display: none; }

/* Lighten ambient bg on campaign page */
body.page-campaign .app-bg {
  background:
    radial-gradient(ellipse 80% 50% at 85% 0%, rgba(240, 106, 146, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(91, 158, 238, 0.07), transparent 55%),
    var(--cream);
}

/* -------- Campaign strip (slim masthead above canvas) -------- */

.campaign-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-6);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
  min-height: 56px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 6;
}

.campaign-strip__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink-muted);
  font-size: 1.125rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
  flex-shrink: 0;
}
.campaign-strip__back:hover { color: var(--ink); background: var(--surface-sunk); }
.campaign-strip__back span:last-child {
  /* The "Discover" label — small and below the arrow on desktop, gone on mobile */
  display: none;
}

.campaign-strip__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}

.campaign-strip__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.15;
  margin: 0;
}

.campaign-strip__by {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.campaign-strip__by strong { color: var(--plum); font-weight: 600; }

.campaign-strip__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  height: 38px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
  white-space: nowrap;
}
.strip-btn:hover { border-color: var(--ink); }

/* Icon-only variant — info button is just a circle on desktop. */
.strip-btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1rem;
  color: var(--ink-muted);
}
.strip-btn--icon:hover { color: var(--ink); }

.strip-btn--primary {
  background: var(--grad-together);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow-coral);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.strip-btn--primary:hover {
  box-shadow: 0 16px 40px rgba(240,106,146,0.38);
  transform: translateY(-1px);
  color: white;
}

/* Live-activity button in the top strip: a coral dot pulse + label.
   Surfaces the recent-claims feed on mobile (where the rail-card is
   hidden) and gives desktop users a one-tap shortcut into the Live
   drawer. */
.strip-btn--live {
  width: auto;
  padding: 6px 12px 6px 10px;
  gap: 6px;
}
.strip-btn__live-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.55);
  animation: stripLiveDot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.strip-btn__label--live {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
@keyframes stripLiveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(240, 106, 146, 0); }
}

/* Top "Info" icon doubles up with the bottom-bar Info button on mobile
   — hide the desktop one on narrow screens. */
@media (max-width: 980px) {
  .strip-btn--info-desktop { display: none; }
}

/* Replay-reveal pill. Conditionally rendered by the template (only on
   walls with a target image), so it never shows on procedural-skeleton
   walls. Inherits .strip-btn shape; this rule sizes the inline SVG
   eye icon and adds the soft coral accent on hover so creators
   recognise it as the cinematic-replay control. */
.strip-btn--reveal {
  width: auto;
  padding: 0 14px;
  gap: 8px;
}
.strip-btn--reveal svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.strip-btn--reveal:hover {
  color: var(--coral, #F06A92);
  border-color: rgba(240, 106, 146, 0.35);
}
@media (max-width: 980px) {
  /* Mirror the info button's mobile collapse — keep just the icon to
     keep the strip uncluttered on small screens. */
  .strip-btn--reveal .strip-btn__label { display: none; }
  .strip-btn--reveal { width: 38px; padding: 0; }
}
@media (max-width: 680px) {
  .strip-btn--reveal { width: 36px; }
}

@media (max-width: 680px) {
  .campaign-strip { padding: 8px var(--space-3); gap: 8px; min-height: 52px; }
  .campaign-strip__title { font-size: 0.9375rem; }
  .campaign-strip__by { font-size: 0.75rem; }
  .strip-btn { height: 36px; padding: 6px 14px; }
  .strip-btn--icon { width: 36px; height: 36px; }
  .strip-btn--live { width: auto; padding: 6px 10px; }
  /* On mobile the bottom action bar is the primary CTA — hide the
     masthead's claim button to keep the strip uncluttered. */
  .strip-btn--primary { display: none; }
}

/* -------- Canvas stage (full-bleed) -------- */

.canvas-stage {
  flex: 1;
  min-height: 0;
  padding: var(--space-4) var(--space-6);
  position: relative;
  display: flex;
}

@media (max-width: 680px) {
  /* Mobile: drop the side gutter to a hairline so the wall fills the
     viewport edge-to-edge between the campaign-strip and progress-strip.
     Frame loses its rounded shadow look at this breakpoint too — the
     drop-shadow + corner radius read as wasted chrome on a tight phone
     viewport. */
  .canvas-stage {
    padding: 4px var(--space-1);
  }
  .canvas-stage__frame {
    border-radius: 8px;
    border-color: transparent;
    box-shadow: none;
  }
}

.canvas-stage__frame {
  flex: 1;
  min-width: 0;
  min-height: 300px; /* guarantees canvas has real dimensions at Pixi init */
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

#canvas-root {
  display: block;
  width: 100%;
  height: 100%;
}

/* State-aware "next step" chip — persistent during onboarding,
   dismissable once the user knows the flow. Sits above the canvas
   so it's always visible without obscuring the wall content. */
.canvas-hint {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  z-index: 5;
}
.canvas-hint.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.canvas-hint__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.canvas-hint__dismiss:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* First-visit cinematic reveal — fades the target image in at full
   opacity, holds + captions, then dissolves to the live wall. Sits
   on top of the canvas during playback (pointer-events: auto so a
   stray tap doesn't claim a pixel mid-animation), then hides itself.
   GSAP drives the timeline from canvas/reveal.js. */
.canvas-reveal {
  position: absolute;
  inset: 0;
  z-index: 7;                   /* above empty-hero (6) + chip (5) */
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}
.canvas-reveal[hidden] { display: none; }
.canvas-reveal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  /* GSAP sets opacity / scale inline; this is just the resting state. */
}
.canvas-reveal__caption {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  background: rgba(20, 17, 30, 0.78);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  pointer-events: none;
  max-width: 90%;
}
.canvas-reveal__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.canvas-reveal__hint {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}
.canvas-reveal__skip {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 17, 30, 0.55);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s;
}
.canvas-reveal__skip:hover {
  background: rgba(20, 17, 30, 0.8);
  border-color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 560px) {
  .canvas-reveal__caption { bottom: 8%; padding: var(--space-2) var(--space-4); }
  .canvas-reveal__eyebrow { font-size: 0.75rem; }
  .canvas-reveal__hint { font-size: 0.875rem; }
}


/* Empty-wall hero overlay — shown on a wall with zero claims so a
   first-time visitor sees a clear "do this" instead of a quiet
   default-coloured wall. Auto-dismisses on first cell pick. */
.canvas-empty-hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  background: radial-gradient(
    ellipse at center,
    rgba(252, 246, 236, 0.0) 0%,
    rgba(252, 246, 236, 0.6) 40%,
    rgba(252, 246, 236, 0.85) 100%
  );
  pointer-events: auto;
  animation: canvasEmptyHeroIn 0.4s var(--ease-out) both;
}
.canvas-empty-hero[hidden] { display: none; }
.canvas-empty-hero__inner {
  max-width: 420px;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 22px);
  box-shadow: 0 24px 60px rgba(26, 20, 40, 0.16);
  text-align: center;
  backdrop-filter: saturate(1.2) blur(6px);
}
.canvas-empty-hero__sparkle {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 999px;
  background: var(--grad-together);
  color: white;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(240, 106, 146, 0.32);
}
.canvas-empty-hero__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  line-height: 1.2;
}
.canvas-empty-hero__lede {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
@keyframes canvasEmptyHeroIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Coachmark — bottom-of-screen banner that walks first-time visitors
   through the four key UI surfaces. The current step's target gets
   a `.coachmark-pulse` class which adds a soft halo so the user's
   eye lands on it. Banner has Next/Skip controls; Esc skips too. */
.coachmark {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translate(-50%, 16px);
  z-index: 200;
  width: min(560px, calc(100% - 32px));
  background: #14111E;
  color: #F2EEFF;
  border-radius: 16px;
  padding: var(--space-4) var(--space-5);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(242, 238, 255, 0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.coachmark.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.coachmark__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.coachmark__text {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(242, 238, 255, 0.9);
}
.coachmark__actions {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
.coachmark__skip,
.coachmark__next {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.coachmark__skip {
  background: transparent;
  color: rgba(242, 238, 255, 0.65);
}
.coachmark__skip:hover {
  color: rgba(242, 238, 255, 1);
  background: rgba(242, 238, 255, 0.06);
}
.coachmark__next {
  background: var(--grad-together);
  color: #fff;
  box-shadow: var(--shadow-glow-coral);
}
.coachmark__next:hover { transform: translateY(-1px); }

/* "See whole wall" pill — appears top-left of the canvas frame ONLY
   when the user is meaningfully zoomed in past the default fit view.
   Resets viewport + clears selection on click. The existing icon-only
   reset button in the bottom-left zoom-pill stays for power users —
   this pill is the contextual, plain-English path back. */
.see-all-pill {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: max(var(--space-3), env(safe-area-inset-left));
  z-index: 9;                         /* above pixel-tag (11)? no — see ladder note below */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-together);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(240, 106, 146, 0.30);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.18s ease;
  pointer-events: none;               /* invisible state shouldn't intercept clicks */
  min-height: 44px;                   /* iOS HIG touch target */
}
.see-all-pill[hidden] { display: none; }
.see-all-pill.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.see-all-pill:hover {
  box-shadow: 0 16px 36px rgba(240, 106, 146, 0.42);
  transform: translateY(-1px);
}
.see-all-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.see-all-pill__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.see-all-pill__label { white-space: nowrap; }

/* On phones, the campaign-strip already eats the top safe area, so
   shrinking + nudging keeps the pill out of the strip's shadow. */
@media (max-width: 560px) {
  .see-all-pill { padding: 6px 12px 6px 10px; font-size: 0.8125rem; }
  .see-all-pill__icon { width: 16px; height: 16px; }
}


/* Floating "pixel tag" callout — pinned next to a focused cell when
   the user clicks a recent claim in the Live activity feed. Shows the
   supporter's name + their message, with a small pin pointing toward
   the cell. Sits above the canvas (z=11) but below the drawers (any
   drawer opening covers it; that's intentional, the user is now in a
   different mode). */
.pixel-tag {
  position: absolute;
  z-index: 11;
  max-width: 280px;
  min-width: 180px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pixel-tag[hidden] { display: none; }
.pixel-tag.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pixel-tag__pin {
  position: absolute;
  left: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(240, 106, 146, 0.18);
  pointer-events: none;
}
.pixel-tag__card {
  background: var(--ink);
  color: #F2EEFF;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20, 17, 30, 0.32);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}
.pixel-tag__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pixel-tag__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.pixel-tag__name {
  font-weight: 700;
  font-family: var(--font-display);
  color: #F2EEFF;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pixel-tag__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(242, 238, 255, 0.6);
  font-size: 1rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.pixel-tag__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pixel-tag__note {
  color: rgba(242, 238, 255, 0.92);
  font-style: italic;
  line-height: 1.35;
  word-wrap: break-word;
}
.pixel-tag__note[hidden] { display: none; }
.pixel-tag__coord {
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  color: rgba(242, 238, 255, 0.55);
  letter-spacing: 0.02em;
}


/* Pulse halo applied to the current coachmark step's target. Uses
   box-shadow so we don't disturb the target's own layout / sizing.
   Deliberately NOT setting z-index here: when the pulsed element is
   #canvas-root, an elevated z-index puts the canvas above any drawer
   (claim, live, info) that opens on click — so the drawer renders
   behind the wall. The box-shadow halo is fully visible without
   stacking-context elevation; clipping by an enclosing card is
   theoretical and we'll address it if it appears. */
.coachmark-pulse {
  animation: coachmarkPulse 1.6s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes coachmarkPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(240, 106, 146, 0); }
}

/* Canvas-stage overlay z-index ladder (bottom to top). Sets the
   contract every onboarding overlay has to follow — keep this comment
   in sync if you add a new layer.
       canvas        (no z-index — natural flow)
   5   .canvas-hint           — next-step chip
   6   .canvas-empty-hero     — "be the first to leave a pixel"
   7   .canvas-reveal         — first-visit cinematic intro
   10+ .drawer family         — info / live / claim / creator
   200 .coachmark             — bottom-of-page tour banner
   The drawers and the coachmark exist in different stacking contexts
   (drawers are inside .canvas-stage__frame, the coachmark is appended
   to <body>) so their z-indexes don't directly compete. */
@media (prefers-reduced-motion: reduce) {
  .coachmark-pulse { animation: none; box-shadow: 0 0 0 4px rgba(240, 106, 146, 0.45); }
  .canvas-empty-hero { animation: none; }
}

/* Crosshair cursor on the canvas so it's obvious the wall is
   interactive. Pointer-typed cursor for the canvas only — pan/drag
   uses the default move/grab cursors via the input handler. */
.canvas-stage canvas { cursor: crosshair; }

/* -------- Zoom controls (bottom-right, inside canvas frame) -------- */

/* Horizontal glass pill floating in the canvas bottom-left corner.
   Shares the glass family (rgba white + blur + soft shadow + 1px
   border) with the rail card, milestone toast, and pixel toast. */
.zoom-pill {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  z-index: 10;
}

.zoom-pill__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.zoom-pill__btn:hover:not(:disabled) {
  background: var(--surface-sunk);
  color: var(--ink);
}
.zoom-pill__btn:active:not(:disabled) { transform: scale(0.94); }
.zoom-pill__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.zoom-pill__btn--find {
  background: var(--grad-together);
  color: white;
  box-shadow: 0 4px 10px rgba(240,106,146,0.35);
  margin-left: 2px;
}
.zoom-pill__btn--find:hover:not(:disabled) {
  background: var(--grad-together);
  color: white;
  box-shadow: 0 8px 18px rgba(240,106,146,0.45);
}
.zoom-pill__btn--find:disabled {
  background: var(--surface-sunk);
  color: var(--ink-soft);
  box-shadow: none;
}

.zoom-pill__btn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zoom-pill__readout {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  padding: 0 10px 0 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 34px;
  text-align: right;
  border-left: 1px solid var(--line);
  height: 24px;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

@media (max-width: 560px) {
  .zoom-pill { left: var(--space-3); bottom: var(--space-3); padding: 3px; }
  .zoom-pill__btn { width: 32px; height: 32px; }
  .zoom-pill__btn svg { width: 16px; height: 16px; }
  .zoom-pill__readout { display: none; }
}

/* -------- "Find my pixel" success banner -------- */

.pixel-toast {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--grad-warm);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(240, 106, 146, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--ease-spring), opacity 0.25s var(--ease-out);
  z-index: 10;
  max-width: calc(100% - var(--space-8));
}

.pixel-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pixel-toast strong { font-weight: 700; }

.pixel-toast__find {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border: none;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s var(--ease-out);
  font-family: inherit;
  white-space: nowrap;
}
.pixel-toast__find:hover { background: rgba(255, 255, 255, 0.4); }

.pixel-toast__close {
  background: transparent;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 var(--space-1);
  font-size: 1rem;
  line-height: 1;
  transition: opacity 0.15s var(--ease-out);
}
.pixel-toast__close:hover { opacity: 1; }

/* ── Creator canvas gear (desktop floating button) ──────────── */

.canvas-creator-gear {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.3) blur(8px);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border: 1px solid rgba(184,122,189,0.3);
  color: var(--plum, #6B4A8E);
  font-size: 0.9375rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  z-index: 11;
}
.canvas-creator-gear:hover {
  transform: translateY(-1px);
  color: white;
  background: var(--plum, #6B4A8E);
  box-shadow: 0 10px 22px rgba(107, 74, 142, 0.3);
}

/* On narrow screens the mobile action bar has its own "Zones" tab —
   hide the floating gear to avoid duplication. */
@media (max-width: 980px) {
  .canvas-creator-gear { display: none; }
}

/* ── Mobile bottom action bar ────────────────────────────── */

.mobile-action-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 12;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px var(--space-3) calc(8px + env(safe-area-inset-bottom, 0));
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .mobile-action-bar { display: flex; }
}

.mobile-action {
  flex: 1;
  min-height: 48px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mobile-action:hover { border-color: var(--ink); }
.mobile-action:active { transform: scale(0.98); }

.mobile-action__icon {
  font-size: 1.125rem;
  line-height: 1;
  flex: 0 0 auto;
}
.mobile-action__label {
  font-size: 0.875rem;
}

.mobile-action--primary {
  flex: 2;
  background: var(--grad-together);
  color: white;
  border-color: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow-glow-coral);
}
.mobile-action--primary:hover { color: white; box-shadow: 0 14px 30px rgba(240,106,146,0.4); }

/* ── Creator zone controls ────────────────────────────────── */

.drawer--creator .drawer__title { color: var(--plum, #6B4A8E); }

.creator-section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.creator-section:last-child { border-bottom: none; }
.creator-section__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.creator-section__hint {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}

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

.zone-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.zone-list__empty {
  padding: var(--space-4);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

.zone-list__item {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.zone-list__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.zone-list__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.12);
}
.zone-list__name {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zone-list__lock {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.zone-list__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.zone-list__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.zone-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.zone-btn:hover:not(:disabled) { background: var(--surface-sunk); }
.zone-btn:disabled { opacity: 0.5; cursor: default; }
.zone-btn--danger { color: var(--coral, #F06A92); border-color: rgba(240,106,146,0.35); }
.zone-btn--danger:hover:not(:disabled) { background: rgba(240,106,146,0.08); }

/* Draw-mode overlay — hint banner pinned at the top of the canvas */
.zone-draw-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;
  opacity: 0;
  transition: opacity 0.2s;
}
.zone-draw-overlay.is-active { opacity: 1; }
.zone-draw-overlay__hint {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(26, 20, 40, 0.92);
  color: white;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(15,23,42,0.2);
}

/* Zone-name modal — small, centred, stays above the drawer backdrop */
.zone-name-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 20, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--space-4);
}
.zone-name-modal.is-shown { display: flex; }
.zone-name-modal__card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.zone-name-modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.zone-name-modal__meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.zone-name-modal__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9375rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.zone-name-modal__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
  cursor: pointer;
}
.zone-name-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Right-rail card (desktop only) — unified glass container with ─── */
/* three sections: live feed / palette progress / next milestone.       */

.rail-card {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  width: 300px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  z-index: 8;
  pointer-events: auto;
  font-variant-numeric: tabular-nums;
}

.rail-card__section {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  min-height: 0;
}
.rail-card__section:last-child { border-bottom: none; }

.rail-card__section--feed {
  flex: 1 1 auto;
  padding: 0;
}

.rail-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral, #F06A92);
}
.rail-card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral, #F06A92);
  animation: railCardDot 1.8s ease-in-out infinite;
}
@keyframes railCardDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(240,106,146,0);  }
}

.rail-card__section-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

/* Live feed list (inside rail-card--feed) */
.rail-feed {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
  max-height: 38vh;
}
.live-feed__empty {
  padding: var(--space-4);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-style: italic;
}
.live-feed__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px var(--space-4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  animation: liveFeedSlide 0.35s cubic-bezier(.22,1.3,.35,1);
}
.live-feed__item:last-child { border-bottom: none; }
.live-feed__item.is-fresh {
  background: linear-gradient(90deg, rgba(240,106,146,0.09), transparent 70%);
}

/* Clickable rows: cursor + hover wash + keyboard focus ring + an
   active state while the canvas is tweening to the selected pixel. */
.live-feed__item.is-clickable { cursor: pointer; transition: background 0.15s var(--ease-out); }
.live-feed__item.is-clickable:hover {
  background: linear-gradient(90deg, rgba(91,158,238,0.10), transparent 70%);
}
.live-feed__item.is-clickable:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: -2px;
  background: linear-gradient(90deg, rgba(240,106,146,0.10), transparent 70%);
}
.live-feed__item.is-active {
  background: linear-gradient(90deg, rgba(240,106,146,0.16), transparent 70%);
  box-shadow: inset 3px 0 0 var(--coral);
}
.live-feed__item.is-active .live-feed__name { color: var(--coral-strong); }
@keyframes liveFeedSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.live-feed__swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  margin-top: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}
.live-feed__body { min-width: 0; flex: 1; }
.live-feed__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-feed__meta {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.live-feed__coord { font-variant-numeric: tabular-nums; }
.live-feed__note {
  color: var(--ink-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Palette progress rows inside the rail card */
.rail-palette {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail-palette__row {
  display: grid;
  grid-template-columns: 14px auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}
.rail-palette__swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.rail-palette__name {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.rail-palette__bar {
  height: 4px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.rail-palette__fill {
  display: block;
  height: 100%;
  background: var(--ink, #1A1428);
  width: 0%;
  transition: width 0.6s var(--ease-out);
}
.rail-palette__percent {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

/* Next-milestone block */
.rail-next {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rail-next__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(240,106,146,0.15), rgba(184,122,189,0.15));
  color: var(--coral, #F06A92);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.rail-next--done .rail-next__icon {
  background: linear-gradient(135deg, rgba(91,158,238,0.15), rgba(184,122,189,0.15));
  color: var(--plum, #6B4A8E);
}
.rail-next__body { min-width: 0; flex: 1; }
.rail-next__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-next__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.rail-next__meta strong { color: var(--ink); font-weight: 700; }

/* Collapse on narrow screens — the info drawer's recent-claims and
   milestones sections carry the same content there, and horizontal
   space is precious. */
@media (max-width: 980px) {
  .rail-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-card__dot { animation: none; }
  .live-feed__item { animation: none; }
  .rail-palette__fill { transition: none; }
}

/* ── Milestone celebration: confetti canvas + celebratory toast ── */

.milestone-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.milestone-toast {
  position: absolute;
  top: var(--space-6);
  left: 50%;
  transform: translate(-50%, -20px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 50px rgba(240, 106, 146, 0.28),
    0 6px 16px rgba(91, 158, 238, 0.2),
    0 0 0 1px rgba(15, 23, 42, 0.05);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 20;
  max-width: min(520px, calc(100% - var(--space-6) * 2));
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.4s cubic-bezier(.22,1.3,.35,1),
    visibility 0s linear 0.3s;
}
.milestone-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.5s cubic-bezier(.22,1.3,.35,1),
    visibility 0s;
}

.milestone-toast__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-together, linear-gradient(135deg,#F06A92,#B87ABD,#5B9EEE));
  color: white;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(240, 106, 146, 0.3);
}

.milestone-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.milestone-toast__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--coral, #F06A92);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.milestone-toast__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-toast__desc {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 560px) {
  .milestone-toast {
    top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
  }
  .milestone-toast__icon { width: 40px; height: 40px; font-size: 1.25rem; }
  .milestone-toast__title { font-size: 0.9375rem; }
  .milestone-toast__desc { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-toast {
    transition: opacity 0.2s, visibility 0s linear 0.2s;
  }
  .milestone-toast.is-shown { transform: translate(-50%, 0); transition: opacity 0.2s, visibility 0s; }
  .milestone-confetti { display: none; }
}

@media (max-width: 560px) {
  .pixel-toast { font-size: 0.8125rem; padding: var(--space-2) var(--space-3); gap: var(--space-2); bottom: var(--space-3); }
  .pixel-toast__find { padding: var(--space-1) var(--space-3); font-size: 0.8125rem; }
}

/* -------- Keyboard shortcut hint (shows on '?') -------- */

.kbd-hint {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-4);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.7;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.2s var(--ease-out);
  z-index: 11;
}
.kbd-hint.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kbd-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  font-family: "DM Sans", monospace;
  font-size: 0.75rem;
  min-width: 18px;
  text-align: center;
  margin-right: var(--space-2);
}

/* -------- Progress strip (pinned bottom) -------- */

.progress-strip {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-top: 1px solid var(--line);
  padding: 8px var(--space-6) 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.progress-strip__bar {
  height: 4px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.progress-strip__fill {
  height: 100%;
  background: var(--grad-together);
  border-radius: var(--radius-pill);
  transition: width 0.8s var(--ease-out);
  position: relative;
}

.progress-strip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.8125rem;
  flex-wrap: wrap;
}

.progress-strip__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.progress-strip__goal {
  color: var(--ink-muted);
  font-weight: 500;
}
.progress-strip__dot {
  color: var(--ink-soft, rgba(15,23,42,0.35));
  padding: 0 2px;
}

.progress-strip__next--mobile {
  display: none;
}
@media (max-width: 980px) {
  .progress-strip__next--mobile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--ink-muted);
  }
  .progress-strip__next--mobile strong { color: var(--ink); font-weight: 700; }
}

/* ── Paint-by-numbers intro note (claim drawer) ────────────── */

.paint-by-numbers-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(240,106,146,0.08), rgba(91,158,238,0.08));
  border: 1px solid rgba(240,106,146,0.18);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
}
.paint-by-numbers-note strong { color: var(--ink); font-weight: 700; }
.paint-by-numbers-note__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-together, linear-gradient(135deg,#F06A92,#B87ABD,#5B9EEE));
  color: white;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 2px 6px rgba(240,106,146,0.25);
}

.momentum-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(240, 106, 146, 0.1);
  border: 1px solid rgba(240, 106, 146, 0.25);
  color: var(--coral, #F06A92);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), opacity 0.35s var(--ease-out);
}
.momentum-pill__suffix {
  font-weight: 500;
  opacity: 0.8;
}
.momentum-pill.is-quiet {
  opacity: 0.55;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border-color: var(--line);
}
.momentum-pill.is-pulsing {
  background: rgba(240, 106, 146, 0.2);
  border-color: rgba(240, 106, 146, 0.55);
  animation: momentumPulse 0.7s var(--ease-out);
}

@keyframes momentumPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.momentum-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  flex: 0 0 auto;
  animation: momentumDot 2s ease-in-out infinite;
}
.momentum-pill.is-quiet .momentum-pill__dot { animation: none; }

@keyframes momentumDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,106,146,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(240,106,146,0);  }
}

.momentum-pill__text { line-height: 1; }

@media (max-width: 560px) {
  .momentum-pill {
    margin-left: 0;
    margin-top: 4px;
    font-size: 0.6875rem;
    padding: 2px 8px 2px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .momentum-pill,
  .momentum-pill__dot { animation: none; transition: none; }
  .momentum-pill.is-pulsing { animation: none; }
}

.progress-strip__pixels {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.progress-strip__next {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.progress-strip__next strong { color: var(--plum); font-weight: 600; }

.progress-strip__next-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .progress-strip { padding: var(--space-3); }
  .progress-strip__next { font-size: 0.8125rem; }
}

/* -------- Drawers (right side, slide in) -------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 40, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 40;
  border: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.drawer-backdrop.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.drawer__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.drawer__close {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 0.2s var(--ease-out);
  font-size: 1rem;
}
.drawer__close:hover { border-color: var(--ink); color: var(--ink); }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* -------- Info drawer contents -------- */

.info-section + .info-section {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}

.info-section__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-3);
}

.info-cause {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
}

.info-cause__logo {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--grad-soft);
  display: grid;
  place-items: center;
  color: var(--plum);
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}

.info-cause__body { flex: 1; min-width: 0; }
.info-cause__name { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.info-cause__summary { font-size: 0.8125rem; color: var(--ink-muted); }

.info-story {
  color: var(--ink);
  line-height: 1.6;
  font-size: 0.9375rem;
}

.info-milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-milestone {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
}

.info-milestone.is-unlocked {
  background: var(--coral-soft);
}

.info-milestone__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-top: 7px;
  flex-shrink: 0;
}

.info-milestone.is-unlocked .info-milestone__dot {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(240,106,146,0.25);
}

.info-milestone__body { flex: 1; min-width: 0; }
.info-milestone__title { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.info-milestone__meta { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; }

.info-claims {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.info-claim {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.info-claim__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.info-claim__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info-claim__name { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.info-claim__meta { font-family: 'DM Sans', monospace; color: var(--ink-muted); font-size: 0.75rem; }
.info-claim__note { color: var(--ink-muted); font-size: 0.8125rem; font-style: italic; }

.info-claims__empty {
  color: var(--ink-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-4) 0;
  font-size: 0.9375rem;
}

/* -------- Claim drawer contents -------- */

.claim-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.claim-track {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.claim-track:hover { border-color: var(--sky); background: var(--sky-soft); }

.claim-track__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}

.claim-track__title {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
}

.claim-track__hint {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.claim-track--primary {
  border-color: var(--coral);
  background: var(--coral-soft);
}

.claim-track--primary:hover {
  background: var(--coral);
  color: white;
}

.claim-track--primary:hover .claim-track__title,
.claim-track--primary:hover .claim-track__hint { color: white; }

.claim-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.claim-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.claim-form__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.claim-form__input {
  padding: var(--space-3);
  background: var(--cream);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.claim-form__input:focus {
  outline: none;
  border-color: var(--sky);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(91,158,238,0.15);
}

.claim-form__input[readonly] {
  background: var(--surface-sunk);
  color: var(--ink-muted);
}

.claim-form__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: end;
}

.claim-form__color {
  width: 56px; height: 46px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--cream);
}

.claim-form__coords {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.claim-form__coords.has-pixel {
  background: var(--sky-soft);
  border-color: var(--sky);
  color: var(--ink);
}
.claim-form__coords.has-color {
  gap: var(--space-3);
}
.claim-pixel-preview__swatch {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 0 1.5px rgba(26, 20, 40, 0.12);
}
.claim-pixel-preview__pin {
  flex-shrink: 0;
  line-height: 1;
}
.claim-form__coords strong { color: var(--ink); font-family: 'DM Sans', monospace; font-weight: 600; }

.claim-form__submit {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: var(--grad-together);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-glow-coral);
  transition: all 0.2s var(--ease-out);
}
.claim-form__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(240,106,146,0.42);
}
.claim-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.claim-feedback {
  font-size: 0.875rem;
  color: var(--ink-muted);
  min-height: 1.5em;
  margin: 0;
}
.claim-feedback.is-error { color: var(--coral-strong); }
.claim-feedback.is-success { color: var(--sky-strong); font-weight: 600; }

.claim-reward {
  padding: var(--space-4);
  background: var(--grad-warm);
  color: white;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
  animation: rewardPop 0.5s var(--ease-spring);
}
.claim-reward strong { font-weight: 800; }

@keyframes rewardPop { 0% { transform: scale(0.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }



/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  padding: var(--space-10) var(--space-8) var(--space-6);
  background:var(--sky-soft);
  position: relative;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  border-top: 1px solid var(--line);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral) 20%, var(--plum) 50%, var(--sky) 80%, transparent);
  opacity: 0.4;
}

.site-footer > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* On campaign pages the footer was pulling from a darker palette;
   the new branded footer is light enough that it no longer needs
   the campaign-specific override. */
body.page-campaign .site-footer { border-color: var(--canvas-line); }

/* ── Features strip — what the platform is built on ───────── */

.footer-features {
  list-style: none;
  margin: 0 auto var(--space-10);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  background: var(--grad-together);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  box-shadow:
    0 14px 32px rgba(240, 106, 146, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}
/* Subtle dot-grid wash on top of the gradient — adds tactile depth
   so the banner reads as a finished branded panel rather than a flat
   gradient strip. Pointer-events:none so it never intercepts hover. */
.footer-features::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 860px) {
  .footer-features { grid-template-columns: repeat(2, 1fr); padding: var(--space-4); }
}
@media (max-width: 480px) {
  .footer-features { grid-template-columns: 1fr; }
}

.footer-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;     /* lift above the dot-grid overlay */
  z-index: 1;
}
.footer-feature:last-child,
.footer-feature:nth-child(4n) { border-right: none; }
@media (max-width: 860px) {
  .footer-feature:nth-child(2n) { border-right: none; }
}
@media (max-width: 480px) {
  .footer-feature { border-right: none; border-bottom: 1px solid rgba(15, 23, 42, 0.06); padding-bottom: 12px; }
  .footer-feature:last-child { border-bottom: none; padding-bottom: 6px; }
}

.footer-feature__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 800;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.footer-feature__icon--live {
  background: rgba(255, 255, 255, 0.95);
  color: var(--coral, #F06A92);
  text-shadow: none;
  animation: footerFeatureLive 1.8s ease-in-out infinite;
}
@keyframes footerFeatureLive {
  0%, 100% { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  50% { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 6px rgba(255, 255, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-feature__icon--live { animation: none; }
}

.footer-feature__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: block;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.20);
}
.footer-feature__hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* ── Main grid: brand + nav columns ───────────────────────── */

.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 860px) {
  .site-footer__main { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 560px) {
  .site-footer__main { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Brand block */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 360px;
}
@media (max-width: 860px) {
  .site-footer__brand { grid-column: 1 / -1; max-width: 480px; }
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--ink);
}
.footer-brand__mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.footer-brand__logo {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 11px;
}
.footer-brand__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-left: -7px;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.site-footer__tagline em {
  font-style: normal;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
}
.site-footer__contact-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.site-footer__contact-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--coral);
  letter-spacing: -0.01em;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease-out);
  align-self: flex-start;
}
.site-footer__contact-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* Social pills */
.site-footer__social {
  display: flex;
  gap: 8px;
  margin-top: var(--space-1);
}
.site-footer__social-link {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform 0.18s var(--ease-out), border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.site-footer__social-link:hover {
  transform: translateY(-2px);
  color: var(--coral);
  border-color: var(--coral);
  box-shadow: 0 6px 16px rgba(240, 106, 146, 0.18);
}
.site-footer__social-link svg {
  width: 16px; height: 16px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
/* Instagram-specific outline strokes */
.site-footer__social-link svg rect,
.site-footer__social-link svg circle:not([fill]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Nav columns ───────────────────────────────────────── */

.site-footer__cols {
  display: contents;     /* let the parent grid lay out the cols */
}

.footer-col__title {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col__list a {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s var(--ease-out);
}
.footer-col__list a:hover {
  color: var(--coral);
}

/* ── Bottom row ────────────────────────────────────────── */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.site-footer__copy { line-height: 1.4; }
.site-footer__legal { display: flex; gap: var(--space-4); }
.site-footer__legal a {
  color: var(--ink-soft);
  font-weight: 500;
  transition: color 0.18s var(--ease-out);
}
.site-footer__legal a:hover { color: var(--coral); }

@media (max-width: 560px) {
  .site-footer { padding: var(--space-8) var(--space-4) var(--space-5); }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   Role split (home + signup)
   ============================================================ */

.role-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin: var(--space-8) 0; }
@media (max-width: 760px) { .role-split { grid-template-columns: 1fr; } }

.role-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 260px;
}

.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.role-card--creator::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-warm);
  opacity: 0.08;
  pointer-events: none;
}

.role-card--supporter::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-cool);
  opacity: 0.08;
  pointer-events: none;
}

.role-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
  position: relative;
}

.role-card--creator .role-card__icon { background: var(--grad-warm); color: white; }
.role-card--supporter .role-card__icon { background: var(--grad-cool); color: white; }

.role-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}

.role-card__body { color: var(--ink-muted); line-height: 1.5; flex: 1; position: relative; }

.role-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--space-3);
  position: relative;
}

.role-card--creator .role-card__cta { color: var(--coral-strong); }
.role-card--supporter .role-card__cta { color: var(--sky-strong); }

/* ============================================================
   Feature grid (marketing)
   ============================================================ */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.feature { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.feature__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--grad-soft);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
}

.feature__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.feature__body { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.55; }

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease-spring);
  z-index: 50;
}

.toast.is-shown { transform: translateX(-50%) translateY(0); }

/* ============================================================
   Utilities
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.u-text-center { text-align: center; }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-gap-3 { gap: var(--space-3); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--gap-3 { gap: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYER
   Modernises the experience on phones + tablets across every screen.
   Breakpoints (consolidated):
     md : ≤860px  — phones landscape, small tablets portrait
     sm : ≤560px  — phones portrait
   Each @media block is anchored to the component it touches, so
   changes stay co-located with the thing they affect.
   ═══════════════════════════════════════════════════════════════ */

/* ── Global foundations ────────────────────────────────────── */

html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }

/* Prevent iOS input auto-zoom by ensuring 16px+ font on focus */
@media (max-width: 860px) {
  input.auth-input,
  input.form-input,
  textarea.auth-input,
  textarea.form-input,
  select.form-input,
  .claim-form__input,
  .milestone-edit-card__title-input,
  .milestone-edit-card__desc {
    font-size: 16px;
  }
}

/* Honest tap targets on mobile: min 44px per Apple HIG / 48dp Material */
@media (max-width: 860px) {
  .btn,
  .nav-link,
  .strip-btn,
  .zoom-btn,
  .studio-campaign-card__action,
  .sharekit__url-copy,
  .drawer__close,
  .drawer-close {
    min-height: 44px;
  }
  .btn { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ── Hamburger button (mobile only) ────────────────────────── */

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 0.2s var(--ease-out);
}
.nav-burger:hover { border-color: var(--ink); }
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; }
.nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-nav--desktop { display: none; }
  .nav-burger { display: flex; }
  .site-header { padding: var(--space-4) var(--space-5); }
  .brand { font-size: 1.125rem; }
  .brand-logo { width: 32px; height: 32px; }
}

/* Dark-mode burger on campaign canvas page */
body.page-campaign .nav-burger { border-color: var(--line-strong); }

/* ── Mobile nav drawer (slides from the right) ─────────────── */

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--surface);
  box-shadow: -10px 0 40px rgba(26, 20, 40, 0.15);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.nav-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.nav-drawer__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-size: 1.125rem;
}

.nav-drawer__greeting {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
}

.nav-drawer__user {
  font-size: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer__role {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.nav-drawer__close {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  width: 36px; height: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 0.2s var(--ease-out);
}
.nav-drawer__close:hover { border-color: var(--ink); color: var(--ink); }

.nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 52px;
  transition: background 0.15s var(--ease-out);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.nav-drawer__link:hover,
.nav-drawer__link:active { background: var(--surface-sunk); }

.nav-drawer__link svg {
  width: 20px; height: 20px;
  stroke: var(--ink-muted);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.nav-drawer__link:hover svg { stroke: var(--coral, #F06A92); }

.nav-drawer__link--primary {
  background: var(--grad-together);
  color: white;
  justify-content: center;
  box-shadow: var(--shadow-glow-coral);
  font-family: var(--font-display);
  font-weight: 700;
}
.nav-drawer__link--primary:hover,
.nav-drawer__link--primary:active {
  background: var(--grad-together);
  color: white;
}
.nav-drawer__link--primary svg { stroke: white; }

.nav-drawer__link--ghost {
  border: 1.5px solid var(--line-strong);
  justify-content: center;
}

/* Richer user-block header for the mobile drawer — avatar circle + name + role chip */
.nav-drawer__userblock {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.nav-drawer__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  flex: 0 0 auto;
  overflow: hidden;
}
.nav-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-drawer__userinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-drawer__brandline {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav-drawer__brandmark {
  width: 28px; height: 28px;
  object-fit: contain;
}
.nav-drawer__brandline > span:not(.visually-hidden) {
  margin-left: -5px;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-drawer__footer {
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-drawer__logout-form { margin: 0; width: 100%; }

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 40, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  border: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.nav-drawer-backdrop.is-shown {
  opacity: 1;
  pointer-events: auto;
}

/* ── Typography scale-down ─────────────────────────────────── */

@media (max-width: 860px) {
  .hero { padding: var(--space-8) var(--space-5) var(--space-10); }
  .hero__title { font-size: clamp(2rem, 7vw, 2.75rem); }
  .hero__lede { font-size: 1.0625rem; margin-bottom: var(--space-6); }
  .hero__meta { gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); }
  .hero__meta-value { font-size: 1.25rem; }
  .hero__meta-label { font-size: 0.75rem; }
  .section { padding: var(--space-10) var(--space-5); }
  .section--tight { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .section-lede { font-size: 1rem; }
}

@media (max-width: 560px) {
  .hero { padding: var(--space-6) var(--space-4) var(--space-8); }
  .hero__title { font-size: clamp(1.875rem, 9vw, 2.5rem); }
  .hero__lede { font-size: 1rem; }
  .hero__meta {
    gap: var(--space-3);
    font-size: 0.8125rem;
  }
  .hero__meta-item { gap: 0; }
  .hero__meta-value { font-size: 1.125rem; }
  .hero__meta-label { font-size: 0.6875rem; }
  .hero__actions .btn { flex: 1; }
  .section { padding: var(--space-8) var(--space-4); }
  .site-header { padding: var(--space-3) var(--space-4); }
  .brand span { display: none; }  /* just the logo mark on very small */
  .brand-logo { width: 34px; height: 34px; }
}

/* ── Hero visual: shrink on mobile so content is above fold ── */

@media (max-width: 860px) {
  .hero__visual { max-height: 52vh; }
  .hero__visual-grid { grid-template-rows: repeat(20, 1fr); }
}

/* ── Role split — less tall on mobile ──────────────────────── */

@media (max-width: 560px) {
  .role-card { min-height: 200px; padding: var(--space-6); }
  .role-card__icon { width: 48px; height: 48px; font-size: 1.25rem; }
  .role-card__title { font-size: 1.25rem; }
}

/* ── Form cards & auth screens ─────────────────────────────── */

@media (max-width: 560px) {
  .form-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }
  .form-card__title { font-size: 1.5rem; }
  .auth-wrap { margin-top: var(--space-5); margin-bottom: var(--space-8); padding: 0 var(--space-3); }
  .form-footer { gap: var(--space-3); }
  .form-footer .btn { width: 100%; }
}

/* ── Studio dashboard ──────────────────────────────────────── */

@media (max-width: 860px) {
  .studio { padding: var(--space-6) var(--space-5); }
  .studio__title { font-size: 1.625rem; }
}

@media (max-width: 560px) {
  .studio { padding: var(--space-5) var(--space-4); }
  .studio__head {
    flex-direction: column;
    align-items: stretch;
  }
  .studio__head .btn { width: 100%; text-align: center; }
  .studio-campaign-card__stats { gap: var(--space-4); flex-wrap: wrap; }
  .studio-empty { padding: var(--space-10) var(--space-5); }
  .studio-empty__icon { width: 72px; height: 72px; font-size: 2rem; }
  .studio-empty__title { font-size: 1.25rem; }
}

/* ── Wizard ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wizard__body { grid-template-columns: 1fr; gap: var(--space-6); }
  .wizard__preview { position: static; }
}

@media (max-width: 560px) {
  .wizard { margin-top: var(--space-5); padding: 0 var(--space-4); }
  .wizard__header { margin-bottom: var(--space-6); }
  .wizard__title { font-size: 1.625rem; }
  .wizard__lede { font-size: 0.9375rem; }
  .wizard__panel { padding: var(--space-5); border-radius: var(--radius-lg); }
  .wizard__steps .wizard__step span:not(.wizard__step-dot) { display: none; }
  .wizard__step-bar { width: 24px; }
  .goal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Milestone cards: tighten on mobile */
@media (max-width: 560px) {
  .milestone-edit-card { padding: var(--space-3); gap: var(--space-3); }
  .milestone-edit-card__badge { width: 36px; height: 36px; font-size: 0.75rem; }
}

/* ── Share kit ─────────────────────────────────────────────── */

@media (max-width: 680px) {
  .sharekit { padding: var(--space-6) var(--space-4); }
  .sharekit__celebrate { padding: var(--space-6) var(--space-4); margin-bottom: var(--space-5); }
  .sharekit__title { font-size: 1.5rem; }
  .sharekit__lede { font-size: 0.9375rem; }

  /* URL pill becomes stacked layout */
  .sharekit__url {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    gap: var(--space-3);
  }
  .sharekit__url-text {
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    padding: var(--space-2);
  }
  .sharekit__url-actions {
    width: 100%;
    display: flex;
    gap: var(--space-2);
  }
  .sharekit__url-copy,
  .sharekit__url-share {
    flex: 1;
    padding: var(--space-3);
    min-height: 44px;
  }

  /* Caption boxes: button below text, full width */
  .caption-box { padding: var(--space-4); }
  .caption-box .sharekit__url-copy { width: 100%; padding: var(--space-3); }
}

/* ── My walls ──────────────────────────────────────────────── */

@media (max-width: 560px) {
  .walls-grid { gap: var(--space-4); }
  .wall-card__header { padding: var(--space-3) var(--space-4); }
  .wall-card__body { padding: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════
   CAMPAIGN DETAIL (the wall) — mobile treatment
   - bottom-sheet drawers instead of side drawers
   - sticky bottom "Claim your pixel" CTA for logged-out or not-yet-claimed
   - compact campaign strip
   - zoom controls move to right-centre vertical stack
   ══════════════════════════════════════════════════════════════ */

/* Use dynamic viewport height so iOS address bar doesn't clip content */
@supports (height: 100dvh) {
  body.page-campaign { min-height: 100dvh; }
}

/* Campaign strip: tighten at phone width */
@media (max-width: 560px) {
  .campaign-strip {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    min-height: 56px;
  }
  .campaign-strip__back { padding: var(--space-2); }
  .campaign-strip__back span:last-child { display: none; }  /* arrow only */
  .campaign-strip__title { font-size: 0.9375rem; }
  .strip-btn { padding: 0 var(--space-3); min-height: 40px; }
  .strip-btn .strip-btn__label { display: none; }
}

/* Canvas stage padding reduces on mobile */
@media (max-width: 560px) {
  .canvas-stage { padding: var(--space-2); }
  .canvas-stage__frame { border-radius: var(--radius-md); }
}

/* Zoom controls: smaller, tighter on mobile */
@media (max-width: 560px) {
  .zoom-controls {
    right: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-1);
    gap: 2px;
  }
  .zoom-controls__readout { display: none; }  /* save vertical space */
  .zoom-btn { width: 40px; height: 40px; }
  .zoom-btn svg { width: 18px; height: 18px; }
}

/* Pixel toast: tighter padding on mobile so it doesn't overflow the frame */
@media (max-width: 480px) {
  .pixel-toast {
    bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    font-size: 0.8125rem;
    max-width: calc(100% - var(--space-4));
  }
}

/* Keyboard hint is irrelevant on touch devices */
@media (max-width: 560px) {
  .kbd-hint { display: none; }
}

/* Progress strip: compact at phone width */
@media (max-width: 560px) {
  .progress-strip {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    gap: var(--space-1);
  }
  .progress-strip__row {
    justify-content: space-between;
    gap: var(--space-2);
  }
  .progress-strip__stats { font-size: 0.75rem; }
  .progress-strip__pixels { font-size: 1rem; }
  .progress-strip__next { font-size: 0.75rem; }
  .progress-strip__next-icon { width: 16px; height: 16px; font-size: 0.625rem; }
}

/* ── Bottom-sheet drawers on campaign page (replaces side drawers <720px) ── */

@media (max-width: 720px) {
  body.page-campaign .drawer {
    top: 64px;                              /* clear of the site-header */
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;                           /* fill from top:64px → bottom:0 */
    max-height: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -16px 40px rgba(26, 20, 40, 0.18);
    transform: translateY(100%);
    display: flex;
    flex-direction: column;                 /* let __body take remaining space */
  }
  body.page-campaign .drawer.is-open {
    transform: translateY(0);
  }
  /* Header stays fixed at the top of the sheet; body scrolls */
  body.page-campaign .drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Drag-handle affordance at the top of the sheet */
  body.page-campaign .drawer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    background: var(--line-strong);
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
  }

  body.page-campaign .drawer__header {
    padding: var(--space-6) var(--space-5) var(--space-4);
    padding-top: calc(var(--space-6) + var(--space-2));
  }

  body.page-campaign .drawer__body {
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }

  /* Claim-track cards stack full-width on the bottom sheet */
  body.page-campaign .claim-tracks {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  body.page-campaign .claim-track {
    flex-direction: row;
    align-items: center;
    padding: var(--space-4);
  }
  body.page-campaign .claim-track__icon { font-size: 1.25rem; margin: 0 var(--space-2) 0 0; }

  /* The color swatch + message fields don't crowd each other */
  body.page-campaign .claim-form__row {
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: stretch;
  }
  body.page-campaign .claim-form__color {
    width: 56px;
    height: 100%;
    min-height: 46px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HOME — hero meta stats in one tight row on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  .hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    text-align: center;
  }
  .hero__meta-item { align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   For-creators feature grid spacing
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  .features { gap: var(--space-4); }
  .feature { padding: var(--space-5); }
}

/* ══════════════════════════════════════════════════════════════
   Footer — stacks & centres on mobile, hidden on campaign page
   (already set to display:none in canvas block)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  .site-footer {
    padding: var(--space-6) var(--space-4);
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
  .site-footer__links {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* ══════════════════════════════════════════════════════════════
   Site messages padding on small screens
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  .site-messages { padding: 0 var(--space-4); }
  .site-message { font-size: 0.875rem; padding: var(--space-3) var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════
   Preview card in wizard: reveal it properly on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .preview-card {
    padding: var(--space-5);
  }
  .preview-card__title { font-size: 1.25rem; }
  .preview-canvas { max-height: 280px; }
}

/* ── Share kit: new url-actions wrapper (desktop) ──────────── */

.sharekit__url-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sharekit__url-share {
  background: var(--grad-together);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-glow-coral);
  transition: all 0.15s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.sharekit__url-share:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(240,106,146,0.35);
}

/* ── Wizard: target image upload ──────────────────────────── */

.form-field__optional {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: var(--space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.target-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.target-upload__dropzone {
  position: relative;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  background: var(--surface-sunk);
  transition: all 0.2s var(--ease-out);
  cursor: pointer;
}

.target-upload__dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.target-upload__dropzone.is-dragover,
.target-upload__dropzone:hover {
  border-color: var(--coral);
  background: rgba(240, 106, 146, 0.05);
}

.target-upload__dropzone.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.target-upload__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  pointer-events: none;
}

.target-upload__hint strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.target-upload__icon {
  font-size: 1.5rem;
  color: var(--coral);
  margin-bottom: var(--space-1);
}

.target-upload__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.target-upload__preview img {
  display: block;
  width: auto;
  max-width: min(100%, 520px);
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  background: var(--cream);
}

.target-upload__preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.target-upload__sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.target-upload__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.palette-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(26, 20, 40, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.target-upload__error {
  padding: var(--space-3) var(--space-4);
  background: rgba(240, 106, 146, 0.08);
  color: #B23A60;
  border-radius: var(--radius-md);
  border: 1px solid rgba(240, 106, 146, 0.25);
  font-size: 0.875rem;
}

.btn--sm { padding: var(--space-1) var(--space-3); font-size: 0.875rem; min-height: 32px; }

/* ── Palette picker (paint-by-numbers claim drawer) ──────── */

.claim-form__sub {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: var(--space-2);
}

.palette-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: var(--space-1);
}

.palette-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  border-radius: 8px;
  border: 2px solid rgba(26, 20, 40, 0.10);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s var(--ease-out), border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.palette-pick__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.palette-pick__bar {
  display: block;
  height: 3px;
  background: rgba(26, 20, 40, 0.12);
  position: relative;
}
.palette-pick__fill {
  display: block;
  height: 100%;
  background: var(--ink, #1A1428);
  width: 0%;
  transition: width 0.6s var(--ease-out);
}

.palette-pick__percent {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1;
  padding-bottom: 3px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.palette-pick:hover {
  transform: scale(1.08);
  border-color: rgba(26, 20, 40, 0.35);
}

.palette-pick.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
}

.palette-pick.is-suggested {
  /* Coral ring + subtle pulse to draw the eye */
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--coral), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: paletteSuggested 1.4s var(--ease-out);
}

@keyframes paletteSuggested {
  0%   { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--coral), 0 0 0 8px rgba(240, 106, 146, 0.4); }
  100% { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--coral), 0 0 0 4px rgba(240, 106, 146, 0); }
}

@media (max-width: 480px) {
  .palette-picker { grid-template-columns: repeat(8, 1fr); gap: 5px; }
}


/* ============================================================
   Creators — directory + profile
   Public-facing surface for creator discovery. Same brand
   language as discover, but creator-led (avatar-first cards,
   social-strip, achievements timeline).
   ============================================================ */

/* ── Directory hero ────────────────────────────────────── */
.creators-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-6);
  position: relative;
}
@media (max-width: 680px) {
  .creators-hero { padding: var(--space-6) var(--space-4) var(--space-4); }
}
.creators-hero__inner { max-width: 800px; }

.creators-hero__pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(91, 158, 238, 0.10);
  border: 1px solid rgba(91, 158, 238, 0.24);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sky-strong);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-5);
}
.creators-hero__pulse strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--sky-strong);
}
.creators-hero__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sky);
  animation: creatorsHeroDot 1.8s ease-in-out infinite;
}
@keyframes creatorsHeroDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,158,238,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(91,158,238,0); }
}
@media (prefers-reduced-motion: reduce) {
  .creators-hero__dot { animation: none; }
}

.creators-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.creators-hero__title em {
  font-style: normal;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.creators-hero__lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
  max-width: 56ch;
}
.creators-hero__clear {
  margin-left: var(--space-2);
  font-weight: 700;
  color: var(--coral);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s var(--ease-out);
}
.creators-hero__clear:hover { border-bottom-color: var(--coral); }

/* ── Filter bar ────────────────────────────────────────── */
.section--creators-filter {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-6);
}
@media (max-width: 680px) {
  .section--creators-filter { padding: 0 var(--space-4) var(--space-5); }
}

.creators-filter {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.creators-filter__search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
}
.creators-filter__search-icon svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.creators-filter__input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font: inherit;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.creators-filter__input::placeholder { color: var(--ink-soft); }

.creators-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.creators-filter__toggle input { accent-color: var(--coral); }
.creators-filter__toggle:has(input:checked) {
  color: var(--coral-strong);
  background: var(--coral-soft);
  border-color: rgba(240, 106, 146, 0.32);
}

.creators-filter__reset {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: underline;
}
.creators-filter__reset:hover { color: var(--ink); }

/* ── Cause chips strip ─────────────────────────────────── */
.creators-causes {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.creators-causes__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 500;
  transition: all 0.18s var(--ease-out);
}
.creators-causes__chip:hover {
  border-color: var(--coral);
  background: var(--coral-soft);
  transform: translateY(-1px);
}
.creators-causes__mark {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--grad-together);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.creators-causes__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

/* ── Creator grid + cards ──────────────────────────────── */
.section--creator-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-8) var(--space-12);
}
@media (max-width: 680px) {
  .section--creator-grid { padding: var(--space-2) var(--space-4) var(--space-10); }
}

.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.creator-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.creator-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(240, 106, 146, 0.35);
}
.creator-card.is-verified {
  border-color: rgba(91, 158, 238, 0.32);
}

.creator-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.creator-card__cover {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--grad-together);
  overflow: hidden;
}
.creator-card__cover-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.creator-card__cover-fallback {
  position: absolute;
  inset: 0;
  background: var(--grad-together);
  background-size: 180% 180%;
  animation: creatorCoverShift 9s ease-in-out infinite;
}
@keyframes creatorCoverShift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

.creator-card__badge {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sky-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.creator-card__badge svg {
  width: 12px; height: 12px;
  fill: var(--sky-strong);
}
.creator-card__badge--new {
  color: var(--coral-strong);
  background: rgba(255, 255, 255, 0.94);
}

.creator-card__body {
  padding: var(--space-5);
  position: relative;
}

.creator-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: -42px;
  margin-bottom: var(--space-3);
}
.creator-card__avatar {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.creator-card__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.creator-card__name-block { min-width: 0; padding-top: 28px; }
.creator-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-card__role {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.creator-card__headline {
  margin: 0 0 var(--space-4);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creator-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.creator-card__stat { display: flex; flex-direction: column; gap: 2px; }
.creator-card__stat-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.creator-card__stat-label {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.creator-card__causes {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.creator-card__cause-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  color: var(--ink);
  font-weight: 500;
  border: 1px solid var(--line);
  max-width: 100%;
}
.creator-card__cause-logo {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.creator-card__cause-initials {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  font-size: 0.5625rem;
  font-weight: 800;
}
.creator-card__cause-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.creator-card__cause-more {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.creator-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--coral-strong);
  font-size: 0.9375rem;
}
.creator-card__cta-arrow { transition: transform 0.18s var(--ease-out); }
.creator-card:hover .creator-card__cta-arrow { transform: translateX(3px); }

/* ── Empty state + CTA ─────────────────────────────────── */
.creators-empty {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--ink-muted);
}
.creators-empty p { margin: 0 0 var(--space-2); }
.creators-empty p:last-child { margin: 0; }
.creators-empty a { color: var(--coral); font-weight: 600; }

.section--creators-cta {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-16);
}
@media (max-width: 680px) {
  .section--creators-cta { padding: var(--space-6) var(--space-4) var(--space-12); }
}

.creators-cta {
  background: var(--grad-together);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  color: white;
  box-shadow: var(--shadow-glow-coral);
  position: relative;
  overflow: hidden;
}
@media (max-width: 760px) {
  .creators-cta {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-6);
    text-align: center;
  }
}
.creators-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  line-height: 1.15;
  color: white;
}
.creators-cta__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 52ch;
}
.creators-cta__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .creators-cta__actions { justify-content: center; }
}
.creators-cta .btn--gradient {
  background: white;
  color: var(--coral-strong);
}
.creators-cta .btn--gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.creators-cta .btn--ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}
.creators-cta .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
}


/* ============================================================
   Creator profile page
   ============================================================ */
.creator-profile {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-16);
}
@media (max-width: 680px) {
  .creator-profile { padding: 0 var(--space-4) var(--space-12); }
}

.creator-profile__cover {
  position: relative;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-6);
  background: var(--grad-together);
}
@media (max-width: 680px) {
  .creator-profile__cover {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
  }
}

/* No cover image uploaded — render as a slim brand band so the
   identity block (avatar, name, headline, metrics) becomes the
   visual anchor instead of an empty gradient block. */
.creator-profile__cover--empty {
  aspect-ratio: auto;
  height: 140px;
}
@media (max-width: 680px) {
  .creator-profile__cover--empty { height: 96px; }
}
.creator-profile__cover--empty .creator-profile__cover-fallback {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.18) 0, transparent 30%),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,0.14) 0, transparent 36%),
    var(--grad-together);
  background-size: auto, auto, 200% 200%;
}
.creator-profile__cover-img {
  width: 100%; height: 100%; object-fit: cover;
}
.creator-profile__cover-fallback {
  position: absolute; inset: 0;
  background: var(--grad-together);
  background-size: 200% 200%;
  animation: creatorCoverShift 12s ease-in-out infinite;
}

.creator-profile__back {
  position: absolute;
  top: var(--space-4); left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.creator-profile__back svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.creator-profile__back:hover { background: white; }

.creator-profile__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--space-6);
  padding: 0 var(--space-2);
  margin-top: -56px;
  margin-bottom: var(--space-8);
}
@media (max-width: 760px) {
  .creator-profile__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
}

.creator-profile__avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-warm);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  border: 5px solid var(--cream);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}
.creator-profile__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px) {
  .creator-profile__avatar { width: 96px; height: 96px; font-size: 2.25rem; border-width: 4px; }
}

.creator-profile__identity { padding-bottom: var(--space-2); min-width: 0; }
.creator-profile__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.creator-profile__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.creator-profile__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(91, 158, 238, 0.10);
  border: 1px solid rgba(91, 158, 238, 0.32);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sky-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.creator-profile__verified svg { width: 14px; height: 14px; }
.creator-profile__verified--new {
  background: rgba(240, 106, 146, 0.10);
  border-color: rgba(240, 106, 146, 0.30);
  color: var(--coral-strong);
}
.creator-profile__role {
  margin: 6px 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.creator-profile__headline {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 56ch;
}
.creator-profile__share { margin-top: var(--space-4); }

.creator-profile__metrics {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}
@media (max-width: 760px) {
  .creator-profile__metrics {
    width: 100%;
    flex-wrap: wrap;
    padding: 0;
  }
}
.creator-profile__metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  box-shadow: var(--shadow-xs);
}
.creator-profile__metric-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.creator-profile__metric-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
}
.creator-profile__metric-hint {
  font-size: 0.625rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── Sections ──────────────────────────────────────────── */
.creator-profile__bio,
.creator-profile__socials,
.creator-profile__causes,
.creator-profile__walls,
.creator-profile__achievements,
.creator-profile__empty {
  margin-bottom: var(--space-10);
}
.creator-profile__empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border-radius: var(--radius-lg);
}
.creator-profile__empty p { margin: 0 0 var(--space-2); }

.creator-profile__section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.creator-profile__section-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 2px 8px;
  background: var(--coral-soft);
  color: var(--coral-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.creator-profile__bio p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}

/* ── Social strip ──────────────────────────────────────── */
.social-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.social-strip__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.social-strip__link:hover {
  transform: translateY(-2px);
  border-color: var(--coral);
  box-shadow: var(--shadow-sm);
}
.social-strip__icon {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--cream-sunk);
  color: var(--ink);
  flex-shrink: 0;
}
.social-strip__icon svg { width: 18px; height: 18px; fill: currentColor; }
.social-strip__item--instagram .social-strip__icon { background: linear-gradient(135deg,#FAD0C4,#FBC2EB); color: #C13584; }
.social-strip__item--instagram .social-strip__icon svg { fill: none; stroke: currentColor; stroke-width: 2; }
.social-strip__item--tiktok .social-strip__icon { background: #111; color: white; }
.social-strip__item--youtube .social-strip__icon { background: #FFE0E0; color: #FF0000; }
.social-strip__item--x .social-strip__icon { background: #111; color: white; }

.social-strip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.social-strip__platform {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.social-strip__handle {
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-strip__count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.social-strip__disclaimer {
  margin: var(--space-3) 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── Cause grid (profile) ──────────────────────────────── */
.creator-causes-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.creator-cause-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.18s var(--ease-out);
}
.creator-cause-card__link:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.creator-cause-card__mark {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--grad-together);
  color: white;
  font-weight: 800;
  font-size: 0.875rem;
  overflow: hidden;
}
.creator-cause-card__mark img { width: 100%; height: 100%; object-fit: cover; }
.creator-cause-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creator-cause-card__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-cause-card__verified { color: var(--sky-strong); font-size: 0.875rem; }
.creator-cause-card__summary {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Achievements timeline ─────────────────────────────── */
.achievements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.achievements-list::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--coral) 0%, var(--plum) 50%, var(--sky) 100%);
  border-radius: 2px;
  opacity: 0.5;
}
.achievement {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-8);
}
.achievement:last-child { padding-bottom: 0; }
.achievement__marker {
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--coral);
  box-shadow: var(--shadow-xs);
}
.achievement__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.achievement__title a {
  color: inherit;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s var(--ease-out);
}
.achievement__title a:hover { border-bottom-color: var(--coral); }
.achievement__description {
  margin: 0 0 4px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 64ch;
}
.achievement__date {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ============================================================
   Studio → Creator profile editor (Phase B)
   Two-column form layout with sticky live preview pane.
   ============================================================ */

.profile-editor {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-12);
}
@media (max-width: 680px) {
  .profile-editor { padding: var(--space-5) var(--space-4) var(--space-10); }
}

.profile-editor__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.profile-editor__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
  color: var(--ink);
  line-height: 1.1;
}
.profile-editor__subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: 56ch;
}
.profile-editor__subtitle a {
  color: var(--coral);
  font-weight: 600;
  border-bottom: 1px dashed currentColor;
}

.profile-editor__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 980px) {
  .profile-editor__layout { grid-template-columns: 1fr; }
}

.profile-editor__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* ── Form cards ──────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}
@media (max-width: 680px) {
  .form-card { padding: var(--space-4); }
}
.form-card__legend {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  padding: 0;
  margin: 0;
}
.form-card__lede {
  margin: -8px 0 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.form-row--inline {
  flex-direction: row;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.form-row--inline > span {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-help {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.form-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--coral-strong);
  font-weight: 600;
}

/* Reusable form input — also used by tier/wizard forms */
.form-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.form-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(240,106,146,0.15);
}
textarea.form-input { resize: vertical; min-height: 88px; }

.form-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}
.form-banner--error {
  background: rgba(240, 106, 146, 0.10);
  border: 1px solid rgba(240, 106, 146, 0.30);
  color: var(--coral-strong);
}

/* ── Social input rows ───────────────────────────────────── */
.social-input-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 180px;
  gap: var(--space-3);
  align-items: center;
}
@media (max-width: 600px) {
  .social-input-row {
    grid-template-columns: 1fr;
    padding: var(--space-3);
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
  }
}
.social-input-row__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.social-input-row__label::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.social-input-row__label--instagram::before { background: linear-gradient(135deg,#FAD0C4,#C13584); }
.social-input-row__label--tiktok::before    { background: #111; }
.social-input-row__label--youtube::before   { background: #FF0000; }
.social-input-row__label--x::before         { background: #111; }

.social-input-row__handle {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.social-input-row__handle:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(240,106,146,0.15);
}
.social-input-row__at {
  padding: 0 0 0 12px;
  color: var(--ink-soft);
  font-weight: 700;
}
.form-input--social {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 10px 12px 10px 4px !important;
}

.social-input-row__count {
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-input--count { width: 100%; font-variant-numeric: tabular-nums; }
.social-input-row__count-suffix {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ── Cause checkbox grid ─────────────────────────────────── */
.cause-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.cause-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.cause-checkbox:hover {
  border-color: var(--coral);
  background: rgba(240, 106, 146, 0.04);
}
.cause-checkbox input[type="checkbox"] {
  accent-color: var(--coral);
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.cause-checkbox:has(input:checked) {
  border-color: var(--coral);
  background: var(--coral-soft);
}
.cause-checkbox__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

/* ── Achievements editor ─────────────────────────────────── */
.achievement-edit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.achievement-edit {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.achievement-edit.is-deleted {
  opacity: 0.5;
  text-decoration: line-through;
}
.achievement-edit__handle {
  color: var(--ink-soft);
  font-weight: 700;
  user-select: none;
  padding-top: 4px;
  cursor: grab;
}
.achievement-edit__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.achievement-edit__delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--coral-strong);
  font-weight: 600;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
}

/* ── Live preview pane ───────────────────────────────────── */
.profile-editor__preview {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (max-width: 980px) {
  .profile-editor__preview { position: static; }
}

.profile-editor__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.profile-editor__preview-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-editor__preview-hint {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}
.profile-editor__preview-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.profile-editor__preview-note a { color: var(--coral); font-weight: 600; }

.preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.preview-card__cover {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--grad-together);
  overflow: hidden;
}
.preview-card__cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.preview-card__badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--sky-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.preview-card__badge--new { color: var(--coral-strong); }

.preview-card__body { padding: var(--space-4); }

.preview-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: -32px;
  margin-bottom: var(--space-3);
}
.preview-card__avatar {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  border: 3px solid var(--surface);
  overflow: hidden;
}
.preview-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.preview-card__avatar--fallback img { display: none; }
.preview-card__name {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.preview-card__role {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
}
.preview-card__headline {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.preview-card__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.preview-card__stat-label {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Studio dashboard head — accommodate the new "Edit profile" button */
.studio__head-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ============================================================
   Phase C, slice 1 — Trust + Follow
   ============================================================ */

/* ── Verification banner (Studio editor) ───────────────────── */
.verify-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  border: 1px solid;
  font-size: 0.9375rem;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .verify-banner {
    grid-template-columns: auto 1fr;
  }
  .verify-banner__form { grid-column: 1 / -1; justify-self: start; }
}
.verify-banner__icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.verify-banner__body { color: var(--ink); }
.verify-banner__body strong { font-weight: 700; color: var(--ink); }
.verify-banner__form { margin: 0; }

.verify-banner--idle {
  background: rgba(91, 158, 238, 0.06);
  border-color: rgba(91, 158, 238, 0.24);
}
.verify-banner--idle .verify-banner__icon {
  background: var(--sky);
  color: white;
}

.verify-banner--pending {
  background: rgba(246, 167, 101, 0.10);
  border-color: rgba(246, 167, 101, 0.32);
}
.verify-banner--pending .verify-banner__icon {
  background: var(--amber);
  color: white;
  animation: verifyPending 1.6s ease-in-out infinite;
}
@keyframes verifyPending {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.verify-banner--done {
  background: rgba(91, 158, 238, 0.10);
  border-color: rgba(91, 158, 238, 0.32);
}
.verify-banner--done .verify-banner__icon {
  background: var(--sky-strong);
  color: white;
  box-shadow: 0 4px 12px rgba(91, 158, 238, 0.40);
}

/* ── Profile actions (Follow + Share + Edit) ──────────────── */
.creator-profile__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.creator-profile__follow-form { margin: 0; }

/* The follow button switches between gradient (not-following) and a
   toned-down outlined "Following" state. Same shape so the click-area
   doesn't shift when toggling. */
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s var(--ease-out);
}
.follow-btn--following {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.follow-btn--following:hover {
  background: var(--coral-soft);
  border-color: rgba(240, 106, 146, 0.30);
  color: var(--coral-strong);
}
.follow-btn--following:hover .follow-btn__label::after {
  content: "  · Unfollow";
  color: var(--coral-strong);
  font-weight: 600;
}
.follow-btn[disabled] { opacity: 0.6; cursor: wait; }

/* Followers metric tile gets a coral edge so it stands out as the
   "social proof on Together" number vs the self-reported reach. */
.creator-profile__metric--followers {
  border-color: rgba(240, 106, 146, 0.30);
  background: linear-gradient(0deg, var(--coral-soft) 0%, var(--surface) 60%);
}
.creator-profile__metric--followers .creator-profile__metric-value {
  color: var(--coral-strong);
}


/* ============================================================
   Phase C, slice 2 — Notifications (bell + dropdown + feed)
   ============================================================ */

.notify-bell { position: relative; }
.notify-bell__btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.notify-bell__btn:hover {
  background: var(--surface-sunk);
  border-color: var(--line);
}
.notify-bell__btn svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notify-bell__badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--coral);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px rgba(240,106,146,0.35);
  animation: notifyBadgePop 0.4s var(--ease-spring);
}
@keyframes notifyBadgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.notify-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
  animation: notifyPanelIn 0.18s var(--ease-out);
}
@keyframes notifyPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notify-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.notify-bell__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.notify-bell__mark-read {
  font-size: 0.75rem;
  color: var(--coral-strong);
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.notify-bell__mark-read:hover { background: var(--coral-soft); }

.notify-bell__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 380px;
  overflow-y: auto;
}
.notify-bell__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.notify-item {
  border-bottom: 1px solid var(--line);
}
.notify-item:last-child { border-bottom: 0; }
.notify-item--unread { background: rgba(91, 158, 238, 0.05); }
.notify-item--unread::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  transform: translateY(-50%);
}
.notify-item__link {
  position: relative;
  display: flex;
  gap: var(--space-2);
  padding: 10px var(--space-3) 10px var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s var(--ease-out);
}
.notify-item__link:hover { background: var(--surface-sunk); }
.notify-item__avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.875rem;
  overflow: hidden;
}
.notify-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.notify-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notify-item__text {
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.35;
}
.notify-item__text strong { font-weight: 700; }
.notify-item__text em { font-style: normal; color: var(--coral-strong); font-weight: 600; }
.notify-item__time {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.notify-bell__more {
  display: block;
  padding: var(--space-3);
  text-align: center;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--coral-strong);
  background: var(--surface-sunk);
}
.notify-bell__more:hover { background: var(--coral-soft); }


/* ── Full notifications feed page ───────────────────────── */
.notify-feed {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}
@media (max-width: 680px) {
  .notify-feed { padding: var(--space-5) var(--space-4) var(--space-10); }
}
.notify-feed__head { margin-bottom: var(--space-6); }
.notify-feed__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
  color: var(--ink);
  line-height: 1.1;
}
.notify-feed__subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: 56ch;
}

.notify-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.notify-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s var(--ease-out);
}
.notify-row:last-child { border-bottom: 0; }
.notify-row:hover { background: var(--surface-sunk); }
.notify-row--unread { background: rgba(91, 158, 238, 0.05); }
.notify-row--unread:hover { background: rgba(91, 158, 238, 0.10); }

.notify-row__avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  overflow: hidden;
}
.notify-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.notify-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.notify-row__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.45;
}
.notify-row__text em { font-style: normal; color: var(--coral-strong); font-weight: 600; }
.notify-row__cta {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--coral-strong);
  align-self: flex-start;
}
.notify-row__cta:hover { text-decoration: underline; }
.notify-row__time {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.notify-feed__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
}
.notify-feed__page-meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.notify-feed__empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.notify-feed__empty-icon {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cream-sunk);
  margin-bottom: var(--space-4);
}
.notify-feed__empty-icon svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notify-feed__empty-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.notify-feed__empty-lede {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.notify-feed__empty-lede a { color: var(--coral); font-weight: 600; }


/* ============================================================
   Phase C, slice 3 — Reach proof + dashboard analytics
   ============================================================ */

/* ── Studio "Reach" dashboard tile ───────────────────────── */
.reach-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.reach-tile::before {
  /* Subtle coral wash on the right edge so the tile reads as
     "creator reach" without a hard background gradient. */
  content: "";
  position: absolute;
  inset: 0 0 0 60%;
  background: radial-gradient(
    ellipse at 100% 50%,
    rgba(240, 106, 146, 0.10) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.reach-tile__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  position: relative;
}
.reach-tile__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  color: var(--ink);
  line-height: 1.25;
  max-width: 44ch;
}
.reach-tile__link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--coral-strong);
  white-space: nowrap;
}
.reach-tile__link:hover { text-decoration: underline; }

.eyebrow--coral { color: var(--coral-strong); }

.reach-tile__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  position: relative;
}
.reach-metric {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reach-metric--conversion {
  background: linear-gradient(135deg, var(--coral-soft) 0%, var(--surface-sunk) 100%);
  border-color: rgba(240, 106, 146, 0.30);
}
.reach-metric__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.reach-metric__sep {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.reach-metric--conversion .reach-metric__value { color: var(--coral-strong); }
.reach-metric__label {
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.reach-metric__hint {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.reach-tile__causes {
  margin: var(--space-5) 0 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.55;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  position: relative;
}
.reach-tile__causes strong {
  color: var(--ink);
  font-weight: 700;
}
.reach-tile__causes > span:first-child {
  color: var(--coral);
  margin-right: 6px;
}


/* ── Public-profile 30-day reach band ─────────────────────── */
.reach-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--coral-soft) 0%, rgba(91,158,238,0.10) 100%);
  border: 1px solid rgba(240, 106, 146, 0.22);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-xs);
}
.reach-band__icon {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(240, 106, 146, 0.25);
}
.reach-band__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.5;
}
.reach-band__text strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--coral-strong);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   Supporter profile (Phase A)
   Public profile at /m/<handle>/ — frames pixels claimed as a
   personal museum of impact. Same visual grammar as creator
   profile so the brand feels coherent across roles.
   ============================================================ */

.supporter-profile {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-16);
}
@media (max-width: 680px) {
  .supporter-profile { padding: 0 var(--space-4) var(--space-12); }
}

/* ── Cover band ────────────────────────────────────────── */
.supporter-profile__cover {
  position: relative;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-6);
  background: var(--grad-cool);
}
.supporter-profile__cover--empty {
  aspect-ratio: auto;
  height: 140px;
}
@media (max-width: 680px) {
  .supporter-profile__cover {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
  }
  .supporter-profile__cover--empty { height: 96px; }
}
.supporter-profile__cover-img { width: 100%; height: 100%; object-fit: cover; }
.supporter-profile__cover-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.18) 0, transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.14) 0, transparent 36%),
    var(--grad-cool);
}
.supporter-profile__back {
  position: absolute;
  top: var(--space-4); left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.supporter-profile__back svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Identity block ────────────────────────────────────── */
.supporter-profile__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--space-6);
  padding: 0 var(--space-2);
  margin-top: -56px;
  margin-bottom: var(--space-8);
}
@media (max-width: 760px) {
  .supporter-profile__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-4);
  }
}
.supporter-profile__avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  border: 5px solid var(--cream);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}
.supporter-profile__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px) {
  .supporter-profile__avatar { width: 96px; height: 96px; font-size: 2.25rem; border-width: 4px; }
}

.supporter-profile__identity { padding-bottom: var(--space-2); min-width: 0; }
.supporter-profile__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.supporter-profile__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
}
.supporter-profile__joined {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(91, 158, 238, 0.10);
  border: 1px solid rgba(91, 158, 238, 0.32);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sky-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.supporter-profile__handle {
  margin: 6px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.supporter-profile__headline {
  margin: 8px 0 0;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 56ch;
}
.supporter-profile__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Hero stats grid ───────────────────────────────────── */
.supporter-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
@media (max-width: 760px) {
  .supporter-stats { grid-template-columns: repeat(2, 1fr); }
}
.supporter-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}
.supporter-stat--feature {
  background: linear-gradient(135deg, var(--coral-soft) 0%, var(--surface) 60%);
  border-color: rgba(240, 106, 146, 0.30);
}
.supporter-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.supporter-stat--feature .supporter-stat__value { color: var(--coral-strong); }
.supporter-stat__label {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 600;
}

/* ── Section headers ───────────────────────────────────── */
.supporter-profile__section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.supporter-profile__section-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 2px 8px;
  background: var(--coral-soft);
  color: var(--coral-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.supporter-profile__bio,
.supporter-profile__causes,
.supporter-profile__walls,
.supporter-profile__creators,
.supporter-profile__timeline {
  margin-bottom: var(--space-10);
}
.supporter-profile__bio p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}

/* ── Causes touched strip ──────────────────────────────── */
.supporter-causes-strip {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.supporter-cause-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.18s var(--ease-out);
}
.supporter-cause-chip:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.supporter-cause-chip__mark {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-together);
  color: white;
  font-weight: 800;
  font-size: 0.75rem;
  overflow: hidden;
}
.supporter-cause-chip__mark img { width: 100%; height: 100%; object-fit: cover; }
.supporter-cause-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supporter-cause-chip__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.supporter-cause-chip__pixels {
  font-size: 0.75rem;
  color: var(--coral-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Walls (with personal pixels overlay) ──────────────── */
.campaign-grid--with-personal { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.supporter-wall-card-wrap { position: relative; }
.supporter-wall-card-wrap__personal {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(26, 20, 40, 0.78);
  backdrop-filter: blur(6px);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 2;
  pointer-events: none;
}
.supporter-wall-card-wrap__pixels {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.supporter-wall-card-wrap__label {
  font-size: 0.6875rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Creators backed strip ─────────────────────────────── */
.supporter-creators-strip {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.supporter-creator-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.18s var(--ease-out);
}
.supporter-creator-chip:hover {
  border-color: var(--sky);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.supporter-creator-chip__avatar {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-weight: 800;
  overflow: hidden;
}
.supporter-creator-chip__avatar img { width: 100%; height: 100%; object-fit: cover; }
.supporter-creator-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supporter-creator-chip__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.supporter-creator-chip__verified { color: var(--sky-strong); }
.supporter-creator-chip__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ── Activity timeline ─────────────────────────────────── */
.supporter-timeline {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.supporter-timeline__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--line);
}
.supporter-timeline__row:last-child { border-bottom: 0; }
.supporter-timeline__row:hover { background: var(--surface-sunk); }
.supporter-timeline__swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(26, 20, 40, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30);
  flex-shrink: 0;
}
.supporter-timeline__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.45;
}
.supporter-timeline__text a { color: inherit; font-weight: 600; border-bottom: 1px dashed transparent; }
.supporter-timeline__text a:hover { border-bottom-color: var(--coral); }
.supporter-timeline__text strong { font-weight: 700; }
.supporter-timeline__note {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-style: italic;
}
.supporter-timeline__time {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Empty + CTA ───────────────────────────────────────── */
.supporter-profile__empty,
.supporter-profile__cta {
  margin: var(--space-8) 0 0;
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg, rgba(91,158,238,0.08) 0%, rgba(240,106,146,0.10) 100%);
  border: 1px solid rgba(240, 106, 146, 0.20);
  border-radius: var(--radius-xl);
  text-align: center;
}
.supporter-profile__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  text-align: left;
  align-items: center;
}
@media (max-width: 760px) {
  .supporter-profile__cta { grid-template-columns: 1fr; text-align: center; }
}
.supporter-profile__empty-title,
.supporter-profile__cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.supporter-profile__empty-lede,
.supporter-profile__cta-lede {
  margin: 0 auto var(--space-5);
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 52ch;
}
.supporter-profile__cta-lede { margin-bottom: 0; }
.supporter-profile__empty-actions,
.supporter-profile__cta-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Private-profile stub ──────────────────────────────── */
.supporter-profile__stub {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface-sunk);
  border-radius: var(--radius-lg);
}
.supporter-profile__stub-icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.supporter-profile__stub-icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.supporter-profile__stub-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.supporter-profile__stub-lede {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.supporter-profile__stub-lede a { color: var(--coral); font-weight: 600; }


/* ============================================================
   Supporter profile editor (Phase B)
   Reuses the studio editor's form-card / preview-card primitives.
   These are the bits unique to the supporter editor.
   ============================================================ */

/* ── Handle input with URL prefix ───────────────────────── */
.handle-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.handle-input:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.15);
}
.handle-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cream-sunk);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-right: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.handle-input .form-input {
  border: 0 !important;
  box-shadow: none !important;
  flex: 1;
  border-radius: 0 !important;
}

/* ── Privacy toggle (label + checkbox + body block) ─────── */
.form-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.form-toggle:hover { border-color: var(--coral); }
.form-toggle:has(input:checked) {
  background: rgba(91, 158, 238, 0.06);
  border-color: rgba(91, 158, 238, 0.32);
}
.form-toggle__input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--coral);
  flex-shrink: 0;
}
.form-toggle__body { display: flex; flex-direction: column; gap: 2px; }
.form-toggle__title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9375rem;
}
.form-toggle__hint {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}


/* ============================================================
   Supporter badges (Phase C)
   ============================================================ */

.supporter-profile__badges { margin-bottom: var(--space-10); }

.badge-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.badge {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.badge.is-focused {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.18), var(--shadow-sm);
  animation: badgeFocus 1.6s var(--ease-out);
}
@keyframes badgeFocus {
  0%   { box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.55), var(--shadow-sm); }
  100% { box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.18), var(--shadow-sm); }
}

.badge__medallion {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  box-shadow: var(--shadow-md), inset 0 -2px 6px rgba(0,0,0,0.18);
  position: relative;
}
.badge__medallion::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  pointer-events: none;
}
.badge__icon {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20));
}
.badge--together .badge__medallion { background: var(--grad-together); }
.badge--cool     .badge__medallion { background: var(--grad-cool); }
.badge--warm     .badge__medallion { background: var(--grad-warm); }

.badge__body { min-width: 0; }
.badge__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  color: var(--ink);
}
.badge__description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}
.badge__context {
  display: inline;
  white-space: normal;
}
.badge__context strong { color: var(--ink); font-weight: 600; }
.badge__date {
  margin: 4px 0 0;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge__share {
  background: var(--cream-sunk);
  border: 1px solid var(--line);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 0.15s var(--ease-out);
  align-self: start;
  margin-top: 4px;
}
.badge__share:hover {
  background: var(--coral-soft);
  color: var(--coral-strong);
  border-color: rgba(240, 106, 146, 0.30);
}
.badge__share svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge--locked {
  opacity: 0.55;
  background: var(--surface-sunk);
  border-style: dashed;
}
.badge--locked .badge__medallion {
  background: var(--line-strong);
  box-shadow: none;
  filter: grayscale(1);
}
.badge--locked .badge__date::before { content: "🔒  "; }


/* ============================================================
   Pricing page
   ============================================================ */

.pricing-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-8);
  text-align: center;
}
@media (max-width: 680px) {
  .pricing-hero { padding: var(--space-8) var(--space-4) var(--space-6); }
}
.pricing-hero__inner { max-width: 720px; margin: 0 auto; }
.pricing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: var(--space-3) 0 var(--space-4);
}
.pricing-hero__title em {
  font-style: normal;
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing-hero__lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin: 0 auto;
  line-height: 1.55;
  max-width: 56ch;
}

.section--pricing-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
}
@media (max-width: 680px) {
  .section--pricing-grid { padding: var(--space-4) var(--space-4) var(--space-10); }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card--recommended {
  border-color: rgba(240, 106, 146, 0.45);
  box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.10), var(--shadow-md);
}
.pricing-card--current {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(91, 158, 238, 0.15), var(--shadow-sm);
}

.pricing-card__ribbon {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--grad-together);
  color: white;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.pricing-card__head { text-align: left; }
.pricing-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
.pricing-card__blurb {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.pricing-card__price {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) 0;
}
.pricing-card__price-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricing-card__price-period {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  font-weight: 500;
  margin-left: 4px;
}
.pricing-card__price-annual {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.pricing-card__price-annual strong { color: var(--coral-strong); font-weight: 700; }

.pricing-card__take {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.pricing-card__take-rate {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--coral-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pricing-card__take-label {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card__features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.5;
}
.pricing-card__check {
  color: var(--coral);
  font-weight: 800;
}
.pricing-card--recommended .pricing-card__check { color: var(--coral-strong); }

.pricing-card__cta { margin-top: auto; }
.pricing-card__cta .btn { width: 100%; justify-content: center; }
.pricing-card__current-tag {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  pointer-events: none;
  background: rgba(91, 158, 238, 0.08);
  border-color: rgba(91, 158, 238, 0.32);
  color: var(--sky-strong);
}


/* ── Waitlist card ─────────────────────────────────────── */
.section--waitlist {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
  scroll-margin-top: 80px;
}
@media (max-width: 680px) {
  .section--waitlist { padding: var(--space-4) var(--space-4) var(--space-10); }
}

.waitlist-card {
  background: linear-gradient(135deg, rgba(240, 106, 146, 0.06) 0%, rgba(91,158,238,0.06) 100%);
  border: 1px solid rgba(240, 106, 146, 0.20);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 680px) {
  .waitlist-card { padding: var(--space-5); }
}
.waitlist-card__head { text-align: center; margin-bottom: var(--space-6); }
.waitlist-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.waitlist-card__lede {
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 56ch;
}

.waitlist-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.tier-radio-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tier-radio-row__option {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s var(--ease-out);
}
.tier-radio-row__option:has(input:checked) {
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral-strong);
  font-weight: 700;
}
.tier-radio-row__option input[type="radio"] { accent-color: var(--coral); }


/* ── FAQ ───────────────────────────────────────────────── */
.section--pricing-faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-16);
}
@media (max-width: 680px) {
  .section--pricing-faq { padding: 0 var(--space-4) var(--space-12); }
}
.pricing-faq__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
  color: var(--ink);
}
.pricing-faq dl { margin: 0; }
.pricing-faq dt {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-2);
}
.pricing-faq dt:first-child { margin-top: 0; }
.pricing-faq dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  line-height: 1.6;
}


/* ============================================================
   Magic-link auth pages — request, sent, failed
   ============================================================ */

.magic-link {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  justify-content: center;
}
@media (max-width: 680px) {
  .magic-link { padding: var(--space-8) var(--space-4) var(--space-12); }
}

.magic-link__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  width: 100%;
  text-align: left;
}
.magic-link__card--sent,
.magic-link__card--failed { text-align: center; }

.magic-link__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral-strong);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto var(--space-4);
}
.magic-link__icon--warn {
  background: rgba(246, 167, 101, 0.18);
  color: #B86A2C;
}

.magic-link__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.magic-link__lede {
  margin: 0 0 var(--space-6);
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.magic-link__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.magic-link__form .btn { align-self: flex-start; }

.magic-link__hint {
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.magic-link__hint a { color: var(--coral); font-weight: 600; }

.magic-link__alt {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.magic-link__alt a { color: var(--coral); font-weight: 600; }


/* Password reveal toggle — wraps any password input. The eye icon
   sits inside the input on the right; click flips the input.type
   and swaps the icon. Pure progressive enhancement: without JS,
   the icon is just a button that does nothing (the password input
   still works as a normal field). */
.password-field {
  position: relative;
}
.password-field input {
  /* Make room for the 36-px toggle button on the right edge so the
     dots / chars don't run under it. */
  padding-right: 44px;
}
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}
.password-field__toggle:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
}
.password-field__toggle:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.password-field__icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-field__icon[hidden] { display: none; }


/* Login secondary path — magic-link form collapsed under a chevron
   summary on the login page. Same styling rules; renamed from
   .login-password when password became the primary path. */
.login-magic {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.login-magic > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.login-magic > summary::-webkit-details-marker { display: none; }
.login-magic > summary::before {
  content: "›";
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink-muted);
  transition: transform 0.2s ease;
}
.login-magic[open] > summary::before { transform: rotate(90deg); }
.login-magic > summary:hover { color: var(--coral); }
.login-magic .magic-link__form { margin-top: var(--space-3); }


/* Set-password page action row — Save + Skip side-by-side, Skip
   visually de-emphasised so we don't pressure the user either way. */
.set-password__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.set-password__actions .btn { flex: 1 1 auto; min-width: 140px; }


/* ============================================================
   Auth-gate modal (Slice 2.2)
   ============================================================ */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
/* The class's display:grid would otherwise win over [hidden]'s
   user-agent display:none and the modal would refuse to dismiss. */
.auth-gate[hidden] { display: none; }
.auth-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: authGateFadeIn 0.18s var(--ease-out);
}
@keyframes authGateFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.auth-gate__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  width: min(440px, 100%);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  animation: authGatePanelIn 0.22s var(--ease-spring);
}
@keyframes authGatePanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-gate__close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  color: var(--ink-soft);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  line-height: 1;
}
.auth-gate__close:hover { background: var(--cream-sunk); color: var(--ink); }
.auth-gate__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral-strong);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto var(--space-4);
}
.auth-gate__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}
.auth-gate__lede {
  margin: 0 0 var(--space-5);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.auth-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.auth-gate__form .form-row label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.auth-gate__submit { width: 100%; justify-content: center; }
.auth-gate__submit:disabled { opacity: 0.6; cursor: wait; }
.auth-gate__hint {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.5;
}


/* ============================================================
   Checkout (Slice 2.3) — amount picker + status pages
   ============================================================ */

.checkout {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-12);
}
@media (max-width: 680px) { .checkout { padding: var(--space-5) var(--space-4) var(--space-10); } }

.checkout__head { margin-bottom: var(--space-8); }
.checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}
.checkout__back svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.checkout__back:hover { color: var(--coral); }
.checkout__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 4px 0 var(--space-3);
  color: var(--ink);
}
.checkout__lede {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 60ch;
}

.checkout__layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 760px) {
  .checkout__layout { grid-template-columns: 1fr; gap: var(--space-5); }
}

.checkout__pixel,
.checkout__form-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.checkout__section-title {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.checkout__section-title:not(:first-of-type) { margin-top: var(--space-5); }

.checkout-pixel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.checkout-pixel__swatch {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(26, 20, 40, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.checkout-pixel__body { display: flex; flex-direction: column; gap: 2px; }
.checkout-pixel__coord {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.checkout-pixel__cause {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.checkout-pixel__cause strong { color: var(--ink); font-weight: 600; }
.checkout-pixel__note {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-style: italic;
}
.checkout-pixel__hint { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }

.checkout__creator-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.checkout__creator-cause {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ── Amount picker ─────────────────────────────────────── */
.amount-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.amount-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.amount-chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.amount-chip:hover { border-color: var(--coral); }
.amount-chip:has(input:checked) {
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral-strong);
  box-shadow: 0 0 0 2px rgba(240, 106, 146, 0.18);
}
.amount-chip__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.amount-chip__hint {
  font-size: 0.6875rem;
  color: inherit;
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.amount-chip--custom {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
}
.amount-chip__custom-input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-strong);
}
.amount-chip__custom-input:focus { border-bottom-color: var(--coral); }

.checkout-form__submit { width: 100%; justify-content: center; margin-top: var(--space-3); }
.checkout-form__safety {
  margin: var(--space-3) 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ── Status pages ──────────────────────────────────────── */
.checkout-status {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  justify-content: center;
}
.checkout-status__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.checkout-status__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral-strong);
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 auto var(--space-4);
}
.checkout-status--success .checkout-status__icon {
  background: rgba(91, 158, 238, 0.14);
  color: var(--sky-strong);
}
.checkout-status__icon--neutral { background: var(--cream-sunk); color: var(--ink-muted); }
.checkout-status__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.checkout-status__lede {
  margin: 0 0 var(--space-5);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.checkout-status__lede strong { color: var(--ink); font-weight: 600; }
.checkout-status__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ─────────────────────────────────────────────────────────────────
   /for-creators/ specific blocks: side-by-side compare, CTA card,
   FAQ accordion. Reused on any future landing page that needs the
   same patterns.
   ───────────────────────────────────────────────────────────── */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}

.versus__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.versus__col--against {
  background: linear-gradient(180deg, #fff, rgba(0,0,0,0.015));
  color: var(--ink-soft);
}

.versus__col--for {
  background: linear-gradient(180deg, rgba(240,106,146,0.04), rgba(91,158,238,0.05));
  border-color: rgba(184,122,189,0.25);
  box-shadow: 0 12px 36px rgba(184,122,189,0.08);
}

.versus__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.versus__col--for .versus__label {
  background: var(--grad-together);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.versus__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.versus__list li {
  position: relative;
  padding-left: 1.75rem;
}

.versus__list li::before {
  content: "−";
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--ink-muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
}

.versus__list--check li::before {
  content: "✓";
  background: var(--grad-together);
  color: white;
}

.versus__divider {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; }
  .versus__divider { transform: rotate(90deg); margin: var(--space-2) auto; }
}


.cta-card {
  position: relative;
  border-radius: 24px;
  padding: var(--space-10) var(--space-8);
  background:
    radial-gradient(ellipse at top left, rgba(240,106,146,0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(91,158,238,0.10), transparent 60%),
    #14111E;
  color: #F2EEFF;
  overflow: hidden;
  text-align: center;
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(240,106,146,0.18) 0 1px, transparent 1.2px),
    radial-gradient(circle at 78% 70%, rgba(91,158,238,0.16) 0 1px, transparent 1.2px),
    radial-gradient(circle at 45% 90%, rgba(184,122,189,0.12) 0 1px, transparent 1.2px);
  background-size: 28px 28px, 32px 32px, 36px 36px;
  opacity: 0.55;
  pointer-events: none;
}

.cta-card__inner { position: relative; max-width: 640px; margin: 0 auto; }

.cta-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  margin: var(--space-2) 0 var(--space-3);
  color: #F2EEFF;
}

.cta-card__lede {
  color: rgba(242, 238, 255, 0.78);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}

.cta-card__actions {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.cta-card .btn--ghost {
  border-color: rgba(242, 238, 255, 0.4);
  color: #F2EEFF;
}

.cta-card .btn--ghost:hover {
  border-color: #F2EEFF;
  background: rgba(255,255,255,0.06);
}


.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__item[open] {
  border-color: rgba(184,122,189,0.4);
  box-shadow: 0 12px 28px rgba(184,122,189,0.10);
}

.faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink-muted);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.faq__item[open] .faq__q::after {
  content: "−";
  background: var(--grad-together);
  color: white;
  transform: rotate(180deg);
}

.faq__a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}


/* ────────────────────────────────────────────────────────────────
   Charity directory  (/causes/)
   Public list of active causes. Hero + filter row + card grid.
   ──────────────────────────────────────────────────────────────── */

.cause-directory {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

.cause-directory__hero {
  text-align: center;
  margin-bottom: var(--space-7);
}
.cause-directory__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--ink);
}
.cause-directory__lede {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.cause-directory__lede a {
  color: var(--coral, #F06A92);
  font-weight: 600;
  text-decoration: none;
}
.cause-directory__lede a:hover { text-decoration: underline; }

.cause-directory__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}
.cause-directory__search {
  flex: 1 1 280px;
  min-width: 0;
}
.cause-directory__controls select.form-input {
  flex: 0 1 220px;
  cursor: pointer;
}

.cause-directory__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.cause-directory__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out);
}
.cause-directory__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(240, 106, 146, 0.35);
}

.cause-directory__link {
  display: block;
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}

.cause-directory__mark {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.cause-directory__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cause-directory__initials {
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
}

.cause-directory__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.cause-directory__summary {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
  /* Clamp to two lines so cards stay roughly equal-height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.cause-directory__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.cause-directory__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.cause-directory__page {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.cause-directory__empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.cause-directory__empty a {
  color: var(--coral, #F06A92);
  font-weight: 600;
}

@media (max-width: 600px) {
  .cause-directory { padding: var(--space-5) var(--space-3) var(--space-7); }
  .cause-directory__controls { padding: var(--space-2); }
  .cause-directory__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}


/* ────────────────────────────────────────────────────────────────
   Charity public profile  (/causes/<slug>/)
   Hero (cover + mark + identity), stats strip, about, featured
   creators row, live-campaigns grid, fundraise CTA. Accent colour
   is provided by the inline `--cause-accent` custom property on
   .cause-public — components below opt into it via fallback.
   ──────────────────────────────────────────────────────────────── */

.cause-public {
  --cause-accent: var(--coral, #F06A92);   /* default tint */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-9);
}

.cause-public__cover {
  height: clamp(180px, 28vw, 320px);
  margin: 0 calc(-1 * var(--space-5)) var(--space-6);
  background-size: cover;
  background-position: center;
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
}

.cause-public__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}
/* If a cover image is present, lift the mark over the band. */
.cause-public__cover + .cause-public__hero {
  margin-top: calc(var(--space-7) * -1);
  padding-top: 0;
  align-items: end;
}
.cause-public__cover + .cause-public__hero .cause-public__mark {
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
}

.cause-public__mark {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.cause-public__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cause-public__initials {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
}

.cause-public__head .eyebrow--coral { color: var(--cause-accent); }
.cause-public__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ink);
}
.cause-public__summary {
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 56ch;
}
.cause-public__site {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--cause-accent);
  font-weight: 600;
  text-decoration: none;
}
.cause-public__site:hover { text-decoration: underline; }

.cause-public__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cause-public__stat {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cause-public__stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cause-public__stat-label {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cause-public__about,
.cause-public__featured,
.cause-public__campaigns {
  margin-bottom: var(--space-7);
}
.cause-public h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

.cause-public__about p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 70ch;
}

/* Featured creators row */
.cause-public__featured-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.cause-public__featured-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.cause-public__featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cause-public__featured-card a {
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.cause-public__featured-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  margin: 0 auto var(--space-2);
  display: block;
}
.cause-public__featured-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: 2px;
}
.cause-public__featured-role {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.cause-public__featured-stat {
  font-size: 0.8125rem;
  color: var(--cause-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Live campaigns grid */
.cause-public__campaigns-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.cause-public__campaign {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out);
}
.cause-public__campaign a {
  display: block;
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink);
}
.cause-public__campaign:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 106, 146, 0.35);
  box-shadow: var(--shadow-md);
}
.cause-public__campaign-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.cause-public__campaign-creator {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.cause-public__campaign-progress {
  font-size: 0.8125rem;
  color: var(--cause-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cause-public__empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  color: var(--ink-soft);
}
.cause-public__empty a {
  color: var(--cause-accent);
  font-weight: 600;
}

/* Closing CTA — stronger card to prompt action. */
.cause-public__cta {
  background: linear-gradient(135deg, rgba(240, 106, 146, 0.08), rgba(91, 158, 238, 0.08));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.cause-public__cta h2 { margin-bottom: var(--space-2); }
.cause-public__cta p {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.cause-public__cta-btn {
  /* When accent_color is set inline, the inline `background:` rule
     wins by specificity. Without an accent we get the default
     btn--gradient look. */
}

@media (max-width: 600px) {
  .cause-public { padding: 0 var(--space-3) var(--space-7); }
  .cause-public__cover { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); }
  .cause-public__hero {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: left;
  }
  .cause-public__mark { width: 72px; height: 72px; }
  .cause-public__cover + .cause-public__hero { margin-top: calc(var(--space-6) * -1); }
}


/* ────────────────────────────────────────────────────────────────
   Charity admin dashboard  (/causes/<slug>/manage[/team|/audit|...])
   Shared shell + tab strip + per-tab list/card styles.
   ──────────────────────────────────────────────────────────────── */

.cause-manage {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

.cause-manage__header {
  margin-bottom: var(--space-5);
}
.cause-manage__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ink);
}
.cause-manage__status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.cause-manage__role {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.cause-manage__public-link {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
}
.cause-manage__public-link a {
  color: var(--coral, #F06A92);
  font-weight: 600;
  text-decoration: none;
}
.cause-manage__public-link a:hover { text-decoration: underline; }

/* Tabs strip */
.cause-manage__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.cause-manage__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;     /* line up with parent border */
  white-space: nowrap;
  transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.cause-manage__tab:hover { color: var(--ink); }
.cause-manage__tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--coral, #F06A92);
  font-weight: 600;
}

/* Headings inside tabs */
.cause-manage h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--ink);
}
.cause-manage h2:first-child { margin-top: 0; }

.cause-manage__hint {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}

/* Listing form layout */
.cause-manage__form .form-row { margin-bottom: var(--space-4); }
.cause-manage__form input[type="text"],
.cause-manage__form input[type="url"],
.cause-manage__form input[type="email"],
.cause-manage__form input[type="number"],
.cause-manage__form select,
.cause-manage__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.cause-manage__form input:focus,
.cause-manage__form select:focus,
.cause-manage__form textarea:focus {
  outline: none;
  border-color: var(--coral, #F06A92);
  box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.18);
}
.cause-manage__form input[type="color"] {
  height: 40px;
  width: 100%;
  padding: 4px;
}
.cause-manage__form textarea { resize: vertical; min-height: 64px; }
.cause-manage__form label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.cause-manage__form button[type="submit"] {
  margin-top: var(--space-2);
}

/* Danger zone (suspend / resume) */
.cause-manage__danger {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid #f3c1d3;
  background: #fff8fa;
  border-radius: var(--radius-lg);
}
.cause-manage__danger-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
  color: #9c2a4f;
}
.cause-manage__danger .form-help { margin-bottom: var(--space-3); }


/* Status pills not yet in the global pill set. */
.pill--pending {
  background: rgba(240, 165, 75, 0.16);
  color: #8a4a00;
  border-color: transparent;
}
.pill--danger {
  background: rgba(220, 70, 95, 0.14);
  color: #9c2a4f;
  border-color: transparent;
}
.pill--coral {
  background: var(--coral-soft, rgba(240, 106, 146, 0.16));
  color: var(--coral-strong, #b1325b);
  border-color: transparent;
  font-size: 0.75rem;
  padding: 1px 6px;
  margin-left: 4px;
}


/* ─── Team tab ─── */

.cause-team-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cause-team-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.cause-team-list__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.cause-team-list__who strong {
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.cause-team-list__expiry {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.cause-team-list__action,
.cause-team-list__action form { margin: 0; }
.cause-team-list__self {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.cause-team-list__digest {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.cause-team-list__digest-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: var(--space-2);
}
.cause-team-list__digest-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}


/* ─── Audit / Activity tab ─── */

.cause-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cause-audit-list__row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.cause-audit-list__when {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cause-audit-list__what {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.cause-audit-list__summary {
  font-size: 0.9375rem;
  color: var(--ink);
  word-break: break-word;
}
.cause-audit-list__who {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.cause-audit-list__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-soft);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}


/* ─── Approvals tab ─── */

.cause-approvals-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cause-approvals-list__row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.cause-approvals-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cause-approvals-list__head strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.0625rem;
}
.cause-approvals-list__creator,
.cause-approvals-list__when {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.cause-approvals-list__pitch {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.cause-approvals-list__story {
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
}
.cause-approvals-list__story summary {
  cursor: pointer;
  color: var(--coral, #F06A92);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.cause-approvals-list__story p {
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.cause-approvals-list__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.cause-approvals-list__actions textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
}
.cause-approvals-list__buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cause-approvals-list__hint,
.cause-approvals-list__empty {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.cause-approvals-list__empty {
  padding: var(--space-6);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.cause-approvals-list--decided .cause-approvals-list__row {
  opacity: 0.85;
}


/* ─── Outreach tab (cause side) ─── */

.cause-outreach-sent {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cause-outreach-sent__row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.cause-outreach-sent__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cause-outreach-sent__head strong { color: var(--ink); }
.cause-outreach-sent__when {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.cause-outreach-sent__msg {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cause-outreach-sent__action {
  margin-top: var(--space-2);
}
.cause-outreach-sent__action form { margin: 0; }

.cause-outreach-browse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cause-outreach-browse__row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.cause-outreach-browse__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cause-outreach-browse__who strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.0625rem;
}
.cause-outreach-browse__role {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.cause-outreach-browse__meta {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-left: auto;
}
.cause-outreach-browse__form summary {
  cursor: pointer;
  display: inline-block;
}
.cause-outreach-browse__form summary::-webkit-details-marker { display: none; }
.cause-outreach-browse__send {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.cause-outreach-browse__send textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
}
.cause-outreach-browse__send button { align-self: flex-start; }
.cause-outreach-browse__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-soft);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}


/* ─── Insights tab ─── */

.cause-insights-tiles {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.cause-insights-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cause-insights-tile__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cause-insights-tile__label {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cause-insights-creators {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.9375rem;
}
.cause-insights-creators thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cause-insights-creators td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.cause-insights-creators tr:last-child td { border-bottom: 0; }
.cause-insights-creators td a {
  color: var(--coral, #F06A92);
  font-weight: 600;
  text-decoration: none;
}
.cause-insights-creators td a:hover { text-decoration: underline; }
.cause-insights-creators .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cause-insights-creators__empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-soft);
}


@media (max-width: 720px) {
  .cause-manage { padding: var(--space-5) var(--space-3) var(--space-7); }
  .cause-audit-list__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cause-outreach-browse__meta { margin-left: 0; width: 100%; }
}


/* ────────────────────────────────────────────────────────────────
   Charity apply form  (/causes/apply/)
   Centred card on a soft surface — same visual rhythm as the
   magic-link request page.
   ──────────────────────────────────────────────────────────────── */

.cause-apply {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  justify-content: center;
}

.cause-apply__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  width: 100%;
  text-align: left;
}

.cause-apply__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--ink);
}

.cause-apply__lede {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.cause-apply__form { margin-bottom: var(--space-4); }
.cause-apply__form .form-row { margin-bottom: var(--space-4); }
.cause-apply__form input[type="text"],
.cause-apply__form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.cause-apply__form input:focus {
  outline: none;
  border-color: var(--coral, #F06A92);
  box-shadow: 0 0 0 3px rgba(240, 106, 146, 0.18);
}
.cause-apply__form label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cause-apply__form button[type="submit"] {
  margin-top: var(--space-2);
  width: 100%;
}

.cause-apply__hint {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The dev-mode disclosure is a `<details>` element that also uses
   .cause-apply__hint for typographic baseline. Styles below tighten
   the disclosure marker + nest the test-number list cleanly. */
details.cause-apply__hint {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: #fff8fa;
  border-top: 1px dashed var(--line);
}
details.cause-apply__hint summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 0.9375rem;
}
details.cause-apply__hint summary::-webkit-details-marker {
  color: var(--coral, #F06A92);
}
details.cause-apply__hint ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}
details.cause-apply__hint code {
  background: rgba(240, 106, 146, 0.10);
  color: var(--coral-strong, #b1325b);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
}

@media (max-width: 680px) {
  .cause-apply { padding: var(--space-8) var(--space-4) var(--space-12); }
  .cause-apply__card { padding: var(--space-6) var(--space-5); }
}


/* ════════════════════════════════════════════════════════════════
   /for-creators/ — the 30-day arc page
   Hero, GSAP-pinned centerpiece, social mocks, leverage cards,
   tier teaser, final CTA. Phone mockups are pure SVG/CSS — no
   image-asset dependency.
   ════════════════════════════════════════════════════════════════ */

.page-for-creators .site-main { background: linear-gradient(180deg, #fff 0%, var(--surface) 60%); }


/* ─── Hero ─── */

.creators-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-9);
}
.creators-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}
.creators-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--ink);
}
.creators-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.creators-hero__title strong {
  font-weight: inherit;
  color: var(--coral, #F06A92);
}
.creators-hero__lede {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 56ch;
}
.creators-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.creators-hero__pulse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.creators-hero__pulse strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.creators-hero__viz {
  display: grid;
  place-items: center;
}
.creators-hero__footnote {
  max-width: 640px;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

@media (max-width: 860px) {
  .creators-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .creators-hero__viz { order: -1; }
}


/* ─── Phone mock — shared bezel ─── */

.phone-mock {
  --pm-w: 280px;
  --pm-h: 560px;
  width: var(--pm-w);
  height: var(--pm-h);
  position: relative;
}
.phone-mock__bezel {
  width: 100%;
  height: 100%;
  background: #1a1428;
  border-radius: 36px;
  padding: 12px;
  box-shadow:
    0 30px 60px -20px rgba(15, 23, 42, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative;
}
.phone-mock__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  background: #0e0a18;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-mock__screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* ─── Phone screen content variants ─── */

.ph-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 14px 14px;
  gap: 10px;
  background: linear-gradient(180deg, #fff, #fef6f8);
}
.ph-feed__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.ph-feed__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F06A92, #5B9EEE);
  flex-shrink: 0;
}
.ph-feed__handle {
  font-weight: 700;
  color: var(--ink);
}
.ph-feed__sub,
.ph-feed__time {
  color: var(--ink-muted);
  font-size: 11px;
}
.ph-feed__name-block {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.ph-feed__caption {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  padding: 0 2px;
}
.ph-feed__caption--overlay {
  position: absolute;
  bottom: 56px;
  left: 12px;
  right: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
}
.ph-feed__wall {
  flex: 1;
  background: var(--ink, #1a1428);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 6px;
}
.ph-feed__wall--story { aspect-ratio: 9 / 16; flex: 1; }
.ph-feed__wall--vertical {
  flex: 1;
  border-radius: 0;
  padding: 0;
  margin: -10px -14px 0;
}
.ph-feed__wall--card {
  flex: 0 0 auto;
  height: 160px;
  border-radius: 12px;
}
.ph-feed__pill {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  z-index: 2;
}
.ph-feed__sticker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  background: #fff;
  color: var(--coral, #F06A92);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 2;
}
.ph-feed__cta {
  font-size: 11px;
  color: var(--coral, #F06A92);
  font-weight: 600;
  padding: 0 2px;
}
.ph-feed__rail {
  display: flex;
  justify-content: space-around;
  font-size: 11px;
  color: var(--ink-muted);
  padding: 6px 0 0;
}
.ph-feed--tt .ph-feed__rail {
  position: absolute;
  bottom: 12px;
  right: 12px;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  z-index: 3;
}

.ph-arc {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #fff, #fef6f8);
}
.ph-arc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 14px 8px;
  font-size: 12px;
}
.ph-arc__live { color: var(--coral, #F06A92); font-weight: 700; }
.ph-arc__title { font-weight: 700; color: var(--ink); }
.ph-arc__wall {
  flex: 1;
  background: var(--ink, #1a1428);
  margin: 0 12px;
  border-radius: 12px;
  padding: 6px;
  overflow: hidden;
}
.ph-arc__progress {
  height: 6px;
  background: rgba(0,0,0,0.06);
  margin: 10px 14px 14px;
  border-radius: 999px;
  overflow: hidden;
}
.ph-arc__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F06A92, #5B9EEE);
  transition: width 0.3s ease;
}

/* The pixel grid — used by all phone variants. JS pre-fills cells
   based on the data-fill attribute (0..1). The arc grid is animated
   live by the GSAP timeline. */
.ph-wall-grid {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 1px;
}
.ph-wall-grid__cell {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  transition: background 0.3s var(--ease-out, ease);
}


/* ─── The 30-day arc (centerpiece) ─── */

.arc {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
}
.arc__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-3);
}
.arc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--ink);
}
.arc__lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0;
}

/* The stage — full-bleed cinematic frame for the arc.
   Black backdrop, particle canvas, gradient glows that swap per
   phase, scene wrapper that scales (camera zoom), diary pinned to
   the side. Replaces the earlier pinned-scrub layout — the timeline
   now autoplays once the section enters viewport so layout never
   shifts under the user's scroll. */
.arc__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-7);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-10);
  align-items: center;
  min-height: 720px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #1a1428 0%, #0e0a18 60%, #060410 100%);
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  isolation: isolate;
}
.arc__stage::before {
  /* Subtle dot-grid texture for cinematic depth on the dark stage. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}
.arc__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Per-phase ambient glow plates. Only one is "lit" at a time —
   GSAP tweens opacity on the .is-active variant. */
.arc__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.arc__bg-glow {
  position: absolute;
  inset: -10%;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: blur(60px);
}
.arc__bg-glow--p0 { background: radial-gradient(ellipse at 50% 50%, rgba(184, 122, 189, 0.55), transparent 60%); }
.arc__bg-glow--p1 { background: radial-gradient(ellipse at 30% 40%, rgba(91, 158, 238, 0.55), transparent 60%); }
.arc__bg-glow--p2 { background: radial-gradient(ellipse at 70% 30%, rgba(240, 106, 146, 0.55), transparent 60%); }
.arc__bg-glow--p3 { background: radial-gradient(ellipse at 50% 70%, rgba(246, 167, 101, 0.55), transparent 60%); }
.arc__bg-glow--p4 { background: radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.65), transparent 60%); }

.arc__scene {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
  transform-origin: center center;
  will-change: transform;
}
.arc__scene-light {
  /* Light sweep across the phone — pure CSS, GSAP toggles the
     animation start/stop via .is-sweeping. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 600px;
  transform: translate(-50%, -50%) rotate(15deg);
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.arc__scene.is-sweeping .arc__scene-light {
  animation: arcSceneSweep 1.6s ease-in-out;
}
@keyframes arcSceneSweep {
  0% { opacity: 0; transform: translate(-150%, -50%) rotate(15deg); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(50%, -50%) rotate(15deg); }
}

/* Reveal-phase golden corona behind the final overlay. */
.arc__reveal-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse, rgba(255, 215, 0, 0.6), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.arc__replay {
  margin-top: var(--space-4);
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.arc__replay:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Overlays float above the phone scene; phase visibility driven by GSAP. */
.arc__overlay {
  position: absolute;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  z-index: 2;
}
/* Overlays sit within the scene column with small inset offsets.
   Earlier negative offsets pushed them past the stage's overflow:hidden
   boundary on the left side, clipping their leading edge. Positive
   percent offsets keep them visually "around the phone" but always
   inside the safe area. */
.arc__overlay--wizard {
  top: 6%;
  right: 4%;
  max-width: 240px;
}
.arc__overlay--share {
  bottom: 8%;
  left: 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.arc__overlay--milestone {
  top: 6%;
  left: 4%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 12px 24px rgba(240, 106, 146, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 240px;
}
.arc__overlay--messages {
  bottom: 6%;
  right: 4%;
  max-width: 260px;
}
.arc__overlay--reveal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 106, 146, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 24px 48px rgba(240, 106, 146, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  z-index: 4;
}

.arc__overlay-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arc__overlay-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral, #F06A92);
  font-weight: 700;
}
.arc__overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.3;
}
.arc__overlay-tag {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.arc__share-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.arc__share-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
}
.arc__share-chip--ig { color: #c13584; }
.arc__share-chip--tt { color: var(--ink); }
.arc__share-chip--x  { color: #1da1f2; }
.arc__share-chip--li { color: #0a66c2; }

.arc__msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arc__msgs li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  font-size: 0.8125rem;
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.arc__msg-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Diary panel (right side) — day list + live counters.
   Sits on the dark stage so colours invert: white text, soft borders. */
.arc__diary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  z-index: 2;
  position: relative;
}
.arc__days {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--space-4);
}
.arc__day {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.25s ease, transform 0.25s ease;
}
.arc__day-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  text-align: right;
  transition: color 0.25s ease;
}
.arc__day.is-active {
  color: #fff;
  transform: translateX(4px);
}
.arc__day.is-active .arc__day-tag {
  color: #F06A92;
  text-shadow: 0 0 12px rgba(240, 106, 146, 0.5);
}
.arc__counters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.arc__counters li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arc__counter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
}
.arc__counter-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.arc__counter-value.is-pulsing {
  color: #F06A92;
  text-shadow: 0 0 16px rgba(240, 106, 146, 0.6);
}

.arc__noscript {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5);
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 980px) {
  .arc__stage {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
  }
  .arc__scene { order: -1; }
  .arc__overlay--wizard,
  .arc__overlay--milestone { right: 0; left: auto; }
  .arc__overlay--share,
  .arc__overlay--messages { left: 0; right: auto; }
}


/* ─── Social mocks ─── */

.creators-social {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
}
.creators-social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  justify-items: center;
}
.creators-social__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.creators-social__metric {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.creators-social__metric strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--coral, #F06A92);
  letter-spacing: -0.01em;
}
.creators-social__metric span {
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 22ch;
}

@media (max-width: 980px) {
  .creators-social__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}


/* ─── Commercial leverage cards ─── */

.creators-leverage {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
}
.creators-leverage__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.leverage-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.leverage-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.leverage-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(240, 106, 146, 0.12), rgba(91, 158, 238, 0.12));
  color: var(--coral, #F06A92);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.leverage-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 var(--space-1);
  color: var(--ink);
}
.leverage-card__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.leverage-card__body strong { color: var(--ink); }

@media (max-width: 720px) {
  .creators-leverage__grid { grid-template-columns: 1fr; }
}


/* ─── Tier teaser ─── */

.creators-tiers {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}
.creators-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.tier-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tier-card--featured {
  border-color: rgba(240, 106, 146, 0.4);
  box-shadow: 0 16px 32px rgba(240, 106, 146, 0.12);
  transform: translateY(-4px);
}
.tier-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral, #F06A92);
}
.tier-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tier-card__price span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 4px;
}
.tier-card__hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.btn--block { display: block; text-align: center; width: 100%; margin-top: auto; }

@media (max-width: 860px) {
  .creators-tiers__grid { grid-template-columns: 1fr; }
  .tier-card--featured { transform: none; }
}


/* ─── Final CTA ─── */

.creators-cta {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5) var(--space-12);
  text-align: center;
}
.creators-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.creators-cta__lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin: 0 0 var(--space-5);
}
.creators-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* ════════════════════════════════════════════════════════════════
   /discover/ — modernised storytelling around the wall idea
   Hero with ambient blobs + live ticker · anatomy-of-a-wall strip ·
   supporter-quotes story moment. Existing featured + grid + cause
   spotlight + CTA pieces inherit their styles from earlier blocks.
   ════════════════════════════════════════════════════════════════ */

.discover-hero--alive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.discover-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.discover-hero__bg-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: discoverBlob 18s ease-in-out infinite alternate;
}
.discover-hero__bg-blob--coral {
  background: radial-gradient(circle, rgba(240, 106, 146, 0.6), transparent 70%);
  top: -120px; left: -100px;
}
.discover-hero__bg-blob--sky {
  background: radial-gradient(circle, rgba(91, 158, 238, 0.55), transparent 70%);
  bottom: -160px; right: -80px;
  animation-delay: -6s;
}
.discover-hero__bg-blob--gold {
  background: radial-gradient(circle, rgba(246, 167, 101, 0.45), transparent 70%);
  top: 30%; left: 50%;
  width: 420px; height: 420px;
  animation-delay: -12s;
}
@keyframes discoverBlob {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .discover-hero__bg-blob { animation: none; }
}

.discover-hero--alive .discover-hero__inner {
  position: relative;
  z-index: 1;
}
.discover-hero--alive .discover-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, #F06A92, #B87ABD 55%, #5B9EEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.discover-hero--alive .discover-hero__lede {
  font-weight: 500;
}


/* ─── Live activity ticker ─── */

.discover-ticker {
  margin-top: var(--space-5);
  max-width: 720px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
}
.discover-ticker__label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral, #F06A92);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.discover-ticker__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--coral, #F06A92);
  box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.45);
  animation: discoverTickerDot 1.6s ease-in-out infinite;
}
@keyframes discoverTickerDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 106, 146, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(240, 106, 146, 0); }
}
.discover-ticker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  height: 1.6em;
  position: relative;
  overflow: hidden;
}
.discover-ticker__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--ink);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  /* Staggered reveal: each row inherits a delay via nth-child to ride
     the same keyframes. The keyframe is a single 60s loop covering all
     rows, with each row visible for ~5s before the next slides in. */
  animation: discoverTickerRow 60s linear infinite;
}
.discover-ticker__row:nth-child(1)  { animation-delay: 0s; }
.discover-ticker__row:nth-child(2)  { animation-delay: -5s; }
.discover-ticker__row:nth-child(3)  { animation-delay: -10s; }
.discover-ticker__row:nth-child(4)  { animation-delay: -15s; }
.discover-ticker__row:nth-child(5)  { animation-delay: -20s; }
.discover-ticker__row:nth-child(6)  { animation-delay: -25s; }
.discover-ticker__row:nth-child(7)  { animation-delay: -30s; }
.discover-ticker__row:nth-child(8)  { animation-delay: -35s; }
.discover-ticker__row:nth-child(9)  { animation-delay: -40s; }
.discover-ticker__row:nth-child(10) { animation-delay: -45s; }
.discover-ticker__row:nth-child(11) { animation-delay: -50s; }
.discover-ticker__row:nth-child(12) { animation-delay: -55s; }
@keyframes discoverTickerRow {
  /* 60s ÷ 12 rows = 5s each. Of that: 0.4s in, 4.2s hold, 0.4s out. */
  0%      { opacity: 0; transform: translateY(110%); }
  0.7%    { opacity: 1; transform: translateY(0); }
  7.5%    { opacity: 1; transform: translateY(0); }
  8.2%    { opacity: 0; transform: translateY(-110%); }
  100%    { opacity: 0; transform: translateY(-110%); }
}
@media (prefers-reduced-motion: reduce) {
  .discover-ticker__list { height: auto; max-height: 110px; overflow-y: auto; }
  .discover-ticker__row {
    position: static; opacity: 1; transform: none; animation: none;
    padding: 4px 0;
  }
}
.discover-ticker__swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.discover-ticker__name { font-weight: 600; color: var(--ink); }
.discover-ticker__sep { color: var(--ink-muted); }
.discover-ticker__cause { color: var(--ink-soft); }
.discover-ticker__when {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}


/* ─── Anatomy of a wall (storytelling strip) ─── */

.section--anatomy {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}
/* Featured wall (.section--featured) has padding-top:0 baked in so it
   normally hugs the hero. With the anatomy strip between them, that
   produces a collision; restore breathing room when anatomy precedes. */
.section--anatomy + .section--featured {
  padding-top: var(--space-4);
}
.anatomy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.anatomy__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.anatomy__step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Mini honeycomb illustration — mirrors the live wall's hex geometry
   so the storytelling strip and the actual canvas read as the same
   object. Each step's SVG is the same 4×3 honeycomb; only the per-hex
   fill changes between states. */
.anatomy__hex {
  width: 72px;
  height: auto;
  background: var(--ink, #1a1428);
  border-radius: var(--radius-md);
  padding: 6px;
  box-sizing: content-box;
  margin-bottom: var(--space-1);
}
.anatomy__hex .hexes polygon {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(15, 10, 24, 0.6);
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition: fill 0.3s var(--ease-out, ease);
}
/* Lit-colour rules need the same selector depth as the base rule
   above so they actually win the cascade. Earlier the lit classes
   sat at lower specificity and got overridden by the empty fill. */
.anatomy__hex .hexes polygon.is-lit-pink   { fill: #F06A92; }
.anatomy__hex .hexes polygon.is-lit-blue   { fill: #5B9EEE; }
.anatomy__hex .hexes polygon.is-lit-orange { fill: #F6A765; }
.anatomy__hex .hexes polygon.is-lit-purple { fill: #B87ABD; }
.anatomy__hex .hexes polygon.is-lit-gold   { fill: #FFD166; }
/* Step 3 gets a soft glow so "the mosaic appears" reads as completion. */
.anatomy__step--3 .anatomy__hex { box-shadow: 0 0 18px rgba(240, 106, 146, 0.18); }
.anatomy__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.anatomy__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.anatomy__divider {
  font-size: 1.5rem;
  color: var(--coral, #F06A92);
  align-self: center;
  font-weight: 300;
  user-select: none;
}

@media (max-width: 860px) {
  .anatomy {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .anatomy__divider {
    transform: rotate(90deg);
    justify-self: center;
  }
}


/* ─── Supporter quotes story moment ─── */

.section--quotes {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}
.quote-row {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.quote-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quote-card__swatch {
  position: absolute;
  top: -10px; left: var(--space-4);
  width: 28px; height: 28px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.15);
}
.quote-card__body {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}
.quote-card__attr {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.quote-card__attr strong {
  color: var(--ink);
  font-weight: 600;
}