/* Pricing page: "What shapes a quote". The factor list and the plain list work without JS; the tick boxes and the answer exist only under html.pr. */
.pr-factors, .pr-static ul { max-width: 680px; border-top: 1px solid var(--line); }
.pr-factors details { border-bottom: 1px solid var(--line); }
.pr-factors summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 14px 4px; color: var(--fg); font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.pr-factors summary::-webkit-details-marker { display: none; }
.pr-factors summary::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; transition: background-size 0.18s ease; }
.pr-factors details[open] summary::after { background-size: 100% 2px, 2px 0; }
.pr-factors summary:hover { color: var(--accent); }
.pr-factors details p { max-width: 640px; padding: 0 4px 20px; color: var(--fg-muted); font-size: 16px; }

.pr-static { max-width: 680px; margin-top: 40px; }
.pr-static p { margin-bottom: 12px; color: var(--fg); font-size: 16px; }
.pr-static ul { list-style: none; }
.pr-static li { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--fg-muted); font-size: 16px; }

/* Tick boxes and answer: replace the plain list when html.pr is set */
html.pr .pr-tick { min-width: 0; max-width: 680px; margin-top: 40px; border: 0; }
html.pr .pr-tick legend { margin-bottom: 8px; color: var(--fg); font-size: 16px; font-weight: 600; }
html.pr .pr-tick label { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 16px; cursor: pointer; }
html.pr .pr-tick label:first-of-type { border-top: 1px solid var(--line); }
html.pr .pr-tick input { flex-shrink: 0; width: 22px; height: 22px; accent-color: var(--blue); cursor: pointer; }
html.pr .pr-out { min-height: 3.5rem; max-width: 680px; margin-top: 24px; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); color: var(--fg); font-size: 16px; transition: opacity 0.18s ease; }
html.pr .pr-out.pr-fade { opacity: 0; }
html.pr .pr-out ul { margin: 8px 0 12px; padding-left: 20px; list-style: disc; }
html.pr .pr-out li { margin-bottom: 4px; }
html.pr .pr-out .btn { margin-top: 12px; }
.pr-tick[hidden], .pr-out[hidden], .pr-static[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pr-factors summary::after, html.pr .pr-out { transition: none; }
}