/* ============================================================
   KYNAD Product Page — shared layout
   Used by individual product detail pages. Green by default;
   add .blue on .product-hero / page for CALYX intelligence products.
   ============================================================ */

/* ---------- HERO ---------- */
.product-hero{
  padding:64px 0 56px;
  background:
    radial-gradient(circle at 88% 14%, rgba(45,125,58,.07), transparent 55%),
    var(--bg-page);
  border-bottom:1px solid var(--border-subtle);
}
.product-hero.blue{
  background:
    radial-gradient(circle at 88% 14%, rgba(21,101,192,.08), transparent 55%),
    var(--bg-page);
}
.product-hero-grid{
  display:grid;grid-template-columns:1.2fr .9fr;gap:64px;align-items:center;
}
.product-hero h1{
  font-size:clamp(40px,5vw,64px);line-height:1.03;letter-spacing:-.02em;
  color:var(--charcoal);margin:18px 0 18px;font-weight:var(--fw-heading-extra);
  text-wrap:balance;
}
.product-hero h1 .accent{color:var(--kynad-green)}
.product-hero.blue h1 .accent{color:var(--calyx-blue)}
.product-hero .strap{
  font-family:var(--font-body);font-style:italic;color:var(--kynad-green);
  font-size:18px;font-weight:var(--fw-body-bold);margin:0 0 22px;letter-spacing:.01em;
}
.product-hero.blue .strap{color:var(--calyx-blue)}
.product-hero .lede{font-size:18px;line-height:1.6;color:var(--fg-1);max-width:560px;margin:0 0 28px}

/* ---------- MARK CARD ---------- */
.mark-card{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  padding:36px;display:grid;gap:18px;
}
.mark-card .big-glyph{
  font-family:var(--font-heading);font-weight:var(--fw-heading-extra);
  color:var(--kynad-green);font-size:120px;line-height:.9;letter-spacing:-.04em;
  margin:0;text-align:center;
}
.product-hero.blue .mark-card .big-glyph{color:var(--calyx-blue)}
.mark-card .big-glyph .tm{font-size:34px;vertical-align:super}
.mark-card .glyph-block{
  background:var(--kynad-green-bg);border-radius:var(--radius-sm);
  min-height:180px;display:flex;align-items:center;justify-content:center;
}
.product-hero.blue .mark-card .glyph-block{background:var(--calyx-blue-bg)}
.mark-card .formula{
  font-family:var(--font-body);font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--mid-gray);letter-spacing:.02em;
  background:var(--bg-page);border:1px solid var(--border-subtle);
  padding:14px 18px;border-radius:var(--radius-sm);line-height:1.5;
}
.mark-card .formula strong{color:var(--charcoal);font-family:inherit}
.mark-card .kvs{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.mark-card .kvs > div .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid-gray);font-weight:var(--fw-body-bold);display:block;margin-bottom:4px}
.mark-card .kvs > div .v{font-family:var(--font-heading);font-weight:var(--fw-heading-bold);font-size:16px;color:var(--charcoal);line-height:1.3}
.mark-card .kvs > div .v small{font-size:12px;color:var(--mid-gray);font-weight:var(--fw-body);display:block;margin-top:2px}

/* ---------- BENEFIT GRID ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit-card{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:28px;
}
.benefit-card .icn{
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--kynad-green-bg);color:var(--kynad-green);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.product-hero.blue ~ * .benefit-card .icn,
.benefit-card.blue .icn{background:var(--calyx-blue-bg);color:var(--calyx-blue)}
.benefit-card h4{
  font-family:var(--font-heading);font-weight:var(--fw-heading-bold);
  font-size:18px;color:var(--charcoal);margin:0 0 8px;
}
.benefit-card p{font-size:14px;line-height:1.6;color:var(--fg-1);margin:0}

/* ---------- DOSE / APPLICATION ---------- */
.dose-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dose-card{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:32px;
}
.dose-card .conc{
  font-family:var(--font-heading);font-weight:var(--fw-heading-extra);
  color:var(--kynad-green);font-size:44px;letter-spacing:-.02em;line-height:1;margin:0;
}
.dose-card.blue .conc{color:var(--calyx-blue)}
.dose-card .conc small{font-size:18px;color:var(--mid-gray);font-weight:var(--fw-body);margin-left:6px}
.dose-card .conc-lbl{
  font-size:13px;color:var(--mid-gray);font-weight:var(--fw-body-bold);
  letter-spacing:.06em;text-transform:uppercase;margin-top:4px;
}
.dose-card h4{
  font-family:var(--font-heading);font-weight:var(--fw-heading-bold);
  font-size:20px;color:var(--charcoal);margin:18px 0 6px;
}
.dose-card .target{font-size:14px;color:var(--mid-gray);margin:0 0 18px;line-height:1.5}
.dose-card .row{
  display:flex;justify-content:space-between;padding:14px 0;
  border-top:1px solid var(--border-subtle);align-items:baseline;
}
.dose-card .row:last-child{border-bottom:1px solid var(--border-subtle)}
.dose-card .row .species{font-size:15px;color:var(--charcoal);font-weight:var(--fw-body-bold)}
.dose-card .row .rate{
  font-family:var(--font-heading);font-weight:var(--fw-heading-bold);
  font-size:18px;color:var(--kynad-green);letter-spacing:-.01em;
}
.dose-card.blue .row .rate{color:var(--calyx-blue)}
.dose-card .row .rate small{font-size:12px;color:var(--mid-gray);font-weight:var(--fw-body);margin-left:4px}

/* ---------- APPLICATION / SPECIES PANELS ---------- */
.species-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.species-card{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:28px;
}
.species-card .icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--kynad-green-bg);color:var(--kynad-green);margin-bottom:14px}
.species-card h4{
  font-family:var(--font-heading);font-weight:var(--fw-heading-bold);
  font-size:20px;color:var(--charcoal);margin:0 0 6px;
}
.species-card .status{
  display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:var(--fw-body-bold);padding:3px 10px;border-radius:var(--radius-sm);
  background:var(--kynad-green-bg);color:var(--kynad-green);margin-bottom:14px;
}
.species-card .status.blue{background:var(--calyx-blue-bg);color:var(--calyx-blue)}
.species-card .status.emerging{background:var(--light-gray);color:var(--mid-gray)}
.species-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.species-card li{font-size:14px;color:var(--fg-1);line-height:1.55;padding-left:18px;position:relative}
.species-card li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--kynad-green);border-radius:50%}
.species-card.blue li:before{background:var(--calyx-blue)}

/* ---------- AT-A-GLANCE STRIP ---------- */
.glance-strip{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.glance-strip .gchip{
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:14px 18px;display:flex;flex-direction:column;min-width:170px;
}
.glance-strip .gchip .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid-gray);font-weight:var(--fw-body-bold);margin-bottom:4px}
.glance-strip .gchip .v{font-family:var(--font-heading);font-weight:var(--fw-heading-bold);font-size:15px;color:var(--charcoal);line-height:1.3}
.glance-strip .gchip .v small{font-size:12px;color:var(--mid-gray);font-weight:var(--fw-body);display:block;margin-top:2px}

@media (max-width:1080px){
  .product-hero-grid{grid-template-columns:1fr;gap:40px}
  .benefit-grid,.dose-grid,.species-panel{grid-template-columns:1fr}
}