/* Shared parts for the inner pages (About, API, MCP, Docs, Sample data, Coverage, Contact, FAQ, Use cases).
   Built on the tokens in hc.css, so every colour scheme and dark mode carry over. */
.pg { --pg-good: #1f8a5b; --pg-warm: var(--slab2, #ef9b79); }
.pg .serif, .pg h1, .pg-head h2, .pg-cta h2 { font-family: var(--f-serif, var(--f-sans, "Inter")), Georgia, serif; font-weight: 600; letter-spacing: -.015em; font-optical-sizing: auto; }
.pg .num { font-variant-numeric: tabular-nums; }
.pg code { font: 13px var(--f-mono, "IBM Plex Mono"), ui-monospace, Menlo, Consolas, monospace; }
.pg p code, .pg li code { padding: 1px 5px; border-radius: 5px; background: var(--muted); color: var(--ink-2); }
.kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--accent); font: 600 12.5px/1 var(--f-mono, "IBM Plex Mono"), ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.kick a { color: inherit; }

/* hero */
.pg-hero { padding: 72px 16px 56px; }
.pg-hero.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pg-hero h1 { max-width: 15em; margin: 0 0 20px; font-size: 56px; line-height: 1.04; }
.pg-hero .lede { max-width: 36em; margin: 0; color: var(--ink-3); font-size: 18px; line-height: 1.65; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pg .btn.lg { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.pg-note { margin: 14px 0 0; color: var(--ink-4); font-size: 13.5px; line-height: 1.6; }

/* stats strip */
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.pg-stats > div { padding: 20px 22px; min-width: 0; }
.pg-stats > div + div { border-left: 1px solid var(--line); }
.pg-stats b { display: block; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
.pg-stats span { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; }

/* sections */
.pg-sec { padding: 80px 0; scroll-margin-top: 72px; }
.pg-sec.white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-sec.alt { background: var(--muted); }
.pg-sec + .pg-sec:not(.white):not(.alt) { border-top: 1px solid var(--line); }
.pg-head { max-width: 760px; margin-bottom: 36px; }
.pg-head h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.1; }
.pg-head p { margin: 0; color: var(--ink-3); font-size: 16.5px; line-height: 1.7; }
.pg-head p + p { margin-top: 12px; }

/* cards */
.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-card { position: relative; display: block; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; }
a.pg-card { text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.pg-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 10px 28px -18px rgba(23,45,80,.35); transform: translateY(-1px); text-decoration: none; }
.pg-card .n { display: block; margin-bottom: 18px; color: var(--accent); font: 500 13px/1 var(--f-mono, "IBM Plex Mono"), monospace; }
.pg-card .ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 10px; background: var(--press); color: var(--accent); }
.pg-card .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.pg-card p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }
.pg-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.pg-card .tag { position: absolute; top: 20px; right: 20px; padding: 2px 8px; border-radius: 99px; background: var(--muted); color: var(--ink-3); font-size: 11.5px; font-weight: 600; }

/* big numbered values */
.pg-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.pg-values li { padding-top: 22px; border-top: 2px solid var(--ink); }
.pg-values .n { display: block; margin-bottom: 18px; color: var(--accent); font: 500 13px/1 var(--f-mono, "IBM Plex Mono"), monospace; }
.pg-values h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }
.pg-values p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.65; }

/* code blocks */
.pg-code { border: 1px solid #1d2b45; border-radius: 14px; background: #0f1a2e; color: #dbe5f5; overflow: hidden; }
.pg-code .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #1f2d48; color: #8ea2c4; font: 500 12.5px var(--f-mono, "IBM Plex Mono"), monospace; }
.pg-code .bar button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #2a3b5c; border-radius: 7px; background: transparent; color: #c8d5ec; font: 500 12px var(--f-sans, "Public Sans"), sans-serif; cursor: pointer; }
.pg-code .bar button:hover { background: #1a2843; }
.pg-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.7 var(--f-mono, "IBM Plex Mono"), ui-monospace, Menlo, monospace; white-space: pre; }
.pg-code .c { color: #7f93b6; } .pg-code .s { color: #f3b48f; } .pg-code .k { color: #8fb6ff; }

/* checklist */
.pg-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.pg-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pg-checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--pg-good) 14%, transparent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pg-checks.one { grid-template-columns: minmax(0, 1fr); }

/* agent conversation */
.pg-chat { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 40px -28px rgba(23,45,80,.4); }
.pg-chat .top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.pg-chat .top i { width: 8px; height: 8px; border-radius: 50%; background: var(--pg-good); }
.pg-chat .body { display: grid; gap: 14px; padding: 18px; }
.pg-chat .me { justify-self: end; max-width: 86%; padding: 12px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--accent-ink); font-size: 14.5px; line-height: 1.5; }
.pg-chat .tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chat .tools span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--muted); color: var(--ink-2); font: 500 12px var(--f-mono, "IBM Plex Mono"), monospace; }
.pg-chat .tools span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-good); }
.pg-chat .tools span.file::before { border-radius: 1px; background: var(--pg-warm); }
.pg-chat .bot { max-width: 92%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--muted); color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.pg-chat .cap { padding: 0 18px 14px; color: var(--ink-4); font-size: 12px; }

/* two-column layouts */
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pg-two h3 { margin: 0 0 14px; font-size: 18px; }
.pg-stack { display: grid; gap: 28px; }

/* long pages with a contents list on the left */
.pg-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.pg-toc { position: sticky; top: 88px; }
.pg-toc h4 { margin: 0 0 10px; color: var(--ink-4); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pg-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--ink-3); font-size: 14px; text-decoration: none; }
.pg-toc a:hover { color: var(--ink); }
.pg-toc a.on { border-color: var(--accent); color: var(--ink); font-weight: 500; }
.pg-doc section { padding-bottom: 48px; scroll-margin-top: 80px; }
.pg-doc section + section { padding-top: 48px; border-top: 1px solid var(--line); }
.pg-doc h2 { margin: 0 0 12px; font-family: var(--f-serif, var(--f-sans, "Inter")), Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.pg-doc h3 { margin: 26px 0 10px; font-size: 16px; }
.pg-doc > div > section > p, .pg-doc .p { max-width: 44em; margin: 0 0 14px; color: var(--ink-3); font-size: 15.5px; line-height: 1.7; }

/* tables */
.pg-table-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow-x: auto; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pg-table th, .pg-table td { padding: 12px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pg-table th { color: var(--ink-4); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table td.r, .pg-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table td code { white-space: nowrap; }

/* questions */
.pg-faq { border-top: 1px solid var(--line); }
.pg-faq details { border-bottom: 1px solid var(--line); }
.pg-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 2px; color: var(--ink); font-size: 16.5px; font-weight: 500; cursor: pointer; list-style: none; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; flex: none; color: var(--ink-4); font-size: 22px; line-height: 1; transition: rotate .25s; }
.pg-faq details[open] summary::after { rotate: 45deg; }
.pg-faq details.closing summary::after { rotate: none; }
.pg-faq details > div { overflow: hidden; max-width: 46em; margin: 0; color: var(--ink-3); font-size: 15.5px; line-height: 1.7; }
.pg-faq details > div p { margin: 0 0 10px; }
.pg-faq details > div > :last-child { margin-bottom: 20px; }

/* closing call to action */
.pg-cta { padding: 80px 0; background: var(--surface); border-top: 1px solid var(--line); }
.pg-cta .box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 40px; border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--pg-warm) 14%, var(--surface))); }
.pg-cta h2 { margin: 0 0 8px; font-size: 36px; line-height: 1.1; }
.pg-cta p { margin: 0; color: var(--ink-3); font-size: 16px; line-height: 1.6; }
.pg-cta .pg-actions { margin: 0; }

.i-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1000px) {
  .pg-hero.split, .pg-two { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pg-cards, .pg-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-values { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-toc { position: static; display: flex; gap: 6px; margin: 0 -16px 32px; padding: 0 16px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .pg-toc h4 { display: none; }
  .pg-toc a { flex: none; margin: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
  .pg-toc a.on { border-color: var(--accent); }
}
@media (max-width: 720px) {
  .pg-hero { padding: 44px 16px 40px; }
  .pg-hero h1 { font-size: 40px; }
  .pg-hero .lede { font-size: 16.5px; }
  .pg-sec { padding: 56px 0; }
  .pg-head h2 { font-size: 30px; }
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-stats > div:nth-child(3) { border-left: 0; }
  .pg-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pg-stats b { font-size: 28px; }
  .pg-cards, .pg-cards.two, .pg-cards.four { grid-template-columns: minmax(0, 1fr); }
  .pg-checks { grid-template-columns: minmax(0, 1fr); }
  .pg-cta { padding: 56px 0; }
  .pg-cta .box { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .pg-cta h2 { font-size: 28px; }
  .pg-table th, .pg-table td { padding: 10px 12px; font-size: 13.5px; }
}
@media (max-width: 420px) {
  .pg-hero h1 { font-size: 34px; }
  .pg-stats > div { padding: 16px; }
  .pg-stats b { font-size: 24px; }
}