/* Shared, restrained UI layer for generated rankings and domain reports. */
:root {
  --ui-bg: #f5f7fa;
  --ui-surface: #fff;
  --ui-border: #dce2e9;
  --ui-border-soft: #e9edf2;
  --ui-ink: #17212f;
  --ui-muted: #5b6675;
  --ui-subtle: #778292;
  --ui-blue: #2456a6;
  --ui-blue-soft: #edf3fb;
  --ui-green: #18794e;
  --ui-red: #b42318;
  --ui-radius: 6px;
  --ui-shadow: 0 1px 2px rgb(16 24 40 / 4%);
  font-variant-numeric: tabular-nums;
}

html { background: var(--ui-bg); }
body {
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.5;
}

/* Keep the original ARZHost header and footer; polish their rhythm without
   replacing their navy, white, and magenta brand treatment. */
.arz-header__field { padding-bottom: 32px; }
.arz-header__panel { min-height: 58px; }
.arz-header__menu > li > a,
.arz-header__parent-row > a { min-height: 58px; }
.arz-footer__main { gap: 32px; }
.arz-footer__summary { line-height: 1.5; }
.arz-footer__column h2,
.arz-footer__contact h2 { font-size: 18px; }
.arz-footer__column h2::after,
.arz-footer__contact > h2:first-child::after {
  background: #f40076;
}
.arz-footer__newsletter button:hover,
.arz-footer__newsletter button:focus-visible { background: #f40076; }

.arz-hero-shell {
  background: transparent !important;
  color: var(--ui-muted) !important;
  padding: 14px 0 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
}
.arz-hero-inner { width: min(1170px, calc(100% - 32px)); margin: 0 auto; padding: 0 !important; }
.arz-breadcrumbs { margin: 0 0 8px !important; color: var(--ui-muted) !important; }
.arz-breadcrumbs a,
.arz-breadcrumbs li a { color: #475467 !important; }
.arz-breadcrumbs li.separator { color: #98a2b3 !important; }
.arz-breadcrumbs li[aria-current="page"] { color: var(--ui-ink) !important; }
.arz-breadcrumbs a:hover,
.arz-breadcrumbs a:focus-visible { color: var(--ui-blue) !important; }
.arz-hero-title, .arz-hero-subtitle { display: none !important; }

.main-wrapper, .wrap {
  width: min(1170px, calc(100% - 32px)) !important;
  max-width: 1170px !important;
  margin: 0 auto 56px !important;
  padding: 0 !important;
}
.main-wrapper { padding-top: 6px !important; }
.page-header-section { margin: 0 0 18px !important; }
.page-title, .domain-h1 {
  color: var(--ui-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.18 !important;
}
.page-subtitle { color: var(--ui-muted) !important; font-size: 14px !important; }
.page-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 10px;
  color: var(--ui-subtle);
  font-size: 12px;
}
.page-meta-row a { color: var(--ui-blue); text-decoration: underline; text-underline-offset: 2px; }

.filter-sticky-bar { position: static !important; justify-content: flex-start !important; margin: 0 0 16px !important; }
.filter-controls-card {
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.domain-search-wrap {
  display: flex;
  flex: 1 1 220px;
  min-width: min(100%, 220px);
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
}
.domain-search-wrap:focus-within { border-color: var(--ui-blue); box-shadow: 0 0 0 2px rgb(36 86 166 / 12%); }
.domain-search-wrap svg { flex: 0 0 16px; color: var(--ui-subtle); }
.domain-search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ui-ink); font: inherit; font-size: 13px; }
.mode-switcher { border-radius: 4px !important; background: #f0f2f5 !important; }
.mode-btn { border-radius: 3px !important; min-height: 32px; }
.mode-btn.active { color: var(--ui-ink) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 10%) !important; }
.dropdown-trigger-btn { min-height: 36px; border-radius: var(--ui-radius) !important; background: #fff !important; }
.dropdown-menu-panel { border-radius: var(--ui-radius) !important; box-shadow: 0 8px 24px rgb(16 24 40 / 12%) !important; }

.table-container {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.data-table { font-family: inherit; }
.data-table thead { position: sticky; top: 0; z-index: 3; }
.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: #f5f7fa !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  letter-spacing: .055em !important;
  white-space: nowrap;
}
.data-table th[role="button"] { cursor: pointer; user-select: none; }
.data-table th[role="button"]::after { content: "↕"; margin-left: 7px; color: #98a2b3; font-size: 12px; }
.data-table th[role="button"][aria-sort="ascending"]::after { content: "↑"; color: var(--ui-blue); }
.data-table th[role="button"][aria-sort="descending"]::after { content: "↓"; color: var(--ui-blue); }
.data-table td { border-color: var(--ui-border-soft) !important; }
.table-row:hover { background: #f7f9fc !important; }
.rank-number { color: var(--ui-muted) !important; font-variant-numeric: tabular-nums; }
.site-name, .action-link { color: var(--ui-blue) !important; }
.site-favicon { border: 1px solid var(--ui-border-soft); border-radius: 4px !important; }
.category-tag { background: transparent !important; border: 1px solid var(--ui-border); border-radius: 4px !important; color: var(--ui-muted) !important; padding: 2px 7px !important; font-size: 11px !important; }
.traffic-value { font-variant-numeric: tabular-nums; font-weight: 650 !important; }
.traffic-change { font-variant-numeric: tabular-nums; }
.action-link { padding: 4px 0 !important; background: transparent !important; border-radius: 0 !important; }
.action-link:hover { text-decoration: underline; background: transparent !important; }
.pagination-bar { border-color: var(--ui-border) !important; }
.nav-btn { border-radius: 4px !important; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--ui-blue) !important; outline-offset: 2px; }

/* Domain reports: reduce card decoration and use one consistent ink/blue system. */
.hero-banner, .editorial-card, .pillar-card, .competitor-card, .domain-section, .domain-cta-section {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}
.hero-banner, .editorial-card, .pillar-card, .competitor-card { background: #fff !important; }
.back-nav, .chip, .ed-tag, .pillar-pill { border-radius: 4px !important; box-shadow: none !important; }
.back-nav { background: transparent !important; padding: 0 !important; border: 0 !important; }
.chips-row { gap: 6px !important; }
.chip { background: #f2f4f7 !important; color: var(--ui-muted) !important; border: 1px solid var(--ui-border) !important; }
.chip-rank, .ed-tag { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; border-color: #d8e4f4 !important; }
.metric-val { font-family: inherit !important; font-variant-numeric: tabular-nums; }
.metric-lbl, .box-lbl { color: var(--ui-subtle) !important; }
.pillar-card { border-left: 1px solid var(--ui-border) !important; }
.pillar-pill { background: #edf1f5 !important; color: var(--ui-ink) !important; }
.pp-d, .pp-t, .pp-r { background: #edf1f5 !important; color: var(--ui-ink) !important; }
.progress-fill { background: var(--ui-blue) !important; }
.clean-table th { background: #f5f7fa !important; color: var(--ui-muted) !important; }
.clean-table td { border-color: var(--ui-border-soft) !important; }
.arz-faq-section { max-width: 1170px; margin-inline: auto !important; }
.domain-summary {
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--ui-border);
}
.domain-summary h2 {
  margin: 0 0 7px;
  color: var(--ui-ink);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.domain-summary p {
  max-width: 920px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Pinterest profile: carry the brand red through a clearer, client-facing hierarchy. */
.is-pinterest-page .hero-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px) !important;
  border-color: #e6e8ed !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 100% 0, rgb(230 0 35 / 7%), transparent 34%), #fff !important;
  box-shadow: 0 14px 36px rgb(20 30 50 / 7%) !important;
}
.is-pinterest-page .hero-banner::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: #e60023;
  content: "";
}
.is-pinterest-page .hero-top-row { position: relative; align-items: center; min-height: 0; margin-bottom: 18px; }
.is-pinterest-page .domain-h1 { font-size: clamp(30px, 3.6vw, 42px) !important; font-weight: 750 !important; }
.is-pinterest-page .domain-rating-hero { flex-basis: 146px; padding: 4px 6px; border: 0; background: transparent; }
.is-pinterest-page .domain-rating-gauge { width: 116px; height: 116px; }
.is-pinterest-page .summary-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid #e9eaf0;
}
.is-pinterest-page .summary-bar .metric-col {
  min-width: 0;
  padding: 8px 16px;
  border: 0;
  border-left: 1px solid #e7e9ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.is-pinterest-page .summary-bar .metric-col:first-child { border-left: 3px solid #e60023; }
.is-pinterest-page .metric-lbl { font-size: 10px; letter-spacing: .065em; }
.is-pinterest-page .metric-val { flex-wrap: wrap; font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.is-pinterest-page .domain-summary {
  margin: 22px 0 18px;
  padding: 12px 0 20px 18px;
  border: 0;
  border-left: 4px solid #e60023;
  border-bottom: 1px solid #e8e9ee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.is-pinterest-page .domain-summary h2 { margin-top: 4px; font-size: 22px; }
.pinterest-kicker, .pinterest-card-label { display: block; color: #a6293d; font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.pinterest-profile {
  margin: 22px 0 28px;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid #e8e9ee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pinterest-profile-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 0 0 18px; border-left: 4px solid #e60023; }
.pinterest-profile-heading h2 { margin: 6px 0 5px; color: var(--ui-ink); font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.03em; }
.pinterest-profile-heading p { max-width: 760px; margin: 0; color: var(--ui-muted); font-size: 14px; line-height: 1.6; }
.pinterest-official-link, .pinterest-search-context a { flex: 0 0 auto; color: #b3132c; font-size: 12px; font-weight: 700; text-decoration: none; text-underline-offset: 3px; }
.pinterest-official-link:hover, .pinterest-search-context a:hover { text-decoration: underline; }
.pinterest-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 20px; border-top: 1px solid #e8eaf0; border-bottom: 1px solid #e8eaf0; }
.pinterest-profile-card { min-width: 0; min-height: 0; padding: 18px 17px; border: 0; border-left: 1px solid #e8eaf0; border-radius: 0; background: transparent; }
.pinterest-profile-card:first-child { border-left: 0; }
.pinterest-profile-card h3 { margin: 12px 0 7px; color: var(--ui-ink); font-size: 15px; letter-spacing: -.01em; }
.pinterest-profile-card p { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
.pinterest-step { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #fff0f2; color: #b3132c; font-size: 10px; font-weight: 800; }
.pinterest-audience-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.pinterest-audience-number { margin-top: 8px; color: #c51631; font-size: 36px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.pinterest-card-meta { margin-top: 6px; color: var(--ui-muted); font-size: 11px; }
.pinterest-audience-card a { margin-top: 12px; color: #a6293d; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pinterest-search-context { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 14px 0 0; border-top: 1px solid #e8eaf0; border-radius: 0; background: transparent; }
.pinterest-search-context p { margin: 5px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.55; }
.pinterest-search-context p strong { color: var(--ui-ink); }
.is-pinterest-page .pillar-card { padding: 24px 0 !important; border: 0 !important; border-top: 1px solid #e2e6ed !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.is-pinterest-page .pillar-card:last-child { border-bottom: 1px solid #e2e6ed !important; }
.is-pinterest-page .box-subtle { padding: 10px 16px !important; border: 0 !important; border-left: 1px solid #e2e6ed !important; border-radius: 0 !important; background: transparent !important; }
.is-pinterest-page .box-subtle:first-child { padding-left: 0 !important; border-left: 0 !important; }
.is-pinterest-page .box-lbl { margin-bottom: 7px; }
.is-pinterest-page .box-val { font-size: 20px; }

@media (max-width: 760px) {
  .arz-header__topbar { min-height: 34px; }
  .arz-header__topbar-row { gap: 10px; }
  .arz-header__account-links a + a { margin-left: 16px; }
  .arz-header__account-links a + a::before { left: -8px; }
  .arz-header__panel,
  .arz-header__menu > li > a,
  .arz-header__parent-row > a { min-height: 54px; }
  .arz-header__field { padding-bottom: 20px; }
  .arz-hero-inner, .main-wrapper, .wrap { width: calc(100% - 28px) !important; }
  .main-wrapper { margin-bottom: 36px !important; }
  .filter-sticky-bar { margin-bottom: 12px !important; }
  .filter-controls-card { align-items: stretch; }
  .domain-search-wrap { flex-basis: 100%; }
  .mode-switcher { flex: 1 1 100%; justify-content: stretch; }
  .mode-btn { flex: 1; }
  .dropdown-wrapper { flex: 1 1 calc(50% - 4px); }
  .dropdown-trigger-btn { width: 100%; justify-content: space-between; }
  .dropdown-menu-panel { width: min(300px, calc(100vw - 28px)); left: 0; right: auto; }
  .table-container { overflow: visible !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody { display: grid; gap: 8px; }
  .data-table .table-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: #fff; }
  .data-table td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; font-size: 13px; }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--ui-subtle); font-size: 10px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
  .data-table td.col-rank { grid-column: 2; grid-row: 1; text-align: right; }
  .data-table td.col-website { grid-column: 1; grid-row: 1; }
  .data-table td.col-category { grid-column: 1; grid-row: 2; }
  .data-table td.col-traffic { grid-column: 1; grid-row: 3; }
  .data-table td.col-action { grid-column: 2; grid-row: 3; align-self: end; }
  .data-table td.col-action::before { content: none; }
  .site-cell { gap: 8px; }
  .site-favicon { width: 20px; height: 20px; }
  .site-note { font-size: 11px; }
  .pagination-bar { padding: 12px 0 !important; }
  .hero-banner, .editorial-card, .pillar-card { padding: 18px !important; }
  .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .chart-box, .map-box { max-width: 100%; overflow: hidden; }
  .arz-faq-section { width: calc(100% - 28px); }
  .is-pinterest-page .hero-top-row { min-height: 0; gap: 14px; }
  .is-pinterest-page .domain-rating-hero { flex-basis: 140px; max-width: 140px; margin: 0 auto; }
  .is-pinterest-page .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pinterest-profile-heading { display: block; }
  .pinterest-official-link { display: inline-block; margin-top: 12px; }
  .pinterest-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pinterest-profile-card { border-bottom: 1px solid #e8eaf0; }
  .pinterest-profile-card:nth-child(odd) { border-left: 0; }
  .pinterest-profile-card:nth-last-child(-n+2) { border-bottom: 0; }
  .pinterest-search-context { display: block; }
  .pinterest-search-context a { display: inline-block; margin-top: 10px; }
}

@media (max-width: 520px) {
  .pinterest-profile-grid { grid-template-columns: 1fr; }
  .pinterest-profile-card, .pinterest-profile-card:first-child { padding: 14px 0; border-left: 0; border-bottom: 1px solid #e8eaf0; }
  .pinterest-profile-card:last-child { border-bottom: 0; }
  .is-pinterest-page .summary-bar .metric-col { padding: 13px; }
  .is-pinterest-page .domain-summary { padding: 12px 0 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Compatibility selectors for the legacy shared ranking generator. */
main.container { width: min(1170px, calc(100% - 32px)) !important; max-width: 1170px !important; margin: 0 auto 56px !important; padding: 6px 0 0 !important; }
.top-action-bar { position: static !important; justify-content: flex-start !important; margin: 0 0 16px !important; }
.filter-capsule { display: flex !important; flex-wrap: wrap; width: 100%; gap: 8px !important; padding: 10px !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; background: #fff !important; box-shadow: var(--ui-shadow) !important; }
.mode-toggle { border-radius: 4px !important; background: #f0f2f5 !important; padding: 2px !important; gap: 2px !important; }
.toggle-btn { border-radius: 3px !important; }
.toggle-btn.active { background: #fff !important; color: var(--ui-ink) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 10%) !important; }
.custom-pill-btn { min-height: 36px; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; background: #fff !important; color: var(--ui-ink) !important; }
.custom-dropdown-menu { border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; box-shadow: 0 8px 24px rgb(16 24 40 / 12%) !important; }
.table-card { border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow) !important; overflow: hidden; }
.ahrefs-table { width: 100%; border-collapse: collapse; font-family: inherit; }
.ahrefs-table th { background: #f5f7fa !important; color: var(--ui-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .055em; }
.ahrefs-table td { border-bottom: 1px solid var(--ui-border-soft) !important; }

@media (max-width: 960px) {
  .filter-capsule { align-items: stretch; }
  .filter-capsule .domain-search-wrap { flex-basis: 100%; }
  .ahrefs-table th, .ahrefs-table td { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 760px) {
  main.container { width: calc(100% - 28px) !important; }
  .filter-capsule .mode-toggle { flex: 1 1 100%; }
  .filter-capsule .toggle-btn { flex: 1; }
  .filter-capsule .custom-dropdown-container { flex: 1 1 calc(50% - 4px); }
  .filter-capsule .custom-pill-btn { width: 100%; justify-content: space-between; }
  .table-card { overflow: visible !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .ahrefs-table, .ahrefs-table tbody { display: block; width: 100%; }
  .ahrefs-table thead { display: none; }
  .ahrefs-table tbody { display: grid; gap: 8px; }
  .ahrefs-table .table-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: #fff; }
  .ahrefs-table td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; font-size: 13px; }
  .ahrefs-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--ui-subtle); font-size: 10px; font-weight: 600; text-transform: uppercase; }
  .ahrefs-table td.col-rank { grid-column: 2; grid-row: 1; text-align: right; }
  .ahrefs-table td.col-website { grid-column: 1; grid-row: 1; }
  .ahrefs-table td.col-category { grid-column: 1; grid-row: 2; }
  .ahrefs-table td.col-traffic { grid-column: 1; grid-row: 3; }
  .ahrefs-table td.col-action { grid-column: 2; grid-row: 3; align-self: end; }
  .ahrefs-table td.col-action::before { content: none; }
}

/* Source-backed metric sections used on detail pages that have a captured
   AhrefsTop JSON snapshot but were previously rendered without its data. */
.metric-data-report {
  margin: 0 0 28px;
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.metric-data-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border-soft);
}
.metric-data-eyebrow {
  margin: 0 0 5px;
  color: var(--ui-subtle);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.metric-data-heading h2 { margin: 0; color: var(--ui-ink); font-size: 21px; letter-spacing: -.02em; }
.metric-data-heading p:not(.metric-data-eyebrow) { margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; }
.metric-data-source { color: var(--ui-blue); font-size: 12px; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.metric-data-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--ui-border-soft); }
.metric-data-kpi { min-width: 0; }
.metric-data-kpi dt { color: var(--ui-subtle); font-size: 10px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.metric-data-kpi dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 4px 0 0; color: var(--ui-ink); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-data-kpi dd.traffic { color: var(--ui-blue); }
.metric-data-kpi dd.backlinks { color: var(--ui-green); }
.metric-data-kpi dd .metric-data-change { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.domain-rating-hero { display: flex; flex: 0 0 150px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-left: auto; text-align: center; }
.domain-rating-title { color: #64748b; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.domain-rating-gauge { position: relative; display: grid; width: 116px; height: 116px; place-items: center; }
.domain-rating-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.domain-rating-track, .domain-rating-progress { fill: none; stroke-width: 8; }
.domain-rating-track { stroke: #edf2f7; }
.domain-rating-progress { stroke: url(#domain-rating-gradient); stroke-linecap: round; }
.domain-rating-value { color: #10223e; font-size: 32px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.domain-rating-status { color: #079669; font-size: 12px; font-weight: 750; line-height: 1.25; }
.metric-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.metric-data-panel { min-width: 0; padding: 15px; border: 1px solid var(--ui-border-soft); border-radius: 4px; background: #fff; }
.metric-data-panel h3 { margin: 0; color: var(--ui-ink); font-size: 14px; font-weight: 650; }
.metric-data-panel > p { margin: 3px 0 8px; color: var(--ui-subtle); font-size: 11px; }
.metric-chart-wrap { position: relative; width: 100%; height: 220px; margin-top: 8px; }
.metric-chart-wrap .metric-chart-canvas { display: block; width: 100%; height: 100% !important; }
.chart-box canvas, .metric-chart-canvas { cursor: crosshair; }
.metric-chart-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.metric-chart-grid { stroke: var(--ui-border-soft); stroke-width: 1; }
.metric-chart-area { fill: #2456a6; fill-opacity: .08; }
.metric-chart-line { fill: none; stroke: #2456a6; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.metric-data-grid .metric-data-panel:nth-child(2) .metric-chart-area { fill: #18794e; fill-opacity: .08; }
.metric-data-grid .metric-data-panel:nth-child(2) .metric-chart-line { stroke: #18794e; }
.metric-chart-dot { fill: #2456a6; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.metric-data-grid .metric-data-panel:nth-child(2) .metric-chart-dot { fill: #18794e; }
.metric-chart-labels { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-subtle); font-size: 10px; font-variant-numeric: tabular-nums; }
.metric-data-table-wrap { width: 100%; overflow-x: auto; margin-top: 8px; }
.metric-data-table-wrap table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12px; }
.metric-data-table-wrap th { padding: 8px 7px; background: #f5f7fa; color: var(--ui-muted); font-size: 10px; font-weight: 650; letter-spacing: .035em; text-align: left; text-transform: uppercase; }
.metric-data-table-wrap td { padding: 8px 7px; border-bottom: 1px solid var(--ui-border-soft); color: var(--ui-ink); vertical-align: top; }
.metric-data-table-wrap tbody tr:last-child td { border-bottom: 0; }
.metric-data-table-wrap td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.metric-data-table-wrap a { color: var(--ui-blue); text-decoration: none; }
.metric-data-table-wrap a:hover { text-decoration: underline; text-underline-offset: 2px; }
.metric-data-empty, .metric-data-empty-cell { color: var(--ui-subtle) !important; font-size: 12px !important; }
.metric-data-competitors { margin-top: 16px; }
.metric-data-note { margin: 12px 0 0; color: var(--ui-subtle); font-size: 10px; }

@media (max-width: 760px) {
  .metric-data-report { padding: 15px; }
  .metric-data-heading { display: block; }
  .metric-data-source { display: inline-block; margin-top: 9px; }
  .metric-data-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .metric-data-kpi dd { font-size: 18px; }
  .domain-rating-hero { flex-basis: 100%; margin: 8px auto 0; }
  .domain-rating-gauge { width: 108px; height: 108px; }
  .metric-data-grid { grid-template-columns: 1fr; }
  .metric-chart-wrap { height: 185px; }
  .metric-data-panel { padding: 12px; }
}

/* Domain report layout: place key metrics first, then guide readers through
   traffic, audience, and search visibility in calm, scannable panels. */
body:not(.is-pinterest-page) .wrap {
  width: min(1120px, calc(100% - 36px)) !important;
  margin-top: 24px !important;
}
body:not(.is-pinterest-page) .back-nav {
  margin: 0 0 14px !important;
  color: #596579 !important;
  font-size: 12px !important;
}
body:not(.is-pinterest-page) .hero-banner,
body:not(.is-pinterest-page) .editorial-card,
body:not(.is-pinterest-page) .pillar-card {
  border: 1px solid #e2e7ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgb(16 24 40 / 4%) !important;
}
body:not(.is-pinterest-page) .hero-banner {
  margin-bottom: 16px !important;
  padding: 24px 28px !important;
}
body:not(.is-pinterest-page) .hero-top-row { margin-bottom: 16px !important; }
body:not(.is-pinterest-page) .domain-rating-hero { flex-basis: 112px !important; }
body:not(.is-pinterest-page) .domain-rating-gauge { width: 88px !important; height: 88px !important; }
body:not(.is-pinterest-page) .domain-rating-value { font-size: 26px !important; }
body:not(.is-pinterest-page) .domain-rating-status { font-size: 11px !important; }
body:not(.is-pinterest-page) .summary-bar { gap: 0 !important; padding-top: 16px !important; }
body:not(.is-pinterest-page) .summary-bar .metric-col { padding: 4px 16px !important; border-left: 1px solid #e9edf2; }
body:not(.is-pinterest-page) .summary-bar .metric-col:first-child { padding-left: 0 !important; border-left: 0; }
body:not(.is-pinterest-page) .metric-val { font-size: clamp(18px, 2vw, 23px) !important; }
body:not(.is-pinterest-page) .domain-summary {
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  border-bottom-color: #e2e7ee !important;
}
body:not(.is-pinterest-page) .domain-summary h2 { margin-bottom: 5px !important; font-size: 17px !important; }
body:not(.is-pinterest-page) .domain-summary p { max-width: 850px; font-size: 13px !important; line-height: 1.6 !important; }
body:not(.is-pinterest-page) .dtr-stack { gap: 16px !important; margin-top: 0 !important; }
body:not(.is-pinterest-page) .pillar-card.pillar-d { display: none !important; }
body .wrap .pillar-card.pillar-d { display: none !important; }
body:not(.is-pinterest-page) .pillar-card { padding: 24px 26px !important; border-left: 1px solid #e2e7ee !important; }
body:not(.is-pinterest-page) .pillar-head {
  gap: 0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
}
body:not(.is-pinterest-page) .pillar-pill { display: none !important; }
body:not(.is-pinterest-page) .pillar-title-block h2 {
  color: #17212f !important;
  font-size: 19px !important;
  letter-spacing: -.025em !important;
}
body:not(.is-pinterest-page) .pillar-title-block p { color: #697586 !important; font-size: 12px !important; }
body:not(.is-pinterest-page) .pillar-card h3 {
  margin: 0 0 8px !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
body:not(.is-pinterest-page) .pillar-card .chart-box { height: 270px !important; margin-top: 6px !important; }
body:not(.is-pinterest-page) .pillar-card.pillar-t > div:not(.pillar-head),
body:not(.is-pinterest-page) .pillar-card.pillar-r > div:not(.pillar-head) {
  padding-top: 16px;
  border-top: 1px solid #edf0f4;
}
body:not(.is-pinterest-page) .pillar-card.pillar-t > div:not(.pillar-head) + div,
body:not(.is-pinterest-page) .pillar-card.pillar-r > div:not(.pillar-head) + div {
  margin-top: 18px !important;
}
body:not(.is-pinterest-page) .pillar-card .map-box {
  min-height: 270px;
  height: 270px !important;
  border-color: #edf0f4 !important;
  border-radius: 8px !important;
  background: #fafbfd !important;
}
body:not(.is-pinterest-page) .pillar-card > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: 20px !important;
  margin-top: 22px !important;
}
body:not(.is-pinterest-page) .table-responsive { margin-top: 8px !important; }
body:not(.is-pinterest-page) .clean-table { font-size: 12px !important; }
body:not(.is-pinterest-page) .clean-table th { padding: 10px 12px !important; background: #f7f8fa !important; }
body:not(.is-pinterest-page) .clean-table td { padding: 10px 12px !important; }
body:not(.is-pinterest-page) .comp-chip {
  border-radius: 6px !important;
  background: #f8f9fb !important;
  border-color: #e7eaf0 !important;
}
body:not(.is-pinterest-page) .arz-faq-section { margin-top: 24px !important; }

@media (max-width: 760px) {
  body:not(.is-pinterest-page) .wrap { width: calc(100% - 28px) !important; margin-top: 16px !important; }
  body:not(.is-pinterest-page) .hero-banner { padding: 18px !important; }
  body:not(.is-pinterest-page) .summary-bar .metric-col { padding: 8px 10px !important; }
  body:not(.is-pinterest-page) .summary-bar .metric-col:nth-child(odd) { border-left: 0; }
  body:not(.is-pinterest-page) .pillar-card { padding: 18px !important; }
  body:not(.is-pinterest-page) .pillar-card .chart-box { height: 220px !important; }
  body:not(.is-pinterest-page) .pillar-card .map-box { height: 230px !important; min-height: 230px; }
}

/* Keep the Pinterest detail page on the same clear report-card rhythm. */
.is-pinterest-page .pillar-card.pillar-t,
.is-pinterest-page .pillar-card.pillar-r {
  padding: 24px 26px !important;
  border: 1px solid #e2e7ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgb(16 24 40 / 4%) !important;
}
.is-pinterest-page .pillar-card.pillar-d { display: none !important; }
.is-pinterest-page .pillar-card .pillar-head { gap: 0 !important; margin-bottom: 18px !important; padding-bottom: 14px !important; }
.is-pinterest-page .pillar-card .pillar-pill { display: none !important; }
.is-pinterest-page .pillar-card .pillar-title-block h2 { font-size: 19px !important; }
.is-pinterest-page .pillar-card .pillar-title-block p { font-size: 12px !important; }
.is-pinterest-page .pillar-card .chart-box { height: 270px !important; }
@media (max-width: 760px) {
  .is-pinterest-page .pillar-card.pillar-t,
  .is-pinterest-page .pillar-card.pillar-r { padding: 18px !important; }
  .is-pinterest-page .pillar-card .chart-box { height: 220px !important; }
}

.traffic-chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 6px 0 10px;
}
.traffic-chart-series, .traffic-chart-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.traffic-series-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e3e7ed;
  border-radius: 7px;
  background: #fff;
  color: #667085;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.traffic-series-toggle.is-active { color: #344054; border-color: #d8dee8; background: #f9fafb; }
.traffic-series-toggle[hidden] { display: none; }
.traffic-series-dot { width: 9px; height: 9px; border-radius: 50%; background: #f25b12; }
.traffic-series-dot-value { background: #20a66a; }
.traffic-chart-filters label:not(.traffic-compare-toggle) { display: grid; gap: 2px; color: #7a8493; font-size: 10px; font-weight: 650; }
.traffic-chart-filters select {
  min-height: 34px;
  padding: 5px 28px 5px 10px;
  border: 1px solid #e3e7ed;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font: inherit;
  font-size: 12px;
}
.traffic-compare-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0 4px; color: #596579; font-size: 11px; cursor: pointer; }
.traffic-compare-toggle input { accent-color: #2456a6; }
.traffic-compare-toggle input:disabled + span { opacity: .5; }
@media (max-width: 760px) {
  .traffic-chart-controls { align-items: flex-start; }
  .traffic-chart-filters { width: 100%; }
  .traffic-chart-filters label:not(.traffic-compare-toggle) { flex: 1 1 100px; }
  .traffic-chart-filters select { width: 100%; }
  .traffic-compare-toggle { margin-top: 8px; }
}