/* ============================================================
   HAANK Products — page layer (loaded only on /products)
   Sits on top of styles.css and reuses its tokens and primitives.
   ============================================================ */

/* ---------- hero: shorter than the homepage's full-viewport one ---------- */
.hero--prod{min-height:auto;padding:150px var(--gut) 76px}
.hero--prod .hero-h1{font-size:clamp(2.4rem,5.6vw,4.9rem);max-width:18ch}
.hero--prod .hero-sub{max-width:58ch}

/* ---------- two ways to buy ---------- */
.buy{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.buy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:36px}
.buy-card{border:1px solid var(--hair);border-radius:16px;background:var(--navy);padding:28px 26px}
.buy-card .bnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:14px}
.buy-card h3{font-size:1.35rem;margin-bottom:10px}
.buy-card p{color:var(--grey);font-size:.98rem;line-height:1.65}

/* ---------- product grid ---------- */
.prods{padding:96px 0}
.prod-grid{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}

.prod{position:relative;border:1px solid var(--hair);border-radius:18px;background:var(--navy);
  padding:30px 28px 26px;display:flex;flex-direction:column;
  transition:border-color .45s var(--e),transform .45s var(--e),background .45s var(--e)}
.prod:hover{border-color:rgba(229,169,60,.45);transform:translateY(-4px);background:var(--navy-panel)}

.prod-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.prod-num{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--grey)}

.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;border:1px solid var(--hair);color:var(--grey);white-space:nowrap}
.chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-inline-end:7px;vertical-align:middle}
.chip--live{color:#7FD1A8;border-color:rgba(127,209,168,.35);background:rgba(127,209,168,.07)}
.chip--prod{color:var(--gold-lt);border-color:rgba(244,196,101,.35);background:rgba(244,196,101,.07)}
.chip--ready{color:#8FB8E8;border-color:rgba(143,184,232,.32);background:rgba(143,184,232,.07)}
.chip--pilot{color:var(--grey)}

.prod-icon{margin-bottom:16px}
.prod-icon svg{width:38px;height:38px}
.prod h3{font-size:1.5rem;margin-bottom:6px}
.prod-cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-bottom:14px}
.prod-desc{color:var(--grey);font-size:.97rem;line-height:1.65;margin-bottom:20px}

.prod-feats{list-style:none;margin:0 0 24px;display:grid;gap:9px}
.prod-feats li{position:relative;padding-inline-start:22px;color:var(--cream);
  font-size:.9rem;line-height:1.55;opacity:.88}
.prod-feats li::before{content:"▸";position:absolute;inset-inline-start:0;top:0;
  color:var(--gold);font-size:.78rem;line-height:1.75}

.prod-go{margin-top:auto;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  color:var(--gold);display:inline-flex;align-items:center;gap:8px;
  border-top:1px solid var(--hair-2);padding-top:18px;transition:gap .3s var(--e)}
.prod:hover .prod-go{gap:14px}

/* ---------- custom-build band ---------- */
.custom{max-width:var(--maxw);margin:0 auto;padding:96px var(--gut) 0}
.custom-band{border:1px solid var(--hair);border-radius:20px;background:var(--navy);
  padding:clamp(30px,4.4vw,54px);display:grid;gap:clamp(28px,4vw,52px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.custom-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:14px 0 18px;max-width:16ch}
.custom-copy p{color:var(--grey);font-size:1rem;line-height:1.7;max-width:56ch}
.custom-copy p + p{margin-top:14px}
.custom-copy i{color:var(--cream);font-style:italic}
.custom-list{list-style:none;display:grid;gap:14px;align-content:start}
.custom-list li{border-inline-start:2px solid rgba(229,169,60,.5);
  padding-block:2px;padding-inline:16px 0;
  color:var(--grey);font-size:.94rem;line-height:1.6}
.custom-list b{display:block;color:var(--cream);font-family:var(--disp);font-weight:500;
  font-size:1.04rem;margin-bottom:3px}
@media (max-width:820px){
  .custom-band{grid-template-columns:1fr}
}

/* ---------- pricing note ---------- */
.pricing{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.price-band{margin-top:38px;border:1px solid var(--hair);border-radius:18px;background:var(--navy);
  padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.price-item h3{font-size:1.2rem;margin-bottom:9px}
.price-item p{color:var(--grey);font-size:.95rem;line-height:1.65}
.price-item .pfig{font-family:var(--mono);color:var(--gold);font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:12px}

/* ---------- faq ---------- */
.faq{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.faq-list{margin-top:36px;border-top:1px solid var(--hair-2)}
.faq-item{border-bottom:1px solid var(--hair-2)}
.faq-item summary{cursor:pointer;padding-block:24px;padding-inline:0 40px;position:relative;
  font-family:var(--disp);font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--cream);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;inset-inline-end:6px;top:22px;
  color:var(--gold);font-family:var(--mono);font-size:1.3rem;transition:transform .35s var(--e)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--gold)}
.faq-item p{color:var(--grey);font-size:.98rem;line-height:1.7;
  padding-block:0 26px;padding-inline:0 40px;max-width:76ch}

@media (max-width:620px){
  .prod-grid{grid-template-columns:1fr}
  .prod{padding:26px 22px 24px}
}
@media (prefers-reduced-motion:reduce){
  .prod,.prod-go{transition:none}
  .prod:hover{transform:none}
}