/* Generated from products/design-system/shared/guide-page by Navorina/scripts/sync-ds-invoice-document.mjs. Do not edit. */
/* Guide page (shared/guide-page.js): audience pages and the guides index on navorina.ai.
   Surfaces follow the page it sits on, like the rate page: the public tools canvas (css/tools.css) in the
   product, the catalog island tokens in the DS. Own field, pills, table and question rows, no product runtime. */

.nv-guide {
  --nv-guide-island: var(--nv-tools-island, var(--nv-table-island, #141416));
  --nv-guide-well: var(--nv-tools-well, var(--nv-table-well, #1f1f22));
  --nv-guide-well-hover: var(--nv-tools-well-hover, var(--nv-table-well-hover, #29292c));
  --nv-guide-radius: var(--nv-island-radius, 2rem);
  --nv-guide-pad: var(--nv-island-padding, 24px);
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 880px;
  color: var(--nv-text-primary);
}

.nv-guide :is(h1, h2, p, dl, dt, dd) { margin: 0; }
.nv-guide a:not(.nv-guide-button) { color: inherit; }

.nv-guide-head { display: grid; gap: 8px; padding-block-end: 8px; }
.nv-guide-head h1 {
  font-size: var(--nv-type-title-1-size, 28px);
  font-weight: var(--nv-type-title-1-weight, 600);
  line-height: var(--nv-type-title-1-line, 34px);
  letter-spacing: var(--nv-type-title-1-tracking, -.02em);
}
.nv-guide-head__lead { max-width: 64ch; color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 22px; }
.nv-guide-head__meta { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }

.nv-guide-island { display: grid; gap: 12px; min-width: 0; padding: var(--nv-guide-pad); border-radius: var(--nv-guide-radius); background: var(--nv-guide-island); }
.nv-guide-island__head { display: flex; min-height: 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.nv-guide-island__title {
  font-size: var(--nv-type-headline-size, 15px);
  font-weight: var(--nv-type-headline-weight, 600);
  line-height: var(--nv-type-headline-line, 20px);
  letter-spacing: var(--nv-type-headline-tracking, -.009em);
}
.nv-guide-badge { display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--nv-guide-well); color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 500; }

/* Facts: label left, value and its source right; one column under 640 px. */
.nv-guide-facts { display: grid; gap: 2px; margin-inline: -12px; }
.nv-guide-fact { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; padding: 10px 12px; border-radius: 16px; }
.nv-guide-fact:hover { background: var(--nv-guide-well); }
.nv-guide-fact dt { color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-guide-fact dd { display: grid; gap: 2px; font-size: var(--nv-type-body-size, 14px); font-weight: 500; line-height: 20px; }
.nv-guide-fact small,
.nv-guide-footnote { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 400; line-height: 16px; }
.nv-guide-fact small a,
.nv-guide-footnote a,
.nv-guide-disclaimer a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }

/* Calculator: fields left, result right; stacked under 760 px. */
.nv-guide-calc__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.nv-guide-calc__form { display: grid; gap: 12px; }
.nv-guide-field { display: grid; gap: 6px; }
.nv-guide-field > span { color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 500; line-height: 16px; }
.nv-guide-field small { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-guide-input { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; background: var(--nv-guide-well); }
.nv-guide-input:hover { background: var(--nv-guide-well-hover); }
.nv-guide-input:focus-within { box-shadow: 0 0 0 2px var(--nv-text-tertiary); }
.nv-guide-input input { min-width: 0; flex: 1; border: 0; background: none; color: var(--nv-text-primary); font: inherit; font-size: var(--nv-type-body-size, 14px); font-variant-numeric: tabular-nums; outline: none; }
.nv-guide-input em { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-style: normal; }
.nv-guide-choices { display: grid; gap: 2px; }
.nv-guide-choice { display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; cursor: pointer; font-size: var(--nv-type-body-size, 14px); }
.nv-guide-choice:hover,
.nv-guide-choice:has(input:checked) { background: var(--nv-guide-well); }
.nv-guide-choice input { margin: 0; accent-color: var(--nv-text-primary); }

.nv-guide-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nv-guide-result dt { color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-guide-result dd { margin-block-start: 4px; font-size: var(--nv-type-title-3-size, 20px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nv-guide .nv-guide-note { margin-block-start: 16px; padding: 10px 14px; border-radius: 14px; background: var(--nv-guide-well); color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-guide-note strong { color: var(--nv-text-primary); }

.nv-guide-routes,
.nv-guide-list { display: grid; gap: 2px; margin-inline: -12px; }
.nv-guide-route,
.nv-guide-list__row { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 16px; text-decoration: none; }
.nv-guide-list__row { display: grid; justify-content: stretch; gap: 2px; }
.nv-guide-route:hover,
.nv-guide-list__row:hover { background: var(--nv-guide-well); }
.nv-guide-route__label { font-size: var(--nv-type-body-size, 14px); font-weight: 500; line-height: 20px; }
.nv-guide-route__note { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-guide-route__value { flex: none; font-size: var(--nv-type-body-size, 14px); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Comparison: a quiet DS-style table, scrolls inside its island on a phone. */
.nv-guide-table-wrap { overflow-x: auto; margin-inline: -12px; }
.nv-guide-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0 2px; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-guide-table th,
.nv-guide-table td { padding: 10px 12px; text-align: start; vertical-align: top; }
.nv-guide-table thead th { color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); font-weight: 500; }
.nv-guide-table tbody th { font-weight: 500; }
.nv-guide-table tbody td { color: var(--nv-text-secondary); }
.nv-guide-table tbody tr:hover > * { background: var(--nv-guide-well); }
.nv-guide-table tbody tr > :first-child { border-radius: 14px 0 0 14px; }
.nv-guide-table tbody tr > :last-child { border-radius: 0 14px 14px 0; }

.nv-guide-text p { max-width: 72ch; color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 22px; }

.nv-guide-faq { display: grid; gap: 2px; margin-inline: -12px; }
.nv-guide-faq__item { border-radius: 16px; }
.nv-guide-faq__item[open] { background: var(--nv-guide-well); }
.nv-guide-faq__item summary { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 16px; cursor: pointer; font-size: var(--nv-type-body-size, 14px); font-weight: 500; list-style: none; }
.nv-guide-faq__item summary::-webkit-details-marker { display: none; }
.nv-guide-faq__item summary:hover { background: var(--nv-guide-well); }
.nv-guide-faq__item summary:focus-visible { outline: 2px solid var(--nv-text-tertiary); outline-offset: -2px; }
.nv-guide-faq__item p { padding: 0 12px 12px; color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 22px; max-width: 72ch; }

.nv-guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.nv-guide-cta p { margin-block-start: 2px; color: var(--nv-text-secondary); font-size: var(--nv-type-callout-size, 13px); line-height: 18px; }

.nv-guide-button { display: inline-flex; height: 32px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; background: var(--nv-guide-well); color: var(--nv-text-primary); font-size: var(--nv-type-callout-size, 13px); font-weight: 500; text-decoration: none; white-space: nowrap; }
.nv-guide-button:hover { background: var(--nv-guide-well-hover); }
.nv-guide-button:focus-visible { outline: 2px solid var(--nv-text-tertiary); outline-offset: 2px; }
.nv-guide-button--primary { height: 36px; padding: 0 16px; background: var(--nv-button-primary, var(--color-button-primary, #eeeeee)); color: var(--nv-button-primary-text, var(--color-button-primary-text, #0a0a0a)); }
.nv-guide-button--primary:hover { background: var(--nv-button-primary, var(--color-button-primary, #eeeeee)); opacity: .9; }

.nv-guide-disclaimer { max-width: 72ch; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-guide-related { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .nv-guide-calc__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .nv-guide-fact { grid-template-columns: minmax(0, 1fr); }
  .nv-guide-result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nv-guide-cta .nv-guide-button { width: 100%; }
}