/* ==========================================================================
   Integrations + demo showcase. Loaded after style.css.
   ========================================================================== */

/* ---- shared note block ---- */
.proof-note{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.05rem 1.25rem;margin-bottom:2.2rem;
  border:1px dashed var(--hair);border-radius:2px;
  background:rgba(201,162,75,.045);
  font-size:.86rem;color:var(--ash);line-height:1.68;
}
.proof-note svg{width:16px;height:16px;flex:none;color:var(--gold);margin-top:.2rem}
.proof-note b{color:var(--champagne);font-weight:500}

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */

.int-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair-soft);border:1px solid var(--hair-soft);
  border-radius:3px;overflow:hidden;
}
.int{
  display:flex;gap:1rem;align-items:flex-start;
  padding:clamp(1.1rem,1.9vw,1.5rem);
  background:var(--s1);
  transition:background .45s var(--ease);
}
.int:hover{background:rgba(201,162,75,.055)}
.int-ico{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:2px;color:var(--gold);
  transition:border-color .45s var(--ease);
}
.int:hover .int-ico{border-color:var(--hair-strong)}
.int-ico svg{width:16px;height:16px}
.int-txt b{
  display:block;font-size:.95rem;font-weight:400;color:var(--porcelain);
  margin-bottom:.4rem;line-height:1.35;
}
.int-txt span{display:block;font-size:.83rem;color:var(--ash);line-height:1.62}
.int-note{
  display:inline-block;margin-left:.5rem;padding:.1rem .42rem;border-radius:2px;
  background:rgba(201,162,75,.13);border:1px solid var(--hair);
  font-size:.62rem;font-style:normal;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);vertical-align:middle;
}

/* ==========================================================================
   DEMOS
   ========================================================================== */

.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1rem)}

.demo-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.2rem,2vw,1.6rem);
  border:1px solid var(--hair-soft);border-radius:3px;
  background:linear-gradient(165deg,rgba(57,57,57,.24),rgba(57,57,57,.06));
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
  overflow:hidden;
}
.demo-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.demo-card:hover{
  transform:translateY(-4px);border-color:var(--hair-strong);
  background:linear-gradient(165deg,rgba(57,57,57,.38),rgba(57,57,57,.09));
}
.demo-card:hover::before{transform:scaleX(1)}
.demo-card b{display:block;font-size:1rem;font-weight:400;color:var(--porcelain);margin-bottom:.6rem}
.demo-card span{display:block;font-size:.85rem;color:var(--ash);line-height:1.65;margin-bottom:1.2rem}
.demo-ask{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-style:normal;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);opacity:.55;transition:opacity .4s var(--ease);
}
.demo-ask svg{width:13px;height:13px}
.demo-card:hover .demo-ask{opacity:1}

.demo-cta{
  display:flex;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:clamp(1.4rem,2.6vw,2.2rem);
  border:1px solid var(--hair);border-radius:3px;
  background:linear-gradient(165deg,rgba(201,162,75,.09),rgba(57,57,57,.06));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
  .int-grid{grid-template-columns:repeat(2,1fr)}
  .demo-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .int-grid,.demo-grid{grid-template-columns:1fr}
  .demo-cta{flex-direction:column;align-items:stretch}
  .demo-cta .btn{width:100%;justify-content:center}
  .int-txt span{font-size:.87rem}
  .demo-card span{font-size:.89rem}
  .proof-note{font-size:.87rem}
}

/* ---- Final legibility + tap-target pass (from audit) ---- */
@media (max-width:900px){
  .int-note{font-size:.72rem}
  .spec b{font-size:.88rem}
  .ind-table .pkg,td .pkg,span.pkg{font-size:.72rem;letter-spacing:.1em}
  /* industry switcher chips were 38px tall — below the 44px tap minimum */
  .chip{padding:.72rem 1.05rem;font-size:.76rem;min-height:44px;display:inline-flex;align-items:center}
}
@media (min-width:901px){
  .chip{min-height:44px;display:inline-flex;align-items:center}
}