/* =============================================================================
   YesBOS 2.0 — Guide: the product manual.
   Deliberately calm, technical, structured, practical — a break from the
   emotional marketing pages. One sticky sidebar, one reading column. No hero,
   no scroll theatre, no animation. Stripe/Linear/Notion docs feel.
   Builds on design-system.css.
   ============================================================================= */

.guide { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.guide__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 900px) { .guide__grid { grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start; } }

/* Sidebar */
.guide__sidebar-title { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--sp-4); }
.guide__nav { display: flex; flex-direction: column; gap: 1px; }
.guide__nav a { font-size: var(--fs-sm); color: var(--text-muted); padding: .4rem .6rem; border-radius: var(--r-sm); border-left: 2px solid transparent; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.guide__nav a:hover { color: var(--ink); background: var(--wash); }
.guide__nav a.is-active { color: var(--forest); border-left-color: var(--forest); font-weight: 600; }
@media (min-width: 900px) {
  .guide__sidebar { position: sticky; top: 88px; align-self: start; }
}
@media (max-width: 899px) {
  .guide__sidebar { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--wash); }
  .guide__nav { flex-flow: row wrap; gap: .3rem; }
  .guide__nav a { border-left: 0; background: var(--surface); border: 1px solid var(--line); }
  .guide__nav a.is-active { border-color: var(--forest); }
}

/* Reading column */
.guide__main { max-width: 46rem; }
.guide-sec { scroll-margin-top: 88px; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.guide-sec:first-child { border-top: 0; padding-top: 0; }
.guide-sec h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.guide-sec h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }
.guide-sec h3 { font-size: var(--fs-h4); font-weight: 700; margin-top: var(--sp-2); }
.guide-sec > p { margin-top: var(--sp-4); color: var(--text); line-height: 1.65; max-width: 42rem; }
.guide-sec > p strong { font-weight: 600; }
.guide-note { color: var(--text-muted); font-size: var(--fs-sm); }
.guide-kicker { display: block; margin-top: var(--sp-5); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }

/* Generic list */
.guide-list { margin-top: var(--sp-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-list li { position: relative; padding-left: 1.5rem; color: var(--ink); font-size: var(--fs-body); }
.guide-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }

/* Check list (integrations) */
.guide-check { margin-top: var(--sp-4); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.guide-check li { position: relative; padding-left: 1.6rem; font-weight: 600; color: var(--ink); }
.guide-check li::before { content: "✓"; position: absolute; left: 0; top: -0.05em; color: var(--forest); font-weight: 700; }

/* Operating model diagram (static) */
.guide-model { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.guide-model__pair { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.guide-model__box { padding: .7rem 1.2rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.guide-model__box--accent { border-color: var(--forest); color: var(--forest); background: var(--forest-wash); }
.guide-model__plus { font-weight: 700; color: var(--text-soft); }
.guide-model__arrow { color: color-mix(in srgb, var(--forest) 45%, var(--line)); font-size: 1.1rem; line-height: 1; }
.guide-model__node { padding: .6rem 1.1rem; border-radius: var(--r-md); background: var(--wash); border: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.guide-model__node--end { background: var(--forest); border-color: var(--forest); color: #fff; }

/* Roster */
.guide-roster { list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.guide-roster li { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.guide-roster li:last-child { border-bottom: 1px solid var(--line); }
.guide-roster__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.guide-roster__name { font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.guide-roster__uses { margin-top: .35rem; font-size: var(--fs-sm); color: var(--text-soft); }

/* Use cases */
.guide-usecases { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-usecases li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-usecases__q { font-weight: 600; color: var(--ink); }
.guide-usecases__arrow { color: var(--text-soft); }
.guide-usecases__de { color: var(--forest); font-weight: 600; font-size: var(--fs-sm); }

/* Examples */
.guide-examples { margin-top: var(--sp-5); display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 680px) { .guide-examples { grid-template-columns: repeat(3, 1fr); } }
.guide-example { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--surface); }
.guide-example__tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--text-soft); background: var(--mist); border-radius: var(--r-full); padding: .2rem .6rem; }
.guide-example h3 { margin-top: var(--sp-3); }
.guide-example p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* FAQ (native, no JS) */
.guide-faq { margin-top: var(--sp-5); }
.guide-faq__item { border-top: 1px solid var(--line); }
.guide-faq__item:last-child { border-bottom: 1px solid var(--line); }
.guide-faq__item summary { cursor: pointer; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; font-weight: 600; color: var(--ink); font-size: var(--fs-body); list-style: none; position: relative; }
.guide-faq__item summary::-webkit-details-marker { display: none; }
.guide-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--text-soft); font-weight: 400; font-size: 1.3rem; }
.guide-faq__item[open] summary::after { content: "−"; }
.guide-faq__item p { padding: 0 0 var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; max-width: 42rem; }

/* Talk to us */
.guide-sec--talk { border-top: 1px solid var(--line); }
.guide-talk__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }