/* Page-specific rules for pricing, how it works and the three short pages. Colours come from tokens.css only. */

.tier-note { margin-top: var(--s4); max-width: none; }

/* How it works: the diagram. Four boxes joined by labelled lines; stacked on a narrow screen. */
.diagram { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 88px; margin-top: var(--s5); }
.node { position: relative; display: block; padding: var(--s4); background: var(--side); border: 1px solid var(--line); border-radius: var(--wr); }
.node .name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.node .sub { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text2); }
.node .edge { position: absolute; top: 50%; left: 100%; width: 88px; padding-bottom: 6px; transform: translateY(-100%); text-align: center; font-size: 13px; line-height: 18px; color: var(--text2); }
.node .edge::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1.5px solid var(--control-line); }
.diagram-note { margin-top: var(--s3); max-width: none; }
@media (max-width: 960px) {
  .diagram { grid-template-columns: minmax(0, 1fr); row-gap: 40px; max-width: 420px; }
  .node .edge { top: 100%; left: 50%; width: auto; height: 40px; padding: 0 0 0 12px; transform: none; text-align: left; display: flex; align-items: center; }
  .node .edge::after { left: 0; right: auto; top: 0; bottom: 0; width: 0; border-bottom: 0; border-left: 1.5px solid var(--control-line); }
}

/* Connect tabs */
.tabs { margin-top: var(--s4); }
.tablist { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--win); width: fit-content; max-width: 100%; }
.tab { min-height: 36px; padding: 0 14px; border: 0; border-radius: 4px; background: none; color: var(--text2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 120ms; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab[aria-selected="true"] { background: var(--hover); color: var(--text); font-weight: 600; }
.tabpanel { margin-top: var(--s4); }
.tabpanel .setup-code { margin-top: 12px; max-width: 760px; }
.tabpanel .code { white-space: pre-wrap; overflow-wrap: anywhere; }
.tab-h { display: none; margin-bottom: 8px; }
html:not(.js) .tablist { display: none; }
html:not(.js) .tab-h { display: block; }
html:not(.js) .tabpanel { margin-top: var(--s5); }
@media (max-width: 720px) { .tab { min-height: 44px; padding: 0 12px; } }

/* Definition rows: one sentence each */
.rows { margin-top: var(--s4); max-width: 760px; border-bottom: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.rows dt { font-weight: 600; }
.rows dd { margin: 0; color: var(--text2); }
@media (max-width: 720px) { .rows > div { grid-template-columns: minmax(0, 1fr); } }

.tree { max-width: 760px; margin-top: 12px; }
.plain { display: grid; gap: 8px; margin-top: 12px; }
.plain li { position: relative; padding-left: 16px; max-width: 68ch; }
.plain li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text2); }
.page h2 + .diagram, .page h2 + .rows, .page h2 + .plain { margin-top: var(--s4); }
.page p + .tree, .page .tree + p { margin-top: 12px; }

/* Changelog entry slot */
.log { margin-top: var(--s5); max-width: 760px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.log li { padding: 20px 0; }
.log h2 { margin: 0; font-size: 20px; line-height: 28px; }
.log p { margin-top: 4px; color: var(--text2); }