/* Product page shared styles — append/supplementary to jil.css */

/* ===== PRODUCT HERO ===== */
.p-hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--rule);
}
.p-hero .grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap:64px; align-items:start;
}
.p-breadcrumb{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:32px;
}
.p-breadcrumb a{ color:var(--ink-3); }
.p-breadcrumb a:hover{ color:var(--ink); }
.p-breadcrumb .sep{ margin:0 10px; color:var(--rule-soft); }
.p-breadcrumb .current{ color:var(--ink); }
.p-hero h1{
  font-size:clamp(56px, 6vw, 88px);
  line-height:0.96; letter-spacing:-0.025em; font-weight:300;
  margin-top:8px;
}
.p-hero .tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2vw, 30px);
  color:var(--crimson); margin-top:20px; font-weight:400;
}
.p-hero .lede{
  font-size:17px; line-height:1.6; color:var(--ink-2); margin-top:32px; max-width:56ch;
  font-weight:300;
}
.p-hero .category{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--crimson); font-weight:600;
}
.p-hero .category::before{
  content:""; width:24px; height:1px; background:var(--crimson);
}

/* Side card */
.p-sidecard{
  border:1px solid var(--rule); background:var(--paper); position:sticky; top:88px;
}
.p-sidecard-head{
  padding:16px 24px; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
}
.p-sidecard-body{ padding:28px 24px; }
.p-sidecard .from{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
}
.p-sidecard .price{
  font-family:var(--serif); font-size:72px; line-height:0.9; letter-spacing:-0.02em; font-weight:400;
  margin:6px 0 4px;
}
.p-sidecard .unit{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.1em;
}
.p-sidecard .inc{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--rule-soft);
}
.p-sidecard .inc h4{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
  font-weight:500; margin:0 0 10px;
}
.p-sidecard .inc ul{
  list-style:none; padding:0; margin:0;
  font-size:13.5px; color:var(--ink-2);
}
.p-sidecard .inc li{
  padding:6px 0; display:flex; gap:10px;
}
.p-sidecard .inc li::before{
  content:"—"; color:var(--ink-3); flex-shrink:0;
}
.p-sidecard .buy{ margin-top:22px; display:grid; gap:8px; }

/* ===== TIERS ===== */
.tiers{
  padding:80px 0; border-bottom:1px solid var(--rule);
}
.tiers-grid{
  display:grid; grid-template-columns:repeat(var(--cols,3), 1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule);
}
.tier-card{
  background:var(--paper); padding:36px 32px; position:relative;
  display:grid; grid-template-rows:auto auto auto 1fr auto; gap:20px;
}
.tier-card .t-num{
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--ink-3);
}
.tier-card .t-name{
  font-family:var(--serif); font-size:32px; font-weight:400; letter-spacing:-0.01em;
  line-height:1.1;
}
.tier-card .t-price{
  font-family:var(--serif); font-size:44px; font-weight:400; letter-spacing:-0.02em;
  line-height:1;
}
.tier-card .t-price .u{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.1em;
  color:var(--ink-3); margin-left:8px;
}
.tier-card .t-desc{
  color:var(--ink-2); font-size:14px; line-height:1.55;
  padding-bottom:20px; border-bottom:1px solid var(--rule-soft);
}
.tier-card .t-feats{
  list-style:none; padding:0; margin:0;
  font-size:13.5px; color:var(--ink);
}
.tier-card .t-feats li{
  padding:9px 0; display:flex; gap:10px;
  border-bottom:1px solid var(--rule-soft);
}
.tier-card .t-feats li:last-child{ border-bottom:0; }
.tier-card .t-feats li::before{
  content:"→"; color:var(--crimson); flex-shrink:0; font-family:var(--mono); font-size:12px;
}
.tier-card .t-sla{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding-top:16px; margin-top:4px;
  border-top:1px solid var(--rule-soft);
}
.tier-card .t-sla .slabel{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.tier-card .t-sla .svalue{ font-family:var(--serif); font-size:18px; font-weight:500; }

.tier-card.featured-tier{
  background:linear-gradient(160deg, var(--surface-deep) 0%, var(--ice) 100%);
  color:var(--ink);
  border:1px solid var(--gold);
}
.tier-card.featured-tier .t-num{ color:var(--ink-3); }
.tier-card.featured-tier .t-name{ color:var(--ink); }
.tier-card.featured-tier .t-price{ color:var(--ink); }
.tier-card.featured-tier .t-price .u{ color:var(--ink-3); }
.tier-card.featured-tier .t-desc{ color:var(--ink-2); border-color:var(--rule); }
.tier-card.featured-tier .t-feats li{ color:var(--ink); border-color:var(--rule-soft); }
.tier-card.featured-tier .t-feats li::before{ color:var(--crimson); }
.tier-card.featured-tier .t-sla{ border-color:var(--rule); }
.tier-card.featured-tier .t-sla .slabel{ color:var(--ink-3); }

.tier-card .btn{ width:100%; }
.tier-card.featured-tier .btn{
  background:var(--crimson); color:var(--paper); border-color:var(--crimson);
}
.tier-card.featured-tier .btn:hover{
  background:var(--crimson-2); border-color:var(--crimson-2); color:var(--paper);
}

.tier-badge{
  position:absolute; top:-12px; right:32px;
  background:var(--crimson); color:var(--paper);
  font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  padding:5px 10px; font-weight:700;
}

/* ===== HOW IT WORKS ===== */
.howto{
  padding:80px 0; border-bottom:1px solid var(--rule);
}
.steps{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:48px;
}
.step{
  background:var(--paper); padding:36px 28px;
}
.step .n{
  font-family:var(--serif); font-size:64px; font-weight:400; line-height:0.9;
  letter-spacing:-0.03em; color:var(--crimson); margin-bottom:20px; display:block;
}
.step h3{
  font-size:20px; margin-bottom:12px; font-weight:400;
}
.step p{
  color:var(--ink-2); font-size:14px; line-height:1.55;
}

/* ===== SPECIFICATIONS ===== */
.specs{ padding:80px 0; border-bottom:1px solid var(--rule); background:var(--paper-deep); }

.spec-grid{
  display:grid; grid-template-columns: 1fr 1.5fr; gap:64px; align-items:start; margin-top:48px;
}
.spec-grid h2{ font-size:36px; font-weight:400; max-width:14ch; }

.spec-grid .spec{
  grid-template-columns: 1fr 2fr;
}
.spec-grid .spec dt{ border-top-color:var(--rule); padding:16px 0; }
.spec-grid .spec dd{ border-top-color:var(--rule); padding:16px 0; }

/* ===== USE CASES ===== */
.usecases{ padding:80px 0; border-bottom:1px solid var(--rule); }
.usecases-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:48px;
}
.uc{
  background:var(--paper); padding:32px 28px;
}
.uc .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--crimson); font-weight:600; margin-bottom:14px; display:block;
}
.uc h3{ font-size:22px; font-weight:400; margin-bottom:14px; }
.uc p{ color:var(--ink-2); font-size:14px; line-height:1.55; }

