/* ============================================================
   AI VALUE WORX — COMPONENTS
   ============================================================ */

/* --- 1. Badges (evidence type + ontology tags) --- */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.badge--hard { background: var(--hard-bg); color: var(--hard-color); }
.badge--analytical { background: var(--analytical-bg); color: var(--analytical-color); }
.badge--tag { background: rgba(14,165,233,0.08); color: var(--accent); }

/* --- 2. Rotating claim card (Home page) --- */
.rotating-claim-wrapper { padding: var(--space-6) 0; }
.rotating-claim-wrapper .text-label { margin-bottom: var(--space-3); display: block; }
.claim-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: opacity 0.2s ease;
}
.claim-card__text {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 400;
  margin-bottom: var(--space-4);
  min-height: 3.2em;
}
.claim-card__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.claim-card__source { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; }

/* --- 3. Result claim card (retrieval demo) --- */
.result-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--transition-fast);
}
.result-card:hover { border-color: var(--border-default); }
.result-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.result-card__title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.result-card__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.result-card__description { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
.result-card__expand-btn {
  font-size: var(--text-xs); font-weight: 600; color: var(--accent);
  cursor: pointer; white-space: nowrap; background: none; border: none;
  font-family: var(--font-sans); flex-shrink: 0; padding: 0;
}
.result-card__expand-btn:hover { color: var(--accent-light); }
.result-card__detail {
  display: none;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-3); padding-top: var(--space-3);
}
.result-card__detail.is-open { display: block; }
.result-card__quote {
  font-style: italic; color: var(--text-secondary); font-size: var(--text-sm);
  border-left: 2px solid var(--accent-dim); padding-left: var(--space-2);
  line-height: 1.65;
}
.result-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }

/* --- 4. Query chips --- */
.chip {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition-fast);
  background: transparent; font-family: var(--font-sans);
  text-align: left; line-height: 1.4;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.chip.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* --- 5. Retrieval interface container --- */
.retrieval-interface {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.retrieval-interface__label { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); display: block; }
.retrieval-results { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.retrieval-results__header {
  font-size: var(--text-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
}
.retrieval-results__header em { font-style: normal; color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --- 6. Problem teasers (Home page) --- */
.problem-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-normal);
  display: flex; flex-direction: column;
}
.problem-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.problem-card__number { font-size: var(--text-xs); color: var(--accent); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); }
.problem-card__title { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.3; }
.problem-card__body { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.7; flex: 1; }
.problem-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.problem-card__link:hover { color: var(--accent-light); }

/* --- 7. Differentiators strip (Home page) --- */
.differentiator-strip { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.differentiator-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.differentiator-item { padding: var(--space-6) var(--space-4); border-right: 1px solid var(--border-subtle); }
.differentiator-item:last-child { border-right: none; }
.differentiator-item__title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.differentiator-item__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
@media (max-width: 900px) { .differentiator-grid { grid-template-columns: repeat(2, 1fr); } .differentiator-item { border-bottom: 1px solid var(--border-subtle); } }
@media (max-width: 600px) { .differentiator-grid { grid-template-columns: 1fr; } }

/* --- 8. Dashboard annotation overlay (Realise page) --- */
.dashboard-demo { position: relative; }
.dashboard-demo__img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-default); display: block; }
.dashboard-demo__placeholder {
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong);
  background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: var(--text-sm); font-style: italic;
  text-align: center; padding: var(--space-4);
}
.annotation { position: absolute; }
.annotation__label {
  background: var(--bg-raised); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: var(--text-xs); font-weight: 600; color: var(--text-primary);
  white-space: nowrap; box-shadow: var(--shadow-md);
  max-width: 220px; white-space: normal;
}
.dashboard-caption { color: var(--text-secondary); font-size: var(--text-sm); font-style: italic; margin-top: var(--space-3); text-align: center; }

