:root {
  --navy:  #222222;
  --rust:  #C8704A;
  --mid:   #555555;
  --lt:    #E8EDF3;
  --off:   #F7F8FA;
  --dark:  #222222;
  --body:  #222222;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Google Sans', sans-serif;
  background: #fff;
  color: #222222;
  line-height: 1.75;
}

/* ── NAV ── */
nav {
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EAECF0;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.nav-logo {
  font-family: 'Google Sans Mono', monospace;
  font-size: 13px;
  color: #222222;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 13px;
  color: var(--mid);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s;
}
.nav-links a:hover { color: #222222; }

/* ── HERO ── */


.hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 138px 60px;
}
.hero-tag {
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-title {
  font-family: 'Google Sans Display', sans-serif;
  font-size: clamp(36px, 5vw, 52px);
  color: #222222;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.hero-desc {
  font-size: 17px;
  color: #222222;
  line-height: 1.75;
  font-weight: 300;
  max-width: 960px;
}
.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #EAECF0;
  flex-wrap: wrap;
}
.meta-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.meta-val {
  font-size: 14px;
  font-weight: 500;
  color: #222222;
}

/* ── HERO IMAGE ── */

.hero-img {
  
  width: 100%;
  margin: 0 auto;
  background: #E8F5FF;
  height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hero-dash {
  width: 75%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.92;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-dash img{
  width: 100%;
}
.hd-topbar {
  background: var(--navy);
  padding: 10px 16px;
  display: flex;
  gap: 16px;
}
.hd-nav-item { font-size: 11px; color: rgba(255,255,255,0.55); }
.hd-nav-item.active { color: #fff; }
.hd-table-head {
  background: var(--navy);
  border-radius: 4px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr repeat(4,60px);
  gap: 6px;
  margin-bottom: 4px;
}
.hd-th { font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 500; }
.hd-row {
  display: grid;
  grid-template-columns: 1fr repeat(4,60px);
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.hd-td { font-size: 9px; color: #444; }
.hd-badge { font-size: 8px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }

/* ── CONTENT ── */
.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 138px;
}

/* TL;DR */
.tldr {
  background: var(--lt);
  border-left: 4px solid var(--rust);
  padding: 28px 32px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 72px;
}
.tldr-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.tldr-text {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  line-height: 1.65;
}

/* ── SECTION ── */
.section { margin-bottom: 72px; }

h2 {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 30px;
  color: #222222;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3 {
  font-family: 'Google Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #222222;
  margin: 32px 0 10px;
}
p {
  font-size: 16px;
  color: #222222;
  line-height: 1.78;
  margin-bottom: 20px;
}
p:last-child { margin-bottom: 0; }

/* Eyebrow */
.eyebrow {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

/* Blockquote */
blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--rust);
  background: var(--off);
}
blockquote p {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 19px;
  font-style: italic;
  color: #222222;
  margin: 0;
  line-height: 1.55;
}
blockquote cite {
  display: block;
  font-size: 12px;
  font-family: 'Google Sans Mono', monospace;
  color: var(--mid);
  margin-top: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
}

/* Pain points */
.pain-points { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.pain-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  background: var(--off);
  border: 1px solid #EAECF0;
  border-radius: 8px;
  overflow: hidden;
}
.pain-num {
  background: var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Google Sans Display', sans-serif;
  font-size: 18px;
  color: #fff;
}
.pain-body { padding: 14px 18px; }
.pain-title { font-size: 14px; font-weight: 500; color: #222222; margin-bottom: 4px; }
.pain-desc { font-size: 13px; color: #222222; line-height: 1.6; margin: 0; }

/* User grid */
.user-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 24px 0; }
.user-card {
  padding: 18px;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  background: #fff;
}
.user-card.primary { border-color: #222222; background: var(--lt); }
.user-badge {
  font-family: 'Google Sans Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 8px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
}
.user-badge.primary { background: var(--navy); color: #fff; }
.user-badge.secondary { background: #EAECF0; color: var(--mid); }
.user-title { font-size: 13px; font-weight: 500; color: #222222; margin-bottom: 6px; }
.user-desc { font-size: 12px; color: #222222; line-height: 1.6; margin: 0; }

/* Solution label */
.solution-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  color: #222222;
  background: var(--lt);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* Decision box */

.legacy-img{
  max-width: 100%;
  display: flex;
  column-gap: 12PX;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 14px 0px

}
.legacy-img img{
  filter: brightness(1.18);
  max-width: 60%;
  border-radius: 5px;
  border: 1px solid #737373;
  
}
.decision-box {
  background: #FDF4EF;
  border: 1px solid #F0D0C0;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.decision-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.decision-text {
  font-size: 15px;
  color: #222222;
  line-height: 1.7;
  margin: 0;
}

/* Image placeholder */
.img-placeholder {
  width: 100%;
  background: var(--lt);
  border-radius: 8px;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #C8D4E0;
  color: var(--mid);
}
.img-placeholder.tall { height: 320px; }
.img-placeholder.short { height: 200px; }
.img-ph-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  text-align: left;
  line-height: 1.5;
}
.img-ph-icon { font-size: 24px; opacity: 0.4; }

/* Reflection */
.reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.ref-card { padding: 20px; border-radius: 8px; }
.ref-card.do { background: #EAF3DE; border: 1px solid #C0DD97; }
.ref-card.dont { background: var(--lt); border: 1px solid #C8D4E0; }
.ref-card-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.ref-card.do .ref-card-label { color: #3B6D11; }
.ref-card.dont .ref-card-label { color: var(--mid); }
.ref-item {
  font-size: 13px;
  color: #222222;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ref-item:last-child { border-bottom: none; }

/* Outcome */
.outcome-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin: 28px 0;
}
.outcome-card {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  background: var(--off);
}
.outcome-num {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 32px;
  color: #222222;
  line-height: 1;
  margin-bottom: 6px;
}
.outcome-label { font-size: 12px; color: #222222; line-height: 1.5; }

/* Divider */
hr { border: none; border-top: 1px solid #EAECF0; margin: 64px 0; }
.inner-section-hr{
  border: none; border-top: 1px solid #EAECF0; margin: 12px 0;
}

/* Footer */
footer {
  border-top: 1px solid #EAECF0;
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left { font-size: 13px; color: var(--mid); }
.footer-right { font-size: 13px; color: var(--mid); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .hero { padding: 48px 23px 40px; }
  .content { padding: 48px 23px; }
  .user-grid { grid-template-columns: 1fr; }
  .reflection-grid { grid-template-columns: 1fr; }
  .outcome-row { grid-template-columns: 1fr; }
  .hero-img { height: 260px; }
}


/* ══════════════════════════════════════════════════════
   SHARED COMPONENTS  (case-study-hazard-tab + index)
   ══════════════════════════════════════════════════════ */

/* ── ACCORDION ── */
.alist{display:flex;flex-direction:column;gap:.5rem;margin:24px 0}
.ai{border-left:3px solid var(--rust);background:#FDF4EF;overflow:hidden;border-radius:0 4px 4px 0}
.ai-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;transition:background .18s}
.ai-header:hover{background:#F9EAE0}
.aa{color:var(--rust);font-size:14px;flex-shrink:0;font-weight:500}
.ai-title{flex:1;font-size:14px;line-height:1.5;color:#222}
.ai-title strong{color:#222;font-weight:500}
.chevron{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#999;transition:transform .3s}
.ai.open .chevron{transform:rotate(180deg);color:var(--rust)}
.ai-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.ai.open .ai-body{max-height:1200px}
.ai-body-inner{padding:0 18px 18px;border-top:1px solid #F0D0C0}
.ai-desc{font-size:14px;line-height:1.8;color:#555;padding-top:12px;max-width:72ch}
.ai-body-inner-div{background:#fff;border:1px solid #EAECF0;margin-top:16px;border-radius:4px;overflow:hidden}
.ai-body-inner-summary{background:#F7F8FA;border-top:1px solid #EAECF0;padding:14px 18px}
.ai-body-inner-summary p{font-size:13px;line-height:1.65;color:#222;max-width:100ch}
.ai-body-inner-img{margin:16px;width:22%}
.ai-body-inner img{margin:16px 0;padding:20px;background:#fff;width:68%;display:block}

/* ── WORKFLOW INDICATOR ── */
.workflow{display:flex;align-items:center;margin-bottom:24px;border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
.wf-step{flex:1;padding:14px 18px;border-right:1px solid #EAECF0}
.wf-step:last-child{border-right:none}
.wf-step.active{background:#222}
.wf-num{font-family:'Google Sans Mono',monospace;font-size:10px;color:#999;margin-bottom:3px}
.wf-step.active .wf-num{color:rgba(255,255,255,.45)}
.wf-name{font-size:13px;font-weight:500;color:#222}
.wf-step.active .wf-name{color:#fff}
.wf-sub{font-size:12px;color:#888;margin-top:2px}
.wf-step.active .wf-sub{color:rgba(255,255,255,.45)}
.wf-arrow{display:flex;align-items:center;justify-content:center;width:32px;color:#ccc;font-size:12px;flex-shrink:0}

/* ── LOGIC EMBED (iframe wrapper) ── */
.logic-embed{border:1px solid #EAECF0;border-radius:8px;overflow:hidden;margin-top:20px;
}
.le-head{padding:10px 16px;background:#F7F8FA;border-bottom:1px solid #EAECF0;display:flex;align-items:center;justify-content:space-between}
.le-label{font-family:'Google Sans Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#888}
.le-sub{font-size:11px;color:#aaa;font-style:italic}


/* ── INLINE LOGIC DIAGRAM ── */
.logic-grid{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:start;gap:0;padding:16px;background:#fff}
.lg-col-head{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#999;padding-bottom:8px;border-bottom:1px solid #EAECF0;margin-bottom:12px}
.lg-dropdown{border:1px solid #EAECF0;background:#fff;overflow:hidden;margin-bottom:6px;border-radius:4px}
.lg-dd-label{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:6px 10px 4px;background:#F7F8FA;border-bottom:1px solid #EAECF0}
.lg-option{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:#555;border-bottom:1px solid #EAECF0;cursor:pointer;transition:background .1s}
.lg-option:last-child{border-bottom:none}
.lg-option:hover{background:#F7F8FA}
.lg-option.sel{background:#222;color:#fff}
.lg-option.auto{background:rgba(44,110,138,.07);color:#2c6e8a;pointer-events:none}
.lg-option.off{background:#F7F8FA;color:#ccc;pointer-events:none}
.lg-dot{width:6px;height:6px;border-radius:50%;background:#ccc;flex-shrink:0}
.lg-option.sel .lg-dot{background:#fff}
.lg-option.auto .lg-dot{background:#2c6e8a}
.lg-auto-badge{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:rgba(44,110,138,.15);color:#2c6e8a;padding:2px 5px;border-radius:2px;margin-left:auto}
.lg-arrow{display:flex;align-items:center;justify-content:center;padding-top:32px}
.lg-output{border:1px solid #EAECF0;overflow:hidden;border-radius:4px}
.lg-out-head{padding:7px 10px;font-size:11px;font-weight:500;border-bottom:1px solid #EAECF0}
.lg-out-head.a{background:rgba(44,110,138,.07);color:#2c6e8a}
.lg-out-head.b{background:rgba(46,125,50,.07);color:#2e7d32}
.lg-out-head.c{background:rgba(123,94,167,.07);color:#7b5ea7}
.lg-out-body{padding:8px 10px}
.lg-field{padding:4px 0;border-bottom:1px dashed #EAECF0;font-size:12px;color:#555}
.lg-field:last-child{border-bottom:none}
.lg-field strong{color:#222;display:block;font-family:'Google Sans Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.lg-combo-tabs{display:flex;border-bottom:1px solid #EAECF0}
.lg-tab{flex:1;padding:8px 10px;font-family:'Google Sans Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;text-align:center;cursor:pointer;color:#999;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;user-select:none}
.lg-tab.on{color:var(--rust);border-bottom-color:var(--rust)}
.lg-panel{display:none;padding:16px}
.lg-panel.on{display:block}
.lg-note{font-size:12px;color:#555;line-height:1.65;padding:10px 14px;background:rgba(44,110,138,.06);border-left:2px solid #2c6e8a;margin-top:12px;border-radius:0 4px 4px 0}

/* ── IMAGE PLACEHOLDER ── */
.iph{margin-top:20px;width:100%;border:1px dashed #C8D4E0;background:#F7F8FA;display:flex;align-items:center;justify-content:center;padding:40px 24px;border-radius:8px;position:relative;overflow:hidden}
.iph::before{content:'';position:absolute;inset:0;background:linear-gradient(#EAECF0 1px,transparent 1px),linear-gradient(90deg,#EAECF0 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.ipl{font-family:'Google Sans Mono',monospace;font-size:11px;color:#999;position:relative;z-index:1;text-align:center}
.iph.tall{height:280px}
.iph.short{height:160px}

/* ── ANNOTATION ── */
.ann{color:#b43232;font-size:13px;line-height:1.65;font-style:italic;margin-top:16px;padding:12px 16px;border-left:3px solid #b43232;background:rgba(180,50,50,.05);display:flex;align-items:flex-start;gap:8px;border-radius:0 4px 4px 0}
.ann::before{content:'✎';flex-shrink:0;font-style:normal;margin-top:1px}

/* ── THUMBNAIL ── */
.thumbnail{padding:32px;background:#E8EDF3;display:flex;align-items:center;justify-content:center;border-radius:8px}
.thumbnail-img{width:65%;border:3px solid #2C608A;border-radius:6px}
.thumbnail-caption{font-size:13px;font-style:italic;margin-top:12px;text-align:center;color:#555}

/* ── IMAGE GALLERY ── */
.image-gallery{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.image-gallery img{width:calc(25% - 6px);height:180px;object-fit:cover;border:1px solid #EAECF0;border-radius:4px}

/* ── STICKY NOTES ── */
.stickies{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.sticky{background:#FDF4EF;padding:18px 16px;border-bottom:3px solid var(--rust);border-radius:4px 4px 0 0}
.sticky::before{content:'User Need';font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:8px}
.sticky.goal::before{content:'User Goal'}
.st{font-size:14px;font-style:italic;line-height:1.55;color:#222}

/* ── BAF DIAGRAM (before/after) ── */
.baf-diagram{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border-radius:8px;overflow:hidden;border:1px solid #EAECF0}
.baf-col{padding:28px 24px}
.baf-col.before{background:#E8F0FC}
.baf-col.after{background:#C8D8F0}
.baf-title{font-family:'Google Sans Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;color:#4a6fa5}
.baf-col.after .baf-title{color:#2a5280}
.baf-nodes{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.baf-node{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.6);padding:6px 14px;font-size:13px;color:#2d3748;border-radius:2px;white-space:nowrap}
.baf-connector-v{width:1px;height:14px;background:#93b4d4;margin-left:18px;opacity:.7}
.baf-state{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);padding:6px 14px;font-size:13px;color:#2d3748;border-radius:2px;margin-bottom:6px}
.baf-direct{display:flex;flex-direction:column;gap:4px;padding-left:2px}
.baf-direct-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#2d3748}
.baf-direct-row span.arr{color:#2a5280;font-size:12px}
.baf-direct-row span.node{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.6);padding:4px 12px;border-radius:2px}

/* ── REVEAL ANIMATION ── */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.rev.on{opacity:1;transform:none}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── NUMBERED PROBLEM LIST ── */
.problem-list{margin:20px 0;display:flex;flex-direction:column;gap:24px;padding-left:0;list-style:none;counter-reset:problem}
.problem-list li{counter-increment:problem;padding-left:40px;position:relative}
.problem-list li::before{content:counter(problem);font-family:'Google Sans Mono',monospace;font-size:11px;font-weight:500;color:var(--rust);border:1px solid var(--rust);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:2px}
.problem-list li strong{display:block;font-size:15px;font-weight:500;color:#222;margin-bottom:6px}
.problem-list li p{font-size:14px;line-height:1.7;color:var(--mid);margin:0}

/* ── LEGACY IMAGE GALLERY (problem section) ── */
.legacy-img-gallery{margin-top:24px;display:grid;row-gap:24px}
.legacy-img-gallery img{border:1px solid #222;border-radius:6px;width:40%}
.image-with-caption{display:flex;column-gap:16px}
.caption-number{display:flex;width:1.25rem;height:1.25rem;border-radius:24px;align-items:center;justify-content:center;color:#2C608A;border:1px solid #2C608A;font-size:.75rem;margin-top:2px;flex-shrink:0}
.caption-title{display:flex;column-gap:8px}

/* ── OPPORTUNITY CARDS ── */
.opp-list{display:flex;flex-direction:column;gap:40px;margin:28px 0}
.opp-card{display:grid;grid-template-columns:48px 1fr;gap:0 24px;align-items:start}
.opp-label{font-family:'Google Sans Mono',monospace;font-size:11px;font-weight:500;color:var(--rust);border-top:2px solid var(--rust);padding-top:8px;letter-spacing:.05em}
.opp-title{font-size:18px;font-weight:500;color:#222;margin:0 0 12px;letter-spacing:-.01em}
.opp-content p{font-size:15px;line-height:1.75;color:var(--mid);margin-bottom:16px}
.opp-content p:last-of-type{margin-bottom:0}
.opp-img{width:100%;border:1px solid #EAECF0;border-radius:6px;display:block;margin:20px 0}

/* ── OUTCOME CHECK (circle with checkmark) ── */
.outcome-check{width:40px;height:40px;background:#2e7d32;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pain-card.outcome{align-items:center}

/* ── CAROUSEL ── */

.prob-swiper { width: 100%; border: 1px solid #EAECF0; border-radius: 8px; overflow: hidden; }
.prob-swiper .swiper-slide img { width: 100%; object-fit: contain; display: block; }
.swiper-caption { background: #fff; padding: 14px 18px; }
.swiper-button-prev, .swiper-button-next { color: #222; }
.swiper-pagination-bullet-active { background: #C8704A; }


.prob-carousel-wrap{margin-top:20px}
.prob-carousel{border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
.prob-carousel .carousel-inner{background:#F7F8FA}
.prob-carousel .carousel-item img{width:100%;height:320px;object-fit:contain;object-position:center;display:block}
.prob-carousel .carousel-caption{position:static;background:#fff;padding:14px 18px;text-align:left;color:#222}
.prob-carousel .carousel-caption h5{font-family:'Google Sans',sans-serif;font-size:13px;font-weight:500;color:#222;margin-bottom:4px}
.prob-carousel .carousel-caption p{font-size:12px;color:#555;line-height:1.6;margin:0}
.prob-carousel .carousel-control-prev,
.prob-carousel .carousel-control-next{width:36px;height:36px;background:#fff;border:1px solid #EAECF0;border-radius:50%;top:160px;transform:translateY(-50%);bottom:auto;opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prob-carousel .carousel-control-prev{left:10px}
.prob-carousel .carousel-control-next{right:10px}
.prob-carousel .carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M8 2L4 6L8 10' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
.prob-carousel .carousel-control-next-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 2L8 6L4 10' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
.prob-carousel .carousel-indicators{bottom:auto;top:332px;margin:0;justify-content:flex-start;padding-left:18px}
.prob-carousel .carousel-indicators li{background:#EAECF0;width:18px;height:3px;border-radius:2px;border:none}
.prob-carousel .carousel-indicators li.active{background:var(--rust)}
.carousel-step-badge{font-family:'Google Sans Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--rust);margin-bottom:3px;display:block}

/* ── SECTION LABEL ── */
.sec-label{font-family:'Google Sans Mono',monospace;font-size:10px;color:var(--rust);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}

/* ── RESPONSIVE ADDITIONS ── */
@media(max-width:640px){
  .stickies{grid-template-columns:1fr}
  .baf-diagram{grid-template-columns:1fr}
  .image-gallery img{width:calc(50% - 4px)}
  .problem-list li::before{display:inline-flex;margin-bottom:4px}
  .opp-card{grid-template-columns:1fr}
  .opp-label{border-top:none;border-left:2px solid var(--rust);padding:0 0 0 10px;margin-bottom:8px}
  .logic-grid{grid-template-columns:1fr}
  .lg-arrow{display:none}
  .ai-body-inner img{width:100%}
}

/* ── TRI COLUMN (simple 3-col layout) ── */
.tri-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 24px 0;
}
.tri-num {
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.tri-title {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.3;
}
.tri-desc {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ── Bi COLUMN (simple 3-col layout) ── */

.bi-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 24px 0;
}


@media (max-width: 640px) {
  .tri-col { grid-template-columns: 1fr; gap: 20px; }
}

/* ── MOSAIC IMAGE GRID ── */
.mosaic-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}
.mosaic-row {
  display: flex;
  gap: 4px;
  height: 220px;
}
.mosaic-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  background: #f0f0f0;
}
.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.mosaic-cell:hover img { transform: scale(1.03); }
/* top-left small, top-right wide */
.mosaic-row:first-child .mosaic-sm { flex: 1; }
.mosaic-row:first-child .mosaic-lg { flex: 2; }
/* bottom-left wide, bottom-right small */
.mosaic-row:last-child .mosaic-lg  { flex: 2; }
.mosaic-row:last-child .mosaic-sm  { flex: 1; }

.mosaic-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  transition: background 0.2s;
}
.mosaic-overlay span {
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(0,0,0,0.5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mosaic-cell:hover .mosaic-overlay { background: rgba(0,0,0,0.12); }
.mosaic-cell:hover .mosaic-overlay span { opacity: 1; }

/* ── IMAGE MODAL ── */
.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.img-modal.open { display: flex; }
.img-modal-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.img-modal-inner img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}
.img-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.img-modal-close:hover { background: rgba(0,0,0,0.75); }

@media (max-width: 640px) {
  .mosaic-row { height: 140px; }
}


/* ── CARDS ── */

.cards-main{
  display: grid;
  column-gap: .8em;
  row-gap: .8em;
  grid-template-columns: 1fr 1fr

}

.cards-individual{
  border-radius: 6px;
  border: 1px solid #b5b5b5;
  height: auto;
}
.card-header{
    padding: 0px .99em .99em .99em
}

.cards-individual p, h4{
color: #000000;
font-size: .85em;
}

.cards-individual h4{
  font-weight: 600;
}

.cards-individual img{
  border-radius: 6px 6px 0px 0px;
  width: 100%;
}

/* ── FROM index.html ── */

    /* accordion — kept from original system */
    .alist{display:flex;flex-direction:column;gap:.5rem;margin:24px 0}
    .ai{border-left:3px solid var(--rust);background:#FDF4EF;overflow:hidden;border-radius:0 4px 4px 0}
    .ai-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;transition:background .18s}
    .ai-header:hover{background:#F9EAE0}
    .aa{color:var(--rust);font-size:14px;flex-shrink:0;font-weight:500}
    .ai-title{flex:1;font-size:14px;line-height:1.5;color:#222}
    .ai-title strong{color:#222;font-weight:500}
    .chevron{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#999;transition:transform .3s}
    .ai.open .chevron{transform:rotate(180deg);color:var(--rust)}
    .ai-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
    .ai.open .ai-body{max-height:800px}
    .ai-body-inner{padding:0 18px 18px;border-top:1px solid #F0D0C0}
    .ai-desc{font-size:14px;line-height:1.8;color:#555;padding-top:12px;max-width:72ch}
    .ai-body-inner-div{background:#fff;border:1px solid #EAECF0;margin-top:16px;border-radius:4px;overflow:hidden}
    .ai-body-inner-summary{background:#F7F8FA;border-top:1px solid #EAECF0;padding:14px 18px}
    .ai-body-inner-summary p{font-size:13px;line-height:1.65;color:#222;max-width:100ch}
    .ai-body-inner-img{margin:16px;width:22%}
    .ai-body-inner img{margin:16px 0;padding:20px;background:#fff;width:68%}

    /* baf diagram */
    .baf-diagram{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border-radius:8px;overflow:hidden;border:1px solid #EAECF0}
    .baf-col{padding:28px 24px}
    .baf-col.before{background:#E8F0FC}
    .baf-col.after{background:#C8D8F0}
    .baf-title{font-family:'Google Sans Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;color:#4a6fa5}
    .baf-col.after .baf-title{color:#2a5280}
    .baf-nodes{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
    .baf-node{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.6);padding:6px 14px;font-size:13px;color:#2d3748;border-radius:2px;white-space:nowrap}
    .baf-connector-v{width:1px;height:14px;background:#93b4d4;margin-left:18px;opacity:.7}
    .baf-state{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);padding:6px 14px;font-size:13px;color:#2d3748;border-radius:2px;margin-bottom:6px}
    .baf-direct{display:flex;flex-direction:column;gap:4px;padding-left:2px}
    .baf-direct-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#2d3748}
    .baf-direct-row span.arr{color:#2a5280;font-size:12px}
    .baf-direct-row span.node{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.6);padding:4px 12px;border-radius:2px}

    /* image placeholder */
    .iph{margin-top:20px;width:100%;border:1px dashed #C8D4E0;background:#F7F8FA;display:flex;align-items:center;justify-content:center;padding:40px 24px;border-radius:8px;position:relative;overflow:hidden}
    .iph::before{content:'';position:absolute;inset:0;background:linear-gradient(#EAECF0 1px,transparent 1px),linear-gradient(90deg,#EAECF0 1px,transparent 1px);background-size:22px 22px;opacity:.5}
    .ipl{font-family:'Google Sans Mono',monospace;font-size:11px;color:#999;position:relative;z-index:1;text-align:center}
    .iph.tall{height:280px}
    .iph.short{height:160px}

    /* annotation */
    .ann{color:#b43232;font-size:13px;line-height:1.65;font-style:italic;margin-top:16px;padding:12px 16px;border-left:3px solid #b43232;background:rgba(180,50,50,.05);display:flex;align-items:flex-start;gap:8px;border-radius:0 4px 4px 0}
    .ann::before{content:'✎';flex-shrink:0;font-style:normal;margin-top:1px}

    /* image gallery */
    .image-gallery{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
    .image-gallery img{width:calc(25% - 6px);height:180px;object-fit:cover;border:1px solid #EAECF0;border-radius:4px}

    /* thumbnail */
    .thumbnail{padding:32px;background:#E8EDF3;display:flex;align-items:center;justify-content:center;border-radius:8px}
    .thumbnail-img{width:65%;border:3px solid #2C608A;border-radius:6px}
    .thumbnail-caption{font-size:13px;font-style:italic;margin-top:12px;text-align:center;color:#555}

    /* sticky notes → user group style */
    .stickies{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
    .sticky{background:#FDF4EF;padding:18px 16px;border-bottom:3px solid var(--rust);border-radius:4px 4px 0 0}
    .sticky::before{content:'User Need';font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:8px}
    .sticky.goal::before{content:'User Goal'}
    .st{font-size:14px;font-style:italic;line-height:1.55;color:#222}

    /* workflow */
    .workflow{display:flex;align-items:center;margin-bottom:24px;border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
    .wf-step{flex:1;padding:14px 18px;border-right:1px solid #EAECF0}
    .wf-step:last-child{border-right:none}
    .wf-step.active{background:#222}
    .wf-num{font-family:'Google Sans Mono',monospace;font-size:10px;color:#999;margin-bottom:3px}
    .wf-step.active .wf-num{color:rgba(255,255,255,.45)}
    .wf-name{font-size:13px;font-weight:500;color:#222}
    .wf-step.active .wf-name{color:#fff}
    .wf-sub{font-size:12px;color:#888;margin-top:2px}
    .wf-step.active .wf-sub{color:rgba(255,255,255,.45)}
    .wf-arrow{display:flex;align-items:center;justify-content:center;width:32px;color:#ccc;font-size:12px;flex-shrink:0}

    .full-screen-img{
      width: 150%;
    position: relative;
    right: 20%;
    left: 50;
    }

    /* reveal */
    .rev{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
    .rev.on{opacity:1;transform:none}
    @keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

    /* section divider */
    .sec-label{font-family:'Google Sans Mono',monospace;font-size:10px;color:var(--rust);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}

    @media(max-width:640px){
      .stickies,.baf-diagram{grid-template-columns:1fr}
      .image-gallery img{width:calc(50% - 4px)}
      .alist .ai-body-inner img{width:100%}

    }
  @media(max-width:480px) {
      .legacy-img-gallery,
      .image-with-caption{
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .image-with-caption img{
        width: 100%;
      }
  }


  
.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1rem;
    max-width: 1440px;
    margin: 0 auto;
}

.tile img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    align-items: center;
}

.tile:nth-child(1){
    grid-column: span 4;
    grid-row: span 2;
}

.tile:nth-child(2),
.tile:nth-child(3){
    grid-column: span 2;
}

.tile:nth-child(4),
.tile:nth-child(5){
    grid-column: span 3;
}
@media screen and (max-width: 650px){
    .container{
        display: block;
    }
    .tile{
        margin-bottom: 1rem;
    }
}