/* self-hosted variable fonts (OFL 1.1, see fonts/LICENSE.txt) */
@font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:75% 100%; font-display:swap; src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 800; font-display:swap; src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   HRPC story layer (2026-10). Loaded after styles.css.
   Two worlds: the calculating one (poker, data, the app) and the dream
   one (the club, the art). See REDESIGN_STORY_SPEC.md.
   ===================================================================== */

:root{
  /* app-aligned surfaces (High Run Tracker, src/theme/colors.ts) */
  --ink-0:#0b0f14;
  --ink-1:rgba(255,255,255,.06);
  --ink-2:rgba(255,255,255,.09);
  --rule:rgba(255,255,255,.09);
  --rule-strong:rgba(255,255,255,.16);
  --paper:rgba(255,255,255,.92);
  --paper-2:rgba(255,255,255,.74);
  --paper-3:rgba(255,255,255,.56);

  /* the one signal: HRPC logo background */
  --signal:#ffb6e1;
  --signal-ink:#0b0f14;
  --signal-12:rgba(255,182,225,.12);
  --signal-24:rgba(255,182,225,.24);

  --gain:#34c759;
  --loss:#ff3b30;
  --line:#f5c542;
  --moon:#efe3b0;

  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease-calc:cubic-bezier(.2,0,0,1);
  --ease-dream:cubic-bezier(.16,1,.3,1);

  --gutter:clamp(20px,5vw,64px);
  --wrap:1240px;
}

html{ background:var(--ink-0); }
body{
  background:var(--ink-0);
  color:var(--paper);
  font-family:var(--f-body);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
}

/* the old ambient glow layers are retired: depth comes from type and rules now */
.bg-ambient,.bg-scanline{ display:none !important; }
.scroll-progress{ height:2px; background:var(--signal); box-shadow:none; }

::selection{ background:var(--signal); color:var(--signal-ink); }

.s-wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- shared primitives ---------- */

/* section coordinate: §01 ——— The data */
.coord{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 28px;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--paper-3);
  text-transform:uppercase;
}
.coord__sec{ color:var(--signal); }
.coord__rule{
  flex:0 0 56px;
  height:1px;
  background:var(--rule-strong);
  transform-origin:left center;
}
.coord__name{ letter-spacing:.08em; }
.js-motion .coord__rule{ transform:scaleX(0); transition:transform .6s var(--ease-calc) .1s; }
.js-motion .is-in .coord__rule{ transform:scaleX(1); }

.s-title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96, "wdth" 92;
  font-size:clamp(2.2rem,4.6vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--paper);
  max-width:17ch;
  text-wrap:balance;
}
.s-sub{
  margin:24px 0 0;
  max-width:54ch;
  font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.6;
  color:var(--paper-2);
  text-wrap:pretty;
}
.s-head{ margin-bottom:clamp(48px,8vw,96px); }

.k-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:4px;
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .24s var(--ease-calc), background-color .24s var(--ease-calc), color .24s var(--ease-calc), border-color .24s var(--ease-calc);
}
.k-btn::before,.k-btn::after{ content:none !important; }
.k-btn--signal{
  background:var(--signal) !important;
  color:var(--signal-ink) !important;
  border:1px solid var(--signal);
  box-shadow:none !important;
}
.k-btn--signal:hover{ transform:translateY(-2px); background:#ffc8e8 !important; }
.k-btn--line{
  background:transparent !important;
  color:var(--paper) !important;
  border:1px solid var(--rule-strong);
  box-shadow:none !important;
}
.k-btn--line:hover{ border-color:var(--paper-2); transform:translateY(-2px); }
.k-btn:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* faint coordinate grid behind the calculating world */
.calc-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 80%);
          mask-image:radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 80%);
}

/* ---------- §00 hero ---------- */
.s-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-height,72px) + 48px) 0 72px;
  overflow:hidden;
  background:var(--ink-0);
}
.s-hero__wrap{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,80px);
  align-items:end;
}
.s-hero__title.hero-title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96, "wdth" 90;
  font-size:clamp(3rem,6.4vw,6.6rem);
  line-height:.94;
  letter-spacing:-.03em;
  color:var(--paper);
  text-transform:none;
  background:none;
  -webkit-text-fill-color:currentColor;
}
.s-line{ display:block; }
.s-hero__title em{
  font-style:normal;
  color:var(--signal);
}
.s-hero__lede{
  margin:32px 0 0;
  max-width:36ch;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.55;
  color:var(--paper-2);
}
.s-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:40px;
}
.s-hero__ledger{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr)) minmax(0,1.3fr);
  margin:var(--sp-xl) 0 0;
  border-top:1px solid var(--rule);
}
.ledger-cell{
  padding:16px 16px 0 0;
  border-right:1px solid var(--rule);
  margin-right:16px;
}
.ledger-cell:last-child{ border-right:0; margin-right:0; }
.ledger-cell dt{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-3);
}
.ledger-cell dd{
  margin:8px 0 0;
  font-family:var(--f-mono);
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
  white-space:nowrap;
}
.ledger-cell__of{ color:var(--paper-3); font-weight:400; }

/* cumulative result chart: same grammar as the app's P&L graph */
.s-hero__chart{
  margin:0;
  padding:20px 20px 16px;
  border:1px solid var(--rule);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.chart-head,.chart-foot{
  display:flex;
  justify-content:space-between;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-3);
  text-transform:uppercase;
}
.chart-head__n b{ color:var(--paper); font-weight:600; font-variant-numeric:tabular-nums; }
.chart-foot{ margin-top:12px; text-transform:none; letter-spacing:0; }
.pl-chart{
  display:block;
  width:100%;
  height:clamp(220px,30vw,360px);
  margin-top:14px;
  overflow:visible;
}
.pl-chart__grid line{ stroke:rgba(255,255,255,.06); stroke-width:.5; vector-effect:non-scaling-stroke; }
.pl-chart__zero{ stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.pl-chart__line{
  fill:none;
  stroke:var(--line);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.pl-chart__dot{ fill:var(--line); }

/* ---------- §01 tracker ---------- */
.s-tracker{
  position:relative;
  padding:clamp(96px,14vw,180px) 0 clamp(72px,10vw,120px);
  background:var(--ink-0);
  border-top:1px solid var(--rule);
}

.scrolly{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,6vw,96px);
}
.scrolly__stage{
  position:sticky;
  top:calc(var(--nav-height,72px) + 4vh);
  height:calc(100svh - var(--nav-height,72px) - 8vh);
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone{
  position:relative;
  width:min(340px,100%);
  aspect-ratio:880/1905;
  max-height:100%;
  border-radius:42px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--rule-strong);
}
.phone__shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease-calc), opacity .3s linear;
}
.phone__shot.is-on{ opacity:1; clip-path:inset(0 0 0 0); }

.scrolly__steps{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}
.step{
  min-height:72svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 0;
  border-top:1px solid var(--rule);
  opacity:.26;
  transition:opacity .4s var(--ease-calc);
}
.step:first-child{ border-top:0; }
.step.is-on{ opacity:1; }
.step__no{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--signal);
  letter-spacing:.06em;
}
.step__title{
  margin:14px 0 0;
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96, "wdth" 92;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1;
  letter-spacing:-.022em;
  color:var(--paper);
}
.step__body{
  margin:18px 0 0;
  max-width:40ch;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--paper-2);
}
.step__shot{ display:none; }

