/* ============================================================
   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; }
}

/* ============================================================
   COTTAGE THEME (light, green identity — distinct from cozy/ward)
   ============================================================ */
.sim-detail.cottage{ background:linear-gradient(180deg,#edf1e4 0%, #f4f4ea 60%, var(--cream) 100%); }
.cottage .eyebrow{ color:var(--green); }
.cottage .sd-head h2 .serif{ color:var(--green); }
.cottage .sd-about h3{ color:var(--ink); }
.cottage .facts{ box-shadow:0 24px 50px -34px rgba(31,90,56,.3); }
.cottage .facts .price .amt{ color:var(--green); }
.cottage .panel h4 .ic{ background:var(--green); }
.cottage .outcomes .arr{ color:var(--green); }
.cottage .uc{ border-top-color:var(--green); }
.cottage .uc:nth-child(3n+2){ border-top-color:var(--orange); }
.cottage .uc:nth-child(3n){ border-top-color:var(--blue); }
.cottage .pill.live{ background:#dcecdf; color:#1d7a44; }
.cottage .res-item .ck{ background:var(--green-soft); color:var(--green); }

/* ============================================================
   COMPACT SUPPORT MODULE
   Folds Learning outcomes / Topics covered / Best use cases into
   one card so a 3-sim page stays short. One markup, switchable
   presentation via data-ssmode: tabs (default) · accordion · reveal.
   ============================================================ */
.sim-support{
  background:var(--white); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 24px 50px -36px rgba(22,21,46,.4);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.ward .sim-support{ background:rgba(255,255,255,.05); box-shadow:none; }
.cottage .sim-support{ box-shadow:0 24px 50px -34px rgba(31,90,56,.28); }

/* shared section title row sits above the card */
.ss-title{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.ss-title h3{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.ward .ss-title h3{ color:var(--cream); }
.ss-title .hint{ font-size:.86rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.4rem; }
.ward .ss-title .hint{ color:rgba(248,245,236,.55); }

/* ---- content primitives reused by every mode ---- */
.ss-out{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 2.2rem; }
.ss-out li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; line-height:1.5; color:var(--ink-2); }
.ward .ss-out li{ color:rgba(248,245,236,.84); }
.ss-out .num{
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; font-feature-settings:"tnum";
  background:var(--blue-soft); color:var(--blue-press); margin-top:1px;
}
.ward .ss-out .num{ background:rgba(251,157,89,.16); color:var(--orange); }
.cottage .ss-out .num{ background:var(--green-soft); color:var(--green); }

.ss-cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ss-cases .uc{ margin:0; }

/* ============ MODE: TABS (default, shipped on the live site) ============ */
.ss-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; padding:.5rem;
  background:var(--cream); border-bottom:1px solid rgba(22,21,46,.07);
}
.ward .ss-tabs{ background:rgba(255,255,255,.04); border-color:rgba(248,245,236,.1); }
.cottage .ss-tabs{ background:#e8eede; }
.ss-tab{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1rem; border-radius:14px;
  font-family:var(--font-display); font-weight:600; font-size:.98rem; text-align:center;
  color:var(--ink-soft); transition:background .25s, color .25s, box-shadow .25s;
}
.ss-tab .ss-ic{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.4; transition:background .25s, opacity .25s; }
.ss-tab .ss-count{ font-size:.76rem; font-weight:700; font-feature-settings:"tnum"; color:var(--ink-soft); background:rgba(22,21,46,.07); padding:.08rem .5rem; border-radius:999px; }
.ss-tab:hover{ color:var(--ink); }
.ss-tab.active{ background:var(--white); color:var(--ink); box-shadow:0 8px 18px -12px rgba(22,21,46,.45); }
.ss-tab.active .ss-ic{ background:var(--orange); opacity:1; }
.cottage .ss-tab.active .ss-ic{ background:var(--green); }
.ward .ss-tab{ color:rgba(248,245,236,.6); }
.ward .ss-tab:hover{ color:var(--cream); }
.ward .ss-tab.active{ background:rgba(255,255,255,.1); color:var(--cream); box-shadow:none; }
.ward .ss-tab .ss-count{ background:rgba(255,255,255,.08); color:rgba(248,245,236,.7); }

.ss-panels{ padding:clamp(1.5rem,3vw,2.4rem); }
.ss-panel{ display:none; }
.ss-panel.active{ display:block; }
.ss-panel.active{ animation:ssfade .5s var(--ease-out) both; }
@keyframes ssfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ss-panel .topics{ gap:.55rem; }
@media (prefers-reduced-motion: reduce){ .ss-panel.active{ animation:none; } }

/* ============ MODE: ACCORDION ============ */
[data-ssmode="accordion"]{ background:transparent; box-shadow:none; }
[data-ssmode="accordion"] .ss-tabs, [data-ssmode="accordion"] .ss-panels{ display:none; }
.ss-acc{ display:flex; flex-direction:column; gap:.8rem; }
.acc-item{
  background:var(--white); border-radius:var(--r-sm); overflow:hidden;
  box-shadow:0 1px 0 rgba(22,21,46,.06), inset 0 0 0 1px rgba(22,21,46,.05);
  transition:box-shadow .3s;
}
.acc-item.open{ box-shadow:0 18px 40px -28px rgba(22,21,46,.4), inset 0 0 0 1px rgba(22,21,46,.06); }
.ward .acc-item{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(248,245,236,.08); }
.cottage .acc-item{ box-shadow:0 1px 0 rgba(31,90,56,.08), inset 0 0 0 1px rgba(31,90,56,.1); }
.acc-btn{
  width:100%; display:flex; align-items:center; gap:1rem;
  padding:1.3rem 1.5rem; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--ink);
}
.ward .acc-btn{ color:var(--cream); }
.acc-btn .acc-n{ font-family:var(--font-serif); font-style:italic; font-size:1.25rem; color:var(--orange-deep); }
.cottage .acc-btn .acc-n{ color:var(--green); }
.acc-btn .acc-lbl{ flex:1; }
.acc-btn .acc-tag{ font-size:.76rem; font-weight:700; color:var(--ink-soft); background:rgba(22,21,46,.06); padding:.12rem .55rem; border-radius:999px; }
.ward .acc-btn .acc-tag{ background:rgba(255,255,255,.08); color:rgba(248,245,236,.7); }
.acc-btn .acc-chev{ width:20px; height:20px; flex-shrink:0; transition:transform .35s var(--ease-out); color:var(--ink-soft); }
.acc-item.open .acc-btn .acc-chev{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out); }
.acc-inner{ padding:0 1.5rem 1.6rem; }

/* ============ MODE: REVEAL (animated marquees / carousel) ============ */
[data-ssmode="reveal"]{ background:transparent; box-shadow:none; }
[data-ssmode="reveal"] .ss-tabs, [data-ssmode="reveal"] .ss-panels{ display:none; }
.ss-reveal{ display:flex; flex-direction:column; gap:1.1rem; }
.ss-rev-row{ background:var(--white); border-radius:var(--r-md); padding:1.4rem 0 1.5rem; box-shadow:0 1px 0 rgba(22,21,46,.05), inset 0 0 0 1px rgba(22,21,46,.05); overflow:hidden; }
.ward .ss-rev-row{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(248,245,236,.08); }
.cottage .ss-rev-row{ box-shadow:0 1px 0 rgba(31,90,56,.06), inset 0 0 0 1px rgba(31,90,56,.09); }
.ss-rev-row .rev-lbl{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-deep); padding:0 1.5rem; margin-bottom:1rem; }
.ward .ss-rev-row .rev-lbl{ color:var(--orange); }
.cottage .ss-rev-row .rev-lbl{ color:var(--green); }
.ss-rev-row .rev-lbl .d{ width:7px; height:7px; border-radius:50%; background:var(--orange); }

/* marquee mechanics (mask the edges, scroll the track) */
.rev-marquee{ position:relative; -webkit-mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000); mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000); }
.rev-track{ display:flex; gap:1rem; width:max-content; padding:0 1.5rem; animation:revscroll 38s linear infinite; }
.rev-track.rev-rev{ animation-direction:reverse; animation-duration:30s; }
.rev-marquee:hover .rev-track{ animation-play-state:paused; }
@keyframes revscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rev-track{ animation:none; flex-wrap:wrap; width:auto; } }

.rev-chip{
  flex-shrink:0; max-width:340px; display:flex; gap:.7rem; align-items:flex-start;
  background:var(--cream); border-radius:14px; padding:.95rem 1.15rem;
  font-size:.95rem; line-height:1.45; color:var(--ink-2);
}
.ward .rev-chip{ background:rgba(255,255,255,.06); color:rgba(248,245,236,.85); }
.cottage .rev-chip{ background:#eef2e6; }
.rev-chip .num{ flex-shrink:0; width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; background:var(--blue-soft); color:var(--blue-press); }
.ward .rev-chip .num{ background:rgba(251,157,89,.16); color:var(--orange); }
.cottage .rev-chip .num{ background:var(--green-soft); color:var(--green); }
.rev-pill{ flex-shrink:0; }
.rev-case{ flex-shrink:0; width:280px; }
.rev-case.uc{ margin:0; }

@media (max-width:880px){
  .ss-out{ grid-template-columns:1fr; }
  .ss-cases{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .ss-tab{ padding:.7rem .4rem; font-size:.84rem; gap:.35rem; }
  .ss-tab .ss-count{ display:none; }
  .ss-tab .ss-ic{ display:none; }
}