/* ============================================================================
   Beanstalk - single stylesheet.
   Tokens and component styles previously inline in the Beanstalk single-page
   index, plus extensions for the multi-page site (nav, product cards, footer,
   forms, problem-strip, audience-card, etc.).
   ============================================================================ */

:root {
  --sky-50:  #eef9ff;
  --sky-100: #d8f0ff;
  --sky-300: #82c9f5;
  --sky-500: #2992d0;
  --leaf-400:#74c947;
  --leaf-600:#2e8f35;
  --leaf-800:#126028;
  --ink:     #173044;
  --muted:   #637381;
}

html, body { min-height: 100%; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 75% 8%, rgba(255,255,255,.92), rgba(255,255,255,0) 26rem),
    linear-gradient(135deg, var(--sky-50), #ffffff 44%, var(--sky-100));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.content-wrap   { max-width: 1180px; }
.content-narrow { max-width: 940px;  }

/* -- Brand mark + navbar ---------------------------------------------------- */
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 6px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--leaf-400), var(--leaf-800));
  color: white; font-weight: 800;
  box-shadow: 0 .75rem 1.8rem rgba(18, 96, 40, .22);
}

.bs-navbar {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(41,146,208,.15);
}
.bs-navbar .nav-link            { color: var(--ink); font-weight: 600; }
.bs-navbar .nav-link.active,
.bs-navbar .nav-link:hover      { color: var(--leaf-800); }
.bs-navbar .dropdown-menu       { border-radius: 14px; box-shadow: 0 1rem 2rem rgba(23,48,68,.10); }
.bs-navbar .dropdown-item:hover { background: var(--sky-50); color: var(--leaf-800); }

/* -- Split layout (products_beanstalk only) --------------------------------- */
/* The shared sticky navbar lives above the .page-shell, so the visual-panel
   sticks to just under the navbar (height ~66 px on desktop). */
.page-shell {
  display: grid;
  grid-template-columns: auto 1fr;
}
.visual-panel {
  position: sticky; top: 66px;
  height: calc(100vh - 66px); overflow: hidden;
  background: #fff;
  border-right: 1px solid rgba(41, 146, 208, .18);
  display: flex; align-items: flex-start;
  max-width: min(46vw, 680px);
}
.visual-panel img { height: calc(100vh - 66px); width: auto; max-width: 100%; display: block; flex-shrink: 0; }

@media (max-width: 991.98px) {
  .page-shell { grid-template-columns: 1fr; }
  .visual-panel { position: relative; top: 0; height: 38vh; max-width: 100%; border-right: 0; border-bottom: 1px solid rgba(41,146,208,.18); }
  .visual-panel img { height: 38vh; width: 100%; object-fit: cover; }
}

/* -- Hero typography -------------------------------------------------------- */
.hero-kicker {
  color: var(--leaf-800); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-size: .78rem;
}
.hero-title  { font-weight: 800; line-height: 1.06; letter-spacing: -.02em; font-size: clamp(2rem, 3.2vw, 3.0rem); }
.hero-sub    { color: var(--muted); font-size: 1.12rem; line-height: 1.55; }

/* -- Buttons ---------------------------------------------------------------- */
.btn-beanstalk {
  background: linear-gradient(135deg, var(--leaf-400), var(--leaf-800));
  border: 0; color: #fff !important; border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 .9rem 2rem rgba(18, 96, 40, .25);
}
.btn-beanstalk:hover, .btn-beanstalk:focus {
  filter: brightness(1.05);
  box-shadow: 0 1.1rem 2.4rem rgba(18, 96, 40, .32);
}

/* -- Glass card / panels ---------------------------------------------------- */
.glass-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(41,146,208,.16);
  border-radius: 18px;
  box-shadow: 0 1.2rem 2.4rem rgba(23, 48, 68, .06);
}

/* -- Section titles --------------------------------------------------------- */
.section-title { font-weight: 800; letter-spacing: -.015em; }
.section-eyebrow {
  color: var(--leaf-800); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-size: .78rem;
}

/* -- IdP badges row (used on products_beanstalk) ---------------------------- */
.idp-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.idp-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid rgba(41,146,208,.22);
  border-radius: 999px; padding: .35rem .8rem;
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
.idp-badge::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--leaf-400);
}

/* -- Feature pill / step number / problem strip ---------------------------- */
.feature-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--sky-50); color: var(--leaf-800);
  border: 1px solid rgba(46, 143, 53, .22); border-radius: 999px;
  padding: .25rem .7rem; font-size: .78rem; font-weight: 700;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf-400), var(--leaf-800));
  color: #fff; font-weight: 800;
}
.problem-strip {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,249,255,.94));
  border: 1px solid rgba(41,146,208,.18);
  border-radius: 22px;
}
.audience-card {
  background: #fff; border: 1px solid rgba(41,146,208,.18);
  border-radius: 18px; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.audience-card:hover { transform: translateY(-3px); box-shadow: 0 1.4rem 2.8rem rgba(23,48,68,.08); }

/* -- Check-list (used by feature columns) ----------------------------------- */
.check-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.check-list li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; line-height: 1.55; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 .2rem, transparent 0),
    linear-gradient(135deg, var(--leaf-400), var(--leaf-800));
  box-shadow: 0 .25rem .6rem rgba(18, 96, 40, .25);
}