/* figures, set as a ledger row */
.s-tracker .tracker-spec{
  margin:clamp(72px,10vw,120px) 0 0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.s-tracker .spec-figures{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule);
  background:none;
  gap:0;
}
.s-tracker .spec-figure{
  padding:28px 20px 24px 0;
  border-right:1px solid var(--rule);
  margin-right:20px;
  background:none;
  border-radius:0;
  text-align:left;
}
.s-tracker .spec-figure:last-child{ border-right:0; margin-right:0; }
.s-tracker .spec-figure__num{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96, "wdth" 88;
  font-size:clamp(2.6rem,5.4vw,4.8rem);
  line-height:.95;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
  background:none;
  -webkit-text-fill-color:currentColor;
}
.s-tracker .spec-figure__num span{ color:var(--signal); -webkit-text-fill-color:currentColor; }
.s-tracker .spec-figure__label{
  margin:12px 0 0;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper-3);
}

.get-app{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand buttons" "more more";
  align-items:center;
  gap:20px 32px;
  margin-top:clamp(56px,8vw,96px);
}
.get-app__brand{ grid-area:brand; display:flex; align-items:center; gap:18px; }
.get-app__icon{ width:64px; height:64px; border-radius:16px; }
.get-app__name{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-.02em;
}
.get-app__meta{ margin:4px 0 0; font-family:var(--f-mono); font-size:12px; color:var(--paper-3); }
.s-tracker .tracker-buttons{ grid-area:buttons; margin:0; }
.get-app__more{
  grid-area:more;
  justify-self:start;
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--paper-2);
  text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:2px;
}
.get-app__more:hover{ color:var(--signal); border-color:var(--signal); }

.s-tracker .tracker-gallery{ margin-top:clamp(56px,8vw,96px); }

.spec-ledger{
  margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.spec-ledger__sum{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper-2);
}
.spec-ledger__sum::-webkit-details-marker{ display:none; }
.spec-ledger__hint{ font-size:20px; color:var(--signal); transition:transform .24s var(--ease-calc); }
.spec-ledger[open] .spec-ledger__hint{ transform:rotate(45deg); }
.spec-ledger .spec-groups{ padding:8px 0 32px; }

/* ---------- §02 mint: the boundary into the dream ---------- */
.s-mint{
  position:relative;
  padding:clamp(160px,22vw,280px) 0 clamp(96px,12vw,160px);
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--ink-0) 0%, #080a14 28%, #060714 100%);
  isolation:isolate;
}
.boundary{
  position:absolute;
  inset:0 0 auto 0;
  height:min(60vh,520px);
  pointer-events:none;
  z-index:-1;
}
.boundary__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  transform-origin:50% 0;
}
.night{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-2;
}
.night__stars{
  position:absolute;
  inset:0;
  opacity:.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 44% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 41%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 77% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 89% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 7% 83%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 88%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 36% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 55%, #fff 50%, transparent 51%);
  background-size:520px 520px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
}
.night__stars::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 18% 48%, var(--moon) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 22%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 76%, var(--signal) 50%, transparent 51%);
  background-size:640px 640px;
  animation:twinkle 4.8s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.night__moon{
  position:absolute;
  top:18%;
  right:-8%;
  width:min(62vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(239,227,176,.30) 0%, rgba(239,227,176,.10) 30%, transparent 62%);
  filter:blur(6px);
}

.s-head--dream .s-title{ max-width:18ch; }
.coord--dream .coord__sec{ color:var(--moon); }

.s-mint__layout.mint-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.s-mint__stage.mint-preview{ position:relative; }
.s-mint .reveal-box{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#000;
  box-shadow:none;
  padding:0;
}
.s-mint .reveal-gif{ display:block; width:100%; height:auto; border-radius:0; }

.s-fan.nft-fan{
  position:relative;
  margin:-72px auto 0;
  z-index:2;
}
.s-fan__hint{
  margin:14px 0 0;
  text-align:center;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-3);
  background:none;
  border:0;
}
.s-mint .mint-trust{ justify-content:center; margin-top:20px; }

.s-mint__card.mint-card{
  position:relative;
  padding:clamp(24px,3vw,36px);
  border-radius:24px;
  border:1px solid var(--signal-24);
  background:rgba(11,15,20,.72);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  box-shadow:none;
}
.s-mint__card::before,.s-mint__card::after{ content:none !important; }
.s-mint__status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper-2);
}
.s-mint__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gain);
  box-shadow:0 0 0 0 rgba(52,199,89,.5);
  animation:mintPulse 1.5s ease-out infinite;
}
@keyframes mintPulse{ 0%{ box-shadow:0 0 0 0 rgba(52,199,89,.5); } 100%{ box-shadow:0 0 0 10px rgba(52,199,89,0); } }
.s-mint .mint-card__header{ margin:18px 0 0; text-align:left; }
.s-mint .mint-card__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96, "wdth" 92;
  font-size:clamp(1.9rem,3vw,2.6rem);
  letter-spacing:-.02em;
  color:var(--paper);
  background:none;
  -webkit-text-fill-color:currentColor;
}
.s-mint .supply-progress{ margin-top:24px; }
.s-mint .supply-progress__bar{ height:6px; border-radius:3px; background:var(--ink-2); }
.s-mint .supply-progress__fill{ background:var(--signal); border-radius:3px; box-shadow:none; }
.s-mint .supply-progress__label{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--paper-3);
  font-variant-numeric:tabular-nums;
}
.s-mint .supply-progress__label span span{ color:var(--paper); }
.s-mint .mint-info{ margin-top:20px; border-top:1px solid var(--rule); background:none; padding:0; border-radius:0; }
.s-mint .info-row{ padding:12px 0; border-bottom:1px solid var(--rule); }
.s-mint .info-label{ font-family:var(--f-body); color:var(--paper-3); font-size:14px; }
.s-mint .info-value{ font-family:var(--f-mono); color:var(--paper); font-size:14px; font-variant-numeric:tabular-nums; }
.s-mint .total-cost-row .info-value{ color:var(--signal); -webkit-text-fill-color:currentColor; background:none; }
.s-mint .mint-controls{ margin-top:22px; }
.s-mint .mint-btn{
  background:var(--signal) !important;
  color:var(--signal-ink) !important;
  font-family:var(--f-mono);
  letter-spacing:.06em;
  border-radius:6px;
  box-shadow:none !important;
}
.s-mint .amount-btn,.s-mint .amount-input{ font-family:var(--f-mono); border-radius:6px; }

.s-mint__with{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  border-top:1px solid var(--rule);
}
.s-mint__with li{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-size:14px;
  line-height:1.5;
  color:var(--paper-2);
}
.s-mint__k{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--signal);
  padding-top:2px;
}
.s-mint .mint-notice{
  margin:18px 0 0;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--paper-3);
  background:none;
  border:0;
  padding:0;
  text-align:left;
}

