/* Shared business UI. Homepage campaign styling remains in styles.css. */
.business-page { --font-size-page: 32px; --font-size-section: 24px; --font-size-card: 20px; background: #f7f8fa; overflow-wrap: break-word; }
.business-page main { min-height: calc(100svh - 460px); }
.page-shell { width: calc(100% - 2 * var(--page-gutter)); max-width: var(--content-width); margin-inline: auto; padding-block: 32px 64px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin: 0 0 32px; }
.page-title { margin: 0; font-size: var(--font-size-page); font-weight: 700; letter-spacing: -.6px; line-height: 1.35; }
.page-description { margin-top: 16px; color: var(--muted); font-size: var(--font-size-body); max-width: var(--reading-width); }
.section-heading { font-size: var(--font-size-section); line-height: 1.4; font-weight: 650; margin-bottom: 24px; }
.panel { min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.panel + .panel { margin-top: 24px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; min-height: var(--control-height); padding: 8px 24px; border: 1px solid transparent; border-radius: 24px; font-weight: 500; font-size: 16px; line-height: 1.5; text-align: center; text-decoration: none; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #FF7500; }
.btn-secondary { background: #fff; color: #24272b; border-color: #d9dde3; }
.btn-secondary:hover { border-color: #FF7500; background: #FF75000D; }
.btn-quiet { background: transparent; color: #FF7500; }
.btn-quiet:hover { background: #FF750015; }
.business-page .btn:disabled { opacity: .55; cursor: not-allowed; }
.tag, .badge { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 8px; border-radius: 6px; background: #f1f3f6; color: #59626e; font-size: 14px; font-weight: 400; line-height: 1.7; }
.badge { background: #FF750019; color: #FF7500; border-radius: 16px; }
.badge.is-solved, .is-solved.badge, .badge.is-success { color: var(--success); background: #e9f6ee; }
.badge.is-error { color: var(--danger); background: #fff0ed; }
.muted { color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 8px; margin-bottom: 24px; min-width: 0; }
.field > label, .field > legend { font-weight: 600; font-size: 16px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select, .business-page .qa-input, .business-page .qa-shell textarea { width: 100%; min-width: 0; min-height: 48px; padding: 8px 16px; border: 1px solid #d9dde3; border-radius: 8px; background: #fff; color: var(--text); font-size: 16px; line-height: 1.75; }
.field textarea, .business-page .qa-shell textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .business-page .qa-input:focus, .business-page .qa-shell textarea:focus { border-color: var(--orange); }
.field [aria-invalid="true"], .business-page .qa-shell [aria-invalid="true"] { border-color: var(--danger) !important; background: #fffafa !important; }
.field small, .field-help, .business-page .qa-field-help { color: var(--muted); font-size: 14px; }
.field-error, .business-page .qa-error { color: var(--danger); font-size: 14px; }
.field-error:empty, .business-page .qa-error:empty { display: none; }
.business-page :is(.empty-state, .cp-status, .qa-empty) { display: grid; justify-items: center; gap: 16px; padding: 48px 24px; text-align: center; color: var(--muted); }
.business-page :is(.empty-state, .cp-status, .qa-empty) :is(h2,h3,strong) { margin: 0; color: var(--text); font-size: var(--font-size-section); }
.business-page :is(.empty-state, .cp-status, .qa-empty) > p { max-width: 480px; margin: 0; }
.business-page :is(.cp-status-symbol, .qa-empty-mark) { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 8px; border-radius: 16px; background: #FF750019; color: #FF7500; font-size: 24px; }
.business-page :is(.breadcrumb, .qa-breadcrumb) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.business-page :is(.breadcrumb, .qa-breadcrumb) a:hover { color: #FF7500; }
.page-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 32px; align-items: start; }
.page-grid > * { min-width: 0; }
.business-page :is(.pagination, .cp-pagination, .qa-pagination) { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.business-page :is(.pagination, .cp-pagination, .qa-pagination) :is(button,a) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; height: auto; padding: 8px 16px; border: 1px solid #dce1e6; border-radius: 8px; background: #fff; color: var(--text); font-size: 14px; }
.business-page :is(.pagination, .cp-pagination, .qa-pagination) :is([aria-current="page"], .is-active) { border-color: var(--orange); color: #fff; background: var(--orange); }
.business-page :is(.pagination, .cp-pagination, .qa-pagination) button:disabled { opacity: .45; cursor: not-allowed; }
.business-page .qa-pagination p { width: 100%; margin: 8px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.notice { padding: 16px 24px; border: 1px solid #FF750036; border-radius: 8px; background: #FF75000D; color: #FF7500; font-size: 14px; line-height: 1.7; }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #FF75001C; color: #FF7500; font-size: 16px; font-weight: 600; object-fit: cover; }
.business-page dialog { max-width: calc(100vw - 32px); }
.business-page input[type="checkbox"], .business-page input[type="radio"] { accent-color: var(--orange); width: 18px; height: 18px; flex: none; }
.business-page code { overflow-wrap: anywhere; }
.business-page pre { max-width: 100%; overflow: auto; }
/* Shared content and question controls: one appearance across every template. */
.business-page :is(.cp-eyebrow, .qa-eyebrow) { margin: 0 0 8px; color: #FF7500; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.business-page :is(.cp-toolbar, .cp-search-box) { padding: 24px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.business-page .cp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.business-page :is(.cp-filters, .cp-tags, .qa-tags) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.business-page :is(.cp-filter, .qa-tag-button, .cat-filter, .filter-chip) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: 24px; background: #f1f3f5; color: #565c63; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.business-page :is(.cp-filter, .qa-tag-button, .cat-filter, .filter-chip):hover { border-color: #FF75004D; color: #FF7500; }
.business-page :is(.cp-filter, .qa-tag-button, .cat-filter, .filter-chip):is(.is-active,[aria-pressed="true"],[aria-current="true"]) { background: #17191d; border-color: #17191d; color: #fff; }
.business-page .cp-search-form { display: flex; align-items: center; gap: 8px; min-width: 240px; }
.business-page :is(.cp-search-form, .cat-search) input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 16px; border: 1px solid #dce1e6; border-radius: 24px; background: #fafbfd; color: var(--text); font: inherit; }
.business-page :is(.cp-search-form, .cat-search) .btn { min-height: 44px; padding: 8px 24px; }
.business-page :is(.cp-sort, .qa-search) { display: flex; align-items: center; gap: 8px; }
.business-page :is(.cp-sort select, .qa-order, .cat-result-bar select) { min-height: 44px; max-width: 184px; padding: 8px 16px; border: 1px solid #dce1e6; border-radius: 8px; background: #fff; color: #454b53; font-size: 14px; }
.business-page :is(.cp-row-meta, .qa-meta) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 14px; }
.business-page .cp-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 16px; margin-top: auto; border-top: 1px solid #edf0f2; color: var(--muted); font-size: 14px; }
.business-page :is(.cp-link, .cp-text-button, .qa-text-button) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #FF7500; font: inherit; font-size: 14px; cursor: pointer; text-underline-offset: 4px; }
.business-page :is(.cp-link, .cp-text-button, .qa-text-button):hover { color: #FF7500; text-decoration: underline; }
.business-page :is(.cp-tabs, .qa-tabs) { display: flex; align-items: stretch; gap: 24px; overflow-x: auto; max-width: 100%; }
.business-page .cp-tabs { padding: 0 24px; border-bottom: 1px solid var(--line); }
.business-page :is(.cp-tabs button, .qa-tab) { position: relative; flex: none; min-height: 48px; padding: 8px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 16px; cursor: pointer; white-space: nowrap; }
.business-page :is(.cp-tabs button, .qa-tab)[aria-pressed="true"] { color: #FF7500; font-weight: 600; }
.business-page :is(.cp-tabs button, .qa-tab)[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--orange); border-radius: 2px 2px 0 0; }
.business-page .cp-aside-panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.business-page :is(.cp-aside-panel, .qa-side-panel) h2 { margin: 0 0 16px; font-size: 20px; }
.business-page .cp-toc { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.business-page .cp-toc a { display: flex; align-items: center; min-height: 44px; }
.business-page .cp-toc a:hover { color: #FF7500; }
.business-page :is(.cp-article, .qa-body) { font-size: 16px; }
.business-page .cp-article { max-width: 100%; }
.business-page .cp-article > section, .business-page .qa-body { max-width: var(--reading-width); }
.business-page :is(.cp-article h2, .qa-shell h2) { font-size: var(--font-size-section); }
.business-page :is(.cp-project-copy h2, .cp-result-row h2, .cp-result-row h3, .qa-row h2, .business-card h2) { font-size: var(--font-size-card); line-height: 1.45; }
.business-page :is(.cp-article h3, .qa-answers-heading h2) { font-size: 20px; }
.business-page .cp-aside-panel h2, .business-page .qa-side-panel h2, .business-page .qa-side-panel h3 { font-size: var(--font-size-card); }
.business-page :is(.cp-article p, .qa-body) { line-height: 1.85; }
.business-page :is(.qa-answer-actions, .qa-comment-form, .cp-account-toolbar) .btn { min-height: 44px; }
.business-page .qa-comments summary { display: flex; align-items: center; min-height: 44px; }
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.section-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: 24px; color: var(--muted); }
.section-nav a:hover { border-color: #FF750066; color: #FF7500; }
.section-nav [aria-current="page"] { background: #17191d; color: #fff; }
.business-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.business-card { min-width: 0; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.business-card h2 { margin-bottom: 16px; font-size: var(--font-size-card); }
.business-card p { color: var(--muted); }
.business-page .cp-cover { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; width: 100%; height: 100%; min-height: 192px; padding: 24px; overflow: hidden; background: linear-gradient(125deg,#182024,#303c43); color: #fff; }
.business-page .cp-cover-kicker { position: relative; z-index: 1; font-size: 14px; letter-spacing: 1px; color: #FF7500; }
.business-page .cp-cover-title { position: relative; z-index: 1; max-width: 85%; font-size: 24px; font-weight: 650; line-height: 1.45; }
.business-page .cp-cover-symbol { position: absolute; right: 16px; bottom: -8px; color: #ffffff10; font-size: 104px; line-height: 1; font-weight: 700; }
.business-page div.cp-intro-image { display: grid; place-items: center; overflow: hidden; padding: 0; }
.business-page .cp-intro-image > img { display: block; width: 100%; height: 230px; padding: 8px; object-fit: contain; }
.business-page .cp-intro-image > .cp-cover { border-radius: inherit; }
.business-page .cp-table-wrap { width: 100%; overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; }
.business-page .cp-table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; text-align: left; }
.business-page .cp-table-wrap :is(th,td) { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.business-page .cp-table-wrap th { background: #f4f6f8; font-weight: 600; }
.business-page .cp-table-wrap tr:last-child td { border-bottom: 0; }
.business-page .cp-search-count { margin-left: 8px; color: var(--muted); font-size: 14px; }
.business-page .cp-record-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block: 16px; color: var(--muted); font-size: 14px; }
.business-page .cp-record-progress progress { width: min(320px,100%); height: 8px; accent-color: var(--orange); border: 0; border-radius: 8px; overflow: hidden; }
.business-page .cp-record-progress progress::-webkit-progress-bar { background: #e9edf0; }
.business-page .cp-record-progress progress::-webkit-progress-value { background: var(--orange); }
.business-page .cp-record-progress progress::-moz-progress-bar { background: var(--orange); }
.business-page [data-cp-favorite][aria-pressed="true"] { border-color: #FF7500; color: #FF7500; background: #FF750019; }
.component-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.component-stack { display: grid; gap: 24px; }
.component-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.component-swatches { display: flex; flex-wrap: wrap; gap: 16px; }
.component-swatch { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.component-swatch::before { content: ''; width: 64px; height: 40px; border: 1px solid #0001; border-radius: 8px; background: var(--swatch); }
.component-label { margin: 16px 0 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 1023px) {
  .business-page :is(.page-grid, .cp-detail-grid, .qa-layout) { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .business-page .cp-aside { display: none; }
  .business-page .cp-user-grid { grid-template-columns: minmax(0,1fr); }
  .business-page .cp-profile { display: none; }
  .business-page .cp-side-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; }
  .business-page .cp-side-nav a { flex: 1; text-align: center; }
  .business-page .cp-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
  .business-page .cp-search-form { min-width: 0; }
  .business-page .cp-project-grid, .business-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .business-page { --page-gutter: 16px; --font-size-page: 28px; --font-size-section: 22px; --font-size-card: 20px; }
  .business-page :is(.page-shell, .cp-main, .qa-shell) { padding-block: 24px 40px; }
  .page-heading { gap: 16px; margin-bottom: 24px; }
  .panel { padding: 24px 16px; }
  .business-page :is(.cp-toolbar, .cp-search-box, .cp-aside-panel) { padding: 16px; }
  .business-page :is(.empty-state, .cp-status, .qa-empty) { padding: 40px 16px; }
  .business-page .cp-project-grid, .business-grid, .component-grid { grid-template-columns: minmax(0,1fr); }
  .business-page :is(.cp-search-form, .cat-search) .btn { padding-inline: 16px; }
  .business-page .cp-tabs { gap: 24px; padding-inline: 16px; }
  .business-page .cp-tabs button { font-size: 14px; }
  .business-page .cp-cover-title { font-size: 20px; }
  .business-page .cp-account-toolbar { gap: 16px; flex-wrap: wrap; }
  .btn { padding-inline: 16px; }
}