/* OFB-R001-P4-S6 — unified SaaS shell, stable report tabs, and static-page polish. */

:root {
  --p4-accent: #164a8a;
  --p4-accent-strong: #0b2f5b;
  --p4-accent-soft: #e9f1fc;
  --p4-navy: #071d3d;
  --p4-navy-raised: #0d2c57;
  --p4-page: #f3f6fa;
  --p4-surface: #ffffff;
  --p4-border: #d7e0ec;
  --p4-border-strong: #bdcadb;
  --p4-text: #0b1d37;
  --p4-muted: #586a82;
  --p4-shadow-sm: 0 8px 24px rgb(11 47 91 / 7%);
  --p4-shadow-md: 0 20px 56px rgb(11 47 91 / 13%);
  --color-accent: var(--p4-accent);
  --color-accent-hover: var(--p4-accent-strong);
  --color-accent-soft: var(--p4-accent-soft);
  --color-ink: var(--p4-text);
  --color-ink-raised: var(--p4-navy-raised);
  --color-ink-soft: #173b68;
  --button-primary-bg: var(--p4-accent-strong);
  --button-primary-bg-hover: #061f3f;
  --focus-ring-color: #2868b2;
  --focus-ring: 0 0 0 4px rgb(40 104 178 / 22%);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgb(22 74 138 / 5%), transparent 30rem),
    var(--p4-page);
}

/* Product header */
.site-header {
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--p4-border);
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 5px 20px rgb(7 29 61 / 6%);
  backdrop-filter: blur(18px);
}

.site-header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-strong), var(--color-accent));
}

.site-header__inner {
  max-width: 1440px;
  min-height: 72px;
  padding-inline: clamp(18px, 3vw, 40px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-header__brand {
  gap: 12px;
}

.site-header__brand-mark,
.site-footer__brand-mark {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  background: linear-gradient(145deg, #123e74, var(--p4-accent-strong));
  color: #fff;
  box-shadow: 0 8px 20px rgb(11 47 91 / 22%);
}

.site-header__brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.site-header__brand-name {
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.015em;
}

.site-header__descriptor {
  color: var(--p4-muted);
  font-size: .69rem;
  font-weight: var(--font-weight-medium);
}

.site-header__nav a:not(.site-header__cta),
.site-header__nav .site-header__signout {
  gap: 6px;
  color: #3f5168;
  font-size: .85rem;
  font-weight: var(--font-weight-medium);
}

.site-header__nav a:not(.site-header__cta):hover,
.site-header__nav a:not(.site-header__cta)[aria-current='page'],
.site-header__nav .site-header__signout:hover {
  background: var(--p4-accent-soft);
  color: var(--p4-accent-strong);
}

.site-header__cta {
  gap: 8px;
  border-color: var(--p4-accent-strong) !important;
  background: var(--p4-accent-strong) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgb(11 47 91 / 18%);
}

.site-header__cta:hover {
  background: #061f3f !important;
}

.site-header__cta-label--short {
  display: none;
}

.site-header__menu summary {
  border-color: var(--p4-border-strong);
  border-radius: 10px;
  color: var(--p4-accent-strong);
  box-shadow: 0 4px 12px rgb(11 47 91 / 7%);
}

.site-header__menu nav {
  border-color: var(--p4-border);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgb(7 29 61 / 18%);
}

.site-header__menu a,
.site-header__menu .site-header__signout {
  gap: 11px;
  border-radius: 9px;
}

.site-header__menu-link-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: var(--p4-accent-soft);
  color: var(--p4-accent-strong);
}

body.has-active-report .site-header__cta {
  border-color: var(--p4-border-strong) !important;
  background: #fff !important;
  color: var(--p4-accent-strong) !important;
  box-shadow: none;
}

/* Shared static-page presentation */
.content-hub:not(.live-audit) {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
}

.content-hub:not(.live-audit) > .content-hub__header {
  position: relative;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  padding: clamp(34px, 5.5vw, 72px);
  border: 1px solid var(--p4-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgb(22 74 138 / 14%), transparent 24rem),
    linear-gradient(135deg, #fff, #edf3fb);
  box-shadow: var(--p4-shadow-md);
}

.content-hub:not(.live-audit) > .content-hub__header::after {
  position: absolute;
  z-index: -1;
  right: clamp(-60px, -4vw, -24px);
  bottom: clamp(-90px, -7vw, -50px);
  width: clamp(190px, 24vw, 340px);
  aspect-ratio: 1;
  border: 1px solid rgb(22 74 138 / 12%);
  border-radius: 50%;
  background: rgb(255 255 255 / 36%);
  content: '';
}

.content-hub:not(.live-audit) > .content-hub__header h1 {
  max-width: 22ch;
  margin-bottom: 18px;
  color: var(--p4-text);
  font-size: var(--type-scale-page-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
}

.content-hub:not(.live-audit) > .content-hub__header > p:not(.eyebrow, .content-freshness) {
  max-width: 64ch;
  color: var(--p4-muted);
  font-size: var(--type-scale-lead);
  line-height: var(--line-height-body);
}

.content-hub:not(.live-audit) .eyebrow,
.content-hub:not(.live-audit) .section-kicker {
  color: var(--p4-accent);
  font-weight: var(--font-weight-bold);
}

.content-freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: fit-content;
  margin-top: 22px !important;
  padding: 9px 13px;
  border: 1px solid #c8d8ec;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  color: var(--p4-accent-strong) !important;
  font-size: .8rem !important;
}

.feature-card,
.resource-card,
.about-stewardship,
.methodology-release,
.registry-controls,
.guide-controls,
.table-scroll,
article.container-narrow,
.content-meta {
  border-color: var(--p4-border);
  background: #fff;
  box-shadow: var(--p4-shadow-sm);
}

.feature-card,
.resource-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--p4-shadow-sm);
}

.feature-card::after,
.resource-card::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--p4-accent), transparent 75%);
  content: '';
  opacity: .85;
}