/* ---------- reveal motion ---------- */
.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease-calc), transform .6s var(--ease-calc);
}
.js-motion [data-reveal].is-in{ opacity:1; transform:none; }
.js-motion [data-reveal="dream"]{
  transform:translateY(36px) scale(.98);
  transition:opacity 1.1s var(--ease-dream), transform 1.1s var(--ease-dream);
}
.js-motion [data-reveal="dream"].is-in{ transform:none; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .s-hero{ min-height:auto; padding-top:calc(var(--nav-height,72px) + 40px); }
  .s-hero__wrap{ grid-template-columns:1fr; }
  .s-hero__ledger{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ledger-cell:nth-child(2){ border-right:0; margin-right:0; }
  .ledger-cell:nth-child(n+3){ border-top:1px solid var(--rule); }

  .scrolly{ grid-template-columns:1fr; }
  .scrolly__stage{ display:none; }
  .step{ min-height:auto; opacity:1; padding:40px 0; }
  .step__shot{
    display:block;
    width:min(280px,72vw);
    height:auto;
    margin-top:28px;
    border-radius:28px;
    border:1px solid var(--rule-strong);
  }

  .s-tracker .spec-figures{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .s-tracker .spec-figure:nth-child(2){ border-right:0; margin-right:0; }
  .s-tracker .spec-figure:nth-child(n+3){ border-top:1px solid var(--rule); }

  .get-app{ grid-template-columns:1fr; grid-template-areas:"brand" "buttons" "more"; }

  .s-mint__layout.mint-layout{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .s-hero__title.hero-title{ font-size:clamp(2.9rem,14vw,4.2rem); }
  .s-hero__cta .k-btn{ flex:1 1 100%; }
  .s-mint__with li{ grid-template-columns:60px minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal]{ opacity:1; transform:none; transition:none; }
  .js-motion .coord__rule{ transform:none; transition:none; }
  .phone__shot{ transition:none; }
  .night__stars::after,.s-mint__dot{ animation:none; }
}

/* =====================================================================
   Pass 2: one fluid spacing scale, crafted backgrounds, placement fixes.
   ===================================================================== */
:root{
  /* fluid space steps, 360px -> 1440px viewport (Utopia-style) */
  --sp-2xs:clamp(6px,0.4vw + 4px,10px);
  --sp-xs:clamp(10px,0.6vw + 8px,16px);
  --sp-s:clamp(16px,1vw + 12px,24px);
  --sp-m:clamp(24px,1.5vw + 18px,40px);
  --sp-l:clamp(36px,2.6vw + 26px,64px);
  --sp-xl:clamp(48px,4vw + 32px,96px);
  --sp-2xl:clamp(72px,7vw + 46px,160px);
  --sp-3xl:clamp(96px,10vw + 60px,220px);
}

/* section rhythm, all on the scale */
.s-hero{ padding:calc(var(--nav-height,72px) + var(--sp-xl)) 0 var(--sp-xl); }
.s-tracker{ padding:var(--sp-3xl) 0 var(--sp-2xl); }
.s-mint{ padding:var(--sp-3xl) 0 var(--sp-2xl); }
.s-head{ margin-bottom:var(--sp-2xl); }
.coord{ margin-bottom:var(--sp-m); }
.s-sub{ margin-top:var(--sp-s); }
.s-hero__lede{ margin-top:var(--sp-m); }
.s-hero__cta{ margin-top:var(--sp-l); }
.s-tracker .tracker-spec{ margin-top:var(--sp-2xl); }
.get-app{ margin-top:var(--sp-xl); }
.s-tracker .tracker-gallery{ margin-top:var(--sp-xl); }
.spec-ledger{ margin-top:var(--sp-l); }

/* split heads: statement left, supporting copy bottom-right */
.s-head--split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"coord coord" "title aside";
  column-gap:var(--sp-xl);
  align-items:end;
}
.s-head--split .coord{ grid-area:coord; }
.s-head--split .s-title{ grid-area:title; }
.s-head--split .s-head__aside{ grid-area:aside; margin:0; padding-bottom:.4em; }

/* figures: one rule per divider, never two */
.s-tracker .spec-figure{ border-left:0 !important; box-shadow:none !important; }
.s-tracker .spec-figures{ max-width:none; }
.s-tracker .spec-figure::before,.s-tracker .spec-figure::after{ content:none !important; }

/* mint button: dark ink on the signal pink, everywhere inside it */
.s-mint .mint-btn,.s-mint .mint-btn *{ color:var(--signal-ink) !important; -webkit-text-fill-color:var(--signal-ink) !important; }
.s-mint .mint-btn:hover{ background:#ffc8e8 !important; transform:translateY(-1px); }
.s-mint .total-cost-row{
  background:none !important; border:0 !important; border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important; margin:0 !important; padding:12px 0 !important; box-shadow:none !important;
}
.s-mint .amount-control{ justify-content:flex-start; }

/* mint top: heading left, the hand of cards right */
.s-mint__top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--sp-xl);
  align-items:center;
  margin-bottom:var(--sp-2xl);
}
.s-mint__top .s-head{ margin-bottom:0; }
.s-mint__fan{ display:flex; flex-direction:column; align-items:center; }
.s-mint__fan .s-fan.nft-fan{ margin:0; }

/* ---------- crafted backgrounds ---------- */

/* film grain over everything: kills dark banding, adds paper */
body::after{
  content:'';
  position:fixed;
  inset:-50%;
  z-index:9990;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* hero: graph paper with numbered axes, like the margin of a ledger */
.calc-grid{ background-size:80px 80px; }
.calc-axis{
  position:absolute;
  pointer-events:none;
  font-family:var(--f-mono);
  font-size:10px;
  color:rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums;
}
.calc-axis--x{ left:0; right:0; top:calc(var(--nav-height,72px) + 10px); height:12px; }
.calc-axis--y{ top:0; bottom:0; right:10px; width:40px; text-align:right; }
.calc-axis span{ position:absolute; white-space:nowrap; }
.calc-axis--x span{ transform:translateX(4px); }
.calc-axis--y span{ right:0; transform:translateY(-50%); }

/* tracker: a 13x13 preflop matrix as watermark, opening range filled */
.s-tracker{ overflow:hidden; }
.range-bg{
  position:absolute;
  top:var(--sp-2xl);
  right:calc(var(--gutter) * -1 + 2vw);
  width:min(44vw,600px);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:3px;
  opacity:.5;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(90% 90% at 70% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(90% 90% at 70% 30%, #000 30%, transparent 75%);
}
.range-bg span{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-mono);
  font-size:clamp(7px,.7vw,10px);
  color:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.05);
  border-radius:2px;
}
.range-bg span.in{ background:rgba(255,182,225,.10); color:rgba(255,182,225,.6); border-color:rgba(255,182,225,.18); }
.s-tracker > .s-wrap{ position:relative; }

/* dream: clouds drawn in the art's own hand, drifting slowly */
.clouds{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%;
  height:clamp(160px,24vw,360px);
  z-index:-1;
  pointer-events:none;
  opacity:.92;
}
.cloud{ transform-box:fill-box; }
.js-motion .cloud--a path{ animation:drift 38s ease-in-out infinite alternate; }
.js-motion .cloud--b path{ animation:drift 46s ease-in-out infinite alternate-reverse; }
.js-motion .cloud--c path{ animation:drift 32s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translateX(-18px); } to{ transform:translateX(26px); } }

/* moon sits high, behind the heading, where the art keeps it */
.night__moon{ top:-6%; right:-10%; width:min(70vw,880px); filter:none;
  background:radial-gradient(circle at 50% 50%, rgba(239,227,176,.22) 0%, rgba(239,227,176,.08) 28%, transparent 60%); }
.night__stars{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
               mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%); }

