/*
 * Parix.ai | content-gap-checker — page styles. Sits on top of px-kit.css.
 * The generator's own markup, stylesheet and script are untouched; its
 * variables hang off .parix-cg, so re-pointing them here recolours it to the
 * reference palette and drops its old standalone page layout.
 */
.pxcg .parix-cg{
  --primary:#eb600e; --primary-2:#eb600e; --accent:#CF520F; --accent-2:#CF520F;
  --brand:#eb600e; --brand-2:#CF520F;
  --bg:#ffffff; --soft:#fef1ed; --card:#ffffff; --border:rgba(26,21,18,.08);
  --text:#1a1512; --muted:#6f655e; --ink:#1a1512;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(26,21,18,.05),0 24px 48px -28px rgba(26,21,18,.28);
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:1080px; margin:28px auto 0; padding:0; color:#1a1512; text-align:left;
}
.pxcg .parix-cg h2,.pxcg .parix-cg h3{font-family:var(--head)}

/* labels read as labels, not accents (the tools colour them with --primary) */
.pxcg label,.pxcg .lbl,.pxcg legend{color:var(--ink)}
.pxcg label i,.pxcg .lbl i{color:var(--b)}

/* shared visual bits used by the new sections */
.pxcg .bar{height:9px;border-radius:999px;background:#f3e3d8;overflow:hidden}
.pxcg .bar > i{display:block;height:100%;width:var(--w,0%);border-radius:999px;background:var(--b)}
.pxcg .barline{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;
  font-size:12.5px;color:var(--muted);margin-bottom:10px}
.pxcg .barline b{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.pxcg .who a{color:var(--bdd);text-decoration:none;border-bottom:1px solid #f4b58c}
.pxcg .who a:hover{color:var(--b)}

/* The checker's own styles live in the child theme's global stylesheet and hang
 * off --pcg-* variables, so they are re-pointed here, on this page only. The
 * hardcoded purples the variables don't reach are overridden individually. */
.pxcg .parix-cg{
  --pcg-primary:#eb600e; --pcg-primary-dark:#CF520F;
  --pcg-text:#1a1512; --pcg-text-soft:#4a423c; --pcg-text-muted:#6f655e;
  --pcg-border:rgba(26,21,18,.08); --pcg-soft:#fef6f4; --pcg-soft-2:#fef1ed;
  --pcg-radius-sm:12px; --pcg-radius-md:14px; --pcg-radius-lg:18px;
  --pcg-shadow:0 1px 2px rgba(26,21,18,.05),0 24px 48px -28px rgba(26,21,18,.28);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.pxcg .parix-cg__badge{background:#fde7e0}
.pxcg .parix-cg__input:focus,.pxcg .parix-cg__select:focus{box-shadow:0 0 0 4px rgba(235,96,14,.12)}
.pxcg .parix-cg__btn--primary:hover{box-shadow:0 8px 20px rgba(235,96,14,.32)}
.pxcg .parix-cg__gap-count,.pxcg .parix-cg__loading{background:#fef6f4;border-color:#f6ddd0}
.pxcg .parix-cg__spinner{border-color:rgba(235,96,14,.25);border-top-color:#eb600e}
.pxcg .parix-cg__gap-type{background:#fde7e0}
.pxcg .parix-cg__service-card{background:linear-gradient(135deg,#eb600e 0%,#CF520F 100%)}
.pxcg .parix-cg__card-title,.pxcg .parix-cg__section-title,
.pxcg .parix-cg__result-title{font-family:var(--head)}
.pxcg .parix-cg__tool{padding:0}

/* the four-category visual used in the overview */
.pxcg .cat{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  padding:9px 0;border-top:1px solid rgba(26,21,18,.07)}
.pxcg .cat:first-child{border-top:0}
.pxcg .cat span{font-size:14px;color:var(--muted)}
.pxcg .cat b{font:700 14px/1 var(--body);color:var(--bdd);font-variant-numeric:tabular-nums}

/* the score dial */
.pxcg .dial{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.pxcg .dial__t{flex:1 1 130px;min-width:130px}
.pxcg .dial__ring{width:92px;height:92px;border-radius:50%;flex:0 0 92px;display:grid;place-items:center;
  background:conic-gradient(#eb600e 0 81%,#f3e3d8 81% 100%)}
/* the fill is static so it is correct with or without JS; only the card fades in */
.pxcg .dial__ring i{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;
  place-items:center;font:700 22px/1 var(--head);color:#1a1512;font-style:normal}
.pxcg .dial__t b{display:block;font:700 14px/1.4 var(--body);color:var(--ink)}
.pxcg .dial__t span{font-size:13px;color:var(--muted)}
.pxcg .dialq{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);font-style:italic}

/* An older stylesheet for this page (content-gap.css) still hides .rv with an
 * ungated rule, so with JavaScript off every new section stayed invisible.
 * This restores them whenever the kit has not switched animation on; when
 * .js-on is present the kit's own rule takes over and the reveals run. */
.pxcg:not(.js-on) .rv,.pxcg:not(.js-on) .rv-zoom{opacity:1;transform:none}