/* ==========================================================================
   RampNerd Roadmap Page
   Page-specific only. Loaded after zstyle.css and rn-primitives.css.
   ========================================================================== */
:root{
  --clr-bg-body: #2a2a2a;
  --clr-primary-light: #f4f4f4;
  --clr-primary: #FF9200;
           --clr-roadmap: #a07a53; 
  --clr-primary-dark: #1f1f1f;
  --clr-secondary-dark: #414141;
  --clr-mid-dark: #8e8e8e;
  --clr-secondary-light: #b7b7b7;
  --clr-inactivep-light: #737373;
  --clr-accent: #FF9200;
 --clr-seconfaccent: #c9914f;
  
  --clr-nav-bg: #222;
  --clr-nav-text: #eaeaea;
  --clr-dc-text: #5a3f00;
 --clr-templates: #4682B4;
  --clr-templ_acc: #3cc4fe; 

  --clr-bg-app: #2a2a2a;
    --glass-l: #d4c9c90f;

  --glass-50: rgba(42,42,42,0.5);
  --glass-70: rgba(37,36,34,0.797);
  --glass-a:  #e59a38d6;
  --slider-track: rgba(83,83,83,0.9);
  --shadow-35: rgba(0,0,0,0.55);

  --gf-apple:#274a34;
  --gf-mindaro: #cbff83;
  --gf-minshaft:#232323;

  /* families */
  --font-sans: "Syne", sans-serif;

  --font-body: var(--font-sans);
  --font-h1: var(--font-sans);
  --font-heading: 'BabelStoneModern', sans-serif;


  --fs-body: 1.9rem;
  --lh-body: 1.55;
  --fs-small: .75rem;

  --space-1: .5rem;  
  --space-2: 1rem;    
  --space-3: 1.5rem;  
  --space-4: 2rem;    
  --space-5: 2.5rem;  
  --space-6: 3rem;    
  --space-8: 5rem;    
  --space-10: 7rem;   
  --fw-regular: 300;
  --fw-bold: 400;


  --ls-uc: 0.05em;
  --ls-uc-tight: 0.08em;
    --ls-uc-p: 0.1em;


  --radius:.5rem;

  --gutter-content: clamp(1rem, 6vw, 2rem);
    --gutter-header: clamp(1rem, 6vw, 5.5rem);

  --max-width:960px;
  --section-space: var(--space-1);
  --header-height:82px;

  --section-min-h: clamp(560px, 72vh, 920px);
  --section-pad-block: 10rem;
  --container-gap: var(--space-10);    
    --why-bg-url: url('/media/whybg.webp');  /* absolute path */


}

.page--roadmap {

  --roadmap-glass: rgba(42, 42, 42, 0.5);
  --roadmap-line: rgba(255, 255, 255, 0.22);
  --roadmap-muted: rgba(255, 255, 255, 0.72);
  --roadmap-radius: 16px;
  --roadmap-shadow: 0 12px 60px var(--shadow-35);   
  color: var(--clr-primary-light);
}


.rm-card{
  position: relative;
  border-radius: 16px;
  background: var(--glass-70);
  box-shadow: 0 12px 60px var(--shadow-35);
  color: var(--clr-primary-light);
  padding: clamp(1rem, 1.8vw, 1.5rem);
}


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

.page--roadmap .container,
.page--roadmap .mission,
.page--roadmap .rm {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: var(--gutter-content);
  padding-right: var(--gutter-content);
}

.page--roadmap .mission,
.page--roadmap .rm {
  margin-top: 0;
  margin-bottom: 0;
}

.page--roadmap .hero + .mission,
.page--roadmap .mission + .rm,
.page--roadmap .rm + .rm {
  margin-top: 0.4rem;
}
/* ==========================================================================
   Typography
   ========================================================================== */

.page--roadmap .roadmap-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing:.2rem;
  text-transform: uppercase;
  color: var(--clr-nav-text);
}

.page--roadmap .roadmap-heading {
  margin: 8rem 0 0 0;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--clr-roadmap);
  text-align: left;
}


.page--roadmap h3{
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  line-height: 1.4;
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  color: var(--clr-roadmap);
  text-align: left;
  font-size: 3.8rem;
}

.page--roadmap h3{
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  line-height: 1.4;
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  color: var(--clr-secondary-light);
  text-align: left;
  font-size: 2.3rem;
}
.page--roadmap h4{
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--clr-primary-light);
  text-align: left;

}