/* ---------- mobile pass ---------- */
@media (max-width:960px){
  .s-head--split{ grid-template-columns:1fr; grid-template-areas:"coord" "title" "aside"; }
  .s-head--split .s-head__aside{ margin-top:var(--sp-s); padding:0; }
  .s-mint__top{ grid-template-columns:1fr; }
  .range-bg{ width:min(92vw,520px); right:-18vw; top:var(--sp-l); opacity:.35; }
  .calc-axis--y{ display:none; }
}
@media (max-width:560px){
  .s-hero__ledger{ grid-template-columns:1fr 1fr; }
  .ledger-cell{ padding-right:12px; margin-right:12px; }
  .ledger-cell dd{ font-size:1.05rem; }
  .s-mint__with li{ font-size:13.5px; }
  .k-btn{ min-height:48px; }
  .calc-axis--x{ display:none; }
  .clouds{ height:140px; }
  .s-mint .mint-controls{ gap:12px; }
}
@media (prefers-reduced-motion:reduce){
  .cloud path{ animation:none !important; }
}

/* =====================================================================
   Pass 3: backgrounds made of data, not squares.
   ===================================================================== */
.calc-grid,.range-bg{ display:none !important; }

/* hero: a field of session results scattered around a rising trend */
.data-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(110% 85% at 65% 55%, #000 35%, transparent 85%);
          mask-image:radial-gradient(110% 85% at 65% 55%, #000 35%, transparent 85%);
}
.calc-axis--y{ display:none; }
.calc-axis--x{ color:rgba(255,255,255,.18); }

/* tracker: the distribution every sample is drawn from */
.bell-bg{
  position:absolute;
  right:-4vw;
  bottom:-2px;
  width:min(70vw,980px);
  height:auto;
  pointer-events:none;
  overflow:visible;
  opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 40%);
}
.bell-bg .bell-curve{ fill:none; stroke:rgba(255,182,225,.32); stroke-width:1.25; vector-effect:non-scaling-stroke; }
.bell-bg .bell-fill{ fill:url(#bellFill); }
.bell-bg .bell-sd{ stroke:rgba(255,255,255,.10); stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.bell-bg .bell-base{ stroke:rgba(255,255,255,.12); stroke-width:1; vector-effect:non-scaling-stroke; }
.bell-bg text{ font-family:var(--f-mono); font-size:11px; fill:rgba(255,255,255,.28); }
.bell-bg .bell-pt{ fill:rgba(255,255,255,.35); }
.s-tracker .s-head{ position:relative; z-index:1; }
.scrolly,.tracker-spec,.get-app{ position:relative; z-index:1; }

/* mint boundary: the data points loosen and become stars */
.boundary__grid{
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 100%);
}

/* the side index sits in the gutter only when there is a gutter */
.section-index{ left:18px; }
@media (max-width:1499px){ .section-index{ display:none !important; } }

@media (max-width:960px){
  .bell-bg{ width:140vw; right:-40vw; opacity:.6; }
}

/* the distribution stands on the ledger of figures */
.s-tracker .tracker-spec{ position:relative; padding-top:clamp(140px,20vw,280px); }
.bell-bg{
  position:absolute;
  left:0; right:auto; top:0; bottom:auto;
  width:100%;
  height:clamp(140px,20vw,280px);
  opacity:1;
  -webkit-mask-image:none; mask-image:none;
}
.bell-bg text{ font-size:12px; }
@media (max-width:960px){ .bell-bg{ width:100%; right:auto; } }
.s-tracker .tracker-spec,.s-tracker .spec-figures{ width:100%; max-width:none; }
.bell-bg{ overflow:visible; }
.bell-bg .bell-pt{ fill:rgba(255,182,225,.45); }
/* trust badges: plain hairline chips, no one-sided accent border */
.s-mint .trust-badge{
  border:1px solid var(--rule-strong) !important;
  border-radius:6px;
  background:rgba(11,15,20,.6);
  box-shadow:none !important;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-2);
}
.s-mint .trust-badge::before,.s-mint .trust-badge::after{ content:none !important; }
.s-mint .trust-badge--network .trust-badge__icon{ color:var(--moon); }

/* =====================================================================
   Pass 4: bug fixes
   ===================================================================== */
/* overflow:hidden turns the section into a scroll container and breaks the
   sticky phone; clip trims the background art without doing that */
.s-tracker{ overflow:clip; }
.s-mint{ overflow:clip; }
@supports not (overflow:clip){ .s-tracker{ overflow:visible; } }

/* get the app: icon, name and the two store codes read as one unit */
.get-app{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-m) var(--sp-l);
  padding:var(--sp-m) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.get-app__brand{ flex:0 1 auto; }
.s-tracker .tracker-buttons{ display:flex; gap:var(--sp-xs); flex:0 0 auto; }
.get-app__more{ margin-left:auto; align-self:center; }
@media (max-width:960px){
  .get-app{ flex-direction:column; align-items:flex-start; }
  .get-app__more{ margin-left:0; }
}

/* the old fixed 80px square grid behind the whole page becomes a sparse
   field of points, the same language as the hero's data field */
body::before{
  background-image:
    radial-gradient(1px 1px at 7% 13%, rgba(255,255,255,.16) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 61%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 27%, rgba(255,255,255,.14) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 52% 78%, rgba(255,182,225,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 44%, rgba(255,255,255,.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 9%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 67%, rgba(255,255,255,.14) 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 88%, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 52%, rgba(255,255,255,.08) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 91%, rgba(255,255,255,.12) 50%, transparent 51%) !important;
  background-size:460px 460px !important;
  opacity:1;
}

/* hero chart: give the evidence more of the stage */
.s-hero__wrap{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; }
.pl-chart{ height:clamp(300px,34vw,500px); }
.s-hero__chart{ padding:24px 24px 18px; }
@media (max-width:960px){ .pl-chart{ height:clamp(240px,62vw,380px); } }

/* =====================================================================
   P2: my NFTs and the door stay in the night; the bridge returns to data.
   ===================================================================== */
.nft-section{ background:#060714 !important; padding:var(--sp-xl) 0 !important; }
.nft-section .section-eyebrow{ font-family:var(--f-mono); color:var(--moon); letter-spacing:.06em; }
.nft-section .section-title{ font-family:var(--f-display); letter-spacing:-.02em; }
.nft-section .nft-grid-container{ border:1px solid var(--rule); border-radius:20px; background:rgba(11,15,20,.5); box-shadow:none; }
.nft-section .empty-state{ font-family:var(--f-mono); font-size:13px; color:var(--paper-3); }

/* ---------- §03 the door ---------- */
.s-door{
  position:relative;
  padding:var(--sp-2xl) 0 var(--sp-3xl);
  background:linear-gradient(180deg,#060714 0%,#070818 60%,var(--ink-0) 100%);
  overflow:clip;
  isolation:isolate;
}
.s-door::before{
  content:'';
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 9% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 32%, var(--signal) 50%, transparent 51%);
  background-size:480px 480px;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
}
.s-door__wrap{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-xl);
  align-items:center;
}
.s-door .s-title{ max-width:16ch; }

.door-steps{
  list-style:none;
  margin:var(--sp-l) 0 0;
  padding:0;
  border-top:1px solid var(--rule);
  max-width:560px;
}
.door-steps li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--sp-xs);
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.door-steps__no{ font-family:var(--f-mono); font-size:12px; color:var(--moon); }
.door-steps__what{ font-weight:600; color:var(--paper); }
.door-steps__how{ font-family:var(--f-mono); font-size:12px; color:var(--paper-3); text-align:right; }
.s-door__cta{ margin-top:var(--sp-l); }
.s-door .members-cta-glow{ display:none; }

/* the portal: a card-shaped doorway with the art behind frosted light */
.s-door__portal{ display:flex; flex-direction:column; align-items:center; }
.portal{
  position:relative;
  width:min(380px,78vw);
  aspect-ratio:3/4;
  border-radius:28px;
  overflow:hidden;
  background:#0a0b1a;
  border:1px solid rgba(255,182,225,.28);
}
.portal__art{
  position:absolute; inset:auto 0 0 0;
  width:100%; height:auto;
  filter:saturate(1.05);
  transform:translateY(8%) scale(1.02);
  transition:transform 1.2s var(--ease-dream);
}
.portal__light{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(239,227,176,.35), transparent 60%),
    linear-gradient(180deg, rgba(10,11,26,.85) 0%, rgba(10,11,26,.1) 45%, transparent 70%);
}
.portal__frame{
  position:absolute; inset:14px; z-index:2;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.22);
  pointer-events:none;
}
.portal__caption{
  margin:var(--sp-s) 0 0;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-3);
}
.js-motion .s-door .is-in .portal__art,.s-door:hover .portal__art{ transform:translateY(2%) scale(1.04); }