/* ===== CHAINS ===== */
.chains{ padding:64px 0; border-bottom:1px solid var(--rule); }
.chain-strip{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-top:28px;
}
.chain{
  padding:20px 28px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  border-right:1px solid var(--rule-soft);
  flex:1 1 auto; text-align:center;
}
.chain:last-child{ border-right:0; }

/* ===== FAQ ===== */
.faq{ padding:80px 0; border-bottom:1px solid var(--rule); }
.faq-list{ border-top:1px solid var(--rule); margin-top:40px; }
.faq-item{ border-bottom:1px solid var(--rule-soft); padding:24px 0; }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:-0.005em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--mono); font-size:24px; color:var(--crimson); font-weight:300;
  transition:transform .2s;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{
  margin-top:16px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:80ch;
}

/* ===== CTA STRIP ===== */
.ctastrip{
  padding:96px 0;
  background:linear-gradient(180deg, var(--surface-deep) 0%, var(--ice) 100%);
  color:var(--ink);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.ctastrip .container{ display:flex; justify-content:space-between; align-items:center; gap:48px; flex-wrap:wrap; }
.ctastrip h2{ color:var(--ink); font-size:clamp(32px, 3.5vw, 48px); font-weight:400; max-width:24ch; }
.ctastrip h2 em{ font-style:italic; color:var(--crimson); }
.ctastrip .btn{ color:var(--ink); border-color:var(--ink); }
.ctastrip .btn:hover{ background:var(--ink); color:var(--paper); }
.ctastrip .btn-primary{ background:var(--crimson); color:var(--paper); border-color:var(--crimson); }
.ctastrip .btn-primary:hover{ background:var(--crimson-2); border-color:var(--crimson-2); color:var(--paper); }

@media (max-width:960px){
  .p-hero .grid{ grid-template-columns:1fr; gap:32px; }
  .p-sidecard{ position:static; }
  .tiers-grid{ grid-template-columns:1fr !important; }
  .steps{ grid-template-columns:1fr 1fr; }
  .spec-grid{ grid-template-columns:1fr; gap:24px; }
  .usecases-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .steps{ grid-template-columns:1fr; }
  .p-hero, .tiers, .howto, .specs, .usecases, .faq{ padding:48px 0; }
}