.page--roadmap h5{
  min-height: 3rem;
  margin: 1rem 0 1.25rem 0;
  font-family: var(--font-heading);
  font-size: .9rem;
  line-height: 1.6;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--clr-primary);
  text-align: left;
}

.page--roadmap .roadmap-card-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  color: var(--clr-roadmap);
}

.page--roadmap p {
  margin: 0;
  line-height: 1.55;
  text-align: left;
}

.page--roadmap p + p {
  margin-top: 0.3rem;
}

.page--roadmap .roadmap-intro {
  margin-bottom: 6rem;
}

.mission-intro__visual{
  margin: 4rem 0 3.75rem; 
}

.mission-intro__image{
  display: block;
  width: 100%;     /* matches header/content width */
  height: auto;    /* keep full image visible */
  border-radius: var(--roadmap-radius);  /* same as header corners */
  box-shadow: none;
}

/* ==========================================================================
   Hero
   Fixes content sitting at the top.
   Does not turn hero pillars into cards.
   ========================================================================== */

.page--roadmap .hero {
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.page--roadmap .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--roadmap .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
    overflow: visible;
}

.page--roadmap .hero__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
    overflow: visible;
}

.page--roadmap .hero__pillars li {
  padding: clamp(1rem, 2.5vw, 1.3rem);
  border-radius: var(--roadmap-radius);
  background: none;
  box-shadow: 0 12px 60px var(--shadow-35);
  overflow: visible;
}

.page--roadmap .hero__pillars h2 {
  margin: 0.2rem 0 0.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .2rem;
  text-transform: uppercase;
  text-align: left;
  color: var(--clr-secondary-light);
}


.page--roadmap .hero__pillars p {
  max-width: 24rem;
  color: var(--roadmap-muted);
  padding-top: 1rem;
  text-align: left;
}

@media (min-width: 720px) {
  .page--roadmap .hero__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 920px) {
  .page--roadmap .hero__pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.7vw, 1.5rem);
  }
}

/* ==========================================================================
   Mission
   No cards here.
   ========================================================================== */

.page--roadmap .mission-intro {
  margin-top: 1rem;
}


.page--roadmap .mission-intro__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page--roadmap .intro-col {
  padding-top: 0.25rem;
}

.page--roadmap .intro-col p {
  padding-top: 0;
  color: var(--roadmap-muted);
}

.page--roadmap .mission-intro__visual {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
}

.page--roadmap .mission-intro__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--roadmap-radius);
  box-shadow: none;
}

@media (min-width: 720px) {
  .page--roadmap .mission-intro__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Open model / Push to Open
   ========================================================================== */

.page--roadmap .open-model__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2rem;
  margin-bottom: 6rem;
}

.page--roadmap .open-model__visual {
  position: relative;
  margin: 0;
  width: 100%;
}



.page--roadmap .open-model__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: none;
}


.page--roadmap .open-model__copy {
  color: var(--roadmap-muted);
}

.page--roadmap .open-model__copy .roadmap-intro {
  margin-bottom: 0;
}

.page--roadmap .open-model__copy p + p {
  margin-top: 1.4rem;
}

@media (max-width: 640px) {
  .page--roadmap .open-model__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .page--roadmap .open-model__visual {
    order: 1;
        max-width: 300px;
    margin-inline: auto;
  }

  .page--roadmap .open-model__copy {
    order: 2;
  }
}



/* ==========================================================================
   Roadmap cards
   Cards stay here only.
   ========================================================================== */

.page--roadmap .rm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page--roadmap .rm-card {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--roadmap-radius);
  background: var(--clr-bg-app);
  box-shadow: 0 12px 60px var(--shadow-35);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  overflow: hidden;
}

.page--roadmap .rm-card p {
  color: var(--roadmap-muted);
}

.page--roadmap .rm-card h4 {
  margin: 0 0 1rem 0;
}

/* Variant 2 and 3: image left, copy right */
.page--roadmap .rm-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.page--roadmap .rm-card__visual {
  margin: 0;
  width: 100%;
}

.page--roadmap .rm-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: none;
}

.page--roadmap .rm-card__body {
  min-width: 0;
}

/* Variant 3: primary stroke */
.page--roadmap .rm-card--stroke {
  border: 1px solid var(--clr-primary);
}
.page--roadmap .rm-card__current-label {
  color: var(--clr-primary);
}