/* ---------- §04 one high run ---------- */
.s-bridge{
  position:relative;
  padding:var(--sp-3xl) 0;
  background:var(--ink-0);
  border-top:1px solid var(--rule);
}
.bridge{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(80px,.5fr) minmax(0,1.2fr);
  align-items:center;
  gap:var(--sp-m);
}
.bridge figure{ margin:0; }
.bridge figcaption{
  margin-top:var(--sp-s);
  font-size:14px;
  color:var(--paper-2);
}
.bridge__k{
  display:block;
  margin-bottom:4px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--signal);
}
.bridge__club img{
  display:block;
  width:100%;
  max-width:320px;
  aspect-ratio:1;
  border-radius:24px;
  border:1px solid var(--rule-strong);
}
.bridge__link{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bridge__line{
  display:block;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(255,182,225,.0), var(--signal) 30%, var(--signal) 70%, rgba(255,182,225,0));
  transform-origin:left center;
}
.js-motion .bridge__line{ transform:scaleX(0); transition:transform .9s var(--ease-calc) .2s; }
.js-motion .is-in .bridge__line{ transform:scaleX(1); }
.bridge__tag{ font-family:var(--f-mono); font-size:11px; color:var(--paper-3); letter-spacing:.06em; }

/* a faithful slice of the app's own list row (app tokens) */
.bridge__app{
  padding:var(--sp-s);
  border-radius:20px;
  border:1px solid var(--rule);
  background:#0b0f14;
}
.app-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Roboto,var(--f-body),sans-serif;
}
.app-row + .app-row{ margin-top:10px; }
.app-row__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.app-row__avatar--blank{ display:block; background:rgba(255,255,255,.12); }
.app-row__who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.app-row__name{ font-weight:700; font-size:16px; color:#ff2d55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-row__name--plain{ color:rgba(255,255,255,.92); }
.app-row__meta{ font-size:12px; color:rgba(255,255,255,.56); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-row__badge{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 6px 3px 3px;
  border-radius:6px;
  background:#ff2d55;
  color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.3px;
}
.app-row__badge img{ width:16px; height:16px; border-radius:50%; }
.app-row--muted{ opacity:.55; grid-template-columns:48px minmax(0,1fr); }

/* ---------- nav: wallet button stays at the right edge on phones ---------- */
@media (max-width:1024px){
  .navbar .nav-container{ display:flex; align-items:center; gap:12px; }
  .navbar .nav-logo{ margin-right:auto; }
  .navbar .connect-btn{ margin-left:auto; }
}

/* ---------- P2 responsive ---------- */
@media (max-width:960px){
  .s-door__wrap{ grid-template-columns:1fr; }
  .s-door__portal{ order:-1; }
  .portal{ width:min(300px,70vw); }
  .door-steps li{ grid-template-columns:36px minmax(0,1fr); }
  .door-steps__how{ grid-column:2; text-align:left; }
  .bridge{ grid-template-columns:1fr; justify-items:start; }
  .bridge__club img{ max-width:220px; }
  .bridge__link{ width:120px; transform:rotate(90deg); margin:var(--sp-s) 0; align-self:start; margin-left:40px; }
  .bridge__tag{ transform:rotate(-90deg); }
  .bridge__app{ width:100%; }
}
@media (max-width:560px){ .s-door__cta{ width:100%; } }

/* =====================================================================
   Pass 5: P2 bug fixes (order matters: these sit after every base rule)
   ===================================================================== */
.bridge__club img,.app-row__avatar,.s-mint .reveal-gif,.get-app__icon{ height:auto; }
.app-row__avatar{ height:48px; }
.portal__art{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 70%;
  transform:scale(1.04);
}
.js-motion .s-door .is-in .portal__art,.s-door:hover .portal__art{ transform:scale(1.08); }
.portal__light{
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(239,227,176,.30), transparent 60%),
    linear-gradient(180deg, rgba(10,11,26,.55) 0%, rgba(10,11,26,0) 40%);
}

@media (max-width:960px){
  .s-hero__wrap{ grid-template-columns:1fr; align-items:start; }
  .bridge{ gap:var(--sp-s); }
  .bridge__link{ display:none; }
}

/* =====================================================================
   Pass 6: bridge as two equal cards; portal filled edge to edge
   ===================================================================== */
.bridge{
  grid-template-columns:minmax(0,1fr) minmax(64px,140px) minmax(0,1fr);
  align-items:stretch;
}
.bridge__card{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:var(--sp-s);
  border-radius:24px;
  border:1px solid var(--rule);
  background:#0b0f14;
}
.bridge__media{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(220px,24vw,320px);
  border-radius:16px;
  overflow:hidden;
}
.bridge__club .bridge__media{ background:#ffb6e1; }
.bridge__club .bridge__media img{
  display:block;
  width:auto;
  height:100%;
  max-height:clamp(220px,24vw,320px);
  max-width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:0;
  border-radius:0;
}
.bridge__media--app{ flex-direction:column; align-items:stretch; justify-content:center; gap:10px; padding:var(--sp-xs); background:rgba(255,255,255,.02); }
.bridge__media--app .app-row + .app-row{ margin-top:0; }
.bridge__card figcaption{ margin-top:var(--sp-s); min-height:3em; font-size:14px; line-height:1.5; color:var(--paper-2); }
.bridge__app{ padding:var(--sp-s); }
.bridge__link{ align-self:center; }

/* portal: art fills the whole doorway, light only at the very top edge */
.portal__art{ object-position:50% 45%; transform:scale(1.02); }
.js-motion .s-door .is-in .portal__art,.s-door:hover .portal__art{ transform:scale(1.06); }
.portal__light{ background:radial-gradient(90% 30% at 50% 0%, rgba(239,227,176,.22), transparent 70%); }
.portal{ background:#ffb6e1; }

@media (max-width:960px){
  .bridge{ grid-template-columns:1fr; }
  .bridge__card{ width:100%; }
  .bridge__media{ min-height:220px; }
}
.s-bridge{ padding-bottom:var(--sp-2xl); }

/* =====================================================================
   members.html gate: the night sky, a card-shaped doorway, and a log of
   the checks the gate is actually running.
   ===================================================================== */
.members-doors{
  background:#060714;
  align-items:center;
  justify-content:center;
}
.members-doors::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 61% 15%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 74% 34%, #ffb6e1 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 44%, #fff 50%, transparent 51%);
  background-size:420px 420px;
  opacity:.6;
}
.members-doors__panel,.members-doors__seam,.members-doors__emblem{ display:none !important; }

.gate-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:24px;
  transition:transform 1.4s var(--ease-dream), opacity 1s var(--ease-dream);
}
.gate-portal{
  width:min(220px,52vw);
  aspect-ratio:3/4;
  border-radius:24px;
  overflow:hidden;
  background:#ffb6e1;
  border:1px solid rgba(255,182,225,.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:portalBreath 3.2s ease-in-out infinite;
}
.gate-portal img{ width:100%; height:auto; display:block; }
@keyframes portalBreath{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,182,225,.0); }
  50%{ box-shadow:0 0 60px 0 rgba(255,182,225,.25); }
}
.gate-log{
  list-style:none;
  margin:0;
  padding:0;
  width:min(320px,80vw);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.1);
}
.gate-log li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.4);
  transition:color .3s ease;
}
.gate-log li[data-state="run"]{ color:rgba(255,255,255,.85); }
.gate-log li[data-state="ok"]{ color:rgba(255,255,255,.85); }
.gate-log li[data-state="ok"] .gate-log__v{ color:#34c759; }
.gate-log li[data-state="miss"] .gate-log__v{ color:#ffb6e1; }
.gate-log__v{ white-space:nowrap; }

/* opening: the doorway grows past the viewport and the night lets go */
.members-doors.is-opening{ transition:opacity 1.2s var(--ease-dream) .4s; opacity:0; }
.members-doors.is-opening .gate-stage{ transform:scale(1.6); opacity:0; }
.members-doors.is-done{ display:none !important; }

/* denied: same voice as the site */
.members-gate__title{ font-family:var(--f-display); font-variation-settings:"opsz" 96,"wdth" 92; letter-spacing:-.02em; font-size:clamp(1.6rem,4vw,2.2rem); }
.members-gate__msg{ font-family:var(--f-body); color:var(--paper-2); }
.members-gate__inner{ border:1px solid var(--rule); border-radius:24px; background:rgba(11,15,20,.85); box-shadow:none; }
.members-gate__back{ font-family:var(--f-mono); }

@media (prefers-reduced-motion:reduce){
  .gate-portal{ animation:none; }
  .gate-stage{ transition:none; }
}
.gate-portal{ align-items:center; }

/* =====================================================================
   P3: schedule, FAQ, closing, footer on the same system
   ===================================================================== */
.s-head--compact{ margin-bottom:var(--sp-m); }
.s-head--compact .s-title{ font-size:clamp(1.9rem,3.2vw,2.8rem); }

/* ---------- §05 schedule: hairline tiles, no gradient borders ---------- */
.schedule-section{ padding:var(--sp-3xl) 0 var(--sp-2xl) !important; background:var(--ink-0) !important; border-top:1px solid var(--rule); }
.schedule-section .container{ max-width:calc(var(--wrap) + var(--gutter) * 2); padding:0 var(--gutter); }
.schedule-section .roadmap{ margin-top:0; }
.rm-tile{
  background:rgba(255,255,255,.025) !important;
  border:1px solid var(--rule) !important;
  border-radius:20px;
  backdrop-filter:none;
}
.rm-tile::before{ display:none; }
.rm-tile.is-complete{ background:rgba(255,255,255,.025) !important; border-color:rgba(231,193,120,.28) !important; }
.rm-tile.is-active{ background:rgba(255,182,225,.05) !important; border-color:rgba(255,182,225,.45) !important; animation:none !important; }
.rm-tile--feature::after{ display:none; }
.rm-tile__no,.rm-tile__chip,.rm-stat__label,.rm-tile__meta-label,.rm-bridge__kicker,.rm-bridge__tag{ font-family:var(--f-mono) !important; }
.rm-tile__title{ font-family:var(--f-display); letter-spacing:-.015em; }
.rm-tile.is-active .rm-tile__title,.rm-tile.is-complete .rm-tile__title{ background:none !important; -webkit-text-fill-color:currentColor !important; }
.rm-tile.is-complete .rm-tile__title{ color:var(--paper); }
.rm-tile.is-active .rm-tile__title{ color:var(--signal); }
.rm-tile__desc{ color:var(--paper-2); }
.rm-stat__num{ font-family:var(--f-display) !important; background:none !important; -webkit-text-fill-color:var(--paper) !important; color:var(--paper); }
.rm-stat__num span{ -webkit-text-fill-color:var(--signal) !important; }
.rm-bridge__node{ background:rgba(11,15,20,.6); }
.rm-tile__meta-link{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; }

/* ---------- §06 FAQ: an index on the left, a document on the right ---------- */
.faq-section{ padding:var(--sp-3xl) 0 var(--sp-2xl) !important; background:var(--ink-0) !important; border-top:1px solid var(--rule); }
.faq-section .container{ max-width:calc(var(--wrap) + var(--gutter) * 2); padding:0 var(--gutter); }
.faq-panel{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; gap:var(--sp-l) !important; }
.faq-panel::before,.faq-panel::after{ display:none !important; }
.faq-panel__questions{ border-top:1px solid var(--rule); background:none !important; padding:0 !important; }
.faq-q{
  background:none !important;
  border:0 !important;
  border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;
  padding:16px 0 !important;
  font-family:var(--f-body) !important;
  color:var(--paper-3) !important;
  box-shadow:none !important;
}
.faq-q::before,.faq-q::after{ display:none !important; }
.faq-q__num{ font-family:var(--f-mono) !important; color:var(--paper-3) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
.faq-q.active,.faq-q:hover{ color:var(--paper) !important; }
.faq-q.active .faq-q__num{ color:var(--signal) !important; }
.faq-panel__answer{ background:rgba(255,255,255,.025) !important; border:1px solid var(--rule) !important; border-radius:20px !important; box-shadow:none !important; }
.faq-a__title{ font-family:var(--f-display) !important; letter-spacing:-.015em; background:none !important; -webkit-text-fill-color:var(--paper) !important; }
.faq-a p,.faq-a li{ color:var(--paper-2); line-height:1.7; }
.faq-a a{ color:var(--signal); }
.faq-nav__btn,.faq-nav__counter{ font-family:var(--f-mono) !important; }

/* ---------- §07 closing ---------- */
.s-close{
  position:relative;
  padding:var(--sp-3xl) 0;
  overflow:clip;
  background:linear-gradient(180deg,var(--ink-0) 0%,#070818 45%,#060714 100%);
  border-top:1px solid var(--rule);
  isolation:isolate;
}
.s-close::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 14% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 68% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 86% 70%, var(--signal) 50%, transparent 51%);
  background-size:440px 440px;
  opacity:.5;
}
.s-close::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:-12%; top:-30%; width:min(70vw,860px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(239,227,176,.16) 0%, transparent 60%);
}
.s-close__title{ max-width:20ch; font-size:clamp(2.4rem,5.4vw,5rem); }
.s-close__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-l); }

