/* ===================================================
   PRODUCT PAGE — styles/product.css
   All rules scoped to #r-product to avoid conflicts
   =================================================== */

/* ---------- shared landing-hero flow elements ---------- */
/* these classes are only used on landing pages (product, socials)
   so scoping globally here is fine; they don't exist in old CSS */
.h-cta{display:flex;gap:12px;justify-content:center;margin-top:32px}
.h-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:50px}
.h-step{display:flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--line);border-radius:40px;background:var(--bg2);cursor:pointer;text-decoration:none;color:inherit}
.h-step:hover{border-color:var(--line2)}
.h-step .sn{font-family:var(--mono);font-size:11px;color:var(--grn)}
.h-step .st{font-family:var(--mono);font-size:12px;color:var(--tx)}
.h-line{width:40px;height:1px;background:var(--line2);margin:0 4px;flex-shrink:0}

/* ---------- scoped overrides for #r-product ---------- */
#r-product{padding-top:120px}
#r-product .ld-hero{padding-top:0;margin-top:0}

/* hero heading — serif, large, centered */
#r-product h1{
  font-family:var(--serif);
  font-weight:330;
  font-size:clamp(40px,5vw,64px);
  line-height:1.04;
  letter-spacing:-.02em;
  max-width:820px;
  margin:20px auto 0;
}

/* green italic em in headings */
#r-product h1 em,
#r-product h2 em,
#r-product h3 em{
  font-style:italic;
  color:var(--grn);
}

/* eyebrow label — match reference exactly */
#r-product .ey{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grn);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#r-product .ey::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--grn);
  box-shadow:none;
}

/* subtitle */
#r-product .sub{
  color:var(--mut);
  font-size:18px;
  max-width:560px;
  margin:20px auto 0;
  text-align:center;
}

/* CTA button — green filled (base CSS has ghost style) */
#r-product .btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:13px;
  background:var(--grn);
  color:#05130a;
  padding:11px 18px;
  border-radius:40px;
  font-weight:500;
  cursor:pointer;
  border:none;
  text-decoration:none;
}
#r-product .btn:hover{opacity:.88}

/* inner section spacing */
#r-product>section{
  border-top:none;
  padding:48px 0 80px;
}

/* 3-column card grid */
#r-product .pcards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* card — override old horizontal-list pcard style from base CSS */
#r-product .pcard{
  background:linear-gradient(180deg,#10161d,#0c1116) !important;
  border:1px solid var(--line2) !important;
  border-right:1px solid var(--line2) !important;
  border-radius:18px !important;
  padding:30px !important;
  cursor:pointer;
  transition:border-color .2s;
}
#r-product .pcard:hover{
  border-color:var(--grn) !important;
  background:linear-gradient(180deg,#10161d,#0c1116) !important;
}
#r-product .pcard .pn{
  font-family:var(--mono);
  font-size:12px;
  color:var(--grn);
  letter-spacing:.12em;
}
#r-product .pcard h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:24px;
  line-height:1.15;
  margin:14px 0 10px;
  color:var(--tx);
}
#r-product .pcard p{
  color:var(--mut);
  font-size:15px;
  line-height:1.5;
  min-height:0;
}
#r-product .pcard .go{
  margin-top:18px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--grn);
  display:block;
}

/* responsive */
@media(max-width:820px){
  #r-product .pcards{grid-template-columns:1fr}
  .h-flow{gap:8px}
  .h-line{display:none}
}