/* ==========================================================================
   answers.css — Answers Engine silo (/answers/)
   Ships as a NEW FILE, not a ?v bump: CF Pages serves an already-cached
   stylesheet regardless of the query string, so site.css stays byte-frozen.
   Loaded only by pages whose spec declares "css": ["answers"].
   Uses the site's existing custom properties; defines no new colours.

   Answer-first canon: there is no marketing hero on an answer page. The
   question is the h1 and the 40 to 70 word answer sits directly under it,
   above the fold, where an AI engine and a hurried reader find it first.
   ========================================================================== */

.ans-top {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  padding-block: clamp(26px, 3.5vw, 44px) clamp(30px, 4vw, 48px);
}

.ans-head {
  max-width: 74ch;
  margin-inline: auto;
}

.ans-cluster {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--rust-soft);
  color: var(--rust);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  transition: background .2s, color .2s;
}

.ans-cluster:hover { background: var(--rust); color: #fff; }
.ans-cluster svg { width: 13px; height: 13px; flex-shrink: 0; }

.ans-title {
  font-size: clamp(1.7rem, 3.6vw, 2.65rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin-bottom: 14px;
}

.ans-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 26px;
}

/* site.css sets svg{display:block}, so an icon inside a bare <span> pushes its
   own text onto the next line. Every meta item is its own inline flex row. */
.ans-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ans-meta svg { width: 14px; height: 14px; color: var(--rust); flex-shrink: 0; }
.ans-meta .dot { opacity: .45; }

/* -------------------------------------------------------- the answer box */
.answer-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--rust);
  border-radius: var(--r-md);
  padding: 24px 26px 26px;
  box-shadow: var(--shadow-sm);
}

.ab-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 800;
  margin-bottom: 10px;
}

.answer-box p {
  font-size: clamp(1.04rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink);
  font-weight: 500;
}

.answer-box p + p { margin-top: 12px; }
.answer-box strong { font-weight: 700; }

/* -------------------------------------------------------- key takeaways */
.ans-takeaways {
  margin-top: 44px;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 30px 32px;
}

.ans-takeaways h2 {
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.ans-takeaways ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ans-takeaways li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-2);
  line-height: 1.6;
  font-size: .98rem;
}

.ans-takeaways li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--rust);
}

/* -------------------------------------------------------- related answers */
.ans-more { margin-top: 44px; }

.ans-more h3 {
  font-size: 1.06rem;
  margin-bottom: 14px;
}

.ans-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ans-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
  transition: border-color .25s, color .25s, background .25s;
}

.ans-chip:hover {
  border-color: var(--rust);
  color: var(--rust);
  background: var(--rust-soft);
}

.ans-chip svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }

/* -------------------------------------------------------- the hub index */
.ans-hub-intro { max-width: 70ch; margin-inline: auto; text-align: center; }

.ans-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}

.ans-jump a {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color .25s, color .25s, background .25s;
}

.ans-jump a:hover { border-color: var(--rust); color: var(--rust); background: var(--rust-soft); }

.ans-cluster-block { margin-top: 54px; }
.ans-cluster-block:first-of-type { margin-top: 0; }

.ans-cluster-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 22px;
}

.ans-cluster-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--rust-soft);
  color: var(--rust);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ans-cluster-ic svg { width: 20px; height: 20px; }

.ans-cluster-head h2 { font-size: 1.42rem; letter-spacing: -.018em; }

.ans-cluster-head .count {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ans-qlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ans-qlist li { display: block; }

.ans-qlist a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.45;
  transition: background .2s, color .2s;
}

.ans-qlist a:hover { background: var(--rust-soft); color: var(--rust); }

.ans-qlist a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--rust);
  opacity: .65;
}

/* -------------------------------------------------------- glossary strip */
.silo-strip {
  margin-top: 60px;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 34px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.silo-strip-text { flex: 1 1 340px; }
.silo-strip h3 { font-size: 1.24rem; margin-bottom: 8px; }
.silo-strip p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }

@media (max-width: 860px) {
  .ans-qlist { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .answer-box { padding: 20px 20px 22px; border-left-width: 4px; }
  .ans-takeaways { padding: 24px 22px; }
  .silo-strip { padding: 26px 24px; }
}