/* ============================================================================
   pro-redesign.css — shared "professional" component kit used by the
   per-page redesign. Loaded after the rest so it can stand alone.
   Reusable accordion, section labels, refined panels. v=20260618
   ============================================================================ */

/* ============================================================================
   Soft surfaces — pure white panels strain the eyes against the dark theme.
   Use a soft light grey for cards, panels and white sections site-wide.
   ============================================================================ */
:root { --pro-surface: #ece8e1; --pro-surface-2: #f2efe9; }
.ps-card, .ps-card-elevated,
.legal-page, .pro-accordion,
.card, .faq-item, .faqx-card,
.sr-section, .sr-comp-card, .city-card,
.pt-card:not(.dark), .pt-tool-card, .pt-feature-card,
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#ffffff"], [style*="background: #ffffff"],
[style*="background:white"], [style*="background: white"],
[style*="background-color:#fff"], [style*="background-color:#ffffff"] {
  background-color: var(--pro-surface-2) !important;
  background-image: none !important;
}
/* keep form fields a touch lighter so they read as inputs, not flat panels */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea, select { background-color: #faf8f4 !important; }

/* ---- Reusable FAQ / accordion (light panel on any background) ---------- */
.pro-accordion { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
details.pro-q { border-bottom: 1px solid #eef1f6; }
details.pro-q:last-child { border-bottom: none; }
details.pro-q > summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .98rem; font-weight: 700; color: #0f172a; transition: color .15s ease;
}
details.pro-q > summary::-webkit-details-marker { display: none; }
details.pro-q > summary:hover { color: #2563eb; }
details.pro-q > summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px;
}
details.pro-q[open] > summary { color: #2563eb; }
details.pro-q[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; border-color: #2563eb; }
.pro-a { padding: 0 1.25rem 1.15rem; color: #475569; font-size: .92rem; line-height: 1.65; }
.pro-a p { margin: 0 0 .6rem; } .pro-a p:last-child { margin-bottom: 0; }
.pro-a ul { margin: .5rem 0 .6rem; padding-left: 1.15rem; }
.pro-a li { margin: .32rem 0; }
.pro-a strong { color: #0f172a; font-weight: 700; }
.pro-a a { color: #2563eb; font-weight: 600; text-decoration: none; }
.pro-a a:hover { text-decoration: underline; }

/* ---- Small uppercase section label (group heading) -------------------- */
.pro-section-label { font-size: .76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #7c8aa0; margin: 0 0 .65rem .25rem; }

/* ---- Legal / document pages → clean white content panel ---------------
   Shared by privacy, terms, methodology and the professional sample pages. */
.legal-page {
  max-width: 800px; margin: 2.75rem auto 3.5rem; padding: 2.5rem 2.5rem 2.75rem;
  background: #fff; border: 1px solid #e6eaf0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.legal-page h1 { color: #0f172a; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .3rem; }
.legal-page .date, .legal-page .section-sub { color: #64748b; font-size: .88rem; margin: 0 0 1.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid #eef1f6; }
.legal-page h2 { color: #0f172a; font-size: 1.18rem; font-weight: 800; margin: 1.9rem 0 .65rem; letter-spacing: -.01em; }
.legal-page h3 { color: #0f172a; font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .4rem; }
.legal-page p, .legal-page li { color: #475569; font-size: .95rem; line-height: 1.7; margin-bottom: .55rem; }
.legal-page strong { color: #0f172a; font-weight: 700; }
.legal-page a { color: #2563eb; font-weight: 600; text-decoration: none; }
.legal-page a:hover { text-decoration: underline; }
.legal-page ul, .legal-page ol { padding-left: 1.4rem; margin: .4rem 0 1rem; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: .9rem; }
.legal-page th { text-align: left; padding: .6rem .75rem; color: #0f172a; font-weight: 700; border-bottom: 2px solid #e2e8f0; background: #f8fafc; }
.legal-page td { padding: .6rem .75rem; color: #475569; border-bottom: 1px solid #eef1f6; }
.legal-page tr:last-child td { border-bottom: none; }