.page--roadmap .rm-card--current .cta-right {
  margin-top: 2rem;
}
.page--roadmap .rm-card--media-right .rm-card__visual {
  order: 2;
}

.page--roadmap .rm-card--media-right .rm-card__body {
  order: 1;
}

@media (max-width: 640px) {
  .page--roadmap .rm-card--media-right .rm-card__visual {
    order: 1;
  }

  .page--roadmap .rm-card--media-right .rm-card__body {
    order: 2;
  }
}
.page--roadmap .why::before {
  background-image: url("/media/roadmap-support-bg.webp");
}


/* Mobile */
@media (max-width: 640px) {
  .page--roadmap .rm-card__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page--roadmap .rm-card__visual {
    max-width: 300px;
    margin-inline: auto;
  }
}
/* ==========================================================================
   Support CTA
   Single centered card.
   ========================================================================== */

.page--roadmap #support {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: var(--gutter-content);
  padding-right: var(--gutter-content);
}

.page--roadmap .support-card {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--roadmap-radius);
  background: var(--glass-70);
  box-shadow: 0 12px 60px var(--shadow-35);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.page--roadmap .support-card .roadmap-heading {
  margin: 0 0 0 0;
  text-align: center;
  color: var(--clr-primary);
}

.page--roadmap .support-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}

.page--roadmap .support-card__item h4 {
  text-align: left;
}

.page--roadmap .support-card__item p {
  color: var(--roadmap-muted);
}

.page--roadmap .support-card__cta {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.page--roadmap .support-tiers {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.page--roadmap .support-tiers h4 {
  margin-bottom: 1rem;
  color: var(--clr-primary);
}

.page--roadmap .support-tiers ul {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--roadmap-muted);
}

.page--roadmap .support-tiers strong {
  color: var(--clr-primary-light);
}

/* ==========================================================================
   Sticky Donate Button
   ========================================================================== */

.sticky-donate {
  position: fixed;
  top: calc(var(--header-height) + 1.25rem);
  right: var(--gutter-content);
  z-index: 90;
  width: max-content;
  text-decoration: none;
}

.sticky-donate--gf {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 7rem;
  min-height: 2.15rem;
  padding: 0.7rem 1.1rem;

  border-radius: 999px;
  background: var(--gf-apple);
  color: var(--gf-mindaro);

  font-family: var(--font-heading);
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-align: center;

  box-shadow: 0 12px 60px var(--shadow-35);
}

@media (max-width: 640px) {
  .page--roadmap .sticky-donate {
  top: calc(var(--header-height) + 1rem);
  right: var(--gutter-content)
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {
  .page--roadmap .hero {
    min-height: 620px;
  }

  .page--roadmap .hero-inner {
    padding-bottom: clamp(2.5rem, 12vw, 4rem);
  }

  .page--roadmap .roadmap-title {
    font-size: clamp(2.5rem, 15vw, 4.25rem);
  }

.page--roadmap .mission,
.page--roadmap .rm {
  margin-top: 0;
  margin-bottom: 0;
}

.page--roadmap .hero + .mission,
.page--roadmap .mission + .rm,
.page--roadmap .rm + .rm {
  margin-top: 2.5rem;
}
  .page--roadmap .rm-card,
  .page--roadmap .mission-intro__image {
    border-radius: var(--roadmap-radius);
  }
}

.page--roadmap .support-card__cta .btn-gofundme {
    border-radius: 999px;
  background: var(--gf-apple);
  color: var(--gf-mindaro);
}

.page--roadmap .support-card__cta .btn-gofundme .icon {
  order: -1;
  width: 2rem;
  height: 2rem;
  margin-right: 1.25rem;
}

.page--roadmap .hero__pillar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  width: 100%;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.page--roadmap .hero__pillar-arrow {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  transition: transform 180ms ease;
}

.page--roadmap .hero__pillar-link:hover .hero__pillar-arrow,
.page--roadmap .hero__pillar-link:focus-visible .hero__pillar-arrow {
  transform: translateX(0.25rem);
}

.page--roadmap .hero__pillar-link:focus-visible {
  outline: 1px solid var(--clr-primary);
  outline-offset: 0.45rem;
  border-radius: calc(var(--roadmap-radius) * 0.75);
}

.page--roadmap .support-tiers__intro {
  margin-bottom: 1rem;
  color: var(--roadmap-muted);
}