/* ---------- footer: the ledger closes ---------- */
.footer{ background:#060714 !important; border-top:1px solid var(--rule) !important; }
.footer::before,.footer::after{ display:none !important; }
.footer-title,.footer-links .footer-h,.footer-social .footer-h{ font-family:var(--f-mono) !important; letter-spacing:.06em; }
.footer-links a,.footer-labs__text{ font-family:var(--f-body); color:var(--paper-2); }
.footer-links a:hover{ color:var(--signal); }
.footer-bottom p{ font-family:var(--f-mono); font-size:12px; color:var(--paper-3); }

@media (max-width:560px){
  .s-close__cta .k-btn{ flex:1 1 100%; }
}

/* the full feature ledger, open: six columns of what the app does */
.spec-ledger{ border-bottom:0; }
.spec-ledger__title{
  margin:0;
  padding:var(--sp-s) 0;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-3);
  border-bottom:1px solid var(--rule);
}
.s-tracker .spec-groups{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.s-tracker .spec-group{
  padding:var(--sp-s) var(--sp-s) var(--sp-m) 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.s-tracker .spec-group::before,.s-tracker .spec-group::after{ display:none !important; }
.s-tracker .spec-group__title{
  margin:0 0 12px;
  font-family:var(--f-display) !important;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--paper) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}
.s-tracker .spec-group__list{ list-style:none; margin:0; padding:0; }
.s-tracker .spec-group__list li{
  position:relative;
  padding:5px 0 5px 16px;
  font-size:14px;
  line-height:1.5;
  color:var(--paper-2);
}
.s-tracker .spec-group__list li::before{
  content:'';
  position:absolute; left:0; top:13px;
  width:6px; height:1px;
  background:var(--signal);
}
@media (max-width:960px){ .s-tracker .spec-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .s-tracker .spec-groups{ grid-template-columns:1fr; } }
.s-tracker .spec-group,.s-tracker .spec-group *{ opacity:1 !important; transform:none !important; visibility:visible !important; }

/* chart head: the running average sits beside the sample count */
.chart-head{ align-items:baseline; gap:12px; }
.chart-head__stats{ display:flex; gap:18px; align-items:baseline; }
.chart-head__wr b{ font-weight:600; font-variant-numeric:tabular-nums; transition:color .3s linear; }
@media (max-width:560px){
  .chart-head{ flex-direction:column; gap:6px; }
  .chart-head__stats{ width:100%; justify-content:space-between; }
}
.chart-head__tot b{ font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:1180px) and (min-width:961px){ .chart-head{ flex-direction:column; gap:6px; } .chart-head__stats{ width:100%; justify-content:space-between; } }

/* =====================================================================
   P4: tablet and small-phone fit
   ===================================================================== */
@media (max-width:1180px) and (min-width:961px){
  .s-hero__ledger{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ledger-cell:nth-child(2){ border-right:0; margin-right:0; }
  .ledger-cell:nth-child(n+3){ border-top:1px solid var(--rule); }
}
@media (max-width:400px){
  .s-mint .amount-control{ flex-wrap:nowrap; gap:8px; }
  .s-mint .amount-btn{ min-width:40px; padding:0 10px; }
  .s-mint .amount-input{ width:56px; min-width:0; }
  .s-mint .max-btn{ padding:0 10px; }
  .s-mint .supply-progress__label{ font-size:11px; }
}
.footer-h{ margin:0 0 .5rem; }

/* =====================================================================
   Life: motion that carries meaning
   ===================================================================== */
/* a winning session pings in the hero field */
.field-pings{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.field-ping{
  position:absolute;
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  border:1px solid rgba(255,182,225,.8);
  animation:ping 1.4s var(--ease-dream) forwards;
}
@keyframes ping{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(5); opacity:0; } }

/* the sample falls onto the bell */
.bell-armed .bell-pt{ transform-box:fill-box; transform:translateY(-140px); opacity:0; transition:transform .9s cubic-bezier(.3,1.4,.5,1), opacity .4s linear; }
.bell-dropped .bell-pt{ transform:none; opacity:1; }
.bell-armed .bell-curve{ stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset 1.6s var(--ease-calc); }
.bell-dropped .bell-curve{ stroke-dashoffset:0; }

/* a signal crosses the wallet link, club to app */
.bridge__line{ position:relative; overflow:visible; }
.bridge__line::after{
  content:'';
  position:absolute; top:50%; left:0;
  width:10px; height:10px; margin-top:-5px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 14px 2px rgba(255,182,225,.6);
  opacity:0;
}
.js-motion .is-in .bridge__line::after{ animation:packet 2.8s var(--ease-calc) 1.2s infinite; }
@keyframes packet{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:calc(100% - 10px); opacity:0; } }

/* tilted cards keep a soft highlight under the pointer */
.s-fan,.portal{ transition:transform .5s var(--ease-dream); will-change:transform; }
.portal::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(40% 40% at var(--gx,50%) var(--gy,30%), rgba(255,255,255,.18), transparent 70%);
}