/* --- 9. Buyer cards (How We Work page) --- */
.buyer-card {
  background: var(--bg-surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-4) var(--space-6);
}
.buyer-card__type { font-size: var(--text-sm); font-weight: 700; color: var(--accent); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.08em; }
.buyer-card__body { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.75; }

/* --- 10. Pull quote --- */
.pull-quote {
  border-left: 3px solid var(--accent);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-glow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-4) 0;
}
.pull-quote p { font-size: var(--text-lg); color: var(--text-primary); line-height: 1.6; font-style: italic; }

/* --- 11. Section intro --- */
.section-intro { max-width: 640px; margin-bottom: var(--space-8); }
.section-intro h2 { margin-bottom: var(--space-3); }
.section-label { color: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); display: block; }

/* --- 12. Specification list (How We Work) --- */
.spec-list { display: flex; flex-direction: column; gap: var(--space-3); }
.spec-item {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.spec-item__title { font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); font-size: var(--text-base); }
.spec-item__body { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; }

/* ============================================================
   --- 13. Journey map (process navigation strip) ---
   Appears at the bottom of each problem page (Identify /
   Commit / Realise), showing position in the 3-stage sequence.
   ============================================================ */

.journey-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-8) 0;
}

/* Outer wrapper: label above, strip below */
.journey-map {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-4);
}

/* Each step column */
.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

/* Connector line between steps */
.journey-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px; /* vertically centred on the node circle */
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 1px;
  background: var(--border-default);
  z-index: 0;
}

/* Active step: connector becomes accent */
.journey-step--active:not(:last-child)::after {
  background: var(--accent-dim);
}

/* Step node (the circle) */
.journey-step__node {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: all var(--transition-normal);
  flex-shrink: 0;
}

