/* Containers */
.container { width: min(1100px, 92vw); margin: 0 auto; }

/* Hero tweak */
.hero-compact { padding-block: 2.5rem; }

/* Story */
.story { padding: 2rem 0; }
.story .container { display: grid; gap: 1rem; grid-template-columns: 1.4fr .9fr; }
.story-copy p { color: #475467; }
.story-points { margin-top: .8rem; padding-left: 1.1rem; }
.story-card {
  background: #fff; border: 1px solid #e7ebf0; border-radius: 12px; padding: 1rem;
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}
@media (max-width: 900px) { .story .container { grid-template-columns: 1fr; } }

/* Team */
.team { background: #f8f9fb; padding: 2rem 0; }
.team h2 { text-align: center; margin-bottom: 1rem; }
.subhead { margin: 1.2rem 0 .6rem; }
.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cards-compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: #fff; border: 1px solid #e7ebf0; border-radius: 12px; padding: 1rem;
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
  display: grid; gap: .4rem;
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #eef4ff; color: #1e40af; font-weight: 700;
  display: grid; place-items: center; font-family: ui-sans-serif, system-ui;
  box-shadow: inset 0 0 0 1px #c7d2fe;
}
.card .tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.card .tags span {
  font-size: .8rem; padding: .25rem .5rem; border-radius: 999px;
  background: #eef2f7; border: 1px solid #e5e7eb; color: #475467;
}

/* Values (tabs) */
.values { padding: 2rem 0; }
.values h2 { text-align: center; margin-bottom: .8rem; }
.tabs { display: flex; gap: .5rem; justify-content: center; margin-bottom: .8rem; flex-wrap: wrap; }
.tab {
  border: 1px solid #d0d5dd; background: #fff; padding: .55rem .9rem; border-radius: 8px; cursor: pointer;
}
.tab.active { background: #eef4ff; border-color: #c7d2fe; color: #1e40af; }
.tab-panels { max-width: 900px; margin: 0 auto; }
.panel { display: none; background: #fff; border: 1px solid #e7ebf0; border-radius: 10px; padding: 1rem; }
.panel.active { display: block; }

/* Timeline */
.timeline { background: #f8f9fb; padding: 2rem 0; }
.timeline h2 { text-align: center; margin-bottom: 1rem; }
.line { list-style: none; margin: 0; padding: 0; border-left: 2px dashed #cbd5e1; max-width: 800px; margin-inline: auto; }
.line li { padding: .6rem 1rem .6rem 1.2rem; position: relative; }
.line li::before {
  content: ""; position: absolute; left: -7px; top: 14px; width: 10px; height: 10px;
  border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px #dbeafe;
}
.date { color: #64748b; font-size: .9rem; display: inline-block; margin-bottom: .2rem; }