/* PoliticalAgent — landing-page styles copied from docs/design/landing.html;
   site/style.css keeps only the shared tokens. */
  /* ── Hero ── */
  .hero { padding: 92px 0 0; }
  .hero-kicker { margin-bottom: 26px; }
  .hero h1 { max-width: 16ch; }
  .hero h1 .quiet { color: var(--ink-soft); }
  .hero-lede {
    font-size: var(--s-md);
    line-height: 1.5;
    max-width: 54ch;
    margin: 28px 0 34px;
    color: var(--ink-soft);
  }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .hero-actions .note { font-size: var(--s-sm); color: var(--ink-soft); }

  /* ── The spectrum band: the hero's real subject ── */
  .spectrum { margin: 76px 0 0; }
  .spectrum-axis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .band { padding: 16px 22px 26px; border-right: 1px solid var(--rule); }
  .band:last-child { border-right: 0; }
  .band-head {
    font: 500 var(--s-sm)/1.3 var(--label);
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
  }
  .band-head .count { color: var(--ink-soft); font-weight: 400; }
  .band ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
  .band li {
    font: 400 var(--s-sm)/1.85 var(--label);
    break-inside: avoid;
    color: var(--ink);
  }
  .band li.inst { color: var(--sage); }
  .band--left  { background: linear-gradient(to bottom, rgba(200,220,224,.55), transparent 70%); }
  .band--mid   { background: linear-gradient(to bottom, rgba(200,220,224,.25), transparent 70%); }
  .band--right { background: linear-gradient(to bottom, rgba(168,23,94,.07), transparent 70%); }
  .spectrum-foot {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 12px;
  }

  /* ── Sequence: how a question is answered ── */
  .section { padding-top: 88px; }
  .section > h2 { max-width: 20ch; margin-bottom: 10px; }
  .section-note { color: var(--ink-soft); max-width: 58ch; }

  .steps { margin-top: 34px; display: grid; gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(0, 16rem);
    gap: 28px;
    padding: 24px 0;
    border-top: 1px solid var(--rule);
    align-items: start;
  }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step-n { font: 300 var(--s-xl)/0.9 var(--display); color: var(--water); }
  .step h3 { margin-bottom: 6px; }
  .step p { margin: 0; font-size: var(--s-sm); color: var(--ink-soft); }
  .step .annot { align-self: start; }

  /* ── Transcript: the outline gate ── */
  .gate { margin-top: 34px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,22rem); gap: 44px; }
  .transcript {
    background: var(--paper-lift);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 22px 24px;
  }
  .turn { padding: 12px 0; border-bottom: 1px dotted var(--rule); }
  .turn:last-child { border-bottom: 0; }
  .turn .who { font: 600 var(--s-xs)/1.4 var(--label); color: var(--ink-soft); display: block; margin-bottom: 5px; }
  .turn p { margin: 0; font-size: var(--s-sm); line-height: 1.55; }
  .turn ol { margin: 6px 0 0 1.1em; padding: 0; font-size: var(--s-sm); line-height: 1.7; }
  .turn--paused { border-left: 2px solid var(--annot); padding-left: 14px; margin-left: -16px; }
  .gate-aside p { font-size: var(--s-sm); color: var(--ink-soft); }

  /* ── Limits ── */
  .limits { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
  .limit { padding: 20px 0; border-top: 1px solid var(--rule); }
  .limit h3 { font-family: var(--ui); font-size: var(--s-base); font-weight: 600; margin-bottom: 4px; }
  .limit p { margin: 0; font-size: var(--s-sm); color: var(--ink-soft); max-width: none; }

  .closer { padding-top: 88px; }
  .closer h2 { max-width: 18ch; }
  .closer .hero-actions { margin-top: 26px; }

  @media (max-width: 900px) {
    .spectrum-axis { grid-template-columns: 1fr; }
    .band { border-right: 0; border-bottom: 1px solid var(--rule); }
    .band ul { columns: 2; }
    .step { grid-template-columns: 44px minmax(0, 1fr); }
    .step .annot { grid-column: 2; }
    .gate { grid-template-columns: 1fr; gap: 24px; }
    .limits { grid-template-columns: 1fr; }
    .hero { padding-top: 56px; }
  }