/* Industry Hub presentation. Business, role and link state belong to industry_hub.js. */
:root {
  color-scheme: light;
  --hub-bg: #ffffff;
  --hub-surface: #ffffff;
  --hub-ink: #172f38;
  --hub-muted: #526b74;
  --hub-line: #d8e6e7;
  --hub-teal: #087b67;
  --hub-teal-hover: #056451;
  --hub-soft: #edf9f5;
  --hub-soft-line: #b8ded3;
  --hub-focus: #0876b2;
  --hub-shadow: 0 5px 20px rgba(25, 62, 66, .045);
}

html[data-iv-theme="dark"], html[data-theme="dark"] {
  color-scheme: dark;
  --hub-bg: #08151d;
  --hub-surface: #112630;
  --hub-ink: #eef7f8;
  --hub-muted: #b0c6cf;
  --hub-line: #36505d;
  --hub-teal: #71dcc2;
  --hub-teal-hover: #9ee9d6;
  --hub-soft: #163a35;
  --hub-soft-line: #3f776d;
  --hub-focus: #81caff;
  --hub-shadow: none;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body.industry-hub-page {
  margin: 0;
  min-width: 320px;
  background: var(--hub-bg);
  color: var(--hub-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.industry-hub-page [hidden] { display: none !important; }
/* Keep the shared guide available without floating over tool cards. */
.industry-hub-page #iv-training-launch {
  position: static;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  background: var(--hub-surface);
  color: var(--hub-ink);
  font: 650 13px/1.45 "Segoe UI", system-ui, sans-serif;
  box-shadow: none;
  z-index: auto;
}
@media(max-width:480px) { .industry-hub-page #iv-training-launch { width: 100%; } }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: var(--hub-teal); }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--hub-focus);
  outline-offset: 4px;
}
button, a, input, .hub-preview { scroll-margin-block: 24px; }

.hub-skip {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  background: #075f50;
  font-weight: 700;
}
.hub-skip:focus { transform: none; }
.hub-header { background: var(--hub-surface); border-bottom: 1px solid var(--hub-line); }
.hub-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 19px 30px;
}
.hub-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hub-brand-camera { display: block; width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; }
.hub-brand-copy { display: grid; gap: 1px; }
.hub-brand-wordmark { font-size: 24px; font-weight: 750; letter-spacing: -.9px; line-height: 1.15; }
.hub-brand-wordmark > span { color: var(--hub-teal); }
.hub-brand-domain { color: var(--hub-muted); font-size: 11px; font-weight: 550; letter-spacing: .1px; }
.hub-brand-domain > span { margin: 0 5px; color: var(--hub-soft-line); }
.hub-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.hub-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  background: var(--hub-surface);
  color: var(--hub-ink);
  transition: border-color .15s ease, background .15s ease;
}
.hub-button-primary { border-color: #087b67; background: #087b67; color: #fff; }
.hub-button-primary:hover { border-color: #056451; background: #056451; }
.hub-button-secondary:hover { border-color: var(--hub-teal); background: var(--hub-soft); color: var(--hub-teal); }
.hub-main { max-width: 1240px; margin: 0 auto; padding: 0 30px 28px; }
.hub-loading:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.hub-state { margin: 40px 0 14px; color: var(--hub-muted); }
.hub-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 35px 0 29px;
}
.hub-welcome-copy { max-width: 680px; min-width: 0; }
.hub-eyebrow {
  margin: 0 0 7px;
  color: var(--hub-teal);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hub-welcome h1 { margin: 0; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.18; letter-spacing: -1.4px; }
.hub-intro { margin: 12px 0 0; color: var(--hub-muted); font-size: 15px; max-width: 650px; }
.hub-context { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; max-width: 290px; min-width: 175px; }
.hub-context-label { color: var(--hub-muted); font-size: 11px; font-weight: 650; }
.hub-current-badge {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--hub-soft-line);
  border-radius: 9px;
  background: var(--hub-soft);
  color: var(--hub-teal);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hub-current-badge:empty { display: none; }
.hub-preview {
  position: relative;
  padding: 27px;
  margin-bottom: 38px;
  background: var(--hub-surface);
  border: 1px solid var(--hub-soft-line);
  border-top: 4px solid var(--hub-teal);
  border-radius: 15px;
  box-shadow: var(--hub-shadow);
}
.hub-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.hub-preview-copy { min-width: 0; }
.hub-preview-heading .hub-button { flex-shrink: 0; }
.hub-preview h2, .hub-section-heading h2 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.65px; overflow-wrap: anywhere; }
.hub-preview-examples { margin: 9px 0 0; color: var(--hub-muted); font-size: 13px; }
.hub-preview-note { margin: 20px 0 22px; padding-top: 17px; border-top: 1px solid var(--hub-line); color: var(--hub-muted); font-size: 13px; }
.hub-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.hub-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hub-line);
  border-radius: 11px;
  background: var(--hub-surface);
}
.hub-tool h3 { margin: 0 0 7px; font-size: 15px; line-height: 1.35; font-weight: 750; overflow-wrap: anywhere; }
.hub-tool p { margin: 0 0 14px; color: var(--hub-muted); font-size: 13px; line-height: 1.55; }
.hub-tool-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.hub-tool-link:hover { text-decoration-color: currentColor; }
.hub-tool-status { display: inline-block; margin-top: auto; color: var(--hub-muted); font-size: 11px; font-weight: 650; border: 1px solid var(--hub-line); border-radius: 6px; padding: 4px 9px; }
.hub-tool-empty { grid-column: 1 / -1; margin: 0; color: var(--hub-muted); font-size: 14px; }
.hub-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.hub-section-intro { margin: 8px 0 0; color: var(--hub-muted); font-size: 14px; }
.hub-search-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hub-search-field { width: 100%; max-width: 490px; }
.hub-search-field label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 750; }
.hub-search-box { display: flex; position: relative; align-items: center; min-width: 0; }
.hub-search-icon { position: absolute; left: 15px; color: var(--hub-muted); pointer-events: none; z-index: 1; }
.hub-search-box input {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 12px 48px 12px 45px;
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  color: var(--hub-ink);
  background: var(--hub-surface);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
}
.hub-search-box input::placeholder { color: var(--hub-muted); opacity: 1; }
.hub-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hub-search-clear { position: absolute; right: 3px; width: 44px; height: 44px; border: 0; border-radius: 8px; color: var(--hub-muted); background: transparent; font-size: 26px; line-height: 1; }
.hub-search-clear:hover { color: var(--hub-ink); background: var(--hub-soft); }
.hub-result-count { flex-shrink: 0; margin: 0 0 14px; color: var(--hub-muted); font-size: 12px; }
.hub-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hub-sector {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 214px;
  padding: 21px;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  background: var(--hub-surface);
  color: var(--hub-ink);
  text-align: left;
  box-shadow: var(--hub-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hub-sector:hover { border-color: var(--hub-teal); box-shadow: 0 4px 18px rgba(9, 95, 79, .09); }
.hub-sector.is-current { border-color: var(--hub-soft-line); }
.hub-sector[aria-pressed="true"], .hub-sector[aria-selected="true"], .hub-sector.is-selected, .hub-sector[data-selected="true"] { border-color: var(--hub-teal); box-shadow: inset 0 0 0 1px var(--hub-teal); }
.hub-sector-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 15px; border: 1px solid var(--hub-line); border-radius: 11px; background: var(--hub-surface); font-size: 23px; line-height: 1; }
.hub-sector-title { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 750; line-height: 1.35; letter-spacing: -.15px; overflow-wrap: anywhere; }
.hub-sector-examples { display: block; margin-bottom: 16px; color: var(--hub-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.hub-sector-action { display: block; margin-top: auto; color: var(--hub-teal); font-size: 11px; font-weight: 750; line-height: 1.5; }
.hub-no-results { padding: 40px 24px; border: 1px dashed var(--hub-line); border-radius: 12px; text-align: center; }
.hub-no-results h3 { margin: 0 0 8px; font-size: 18px; }
.hub-no-results p { max-width: 430px; margin: 0 auto; color: var(--hub-muted); font-size: 14px; }
.hub-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--hub-line); color: var(--hub-muted); font-size: 11px; }
.hub-footer > :first-child { font-weight: 700; }
.hub-noscript { max-width: 1180px; margin: 24px auto; padding: 20px; }

@media (max-width: 1050px) {
  .hub-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-preview-heading { align-items: flex-start; }
  .hub-preview-heading .hub-button { max-width: 190px; }
  .hub-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hub-header-inner { padding: 16px 22px; flex-wrap: wrap; gap: 15px; }
  .hub-header-actions { justify-content: flex-start; }
  .hub-main { padding-inline: 22px; }
  .hub-welcome { align-items: flex-start; flex-direction: column; gap: 18px; padding-block: 28px; }
  .hub-context { align-items: flex-start; max-width: none; min-width: 0; }
  .hub-current-badge { text-align: left; }
  .hub-preview { padding: 22px; margin-bottom: 30px; }
  .hub-preview-heading { flex-direction: column; gap: 15px; }
  .hub-preview-heading .hub-button { max-width: none; }
  .hub-section-heading { align-items: flex-start; }
  .hub-section-heading .hub-button { max-width: 155px; }
  .hub-search-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hub-search-field { max-width: none; }
  .hub-result-count { margin: 0; }
  .hub-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hub-sector { padding: 18px; }
}
@media (max-width: 480px) {
  .hub-header-inner { padding: 15px 16px; }
  .hub-brand-camera { width: 44px; height: 44px; flex-basis: 44px; }
  .hub-brand-wordmark { font-size: 23px; }
  .hub-brand-domain { font-size: 10px; }
  .hub-header-actions { width: 100%; gap: 8px; }
  .hub-header-actions .hub-button { flex: 1 1 100%; }
  .hub-main { padding-inline: 16px; }
  .hub-welcome { padding-top: 25px; gap: 16px; }
  .hub-intro { font-size: 14px; }
  .hub-preview { padding: 20px 17px; }
  .hub-preview h2, .hub-section-heading h2 { font-size: 22px; }
  .hub-preview-heading .hub-button { width: 100%; }
  .hub-preview-note { margin-block: 17px; }
  .hub-tools, .hub-sectors { grid-template-columns: minmax(0, 1fr); }
  .hub-tool { padding: 17px; }
  .hub-sector { min-height: 0; padding: 20px; }
  .hub-sector-icon { margin-bottom: 13px; }
  .hub-sector-title { font-size: 16px; }
  .hub-sector-examples { margin-bottom: 15px; font-size: 13px; }
  .hub-sector-action { font-size: 12px; }
  .hub-section-heading { flex-direction: column; gap: 15px; }
  .hub-section-heading .hub-button { width: 100%; max-width: none; }
  .hub-search-box input { font-size: 16px; }
  .hub-footer { flex-direction: column; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .hub-sector[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .hub-button-primary { border: 2px solid ButtonText; }
}