/* Guarani AI: styles used only by the About, Changelog, Contact, product (Verify, Mesh, Mobile CI) and Pricing
   pages (loaded after site.css, never on the home pages). Same tokens and components as site.css. No inline
   styles (CSP: style-src 'self'). */

/* About: a dossier of ruled rows, a heading against its content (4/8, as the FAQ and Team sections). */
.about { padding-bottom: var(--section); }
.about .page-head .lead { margin-top: 20px; max-width: 58ch; }
.ab { margin-top: clamp(40px, 6vw, 72px); }
.ab-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px); padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 8px); }
.ab-row h2 { font-size: clamp(24px, 1.2rem + 1vw, 32px); }
.ab-body { min-width: 0; color: var(--body); }
.ab-body > p + p { margin-top: 14px; }
.ab-body > p { max-width: 62ch; }
.ab-statement { font: 500 clamp(24px, 1.1rem + 1.4vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.reg { margin: 0; border-top: 1px solid var(--line); }
.reg div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.reg dt { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.reg dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.reg dd a { color: #fff; }
.ab-status { display: flex; gap: 12px; align-items: flex-start; max-width: 62ch; }
.ab-status .pill { flex: none; margin-top: 2px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 12px/1.5 var(--mono); color: var(--champagne); white-space: nowrap; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ab-team { grid-template-columns: minmax(0, 1fr); }
.ab .nv-strip { margin-top: 0; }
@media (max-width: 799px) { .ab-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .reg div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ab-status { flex-direction: column; gap: 10px; }
}

/* Changelog: a dated register, newest first. */
.changelog { padding-bottom: var(--section); }
.cl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.cl-head .lead { margin-top: 16px; }
.feed-link svg { width: 15px; height: 15px; flex: none; }
.cl { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.cl-item article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(12px, 4vw, 64px); padding: 28px 0; border-top: 1px solid var(--line); }
.cl-item { scroll-margin-top: calc(var(--nav-h) + 8px); }
.cl-item:target article { border-top-color: var(--champagne); }
.cl-date { padding-top: 4px; font: 400 13px/1.5 var(--mono); color: var(--silver); font-variant-numeric: tabular-nums; }
.cl-body { min-width: 0; }
.cl-body h2 { font-size: clamp(20px, 1rem + .6vw, 24px); line-height: 1.2; letter-spacing: -.02em; }
.cl-body p { margin-top: 8px; max-width: 64ch; color: var(--body); }
@media (max-width: 599px) { .cl-item article { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; } }

/* Contact: the sign-in card grammar, a message field, and the no-JS failure notice. */
.contact-form .field-msg { margin-top: 18px; }
textarea.input { min-height: 168px; resize: vertical; line-height: 1.55; }
.field-hint { font-size: 13px; color: var(--mute); }
.contact-error { display: none; margin: 24px 0 0; border-color: var(--fail); }
.contact-error:target:not([hidden]) { display: block; }
.contact-error + .contact-form, .auth-intro + .contact-form { margin-top: 28px; }
.aside-sub { margin-top: 32px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.reach { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; }
.reach li { border-top: 1px solid var(--line); }
.reach li:last-child { border-bottom: 1px solid var(--line); }
.reach a { display: flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none; overflow-wrap: anywhere; }
.reach a:hover { color: #fff; }

/* Product pages and Pricing: a left-aligned hero, then ruled bands (4/8 pairs of a heading against its
   content, as on About), the home instruments as static samples, and a strip list of cross-links. */
.prod-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font: 400 12.5px/1.6 var(--mono); color: var(--mute); }
.crumbs li + li::before { content: "\203A"; margin: 0 10px; }
.crumbs a { color: var(--silver); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.prod-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 4vw, 44px); }
.prod-name { display: inline-flex; align-items: center; gap: 10px; font: 500 18px/1.2 var(--sans); letter-spacing: -.015em; color: #fff; }
.prod-name .g-mark { width: 22px; height: 22px; }
.prod-hero h1 { max-width: 17em; margin-top: 22px; font-size: clamp(36px, 1.3rem + 3.4vw, 68px); line-height: 1.04; letter-spacing: -.04em; }
.prod-hero .lead { margin-top: 22px; }
.prod-hero .hero-actions { justify-content: flex-start; }
.prod-sec { padding: clamp(56px, 7vw, 104px) 0; }
.prod-sec h2 { font-size: clamp(28px, 1.3rem + 1.6vw, 42px); }
.prod-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.prod-head { min-width: 0; }
.prod-head .lead { margin-top: 16px; font-size: 16.5px; }
.prod-head--wide { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.prod-head code, .prod-note code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .07); color: #fff; font-size: .86em; overflow-wrap: anywhere; }
.prod-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.prod-link:hover { text-decoration: underline; }
.feats { margin: 0; padding: 0; list-style: none; }
.feats li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.feats li:last-child { border-bottom: 1px solid var(--line); }
.feats h3 { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.35; }
.feats h3::before { content: ""; position: absolute; left: 1px; top: .7em; width: 9px; height: 1px; background: var(--champagne); }
.feats p { font-size: 15.5px; color: var(--body); }
.prod-steps { margin: 0; padding: 0; list-style: none; }
.prod-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0 18px; border-top: 1px solid var(--line); }
.prod-steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { grid-row: span 2; padding-top: 3px; font: 500 12px/1.4 var(--mono); color: var(--champagne); font-variant-numeric: tabular-nums; }
.prod-layer { margin-top: 20px; }
.prod-layer .nodes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); font: 400 12px/1.4 var(--mono); }
.prod-fit .policy { margin-top: 24px; }
.prod-head .avail { margin-top: 18px; }
.prod-docs { margin-top: 14px; font-size: 14.5px; color: var(--silver); }
.prod-code { display: grid; gap: 14px; min-width: 0; }
.prod-code .code { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; }
.prod-code .code + .prod-note { margin-top: 18px; }
.prod-note { max-width: 70ch; font-size: 15px; color: var(--body); }
.prod-notes { margin-top: clamp(24px, 3vw, 40px); padding-bottom: 0; }
.mt-bar svg { width: 100%; height: 100%; }
.mt-bar rect { fill: var(--cyan); }
.mesh-teams .mt-bar rect { fill: var(--silver); }
.mesh-teams li.is-warn .mt-bar rect { fill: var(--hold); }
.xlinks { margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: inset 0 1px 0 var(--edge); }
.xlinks li + li { border-top: 1px solid var(--line); }
.xlinks a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 16px; align-items: center; gap: 4px 24px; min-height: 76px; padding: 14px 20px; color: var(--silver); text-decoration: none; transition: background-color .15s var(--ease); }
.xlinks a:hover { background: var(--surface-2); }
.xlinks a:focus-visible { outline-offset: -4px; }
.x-name { font: 500 17px/1.25 var(--sans); letter-spacing: -.015em; color: #fff; }
.x-sub { font-size: 14.5px; line-height: 1.45; }
.xlinks .i-arrow { color: var(--mute); }
@media (max-width: 899px) { .prod-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .feats li { grid-template-columns: minmax(0, 1fr); }
  .feats p { padding-left: 22px; }
  .xlinks a { grid-template-columns: minmax(0, 1fr) 16px; padding: 14px 16px; }
  .x-sub { grid-row: 2; }
  .xlinks .i-arrow { grid-row: 1 / 3; grid-column: 2; }
}

/* Pricing: plan cards (site.css), a line-by-line comparison and the FAQ. Below 720px each row of the table
   becomes a block (feature, then one line per plan); explicit table roles keep its semantics. */
.prod-plans { padding-bottom: clamp(56px, 7vw, 104px); }
.cmp-box { margin-top: clamp(24px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { padding-top: 16px; padding-bottom: 16px; border-bottom-color: var(--line-strong); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.cmp thead th.is-featured { color: var(--champagne); }
.cmp tbody th { width: 28%; font-weight: 500; color: #fff; }
.cmp td { width: 24%; color: var(--body); }
.cmp .is-featured { background: rgba(255, 255, 255, .018); }
.cmp-plan { display: none; }
.cmp-yes { color: #fff; }
.cmp-no { color: var(--mute); }
.cmp-order { color: var(--silver); }
.cmp-note { display: flex; align-items: baseline; gap: 2px; max-width: 80ch; margin-top: 14px; font: 400 12.5px/1.55 var(--mono); color: var(--silver); }
@media (max-width: 719px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp tbody tr { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { width: auto; padding: 0 0 6px; border: 0; }
  .cmp td { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: 5px 0; border: 0; }
  .cmp .is-featured { background: none; }
  .cmp-plan { display: block; font: 500 11px/1.95 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .cmp td.is-featured .cmp-plan { color: var(--champagne); }
}
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 500; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--silver); border-bottom: 1.5px solid var(--silver); transform: rotate(45deg) translateY(-3px); transition: transform .18s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 18px; max-width: 64ch; color: var(--body); }
@media (max-width: 799px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.prod-sec .faq { align-items: start; }
.faq h2 { font-size: clamp(28px, 1.3rem + 1.6vw, 42px); }
.faq-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; }