/* Content pages on the website: pages for a kind of business, comparisons,
   free tools, Resources and the message examples (docs/SEO.md). Built on the
   same tokens as site.css: paper, ink, one red tally, boxes only for objects. */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.caption { color: var(--faint); font: var(--t-caption); }
.inline-form { display: inline; margin: 0; }
.inline-form button.arrow-link { background: none; border: 0; padding: 0; cursor: pointer; }
.related-wrap { max-width: 800px; }
.related-wrap .related { list-style: none; padding: 0; margin: 0; }
.related-wrap .related li { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.related-wrap .related a { color: var(--ink); font: 600 16.5px/1.4 var(--sans); }
.related-wrap .related span { color: var(--muted); font: 400 15px/1.5 var(--sans); }

/* ── Pages for a kind of business ───────────────────────────────────────── */
.jp-visual.screens-only { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.jp-visual.two-chats { grid-template-columns: minmax(0, 300px) minmax(0, 300px) minmax(0, 1fr); }
.jp-visual.two-chats .jp-screen { grid-column: 3; grid-row: 1; }
@media (max-width: 1100px) {
  .jp-visual.two-chats { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .jp-visual.two-chats .jp-screen { grid-column: 1 / -1; grid-row: 2; }
}
.fixes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) clamp(32px, 4vw, 64px); margin: 0; }
.fixes > div { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.fixes dt { font: 500 clamp(20px, 1.7vw, 23px)/1.25 var(--serif); letter-spacing: -.005em; }
.fixes dd { margin: var(--s-2) 0 0; font: 400 15.5px/1.6 var(--sans); }
.fixes .now { color: var(--muted); }
.fixes .then { position: relative; padding-left: 18px; color: var(--ink); }
.fixes .then::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--red); }
.prose-part .about-text p { font: var(--site-body); font-size: 17px; }
.prose-part .about-text a { color: var(--ink); text-underline-offset: 2px; }
.limits { max-width: 760px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.limits li { padding: var(--s-4) 0 var(--s-4) 26px; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink-2); font: var(--site-body); }
.limits li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 10px; height: 1px; background: var(--muted); }

/* ── Comparisons ────────────────────────────────────────────────────────── */
.compare .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.compare .two-col section { min-width: 0; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.compare .two-col h2 { margin-top: var(--s-10) !important; }
.compare .two-col h3 { margin-top: var(--s-6); font: 600 16px/1.4 var(--sans); }
.compare .table-wrap td:first-child, .compare .table-wrap th[scope="row"] { white-space: normal; min-width: 9em; }
.prose.compare, .prose.tool-guide { max-width: 860px !important; }

/* ── Resources ──────────────────────────────────────────────────────────── */
.resource-group .part-head { margin-bottom: var(--s-8); }
.resource-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(32px, 4vw, 64px); }
.resource-list a { display: block; height: 100%; padding: var(--s-5) 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.resource-list h3 { font: var(--site-h3); font-size: clamp(20px, 1.6vw, 23px); letter-spacing: -.01em; }
.resource-list a:hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.resource-list p { margin: var(--s-2) 0 0; color: var(--muted); font: 400 15px/1.55 var(--sans); }

/* ── Tools ──────────────────────────────────────────────────────────────── */
.tool-hero { padding-bottom: var(--s-8); }
.tool { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tool-form { display: flex; flex-direction: column; gap: var(--s-5); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--sheet); }
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field > span { font: 600 14.5px/1.3 var(--sans); }
.tool-field input, .tool-field select, .tool-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.tool-field textarea { resize: vertical; }
.tool-field small { color: var(--muted); font: var(--t-body-sm); font-size: 13.5px; }
.tool-field.has-error input { border-color: var(--danger); }
.tool-error { color: var(--danger); font: 500 13.5px/1.4 var(--sans); font-style: normal; }
.tool-form .btn { align-self: flex-start; }
.tool-result { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.tool-empty { margin: 0; padding: var(--s-8) 0; color: var(--faint); border-top: 1px solid var(--rule); }
.copy-row { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.copy-row > span { color: var(--muted); font: 600 13px/1.3 var(--sans); text-transform: none; }
.copy-row > div { display: flex; align-items: flex-start; gap: var(--s-3); }
.copy-row code, .copy-row p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; }
.copy-row code { padding: 8px 10px; border-radius: var(--r-sm); background: var(--wash); font-family: var(--mono); }
.copy-row .btn { flex: none; }
.tool-qr { margin: var(--s-2) 0 0; display: flex; align-items: center; gap: var(--s-5); }
.qr-svg { width: 168px; flex: none; padding: 8px; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; }
.qr-svg svg { display: block; width: 100%; height: auto; }
.tool-test { margin: 0; color: var(--muted); font: var(--t-body-sm); }
.tool-total { margin: 0; font: 400 17px/1.4 var(--sans); }
.tool-total b { font: 500 30px/1.1 var(--serif); }
.tool-before { margin: 0; color: var(--muted); font: var(--t-body-sm); }
.tool-result .table-wrap { margin: 0; overflow-x: auto; }
.tool-result table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tool-result th, .tool-result td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--rule); }
.tool-result td:last-child, .tool-result th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tool-guide { padding-top: var(--section-y) !important; }

/* ── Message examples (the templates guide) ─────────────────────────────── */
.wa-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); margin: var(--s-4) 0 var(--s-6); }
.wa-example { margin: 0; padding: var(--s-4); border-radius: var(--r-md); background: #efe7dd; display: flex; flex-direction: column; gap: var(--s-3); }
.wa-example figcaption { display: flex; flex-direction: column; gap: 2px; font: var(--t-body-sm); }
.wa-example figcaption b { color: var(--ink); font-weight: 600; }
.wa-example figcaption span { color: var(--ink-2); }
.wa-example figcaption small { color: var(--muted); font-size: 12.5px; }
.wa-bubble { margin: 0 !important; max-width: none !important; align-self: flex-start; padding: 8px 11px; border-radius: 8px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); color: var(--ink) !important; font: 400 14.5px/1.45 var(--sans) !important; overflow-wrap: anywhere; }
.wa-example .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .compare .two-col, .fixes { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .jp-visual.screens-only { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .jp-visual.two-chats { grid-template-columns: minmax(0, 1fr); }
  .jp-visual.two-chats .jp-screen { grid-row: auto; }
}
@media (max-width: 480px) {
  .tool-qr { flex-direction: column; align-items: flex-start; }
}

/* ── About: Sellly at a glance ──────────────────────────────────────────── */
.glance { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0; border-top: 1px solid var(--rule); }
.glance > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s-2) var(--s-8); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.glance dt { font: 600 15.5px/1.5 var(--sans); color: var(--ink); }
.glance dd { margin: 0; color: var(--ink-2); font: var(--site-body); }
.glance a { color: var(--ink); text-underline-offset: 2px; }
@media (max-width: 640px) { .glance > div { grid-template-columns: minmax(0, 1fr); } }