/* -- Product cards on index/category pages ---------------------------------- */
.product-card {
  display: flex; gap: 1rem;
  background: #fff; border: 1px solid rgba(41,146,208,.16);
  border-radius: 18px; padding: 1.1rem 1.2rem;
  text-decoration: none; color: inherit; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover {
  transform: translateY(-3px); border-color: var(--leaf-400);
  box-shadow: 0 1.4rem 2.8rem rgba(23,48,68,.08);
  color: inherit; text-decoration: none;
}
.product-card .product-icon { flex: 0 0 auto; width: 64px; height: 64px; }
.product-card .product-icon img { width: 100%; height: 100%; display: block; }
.product-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .15rem; }
.product-card p  { color: var(--muted); margin: 0; font-size: .92rem; line-height: 1.45; }
.product-card .new-badge {
  display: inline-block; background: #cf4f24; color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .1rem .4rem; border-radius: 4px; margin-left: .4rem; vertical-align: top;
}

/* -- Product detail (used by all products_* pages) -------------------------- */
.product-hero {
  background: linear-gradient(135deg, var(--sky-50), #fff 60%);
  border: 1px solid rgba(41,146,208,.16);
  border-radius: 22px; padding: 2rem;
}
.product-hero .icon-tile { width: 96px; height: 96px; }
.product-hero .icon-tile img { width: 100%; height: 100%; display: block; }

.nav-tabs.bs-tabs .nav-link {
  color: var(--muted); font-weight: 700; border: 0;
  border-bottom: 3px solid transparent; border-radius: 0;
}
.nav-tabs.bs-tabs .nav-link.active {
  color: var(--leaf-800); border-color: var(--leaf-600); background: transparent;
}

.accordion-item.bs-accordion-item { border-radius: 14px !important; overflow: hidden; margin-bottom: .6rem; border: 1px solid rgba(41,146,208,.18); }
.accordion-item.bs-accordion-item .accordion-button { font-weight: 700; color: var(--ink); }
.accordion-item.bs-accordion-item .accordion-button:not(.collapsed) { color: var(--leaf-800); background: var(--sky-50); }

/* -- Forms ------------------------------------------------------------------ */
.form-control, .form-select { border-radius: 10px; border: 1px solid rgba(41,146,208,.25); }
.form-control:focus, .form-select:focus {
  border-color: var(--leaf-400);
  box-shadow: 0 0 0 .2rem rgba(116, 201, 71, .18);
}
.order-table { width: 100%; }
.order-table th, .order-table td { padding: .55rem .6rem; border-bottom: 1px solid rgba(41,146,208,.12); vertical-align: middle; }
.order-table thead th { background: var(--sky-50); font-weight: 700; }
.qty-control { display: inline-flex; align-items: center; gap: .35rem; }
.qty-control input { width: 4.5rem; text-align: center; }
.qty-control button {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid rgba(41,146,208,.3); background: #fff; color: var(--leaf-800);
  font-weight: 800; line-height: 1;
}
.qty-control button:hover { background: var(--sky-50); }
.captcha-img { border: 1px solid rgba(41,146,208,.25); border-radius: 8px; }

/* -- CTA strip / footer ----------------------------------------------------- */
.cta-strip {
  background: linear-gradient(135deg, var(--leaf-600), var(--leaf-800));
  color: #fff;
}
.bs-footer {
  background: #fff;
  border-top: 1px solid rgba(41,146,208,.15);
  color: var(--muted);
}

/* -- Utilities -------------------------------------------------------------- */
.red-text { color: #cf4f24; font-weight: 700; }
.text-leaf { color: var(--leaf-800) !important; }
.text-sky  { color: var(--sky-500) !important; }

/* ----------------------------------------------------------------------
   Resource / cross-link cards (Beanstalk intent landing pages)
   ---------------------------------------------------------------------- */
.beanstalk-resource-card{
  display:block; height:100%; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid rgba(23,48,68,.10); border-radius:14px;
  padding:1rem 1.1rem; box-shadow:0 .35rem 1rem rgba(23,48,68,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.beanstalk-resource-card:hover{
  color:var(--ink); border-color:var(--leaf-400);
  transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(23,48,68,.10);
}
.beanstalk-resource-card .fw-bold{ color:var(--leaf-800); }