.page--plans{
  --clr-templates: #4682B4; 

  --clr-templ_acc: #3cc4fe; 
  
  --glass-50: rgba(42,42,42,0.5);
  --glasslight-50: rgba(184, 234, 253, 0.906);

  --band-h: 92px;   
  --svg-w: 160px; 
    margin-bottom: clamp(4rem, 10vw, 6rem);
}

.templates-header{
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: var(--gutter-content);
  padding-right: var(--gutter-content);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

.page--plans .templates-intro__title{
  all: unset;                    
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;           
  font-weight: 400;
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  color: var(--clr-templ_acc);
  margin-bottom: 4rem;
}

.templates-header__band{
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 32px;
  background: var(--clr-templates);
  box-shadow: 0 12px 60px var(--shadow-35);
  color: var(--clr-nav-text);

  height: var(--band-h, 72px);      /* fixed height — SVG never changes this */
  padding-inline: clamp(16px, 2vw, 22px);
  overflow: hidden;                 /* safety */
    margin-bottom: clamp(2rem, 8vw, 6rem);
}

.templates-header__title{
  display: block;
  width: var(--svg-w, 260px);       /* control SVG size here */
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
  fill: currentColor;
  color: currentColor;
}



.rn-section{
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: var(--gutter-content);
  padding-right: var(--gutter-content);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.rn-stack{ display: grid; gap: var(--space-4); }
.rn-stack--tight{ gap: var(--space-2); }
.rn-stack--loose{ gap: var(--space-6); }

/* Optional page scope to avoid collisions */
.page--plans .rn-section h1,
.page--plans .rn-section h2{
  font-family: var(--font-heading);
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
}

/* 2) Card Grid (auto-fit) + Card */
.rn-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 3rem); /* mobile: bigger spacing */
}
@media (min-width: 720px){
  .rn-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(3rem, 7vw, 5rem);     /* taller row gutters */
    column-gap: clamp(2.5rem, 5vw, 4rem);/* wider column gutters */
  }
}


.rn-card{
  --safe: clamp(8px, 1.1vw, 9px);
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  border-radius: 32px;
  overflow: hidden;
  padding: 0;                             
  box-shadow: 0 12px 60px var(--shadow-35);
  color: var(--clr-primary-light);
}


.rn-card::before{
  content:""; position:absolute; inset:0;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: left center;
  transform: scale(var(--zoom, 2));
  transform-origin: left center;
  z-index:0;
}

.rn-card::after{ content: none; }

.rn-card > *{ position: relative; z-index: 2; }

.rn-card__inner{
  position: absolute;
  top: var(--safe); 
  right: var(--safe);
  bottom: var(--safe);
  width: min(44%, 420px);
  max-height: calc(100% - (var(--safe) * 2));
  border-radius: 32px;
  padding: clamp(14px,1.8vw,18px) clamp(16px,2.2vw,22px);

  box-shadow: 0 12px 60px var(--shadow-35);
  color: var(--clr-primary-light);
  backdrop-filter: blur(5px);
  display: flex; flex-direction: column; gap: .6rem;
  overflow: hidden;                     
}


.rn-card__kicker{
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: .8rem;
  opacity:.95;
  color: var(--clr-templ_acc);

}

.rn-specs{
  display: grid;
  grid-template-columns: 1fr auto auto;  /* label | ft | cm */
  column-gap: 14px;
  row-gap: 6px;
  font-family: var(--font-heading);
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  font-size: .75rem;
  justify-items: start; 
}
.rn-specs .lbl{ opacity:.7; }
.rn-specs .imp,
.rn-specs .met{
    justify-items: start; 
  justify-self: end;
  white-space: nowrap;
}
.rn-specs .met sup{
  font-size: .6em;
  vertical-align: super;
}

.rn-card__specs dt{ opacity:.7; }
.rn-card__specs dd{ margin:0; }


.rn-card__est-nums{

    font-family: var(--font-heading);
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  font-size: .9rem;
  justify-items: center; 
  color: #00ff226f;
  
}




.rn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
  padding:1.25rem 1.7rem;
  font-family: var(--font-heading);
  font-size:0.8rem; letter-spacing: var(--ls-uc); text-transform: uppercase;
  color: var(--clr-nav-text);
  border: none; border-radius: 22px;
  background: var(--clr-primary);
    box-shadow: 0 12px 60px var(--shadow-35);   
  backdrop-filter: blur(16px) saturate(120%);        
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}



.rn-card__inner{

  --btn-h: 32px;            
  --btn-gap: 12px;          
  padding-bottom: calc(clamp(14px,1.8vw,18px) + var(--btn-h) + var(--btn-gap));
}


.rn-card__inner > .rn-btn--primary{
  position: absolute;
  left: var(--safe);
  right: var(--safe);
  bottom: var(--safe);
  height: var(--btn-h, 64px);
  padding: 0;
  margin: 0;
  border: 0;
  background:var(--clr-templates); 
    box-shadow: 0 12px 60px var(--shadow-35);   
  backdrop-filter: blur(16px) saturate(120%);        
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  line-height: 0;
  border-radius: 22px;
  overflow: hidden;
}


.rn-card__inner > .rn-btn--primary > img,
.rn-card__inner > .rn-btn--primary > svg{
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Nuke generic .rn-btn styles inside the inner so they don't fight */
.rn-card__inner .rn-btn{
  padding: 0;
    box-shadow: 0 12px 60px var(--shadow-35);   
  backdrop-filter: blur(16px) saturate(120%);        
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.templates-intro__visual{
  margin: 0 0 3.75rem; /* more space under image */
}

.templates-intro__image{
  display: block;
  width: 100%;     /* matches header/content width */
  height: auto;    /* keep full image visible */
  border-radius: 32px;  /* same as header corners */
  box-shadow: none;
}




.templates-intro__cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: .5rem;
}

@media (min-width: 720px){
  .templates-intro__cols{
    grid-template-columns: 1fr 1fr; /* left | right */
    align-items: start;
    column-gap: clamp(24px, 4vw, 48px);
  }
}

.templates-intro h3{
  margin: 0 0 .35rem 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: var(--ls-uc);
  text-transform: uppercase;
  color: var(--clr-templ_acc);
  text-align: left;
}

.templates-intro .intro-col p{
  margin: .25rem 0;
  line-height: 1.45;
}