/* Privacy-First Analytics portal — inherits site template tokens (NovaFrame / Cassiopeia / Helix)
   Card surfaces are always light with dark ink so copy stays readable when the page/theme is dark. */
.pfa-portal {
  --pfa-ink: var(--nf-body-text, var(--body-color, var(--color-fg, #1a1a1a)));
  --pfa-muted: var(--imp-muted, var(--muted-color, var(--sh-text-muted, #64748b)));
  --pfa-heading: var(--nf-body-text, var(--heading-color, var(--pfa-ink)));
  /* Light cards + dark type (do not inherit light-on-dark --imp-fg onto white surfaces) */
  --pfa-card-bg: #ffffff;
  --pfa-card-ink: #1a1a1a;
  --pfa-card-heading: #1a1a1a;
  --pfa-card-muted: #1a1a1a;
  --pfa-surface: var(--pfa-card-bg);
  --pfa-bg: var(--imp-bg, var(--nf-body-bg, var(--body-bg, transparent)));
  --pfa-line: var(--imp-border, var(--sh-border, rgba(15, 23, 42, .12)));
  --pfa-link: var(--imp-link, var(--nf-link, var(--link-color, #0288d1)));
  --pfa-accent: var(--imp-accent, var(--nf-accent, #deff85));
  --pfa-brand: var(--nf-header, var(--template-bg-color, #0288d1));
  --pfa-brand-fg: var(--nf-header-text, #fff);
  --pfa-font: var(--nf-font-body, var(--body-font-family, inherit));
  --pfa-font-display: var(--nf-font-display, var(--pfa-font));
  --pfa-radius: var(--sh-radius, .75rem);
  color: var(--pfa-ink);
  font-family: var(--pfa-font);
  margin: 0 0 2.5rem;
  background: transparent;
  padding: 0;
  border: 0;
}

.pfa-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Hero: template brand colors — keep light text on dark brand band */
.pfa-hero-land {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--pfa-radius) + 4px);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  margin: 0 0 2rem;
  color: var(--pfa-brand-fg);
  background:
    radial-gradient(900px 360px at 88% -10%, color-mix(in srgb, var(--pfa-accent) 35%, transparent), transparent 58%),
    linear-gradient(125deg, var(--pfa-brand) 0%, color-mix(in srgb, var(--pfa-brand) 72%, #0f172a) 100%);
}
.pfa-hero-land::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 40%;
  height: 70%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pfa-accent) 28%, transparent), transparent 68%);
  pointer-events: none;
}
.pfa-hero-land > * { position: relative; z-index: 1; }

.pfa-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 650;
  margin: 0 0 .85rem;
  color: color-mix(in srgb, var(--pfa-brand-fg) 88%, var(--pfa-accent));
}
.pfa-hero-land h1 {
  margin: 0 0 .7rem;
  font-family: var(--pfa-font-display);
  font-size: clamp(2rem, 4.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--pfa-brand-fg);
}
.pfa-lead {
  margin: 0 0 1.4rem;
  max-width: 38rem;
  line-height: 1.5;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--pfa-brand-fg) 92%, transparent);
}

.pfa-cta { display: flex; flex-wrap: wrap; gap: .65rem; }
.pfa-btn {
  appearance: none;
  border: 0;
  background: var(--pfa-accent);
  color: #0f172a;
  font-weight: 700;
  font-family: inherit;
  border-radius: calc(var(--pfa-radius) + 2px);
  padding: .7rem 1.2rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.pfa-btn:hover { filter: brightness(1.05); text-decoration: none; color: #0f172a; }
.pfa-btn-ghost {
  background: transparent;
  color: var(--pfa-brand-fg);
  border: 1px solid color-mix(in srgb, var(--pfa-brand-fg) 55%, transparent);
}
.pfa-btn-ghost:hover { color: var(--pfa-brand-fg); background: color-mix(in srgb, var(--pfa-brand-fg) 10%, transparent); }
.pfa-hero-land .pfa-btn-ghost { color: var(--pfa-brand-fg); }

/* Sections (page chrome — follows template body text) */
.pfa-section { margin: 0 0 2.25rem; }
.pfa-section > h2 {
  margin: 0 0 .5rem;
  font-family: var(--pfa-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  color: var(--pfa-heading);
  letter-spacing: -.01em;
}
.pfa-section > .pfa-section-lead {
  margin: 0 0 1.15rem;
  max-width: 40rem;
  color: var(--pfa-muted);
  line-height: 1.5;
}

.pfa-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
}
.pfa-pillars article,
.pfa-panel,
.pfa-cards li,
.pfa-grids > div,
.pfa-compare article,
.pfa-feature-list li {
  background: var(--pfa-card-bg) !important;
  border: 1px solid var(--pfa-line);
  border-radius: calc(var(--pfa-radius) + 4px);
  padding: 1.15rem 1.25rem;
  color: var(--pfa-card-ink) !important;
}
.pfa-pillars h2,
.pfa-pillars h3,
.pfa-compare h3 {
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  color: var(--pfa-card-heading) !important;
}
.pfa-pillars p,
.pfa-compare p {
  color: var(--pfa-card-muted) !important;
  margin: 0;
  line-height: 1.45;
  font-size: .95rem;
}
.pfa-muted { color: var(--pfa-muted); margin: 0; line-height: 1.45; font-size: .95rem; }

.pfa-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pfa-compare .pfa-compare-pro {
  border-color: color-mix(in srgb, var(--pfa-link) 35%, var(--pfa-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pfa-link) 12%, transparent);
}
.pfa-compare ul {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--pfa-card-ink) !important;
  line-height: 1.45;
  font-size: .92rem;
}
.pfa-compare li {
  margin: .45rem 0;
  padding-left: 1.55rem;
  position: relative;
  color: var(--pfa-card-ink) !important;
}
.pfa-compare li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pfa-link) 18%, #fff) center / .65rem no-repeat;
}
.pfa-compare-pro li::before {
  background-color: color-mix(in srgb, #059669 18%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}
.pfa-compare-con li {
  color: var(--pfa-card-muted);
}
.pfa-compare-con li::before {
  background-color: color-mix(in srgb, #dc2626 14%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5'/%3E%3C/svg%3E");
}

.pfa-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.pfa-feature-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: .85rem;
  row-gap: .2rem;
  align-items: start;
}
.pfa-feature-list .pfa-feat-icon {
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--pfa-link) 14%, #fff);
  color: var(--pfa-link);
  display: grid;
  place-items: center;
}
.pfa-feature-list .pfa-feat-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}
.pfa-feature-list strong {
  color: var(--pfa-card-heading) !important;
  font-size: 1rem;
}
.pfa-feature-list li > span:not(.pfa-feat-icon) {
  color: var(--pfa-card-muted) !important;
  font-size: .92rem;
  line-height: 1.45;
}

.pfa-verticals ul {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: .65rem 0 0;
}
.pfa-verticals li {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid color-mix(in srgb, var(--pfa-link) 28%, rgba(15, 23, 42, .18));
  border-radius: 999px;
  padding: .45rem 1.05rem;
  font-size: .9rem;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

.pfa-cta-band {
  border-radius: calc(var(--pfa-radius) + 4px);
  padding: 1.5rem 1.5rem;
  border: 1px solid var(--pfa-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pfa-link) 10%, #ffffff), #ffffff);
  color: var(--pfa-card-ink);
}
.pfa-cta-band h2 { margin: 0 0 .4rem; color: var(--pfa-card-heading) !important; font-size: 1.35rem; }
.pfa-cta-band p { margin: 0 0 1rem; color: var(--pfa-card-muted) !important; max-width: 36rem; }
.pfa-cta-band .pfa-btn-ghost {
  color: var(--pfa-card-ink) !important;
  border-color: color-mix(in srgb, var(--pfa-card-ink) 35%, transparent);
}
.pfa-cta-band .pfa-btn-ghost:hover {
  color: var(--pfa-card-ink);
  background: color-mix(in srgb, var(--pfa-link) 10%, transparent);
}

.pfa-page-head h1 { margin: 0 0 .35rem; font-size: 1.55rem; color: var(--pfa-heading); font-family: var(--pfa-font-display); }
.pfa-page-head p { margin: 0 0 .75rem; color: var(--pfa-muted); }
.pfa-subnav, .pfa-cards nav { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.pfa-subnav a, .pfa-cards a, .pfa-link { color: var(--pfa-link); text-decoration: none; font-weight: 650; font-size: .92rem; }
.pfa-link:hover { text-decoration: underline; }

.pfa-form { display: grid; gap: .75rem; max-width: 420px; }
.pfa-form.pfa-inline { grid-template-columns: 1fr auto; align-items: end; max-width: none; }
.pfa-form label { display: grid; gap: .3rem; font-size: .85rem; color: var(--pfa-card-muted); }
.pfa-form input,
.pfa-form select,
.pfa-code {
  border: 1px solid var(--pfa-line);
  border-radius: var(--pfa-radius);
  padding: .55rem .7rem;
  font: inherit;
  color: var(--pfa-card-ink);
  background: var(--pfa-card-bg);
}
.pfa-code { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; resize: vertical; }

.pfa-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pfa-cards strong { display: block; font-size: 1.05rem; color: var(--pfa-card-heading); }
.pfa-cards span { color: var(--pfa-card-muted); font-size: .9rem; }

.pfa-kpis { display: grid; gap: 1rem; margin: 1rem 0; }
.pfa-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.pfa-kpis article {
  background: var(--pfa-card-bg);
  border: 1px solid var(--pfa-line);
  border-radius: calc(var(--pfa-radius) + 4px);
  padding: 1rem;
  color: var(--pfa-card-ink);
}
.pfa-kpis h3 { margin: 0; font-size: .78rem; color: var(--pfa-card-muted); font-weight: 550; }
.pfa-kpis strong { font-size: 1.75rem; color: var(--pfa-card-heading); }

.pfa-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.pfa-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.pfa-list li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--pfa-line);
  color: var(--pfa-card-muted);
}
.pfa-list li span:first-child {
  color: var(--pfa-card-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.pfa-heatgrid {
  display: grid;
  grid-template-columns: repeat(var(--pfa-grid, 20), 1fr);
  gap: 2px;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--pfa-brand) 88%, #0f172a);
  border-radius: var(--pfa-radius);
  padding: 6px;
}
.pfa-heatgrid i {
  display: block;
  border-radius: 2px;
  background: color-mix(in srgb, var(--pfa-brand-fg) 10%, transparent);
  min-height: 4px;
}

@media (max-width: 800px) {
  .pfa-pillars,
  .pfa-grids,
  .pfa-kpis-3,
  .pfa-compare,
  .pfa-form.pfa-inline { grid-template-columns: 1fr; }
}

/* Dark page: section titles stay light; cards stay white + dark ink */
body.nf-theme-dark .pfa-portal,
body.nf-accent-dark .pfa-portal,
body.nf-preset--sitehive_glass .pfa-portal,
body.nf-accent-auto .pfa-portal {
  --pfa-card-bg: #ffffff;
  --pfa-card-ink: #1a1a1a;
  --pfa-card-heading: #1a1a1a;
  --pfa-card-muted: #1a1a1a;
}
body.nf-theme-dark .pfa-pillars article,
body.nf-accent-dark .pfa-pillars article,
body.nf-theme-dark .pfa-compare article,
body.nf-accent-dark .pfa-compare article,
body.nf-theme-dark .pfa-feature-list li,
body.nf-accent-dark .pfa-feature-list li,
body.nf-theme-dark .pfa-cta-band,
body.nf-accent-dark .pfa-cta-band,
body.nf-accent-auto .pfa-pillars article,
body.nf-accent-auto .pfa-compare article,
body.nf-accent-auto .pfa-feature-list li,
body.nf-accent-auto .pfa-cta-band {
  background: var(--pfa-card-bg);
  color: var(--pfa-card-ink);
}