/* Hallmark: editorial; DESIGN.md navy/gold. Diagram Design: timeline + layer stack.
   Critique: philosophy 4, hierarchy 4, execution 4, specificity 5, restraint 4, variety 5. */
.comparison-page .info-heading { max-width: 1000px; }
.comparison-page .info-heading h1 { font-size: var(--text-hero); letter-spacing: var(--tracking-hero); line-height: var(--leading-hero); }
.comparison-page .info-layout { display: block; }
.comparison-page .info-toc { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.8rem; margin-bottom: 3.5rem; }
.comparison-page .info-toc .small-label { flex-basis: 100%; }
.comparison-page .info-toc a { font-size: .8rem; }
.comparison-page .info-content { max-width: none; }
.comparison-page .info-content > section { content-visibility: visible; }
.comparison-page .info-content > section + section { margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: 2.5rem; border-top: 1px solid var(--color-rule); }
.comparison-page .info-content > section > p { max-width: 82ch; }
.comparison-opening, .comparison-layer-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
.comparison-page .eyebrow { margin-bottom: 1.25rem; }
.comparison-page .info-content h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.comparison-page .info-content h3 { font-size: 1.7rem; margin-bottom: 1rem; }
.comparison-table-wrap { margin: 1.8rem 0 1rem; overflow-x: auto; }
.comparison-table { border-collapse: collapse; width: 100%; font-size: .88rem; line-height: 1.8; }
.comparison-table caption { text-align: left; font-weight: 600; margin-bottom: .8rem; }
.comparison-table th, .comparison-table td { text-align: left; vertical-align: top; padding: 1.25rem; border-bottom: 1px solid var(--color-rule); }
.comparison-table thead { background: var(--color-deep); color: var(--color-on-dark); }
.comparison-table thead th:last-child { color: var(--color-accent); }
.comparison-table tbody th { width: 20%; font-weight: 600; }
.comparison-table tbody td { width: 40%; color: var(--color-ink-soft); }
.comparison-table tbody td:last-child { background: var(--color-accent-pale); }
.comparison-page .comparison-source { font-size: .75rem; line-height: 1.85; }
.comparison-page .info-content .comparison-source + h3 { margin-top: 2rem; }
.comparison-timeline { margin-top: 2.5rem; }
.comparison-timeline ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.comparison-timeline li { position: relative; padding-right: 2rem; }
.timeline-day { font-size: .8rem; color: var(--color-accent-text); }
.timeline-point { position: relative; height: 1px; background: var(--color-rule-strong); margin: 1.3rem -2rem 1.8rem 0; }
.timeline-point::before { content: ''; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-rule-strong); }
.comparison-timeline li:last-child .timeline-point { background: transparent; }
.comparison-timeline li:nth-child(2) .timeline-point::before { background: var(--color-accent-text); }
.comparison-page .timeline-title { font: 600 1.7rem/1.2 var(--font-display); margin-bottom: .8rem; color: var(--color-ink); }
.comparison-page .comparison-timeline li > p:not(.timeline-title) { font-size: .88rem; }
.timeline-result { display: block; font-size: .75rem; margin-top: 1rem; color: var(--color-accent-text); }
.comparison-page figcaption { font-size: .75rem; color: var(--color-muted); line-height: 1.85; margin-top: 1.6rem; }
.comparison-detail { border-top: 1px solid var(--color-rule-strong); margin-top: 1.8rem; }
.comparison-detail summary { cursor: pointer; padding: 1.1rem 0; font-weight: 600; }
.comparison-detail p { max-width: 85ch; }
.comparison-detail[open] { padding-bottom: 1rem; }
.comparison-layers ol { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-rule-strong); }
.comparison-layers li { display: flex; align-items: start; gap: 1.3rem; padding: 1.35rem; background: var(--color-surface); }
.comparison-layers li + li { border-top: 1px solid var(--color-rule); }
.comparison-layers li > span { font-size: .7rem; color: var(--color-muted); padding-top: .2rem; }
.comparison-layers strong { font-size: .95rem; font-weight: 600; }
.comparison-page .comparison-layers p { font-size: .8rem; margin-top: .3rem; }
.comparison-layers li.layer-focal { background: var(--color-accent-pale); border-left: 3px solid var(--color-accent-text); padding-left: calc(1.35rem - 3px); }
.comparison-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin: 1.5rem 0 2rem; }
.comparison-choice > div { padding: 1.5rem; background: var(--color-paper-alt); }
@media(max-width: 900px) {
  .comparison-opening, .comparison-layer-layout { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width: 600px) {
  .comparison-page .info-toc { gap: 0 1rem; margin-bottom: 2.5rem; }
  .comparison-page .info-toc a { font-size: .75rem; }
  .comparison-table { min-width: 670px; }
  .comparison-timeline ol, .comparison-choice { grid-template-columns: minmax(0, 1fr); }
  .comparison-timeline li { border-left: 1px solid var(--color-rule-strong); padding: 0 0 2rem 1.5rem; margin-left: .3rem; }
  .timeline-point { position: absolute; width: 1px; height: 1px; left: 0; top: .8rem; margin: 0; }
  .timeline-point::before { left: -5px; }
  .comparison-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .comparison-page .timeline-title { margin-top: .6rem; }
  .comparison-table-wrap::before { content: 'A táblázat oldalirányban görgethető.'; display: block; font-size: .72rem; margin-bottom: .7rem; color: var(--color-muted); }
  .comparison-layers li { gap: .8rem; padding: 1rem; }
  .comparison-layers li.layer-focal { padding-left: calc(1rem - 3px); }
}
@media print {
  .comparison-page .info-toc { display: none; }
  .comparison-table-wrap { overflow: visible; }
  .comparison-table { min-width: 0; }
}


/* Diagram Design: integration overview with a progressively disclosed sequence. */
.connect-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
.connect-map { margin: 2.5rem 0 0; }
.connect-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) minmax(0, 1.2fr); align-items: center; }
.connect-client { padding: 2rem 1.5rem; border: 1px solid var(--color-rule-strong); }
.connect-label { display: block; font-size: .72rem; letter-spacing: .04em; color: var(--color-muted); margin-bottom: .8rem; }
.comparison-page .connect-map h3 { font-size: 2.1rem; margin: 0 0 1rem; }
.comparison-page .connect-client p { font-size: .85rem; }
.connect-conversation { border-top: 1px solid var(--color-rule); margin-top: 1.5rem; padding-top: 1.2rem; font: 500 1.5rem/1.3 var(--font-display); }
.connect-platform { background: var(--color-accent-pale); padding: 2rem; border: 1px solid var(--color-rule-strong); border-top: 3px solid var(--color-accent-text); }
.connect-platform ul { list-style: none; padding: 0; margin: 0; }
.connect-platform li { padding: 1rem 0; border-top: 1px solid var(--color-rule-strong); }
.connect-platform li:last-child { padding-bottom: 0; }
.connect-platform strong, .connect-platform li span { display: block; font-size: .85rem; }
.connect-platform li span { font-size: .75rem; color: var(--color-muted); margin-top: .4rem; }
.connect-bridge { color: var(--color-accent-text); text-align: center; }
.connect-bridge svg { display: block; width: 100%; overflow: visible; }
.connect-bridge svg > path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.connect-bridge text { text-anchor: middle; fill: var(--color-ink-soft); font: 14px var(--font-body); }
.connect-return { stroke-dasharray: 5 4; }
.connect-protocol { display: block; font-size: .65rem; color: var(--color-muted); margin-top: .8rem; }
.connect-bridge-mobile, .connect-sequence-mobile { display: none; }
.comparison-page .connect-example-prompt { font: 500 1.6rem/1.4 var(--font-display); padding: 1rem 0; }
.connect-sequence { margin: 1rem 0; }
.connect-sequence svg { width: 100%; display: block; color: var(--color-accent-text); }
.sequence-lifelines path { stroke: var(--color-rule-strong); stroke-dasharray: 4 4; fill: none; }
.sequence-messages path { stroke: currentColor; stroke-width: 1.5; fill: none; marker-end: url(#connect-seq-arrow); }
.sequence-labels text, .sequence-actors text { text-anchor: middle; fill: var(--color-ink); font: 16px var(--font-body); }
.sequence-actors rect { fill: var(--color-paper); stroke: var(--color-rule-strong); }
.sequence-actors rect.sequence-platform { fill: var(--color-accent-pale); }
.connect-next { display: flex; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--color-rule); }
.connect-next > span { font-size: 2rem; color: var(--color-accent-text); }
.comparison-page .connect-next p { font-size: .9rem; margin: 0; max-width: 75ch; }
.connect-next strong { display: block; margin-bottom: .3rem; }
@media (max-width: 800px) {
  .connect-intro { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .connect-map-grid { grid-template-columns: minmax(0, 1fr); }
  .connect-bridge { padding: 1.5rem .5rem; }
  .connect-bridge svg { display: none; }
  .connect-bridge-mobile { display: flex; justify-content: space-around; gap: 1rem; font-size: .75rem; }
  .connect-client, .connect-platform { padding: 1.5rem; }
}
@media (max-width: 600px) {
  .connect-sequence svg { display: none; }
  .connect-sequence-mobile { display: block; padding-left: 1.5rem; }
  .connect-sequence-mobile li { padding: .5rem 0 1rem .3rem; font-size: .85rem; }
  .connect-sequence-mobile strong { display: block; font-weight: 600; margin-bottom: .3rem; }
}