/* Done steps: filled, muted */
.journey-step--done .journey-step__node {
  background: var(--accent-dim);
  border: 2px solid var(--accent-dim);
}
/* Active step: bright ring */
.journey-step--active .journey-step__node {
  background: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
/* Upcoming steps: outline only */
.journey-step--upcoming .journey-step__node {
  background: transparent;
  border: 2px solid var(--border-default);
}

/* Step number inside node */
.journey-step__num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.journey-step--done .journey-step__num { color: var(--accent-light); }
.journey-step--active .journey-step__num { color: var(--cta-text); }
.journey-step--upcoming .journey-step__num { color: var(--text-muted); }

/* Step label block below node */
.journey-step__label {
  text-align: center;
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
}
.journey-step__name {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}
.journey-step--done .journey-step__name { color: var(--text-secondary); }
.journey-step--active .journey-step__name { color: var(--text-primary); }
.journey-step--upcoming .journey-step__name { color: var(--text-muted); }

.journey-step__desc {
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-top: 3px;
}
.journey-step--done .journey-step__desc { color: var(--text-muted); }
.journey-step--active .journey-step__desc { color: var(--text-secondary); }
.journey-step--upcoming .journey-step__desc { color: var(--text-muted); opacity: 0.6; }

/* Active step: "YOU ARE HERE" badge */
.journey-step__here {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Step links (done + upcoming are clickable) */
.journey-step--done a.journey-step__link,
.journey-step--upcoming a.journey-step__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.journey-step--done:hover .journey-step__name { color: var(--text-primary); }
.journey-step--upcoming:hover .journey-step__name { color: var(--text-secondary); }

/* Next step nudge block */
.journey-next {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.journey-next__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  min-width: 200px;
}
.journey-next__text strong { color: var(--text-primary); }

/* Mobile: stack journey map vertically */
@media (max-width: 600px) {
  .journey-map {
    flex-direction: column;
    gap: var(--space-3);
  }
  .journey-step {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
  }
  .journey-step:not(:last-child)::after {
    display: none; /* remove horizontal connector on mobile */
  }
  .journey-step__label {
    text-align: left;
    margin-top: 0;
    padding: 0;
  }
  .journey-next {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   --- 14. Nav step numbers ---
   Small "01 / 02 / 03" labels above Identify / Commit /
   Realise in the top navigation.
   ============================================================ */

.nav-link--step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
}
.nav-step {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(14, 165, 233, 0.5);
  line-height: 1;
  transition: color var(--transition-fast);
}
.nav-link--step:hover .nav-step { color: var(--accent); opacity: 0.8; }
.nav-link--step.is-active .nav-step { color: var(--accent); }

/* Hide step numbers on mobile (nav collapses to vertical links) */
@media (max-width: 768px) {
  .nav-link--step { flex-direction: row; gap: 6px; }
  .nav-step { font-size: var(--text-xs); }
}

/* ============================================================
   --- 15. Insights cards (Insights landing page) ---
   Card layout for the /insights/ landing page summary cards.
   Each card is a clickable block linking to an article.
   ============================================================ */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.insights-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
}
.insights-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.insights-card:hover .insights-card__cta {
  color: var(--accent-light);
}

.insights-card__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}
.insights-card__subtitle {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.insights-card__lede {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.insights-card__byline {
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.insights-card__cta {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  margin-top: var(--space-2);
  transition: color var(--transition-fast);
}

/* External-link indicator (used on the t-content-01 card linking out to goalatlas.com) */
.external-icon {
  display: inline-block;
  font-size: 0.7em;
  margin-left: 0.3em;
  vertical-align: 0.2em;
  color: var(--accent);
  opacity: 0.75;
}

/* ============================================================
   --- 16. Article figures ---
   Inline figure rendering inside article body prose.
   ============================================================ */

.article-figure {
  margin: var(--space-6) 0;
}
.article-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  display: block;
}
.article-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   --- 17. References (article citation list) ---
   ============================================================ */

.references {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.references h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.references__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.references__entry {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: var(--space-3);
  text-indent: calc(-1 * var(--space-3));
}
.references__entry a {
  word-break: break-word;
}

/* ============================================================
   --- 18. Author bio (end-of-article block) ---
   ============================================================ */

.author-bio {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.author-bio__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.author-bio__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.author-bio__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.author-bio__cta:hover {
  color: var(--accent-light);
}

/* ============================================================
   --- 19. Article tables ---
   For tabular content inside article body prose.
   ============================================================ */

.article-table {
  width: 100%;
  margin: var(--space-6) 0;
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.article-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--border-default);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.article-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  line-height: 1.6;
}
.article-table tbody tr:last-child td {
  border-bottom: none;
}
.article-table strong {
  color: var(--text-primary);
}

/* --- Contact form --- */
.contact-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
}
.contact-form__field { display: block; margin-bottom: var(--space-4); }
.contact-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.contact-form__optional { color: var(--text-muted); font-weight: 400; }
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit;
  padding: 12px 14px;
  transition: border-color var(--transition-fast);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form__textarea { resize: vertical; min-height: 140px; }
.contact-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.contact-form__checkbox input { margin-top: 3px; }
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.contact-form__turnstile { margin-bottom: var(--space-4); }
.contact-form__actions { margin-top: var(--space-2); }
.contact-form__status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.contact-form__status--success { color: var(--accent); }
.contact-form__status--error { color: #f87171; }
.contact-form__status--info { color: var(--text-secondary); }
.contact-form__direct a { color: var(--accent); text-decoration: none; }
.contact-form__direct a:hover { text-decoration: underline; }

/* --- Legal pages --- */
.legal-page { max-width: 720px; margin: 0 auto; }
.legal-page h2 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  margin: var(--space-8) 0 var(--space-3);
}
.legal-page h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-2);
}
.legal-page p,
.legal-page li {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.legal-page ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: var(--space-2) 0;
}
.legal-page a { color: var(--accent); }
.legal-page strong { color: var(--text-primary); }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  margin-bottom: var(--space-8);
}
.legal-back:hover { text-decoration: underline; }