/* the night has the odd shooting star */
.night::after,.s-door::after{
  content:'';
  position:absolute;
  top:14%; left:-20%;
  width:160px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9));
  transform:rotate(-18deg);
  opacity:0;
  pointer-events:none;
}
.js-motion .night::after{ animation:shoot 11s linear 3s infinite; }
.js-motion .s-door::after{ top:22%; animation:shoot 14s linear 7s infinite; }
@keyframes shoot{
  0%{ transform:translate(0,0) rotate(-18deg); opacity:0; }
  2%{ opacity:1; }
  9%{ transform:translate(130vw,-38vh) rotate(-18deg); opacity:0; }
  100%{ transform:translate(130vw,-38vh) rotate(-18deg); opacity:0; }
}
.js-motion .s-door::before{ animation:twinkle 6s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  .field-pings,.night::after,.s-door::after{ display:none; }
  .bridge__line::after{ animation:none !important; }
  .bell-armed .bell-pt,.bell-armed .bell-curve{ transform:none; opacity:1; stroke-dashoffset:0; transition:none; }
}

/* =====================================================================
   Release pass: mobile polish
   ===================================================================== */
/* chart head on phones: a three-cell ledger, label over value */
@media (max-width:560px){
  .chart-head__stats{ display:grid; grid-template-columns:1.3fr 1fr .7fr; gap:8px; }
  .chart-head__stats > span{ display:flex; flex-direction:column; gap:3px; white-space:nowrap; }
  .chart-head__stats > span b{ font-size:13px; }
}
/* FAQ on phones: every question visible, no hidden inner scroll */
@media (max-width:1024px){
  .faq-panel__questions{ max-height:none !important; overflow:visible !important; }
}
/* my NFTs button joins the button system */
#loadNftsBtn{
  min-height:48px; padding:0 24px; border-radius:4px !important;
  background:transparent !important; color:var(--paper) !important;
  border:1px solid var(--rule-strong) !important; box-shadow:none !important;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
}
#loadNftsBtn::before,#loadNftsBtn::after{ content:none !important; }
#loadNftsBtn:hover{ border-color:var(--signal) !important; color:var(--signal) !important; }