.feature-card:hover,
.resource-card:hover {
  border-color: #b7c7db;
  box-shadow: var(--p4-shadow-md);
  transform: translateY(-3px);
}

.feature-card--icon-led,
.guide-card,
.methodology-card {
  display: grid;
  align-content: start;
}

.feature-card__icon,
.resource-card__icon,
.section-icon,
.section-icon-heading > span,
.registry-controls__heading > span,
.cta-panel__icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--p4-accent-soft);
  color: var(--p4-accent-strong);
}

.feature-card__icon,
.resource-card__icon,
.section-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.feature-card__icon--access,
.resource-card__icon--access { background: #e7f5ed; color: #167446; }
.feature-card__icon--evidence,
.resource-card__icon--content { background: #fff2dc; color: #925400; }
.feature-card__icon--verify,
.resource-card__icon--verification { background: #e7f4f5; color: #176c76; }
.resource-card__icon--identity { background: #f0ebfa; color: #63449a; }
.resource-card__icon--structure,
.resource-card__icon--guide,
.resource-card__icon--methodology,
.resource-card__icon--crawler { background: var(--p4-accent-soft); color: var(--p4-accent-strong); }

.feature-card__overline {
  margin: 0 0 7px !important;
  color: var(--p4-accent) !important;
  font-size: .72rem !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-card h3,
.resource-card h2,
.resource-card h3 {
  color: var(--p4-text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.feature-card p,
.resource-card p {
  color: var(--p4-muted);
  line-height: 1.6;
}

.resource-card__meta {
  color: #718198 !important;
  font-size: .72rem !important;
  line-height: 1.45;
}

.resource-card h2 a,
.resource-card h3 a {
  color: var(--p4-text);
}

.resource-card h2 a::after,
.resource-card h3 a::after {
  color: var(--p4-accent);
}

.start-here-card {
  grid-template-columns: auto minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 24px;
  align-items: start;
  padding: clamp(26px, 4vw, 44px);
  border-color: #b9cae0;
  background: linear-gradient(135deg, #fff, #edf4fd);
}

.start-here-card__path {
  border-color: #c8d7ea;
  background: rgb(255 255 255 / 78%);
}

.start-here-card__path strong,
.section-icon-heading,
.methodology-release__copy,
.registry-controls__heading,
.crawler-record__heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.guide-card__dimensions span {
  border: 1px solid #c9d7ea;
  background: var(--p4-accent-soft);
  color: var(--p4-accent-strong);
}

.guide-card__meta,
.stewardship-grid,
.methodology-release dl,
.crawler-record dl {
  border-color: var(--p4-border);
}

.guide-controls,
.registry-controls {
  padding: 22px;
  border: 1px solid var(--p4-border);
  border-radius: 16px;
}

.registry-controls__heading {
  grid-column: 1 / -1;
  color: var(--p4-text);
}

.registry-controls__heading > span {
  width: 38px;
  height: 38px;
  margin: 0;
}

.registry-results {
  color: var(--p4-muted);
  font-weight: var(--font-weight-medium);
}

.table-scroll {
  overflow: hidden;
  border-radius: 16px;
}

.table-scroll th {
  background: #eaf1fa;
  color: var(--p4-accent-strong);
  font-weight: var(--font-weight-bold);
}

.table-scroll tbody tr:hover {
  background: #f7faff;
}

.crawler-record__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.crawler-record__heading .resource-card__icon {
  width: 40px;
  height: 40px;
  margin: 0;
}

.crawler-record__heading h2 {
  margin: 0;
}

.methodology-release,
.about-stewardship {
  padding: clamp(26px, 4.5vw, 52px);
  border: 1px solid var(--p4-border);
  border-radius: 20px;
}

.methodology-release {
  background:
    radial-gradient(circle at 100% 0%, rgb(22 74 138 / 12%), transparent 22rem),
    #fff;
}

.methodology-release__copy {
  align-items: flex-start;
}

.methodology-release__copy .section-icon {
  flex: 0 0 auto;
}

.methodology-release h2,
.about-stewardship h2 {
  margin-top: 0;
  color: var(--p4-text);
}

.section-icon-heading {
  align-items: flex-start;
}

.section-icon-heading > span {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.stewardship-grid dt,
.methodology-release dt,
.crawler-record dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p4-accent-strong);
}

article.container-narrow {
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--p4-border);
  border-radius: 20px;
}

article.container-narrow > h1 {
  color: var(--p4-text);
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  letter-spacing: -.035em;
}

article.container-narrow h2 {
  color: var(--p4-text);
}

.cta-panel {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: var(--space-8);
  border-color: rgb(255 255 255 / 10%);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgb(54 112 191 / 24%), transparent 20rem),
    linear-gradient(145deg, var(--p4-navy-raised), var(--p4-navy));
  box-shadow: var(--p4-shadow-md);
}

.cta-panel__icon {
  width: 52px;
  height: 52px;
  background: rgb(255 255 255 / 9%);
  color: #d9e9ff;
}

/* Stable report navigation and richer capability rows */
.unified-report__nav {
  position: sticky;
  top: 76px;
  z-index: 24;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--p4-border);
  border-radius: 13px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 10px 28px rgb(7 29 61 / 9%);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.unified-report__nav::-webkit-scrollbar {
  display: none;
}

.unified-report__nav button {
  display: inline-flex;
  min-width: max-content;
  min-height: 42px;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 9px;
  padding: 8px 13px;
  background: transparent;
  color: #50627a;
  box-shadow: none;
  font-size: .83rem;
  font-weight: var(--font-weight-bold);
  transform: none;
}

.unified-report__nav button:hover {
  background: #f0f5fb;
  color: var(--p4-accent-strong);
  transform: none;
}

.unified-report__nav button[aria-selected='true'] {
  background: var(--p4-accent-strong);
  color: #fff;
  box-shadow: 0 7px 16px rgb(11 47 91 / 18%);
}

.unified-report__nav button svg {
  flex: 0 0 auto;
}

[data-report-summary-panel][hidden],
[data-report-detail][hidden] {
  display: none !important;
}

[data-report-detail] {
  margin-top: 0;
  scroll-margin-top: 138px;
}

.back-to-summary {
  display: none;
}

.unified-capability {
  grid-template-columns: auto minmax(88px, .55fr) minmax(120px, 1fr) 112px;
  border-radius: 9px;
  padding-inline: 8px;
}

.unified-capability__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--p4-neutral-soft);
  color: var(--p4-neutral);
}

.unified-capability--strong .unified-capability__icon { background: var(--p4-green-soft); color: var(--p4-green); }
.unified-capability--opportunity .unified-capability__icon { background: var(--p4-amber-soft); color: var(--p4-amber); }
.unified-capability--needs-attention .unified-capability__icon,
.unified-capability--critical .unified-capability__icon { background: var(--p4-red-soft); color: var(--p4-red); }

.unified-capability small {
  grid-column: 2 / -1;
}

/* SaaS footer */
.site-footer {
  margin-top: clamp(56px, 7vw, 100px);
  border-top: 0;
  background:
    radial-gradient(circle at 12% -10%, rgb(58 116 194 / 28%), transparent 25rem),
    linear-gradient(155deg, var(--p4-navy-raised), var(--p4-navy));
  color: #d7e2f1;
}

.site-footer__inner {
  max-width: 1320px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: clamp(48px, 6vw, 78px) clamp(20px, 4vw, 48px) 28px;
  color: #b9c8dc;
}

.site-footer__product {
  display: grid;
  align-content: start;
  gap: 20px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.site-footer__brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 13px;
}

.site-footer__brand strong,
.site-footer__nav strong,
.site-footer__audit-cta strong {
  color: #fff;
}

.site-footer__brand strong {
  font-size: 1.13rem;
}

.site-footer__brand p,
.site-footer__audit-cta p {
  margin: 3px 0 0;
  color: #aebfd5;
}

.site-footer__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer__proof span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: #cbd8e8;
  font-size: .72rem;
}

.site-footer__audit-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 16px;
  background: rgb(255 255 255 / 6%);
}

.site-footer__audit-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: rgb(255 255 255 / 9%);
  color: #d9e9ff;
}

