/* ============================================================
   Said This — "why before how". Connected-thread layout
   (Draft C): narration left, the things people say as a
   vertical message thread linked by a thin line on the right.
   Scoped with .sd- prefix.
   ============================================================ */

.sd { background: var(--bg-2); }

.sd__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

/* Left — narration */
.sd__left { max-width: 46ch; }
.sd__head { margin: 0 0 clamp(22px, 2.6vw, 34px); }
.sd__head .eyebrow { margin-bottom: 20px; }
.sd__title {
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}
.sd__body { display: grid; gap: 18px; }
.sd__body p {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.sd__body b { color: var(--ink); font-weight: 600; }

/* Right — the message thread */
.sd__thread {
  position: relative;
  margin-top: 50px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
}
.sd__thread::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--line-2, var(--line));
}
.sd__node { position: relative; }
.sd__node::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
}
.sd__bub {
  margin: 0;
  max-width: 34ch;
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.42;
  color: var(--ink);
  text-align: left;
  text-wrap: pretty;
  padding: 15px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px 18px 18px 18px;
  box-shadow: 0 14px 32px -24px rgba(0,0,0,0.45);
}
.sd__bub em { color: var(--accent); font-style: normal; font-weight: 600; }

@media (max-width: 900px) {
  .sd__grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 52px);
  }
  .sd__left { max-width: none; }
  .sd__thread { margin-top: 0; }
  .sd__title { max-width: 20ch; }
}
@media (max-width: 640px) {
  .sd__bub { font-size: 17px; max-width: none; }
}