/* =====================================================================
   Members Hub (holder view) on the same system
   ===================================================================== */
/* connected wallet: the signal, not a status green */
.connect-btn.connected{ background:var(--signal) !important; color:var(--signal-ink) !important; font-family:var(--f-mono); }

.members-area{ background:#060714; }
.members-area__inner{ max-width:calc(var(--wrap) + var(--gutter) * 2); margin:0 auto; padding:calc(var(--nav-height,72px) + var(--sp-l)) var(--gutter) var(--sp-2xl); }

/* identity header: the PFP is the hero of this page */
.members-profile-header{
  display:flex; align-items:center; gap:var(--sp-l);
  padding:var(--sp-m);
  border:1px solid var(--rule) !important;
  border-radius:24px !important;
  background:rgba(11,15,20,.6) !important;
  box-shadow:none !important;
}
.members-profile-header::before,.members-profile-header::after{ display:none !important; }
.profile-pfp__frame{ width:clamp(120px,14vw,168px) !important; height:clamp(120px,14vw,168px) !important; border-radius:22px !important; border:1px solid rgba(255,182,225,.45) !important; box-shadow:none !important; }
.profile-meta__handle{ font-family:var(--f-mono) !important; font-size:clamp(1.2rem,2.4vw,1.8rem) !important; font-weight:600 !important; letter-spacing:0 !important; background:none !important; -webkit-text-fill-color:var(--paper) !important; color:var(--paper) !important; }
.profile-meta__verified{ font-family:var(--f-mono) !important; border:1px solid rgba(52,199,89,.35) !important; background:rgba(52,199,89,.08) !important; border-radius:4px !important; }
.profile-meta__stats{ font-family:var(--f-mono); color:var(--paper-3); }
.profile-meta__stats strong{ color:var(--signal); font-size:1.1em; }

/* section head */
.members-section-head{ margin:var(--sp-xl) 0 var(--sp-m); }
.members-section-head .coord{ margin-bottom:var(--sp-s); }
.members-section-title{ font-family:var(--f-display) !important; font-variation-settings:"opsz" 96,"wdth" 92; font-size:clamp(2rem,4vw,3.4rem) !important; letter-spacing:-.022em !important; line-height:1.02; }
.members-section-sub{ color:var(--paper-2); }
.members-section-sub__key{ color:var(--signal); }

/* category cards: numbered, described, counted */
.members-categories{ gap:var(--sp-s) !important; }
.category-card{
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:220px !important;
  padding:var(--sp-m) !important;
  background:rgba(11,15,20,.6) !important;
  border:1px solid var(--rule) !important;
  border-radius:20px !important;
  backdrop-filter:none !important;
  transition:transform .3s var(--ease-calc), border-color .3s var(--ease-calc) !important;
}
.category-card::before,.category-card::after{ display:none !important; }
@media (hover:hover){
  .category-card:hover{ transform:translateY(-3px) !important; border-color:rgba(255,182,225,.5) !important; box-shadow:none !important; }
}
.category-card__no{ font-family:var(--f-mono); font-size:12px; color:var(--moon); }
.category-card__label{ font-family:var(--f-display) !important; font-weight:700 !important; font-size:clamp(1.6rem,2.6vw,2.2rem) !important; letter-spacing:-.02em !important; }
.category-card__desc{ font-size:14px; line-height:1.5; color:var(--paper-2); max-width:34ch; }
.category-card__meta{ margin-top:auto; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-3); }
.category-card__meta .is-live{ color:var(--gain); }
.category-card__meta::after{ content:'  \2192'; color:var(--signal); }

.members-area__footer-note{ font-family:var(--f-mono); font-size:12px; color:var(--paper-3); }
.members-area__footer-note a{ color:var(--signal); }

/* the category modal */
.category-modal__panel{ background:#0b0f14 !important; border:1px solid var(--rule-strong) !important; border-radius:24px !important; box-shadow:none !important; }
.category-modal__title{ font-family:var(--f-display) !important; letter-spacing:-.02em; background:none !important; -webkit-text-fill-color:var(--paper) !important; }
.utility-item{ background:rgba(255,255,255,.03) !important; border:1px solid var(--rule) !important; border-radius:16px !important; box-shadow:none !important; }
.utility-item::before,.utility-item::after{ display:none !important; }
.utility-item__title{ font-family:var(--f-display) !important; letter-spacing:-.01em; }
.utility-item__status{ font-family:var(--f-mono) !important; border-radius:4px !important; }
.utility-item--soon{ opacity:.85; }
.utility-item__desc{ color:var(--paper-2) !important; }

@media (max-width:640px){
  .members-profile-header{ flex-direction:column; align-items:flex-start; }
  .category-card{ min-height:180px !important; }
}
.members-area{ padding-top:0 !important; }
.members-area__inner{ padding-top:calc(var(--nav-height,72px) + var(--sp-m)); }
.members-profile-header,.profile-meta{ text-align:left; }
.profile-meta__row{ justify-content:flex-start; flex-wrap:wrap; }
.profile-meta__stats{ justify-content:flex-start; }
.utility-item__status{ border:1px solid currentColor !important; border-left-width:1px !important; padding:3px 8px !important; background:transparent !important; box-shadow:none !important; }
.utility-item__status::before,.utility-item__status::after{ display:none !important; }

/* =====================================================================
   Mobile centering: visual objects sit on the centre line of the screen;
   running text stays left-aligned for reading.
   ===================================================================== */
@media (max-width:960px){
  /* app screenshots in the tracker steps */
  .step__shot{ margin-left:auto; margin-right:auto; }
  /* get the app: icon + name, store codes and the link on one axis */
  .get-app{ align-items:center; text-align:center; }
  .get-app__brand{ justify-content:center; text-align:left; }
  .s-tracker .tracker-buttons{ justify-content:center; width:100%; }
  .get-app__more{ align-self:center; margin-left:0; }
  /* §04 bridge: both cards centred, captions under their media */
  .bridge{ justify-items:center; }
  .bridge__card{ max-width:520px; }
  /* mint: the stage and the hand of cards */
  .s-mint__fan,.s-mint__stage{ align-items:center; text-align:center; }
  .s-mint .reveal-box{ max-width:520px; margin-left:auto; margin-right:auto; }
  /* the door */
  .s-door__portal{ align-self:center; }
}
@media (max-width:560px){
  /* roadmap 03: Club, wallet link, App stacked on the centre line */
  .rm-bridge{ justify-items:center; gap:10px; }
  .rm-bridge__node{ width:min(300px,100%); text-align:center; align-items:center; }
  .rm-bridge__span{ flex-direction:column; align-items:center; justify-content:center; height:auto; gap:6px; width:auto; }
  .rm-bridge__line{ width:2px; height:28px; }
  .rm-tile__meta{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .rm-tile__meta-lead{ display:none; }
}