/* Long-form content pages: state pricing, comparison, free templates.
   Shares the brand variables from portal.css so wildcard subdomains can
   override theming if a contractor links to a content page. */

.content-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.content-shell h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.content-shell h2 {
  font-size: 1.4rem;
  margin: 36px 0 12px;
}
.content-shell h3 {
  font-size: 1.1rem;
  margin: 24px 0 8px;
}
.content-shell p { font-size: 1.05rem; color: var(--brand-text); }
.content-shell .lede { font-size: 1.15rem; color: var(--brand-text-muted); margin-bottom: 24px; }
.content-shell ul, .content-shell ol { padding-left: 24px; }
.content-shell ul li, .content-shell ol li { margin-bottom: 6px; }
.content-shell .table-wrap { margin: 16px 0; }
.content-shell table th, .content-shell table td { font-size: 0.95rem; }

.content-cta {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}
.content-cta h2 { margin: 0 0 8px; font-size: 1.15rem; }
.content-cta p { margin: 0 0 12px; }

.content-breadcrumb {
  font-size: 0.85rem;
  color: var(--brand-text-muted);
  margin-bottom: 16px;
}
.content-breadcrumb a { color: inherit; }

.callout-yes { color: var(--brand-success); }
.callout-no { color: var(--brand-error); }

/* === Refactored from inline styles === */

/* Inline buttons (e.g. small forms) */
.btn--inline { display: inline-block; width: auto; }

/* Accessibility: skip-to-content link (visually hidden until focused) */
.skip-link { position: absolute; top: -100px; left: 0; background: var(--primary); color: white; padding: 0.5rem 1rem; z-index: 9999; font-size: 0.9rem; }
.skip-link:focus { top: 0; }

/* Spacing */
.mt-6 { margin-top: 6px; }
.mt-12 { margin-top: 12px; }
.mt-1rem { margin-top: 1rem; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin: 0 0 8px; }
.mb-12 { margin: 0 0 12px; }
.mt-quarter { margin-top: 0.25rem; }

/* Display */
.full-width { width: 100%; }
.text-decoration-none { text-decoration: none; }

/* Backgrounds */
.bg-card-warm { background: #fdfdfb; }

/* Typography */
.fw-600 { font-weight: 600; }
.fw-600--brand { font-weight: 600; color: var(--text); }
.text-1-25-600 { font-size: 1.25rem; font-weight: 600; }
.text-1-1-600 { font-size: 1.1rem; font-weight: 600; }
.text-95 { font-size: 0.95rem; }
.text-85-muted { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }
.text-80-faint { font-size: 0.8rem; margin-top: 0.25rem; color: var(--faint); }
.section-eyebrow { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }

/* Mono blocks (for legal pages, etc) */
.mono-block { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* Responsive grid lists */
.grid-cards-220 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid-cards-220--gap12 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stack-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Dashboard JS-rendered note */
.note-small { font-size: .85rem; }

/* Embed iframe snippet (rendered by dashboard.js for the contractor embed-snippet UI) */
.yq-embed-iframe { border: 0; width: 100%; height: 560px; max-width: 560px; }