.ph-pf {
  --ph-pf-ink: #20262e;
  --ph-pf-muted: #5d6875;
  --ph-pf-border: #d9dedf;
  --ph-pf-accent: #287a86;
  --ph-pf-accent-dark: #17324d;
  --ph-pf-surface: #f7f6f2;
  --ph-pf-warning: #b43a32;
  --ph-pf-warning-surface: #fff3f1;
  --ph-pf-focus: #d97706;
  color: var(--ph-pf-ink);
  font: inherit;
  max-width: 48rem;
  margin-inline: auto;
}

.ph-pf[hidden],
.ph-pf [hidden] {
  display: none !important;
}

.ph-pf__intro,
.ph-pf__question,
.ph-pf__result,
.ph-pf__fallback,
.ph-pf__failure {
  border: 1px solid var(--ph-pf-border);
  border-radius: 0.75rem;
  background: #fff;
  padding: clamp(1rem, 4vw, 2rem);
}

.ph-pf__eyebrow {
  color: var(--ph-pf-accent-dark);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ph-pf__lead {
  font-size: 1.2rem;
  line-height: 1.55;
}

.ph-pf__safety,
.ph-pf__help {
  border-left: 0.25rem solid var(--ph-pf-accent);
  background: var(--ph-pf-surface);
  padding: 0.75rem 1rem;
}

.ph-pf__stop-notice {
  font-weight: 700;
}

.ph-pf__progress {
  color: var(--ph-pf-muted);
  font-weight: 700;
}

.ph-pf fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ph-pf legend,
.ph-pf h2 {
  width: 100%;
  margin-block: 0 1rem;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
}

.ph-pf__answers {
  display: grid;
  gap: 0.75rem;
  margin-block: 1.25rem;
}

.ph-pf__answer {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 2.75rem;
  padding: 0.85rem;
  border: 1px solid var(--ph-pf-border);
  border-radius: 0.5rem;
  cursor: pointer;
}

.ph-pf__answer:hover {
  border-color: var(--ph-pf-accent);
}

.ph-pf__answer input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.ph-pf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ph-pf__button {
  min-height: 2.75rem;
  border: 2px solid var(--ph-pf-accent);
  border-radius: 0.4rem;
  background: var(--ph-pf-accent);
  color: #fff;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ph-pf__button:hover {
  border-color: var(--ph-pf-accent-dark);
  background: var(--ph-pf-accent-dark);
}

.ph-pf__button--secondary:hover,
.ph-pf__button--link:hover {
  color: #fff;
}

.ph-pf__button--secondary,
.ph-pf__button--link {
  background: #fff;
  color: var(--ph-pf-accent-dark);
}

.ph-pf__button--link {
  border-color: transparent;
  text-decoration: underline;
}

.ph-pf a {
  color: var(--ph-pf-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ph-pf :focus-visible {
  outline: 3px solid var(--ph-pf-focus);
  outline-offset: 3px;
}

.ph-pf__error {
  color: var(--ph-pf-warning);
  font-weight: 700;
}

.ph-pf__professional-stop {
  border-left: 0.25rem solid var(--ph-pf-warning);
  background: var(--ph-pf-warning-surface);
  padding: 0.75rem 1rem;
}

.ph-pf__destinations {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.ph-pf__destinations a {
  overflow-wrap: anywhere;
  min-width: 0;
}

.ph-pf__result h3,
.ph-pf__fallback h3 {
  margin-block: 1.25rem 0.35rem;
  font-size: 1.05rem;
}

@media (max-width: 30rem) {
  .ph-pf__actions,
  .ph-pf__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ph-pf *,
  .ph-pf *::before,
  .ph-pf *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}