/* German Eiland -- Patreon page (2026-09-21). Layout only: every primitive
 * (.ge-panel, .ge-kpi, .ge-chip, .ge-btn, the sw-* kickers) is painted by
 * assets/ge-design.css + assets/sweet_theme.css. Tokens, never literals.
 *
 * Same page contract as wallet.css: minmax(0,1fr) on the main column is
 * LOAD-BEARING (an implicit auto column takes the widest child's min-content
 * and hands a phone a horizontal scrollbar). Every comment in this file is
 * CLOSED -- an unclosed CSS comment silently deletes the rules after it. */

.patreon-main{ max-width:1180px; margin:0 auto; padding:28px clamp(18px,4vw,32px) 80px; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }

/* ── page hero ─────────────────────────────────────────────────────────── */
.patreon-head{ margin-bottom:2px; }
.patreon-head .sw-kicker{ margin-bottom:12px; }
.patreon-title{ font-size:clamp(30px,4.6vw,46px); margin:0 0 12px; }
.patreon-head .sw-lede{ margin:0; }

/* ── signed out (same shape as the wallet page) ────────────────────────── */
.patreon-signedout{ display:grid; gap:12px; justify-items:start; max-width:480px; }
.patreon-signedout h2{ margin:0; font:700 19px/1.1 var(--display); letter-spacing:.01em; color:var(--sw-ink); }

/* ── the member panel ──────────────────────────────────────────────────── */
.patreon-me{ display:grid; gap:14px; }
.patreon-me .ge-panel-head{ margin:0; align-items:center; }
.patreon-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px 20px;
  padding-top:14px; border-top:1px solid var(--ge-line);
}
#me-panel[data-state="loading"] .patreon-kpis{ opacity:.45; }
.patreon-inactive{
  margin:0; padding:14px 16px; border-radius:10px;
  background:var(--sw-panel-2); border:1px dashed var(--sw-hair-2);
  color:var(--sw-ink-2); font-size:14px;
}

/* ── the four tiers ────────────────────────────────────────────────────── */
.patreon-section-head{ margin:0 0 4px; }
.tier-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.tier-card{
  display:grid; gap:10px; align-content:start; position:relative; overflow:hidden; border-radius:12px;
  transition:border-color .25s var(--sw-ease), transform .25s var(--sw-ease), box-shadow .25s var(--sw-ease);
}
/* State accent bar keyed off the tier: the higher the rung, the warmer the
 * glow. The fourth tier carries the pink -> teal swirl of the brand hairline. */
.tier-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sw-hair-2); }
.tier-card[data-tier="2"]::before{ background:var(--sw-teal); }
.tier-card[data-tier="3"]::before{ background:var(--sw-pink); box-shadow:0 0 16px -2px var(--sw-pink); }
.tier-card[data-tier="4"]::before{ background:linear-gradient(90deg, var(--sw-pink), var(--sw-teal)); box-shadow:0 0 18px -2px var(--sw-pink); }
.tier-card:hover{ transform:translateY(-2px); border-color:var(--sw-hair-2); }
.tier-card.is-mine{ border-color:var(--ge-accent); box-shadow:0 0 0 1px var(--ge-accent), var(--ge-shadow); }

.tier-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:18px; }
.tier-head .ge-kpi-label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sw-ink-3); }
.tier-name{ margin:0; font:700 clamp(22px,2.4vw,28px)/1.05 var(--display); letter-spacing:.01em; color:var(--sw-ink); }
.tier-price{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tier-price strong{ font-size:clamp(24px,3vw,32px); font-weight:700; line-height:1; color:var(--sw-pink); font-variant-numeric:tabular-nums; }
.tier-per{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sw-ink-3); }

.tier-perks{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:0; }
.tier-perks li{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--ge-line); font-size:14px; color:var(--sw-ink-2); }
.tier-perks li strong{ flex:0 0 auto; min-width:3.4em; color:var(--sw-ink); font-weight:700; }
.tier-signature strong{ color:var(--sw-pink); }
.tier-signature span{ color:var(--sw-ink); font-weight:600; }

.patreon-cta{ margin:6px 0 0; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.patreon-cta .ge-dim{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; }

/* ── the three steps ───────────────────────────────────────────────────── */
.patreon-steps{ display:grid; gap:4px; }
.steps-list{ margin:0; padding:0; list-style:none; counter-reset:step; display:grid; gap:14px; }
.steps-list li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:4px 14px; align-items:start; }
.steps-list li::before{
  counter-increment:step; content:counter(step);
  grid-row:span 2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font:700 14px/1 var(--mono); color:var(--ge-accent-ink); background:var(--ge-accent);
}
.steps-list li strong{ font-size:15px; color:var(--sw-ink); align-self:end; }
.steps-list li span{ font-size:14px; color:var(--sw-ink-2); }

/* ── footer (same idiom as the wallet page) ────────────────────────────── */
.page-footer{
  max-width:1180px; margin:8px auto 0; padding:18px clamp(18px,4vw,32px) 40px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sw-ink-3);
}

/* ── embedded inside the landing's iframe: the bar is hidden by topbar.css,
 * so the page starts nearer the top. ─────────────────────────────────── */
body[data-embedded="true"] .patreon-main{ padding-top:14px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .tier-grid{ grid-template-columns:minmax(0,1fr); }
  .patreon-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-footer{ flex-direction:column; gap:4px; }
}

/* ── reduced motion: no lift, every state kept ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .tier-card{ transition:none; }
  .tier-card:hover{ transform:none; }
}