.site-footer__audit-cta .button {
  min-height: 44px;
  gap: 8px;
  border-color: #fff;
  background: #fff;
  color: var(--p4-accent-strong);
  box-shadow: none;
}

.site-footer__audit-cta .button:hover {
  border-color: #dbe7f7;
  background: #eaf2fd;
  color: var(--p4-accent-strong);
}

.site-footer__nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-top: 34px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.site-footer__nav > div {
  gap: 8px;
}

.site-footer__nav strong {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}

.site-footer__nav a {
  color: #aebfd5;
}

.site-footer__nav a:hover {
  color: #fff;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.site-footer__legal,
.site-footer__meta {
  margin: 0;
  color: #8fa3bd;
  font-size: .74rem;
}

.site-footer__meta {
  display: flex;
  gap: 8px;
}

.site-footer__meta a {
  color: #b9c9dc;
  text-decoration: none;
}

@media (max-width: 980px) {
  .start-here-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .start-here-card__path {
    grid-column: 1 / -1;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__audit-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .site-footer__audit-cta .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .site-header__inner {
    min-height: 64px;
    padding-inline: 12px;
  }

  .site-header__brand-copy {
    display: grid;
  }

  .site-header__descriptor {
    display: none;
  }

  .site-header__brand-name {
    font-size: .94rem;
  }

  .site-header__brand-mark {
    width: 38px;
    height: 38px;
  }

  .site-header__cta-label--full {
    display: none;
  }

  .site-header__cta-label--short {
    display: inline;
  }

  .site-header__mobile-actions {
    gap: 7px;
  }

  .site-header__mobile-actions > .site-header__cta {
    padding-inline: 11px;
  }

  .content-hub:not(.live-audit) > .content-hub__header {
    padding: 32px 24px;
    border-radius: 18px;
  }

  .start-here-card {
    grid-template-columns: 1fr;
  }

  .start-here-card > .resource-card__icon {
    margin-bottom: 0;
  }

  .start-here-card__path {
    grid-column: auto;
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .unified-report__nav {
    top: 64px;
    margin-inline: -4px;
  }

  .unified-capability {
    grid-template-columns: auto minmax(72px, .7fr) minmax(80px, 1fr) minmax(84px, auto);
    gap: 8px;
  }

  .unified-capability__icon {
    width: 30px;
    height: 30px;
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  .site-header__brand-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header__mobile-actions > .site-header__cta {
    min-width: 0;
    padding-inline: 9px;
  }

  .site-header__mobile-actions > .site-header__cta svg {
    display: none;
  }

  .content-hub:not(.live-audit) > .content-hub__header {
    padding: 28px 20px;
  }

  .feature-card,
  .resource-card,
  .methodology-release,
  .about-stewardship,
  article.container-narrow {
    border-radius: 14px;
  }

  .crawler-record__heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crawler-record__heading .registry-status {
    grid-column: 2;
    justify-self: start;
  }

  .unified-report__nav button {
    padding-inline: 11px;
  }

  .unified-capability {
    grid-template-columns: auto minmax(66px, .75fr) minmax(54px, 1fr) minmax(78px, auto);
  }

  .unified-capability small {
    grid-column: 1 / -1;
    padding-left: 38px;
  }

  .site-footer__audit-cta {
    grid-template-columns: 1fr;
  }

  .site-footer__audit-icon {
    width: 40px;
    height: 40px;
  }

  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }
}

@media print {
  .site-footer,
  .site-header,
  .unified-report__nav {
    display: none !important;
  }
}