/* ============================================================
   HumanSide — Simulations page components
   Built on humanside.css + humanside-sections.css tokens.
   ============================================================ */

/* ---------------- PAGE HERO (compact) ---------------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,4.5rem);
  text-align:center;
}
.page-hero .wrap{ position:relative; z-index:5; }
.page-hero h1{
  font-weight:700; line-height:1; letter-spacing:-.03em;
  font-size:clamp(2.6rem,6.5vw,5rem); max-width:16ch; margin:1rem auto 0;
}
.page-hero .lead{ margin:1.3rem auto 0; max-width:54ch; text-align:center; }
.page-hero .hero-trust{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.8rem; font-size:.92rem; color:var(--ink-soft); }
.page-hero .hero-trust b{ color:var(--ink); font-weight:700; }
.page-hero .hero-trust .sep{ width:4px;height:4px;border-radius:50%;background:var(--orange); }

/* ---------------- PROMO BAND ---------------- */
.promo-band{ background:var(--ink); color:var(--cream); padding-block:clamp(3rem,6vw,5rem); position:relative; overflow:hidden; }
.promo-band .eyebrow{ color:var(--orange); justify-content:center; }
.promo-head{ text-align:center; max-width:46ch; margin:0 auto 2.2rem; }
.promo-head h2{ color:var(--cream); margin-top:.7rem; }
.promo-head p{ color:rgba(248,245,236,.7); margin-top:.7rem; font-size:1.02rem; }
.promo-wrap{
  position:relative; width:100%; max-width:1000px; margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(248,245,236,.08);
  aspect-ratio:16/9; background:#05070d;
}
.promo-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; display:block; }
.promo-band .blob-1{ background:radial-gradient(circle at 30% 30%, var(--blue), #fff0); opacity:.3; top:-12%; left:-6%; }
.promo-band .blob-2{ background:radial-gradient(circle at 30% 30%, var(--orange), #fff0); opacity:.25; bottom:-18%; right:-4%; top:auto; }

/* ============================================================
   SIM DETAIL
   ============================================================ */
.sim-detail{ position:relative; padding-block:clamp(4rem,8vw,7rem); }
.sim-detail.ward{ background:var(--ink); color:var(--cream); }

/* section header */
.sd-head{ max-width:60ch; margin:0 auto 3rem; text-align:center; }
.sd-head .tags{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0 0; }
.sd-head h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:700; letter-spacing:-.025em; line-height:1.02; margin-top:1rem; }
.sd-head h2 .serif{ color:var(--orange-deep); }
.sd-head p{ font-size:1.1rem; line-height:1.6; color:var(--ink-2); margin:1.1rem auto 0; max-width:52ch; }
.ward .sd-head h2{ color:var(--cream); }
.ward .sd-head h2 .serif{ color:var(--orange); }
.ward .sd-head p{ color:rgba(248,245,236,.78); }
.ward .eyebrow{ color:var(--orange); }

/* hero shot */
.sd-shot{
  width:100%; border-radius:var(--r-md);
  box-shadow:0 40px 80px -34px rgba(22,21,46,.6);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.ward .sd-shot{ box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }

/* about + facts */
.sd-about{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sd-about h3{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1rem; }
.sd-about p{ font-size:1.02rem; line-height:1.65; color:var(--ink-2); margin-bottom:1rem; }
.ward .sd-about p{ color:rgba(248,245,236,.8); }
.ward .sd-about h3{ color:var(--cream); }
.sd-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }

/* facts card */
.facts{ background:var(--white); border-radius:var(--r-md); padding:1.8rem; box-shadow:0 24px 50px -34px rgba(22,21,46,.4); }
.ward .facts{ background:rgba(255,255,255,.06); box-shadow:none; backdrop-filter:blur(6px); }
.facts h4{ font-size:1.15rem; font-weight:700; margin-bottom:1.2rem; }
.ward .facts h4{ color:var(--cream); }
.facts dl{ display:flex; flex-direction:column; }
.facts .row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(22,21,46,.1); }
.facts .row:last-child{ border-bottom:none; }
.ward .facts .row{ border-color:rgba(248,245,236,.14); }
.facts dt{ font-size:.92rem; color:var(--ink-soft); }
.facts dd{ font-size:.95rem; font-weight:600; text-align:right; }
.ward .facts dt{ color:rgba(248,245,236,.6); }
.ward .facts dd{ color:var(--cream); }
.facts .price{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.facts .price .amt{ font-weight:700; color:var(--orange-deep); }
.ward .facts .price .amt{ color:var(--orange); }
.launch-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--orange); color:var(--ink); padding:.2rem .5rem; border-radius:6px; white-space:nowrap;
}
.pilot-note{ margin-top:1.4rem; background:var(--green-soft); border-radius:var(--r-sm); padding:1rem 1.1rem; }
.ward .pilot-note{ background:rgba(63,125,90,.22); }
.pilot-note strong{ display:block; font-size:.9rem; color:var(--green); margin-bottom:.25rem; }
.ward .pilot-note strong{ color:#9fd9b4; }
.pilot-note p{ font-size:.86rem; color:var(--ink-2); margin:0; line-height:1.45; }
.ward .pilot-note p{ color:rgba(248,245,236,.8); }

/* outcomes + topics */
.sd-two{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.panel{ background:var(--white); border-radius:var(--r-md); padding:1.9rem; box-shadow:0 1px 0 rgba(22,21,46,.05); }
.ward .panel{ background:rgba(255,255,255,.06); box-shadow:none; }
.panel h4{ font-size:1.2rem; font-weight:700; margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; }
.ward .panel h4{ color:var(--cream); }
.panel h4 .ic{ width:9px;height:9px;border-radius:50%;background:var(--orange); flex-shrink:0; }
.outcomes{ display:flex; flex-direction:column; gap:.85rem; }
.outcomes li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; line-height:1.5; color:var(--ink-2); }
.ward .outcomes li{ color:rgba(248,245,236,.82); }
.outcomes .arr{ color:var(--blue); font-weight:700; flex-shrink:0; }
.ward .outcomes .arr{ color:var(--orange); }
.topics{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* use cases */
.sd-sub{ text-align:center; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1.8rem; }
.ward .sd-sub{ color:var(--cream); }
.usecases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.uc{ background:var(--white); border-radius:var(--r-sm); padding:1.5rem; border-top:3px solid var(--blue); box-shadow:0 1px 0 rgba(22,21,46,.05); transition:transform .35s var(--ease-elastic), box-shadow .35s; }
.uc:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(22,21,46,.45); }
.uc:nth-child(3n+2){ border-top-color:var(--orange); }
.uc:nth-child(3n){ border-top-color:var(--green); }
.uc h5{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.5rem; }
.uc p{ font-size:.92rem; color:var(--ink-soft); line-height:1.5; }
.ward .uc{ background:rgba(255,255,255,.06); box-shadow:none; }
.ward .uc h5{ color:var(--cream); }
.ward .uc p{ color:rgba(248,245,236,.72); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-sm); box-shadow:0 24px 50px -30px rgba(22,21,46,.5); }
.gallery .feat{ grid-row:span 2; }
.ward .gallery img{ box-shadow:0 24px 50px -28px rgba(0,0,0,.7); }

/* resources */
.resources{ background:var(--white); border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,2.6rem); box-shadow:0 30px 60px -42px rgba(22,21,46,.4); }
.ward .resources{ background:rgba(255,255,255,.05); box-shadow:none; }
.resources h3{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1.6rem; display:flex; align-items:center; gap:.7rem; }
.ward .resources h3{ color:var(--cream); }
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem 1.6rem; }
.res-item{ display:flex; gap:.75rem; align-items:flex-start; }
.res-item .ck{ flex-shrink:0; width:24px;height:24px;border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; margin-top:1px; }
.ward .res-item .ck{ background:rgba(63,125,90,.25); color:#9fd9b4; }
.res-item strong{ display:block; font-size:.96rem; font-weight:700; margin-bottom:.15rem; }
.ward .res-item strong{ color:var(--cream); }
.res-item span.d{ font-size:.86rem; color:var(--ink-soft); line-height:1.45; }
.ward .res-item span.d{ color:rgba(248,245,236,.68); }

/* ward pills tweak */
.ward .pill{ background:rgba(255,255,255,.1); color:var(--cream); box-shadow:none; }
.ward .pill.live{ background:#1f5a38; color:#bff0d0; }

/* responsive */
@media (max-width:880px){
  .sd-about{ grid-template-columns:1fr; }
  .sd-two{ grid-template-columns:1fr; }
  .usecases{ grid-template-columns:1fr 1fr; }
  .res-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr; }
  .gallery .feat{ grid-row:auto; }
}
@media (max-width:560px){
  .usecases{ grid-template-columns:1fr; }
  .res-grid{ grid-template-columns:1fr; }
}