/* Optional HirePOS interior-page patterns. Load after hirepos-marketing.css
 * only on pages that use these classes. No additional JavaScript is required.
 * Form styling does not provide submission, validation or pricing logic.
 */
.hp-page-header { padding-block: var(--hp-section-space-tablet); background: var(--hp-surface); border-bottom: 1px solid var(--hp-border); }
.hp-page-header h1 { max-width: 920px; margin: 0 0 var(--hp-space-6); font-size: clamp(2.5rem, 5vw, 4rem); }
.hp-page-header p { max-width: 700px; margin-bottom: 0; font-size: 19px; }
.hp-prose { max-width: 760px; overflow-wrap: anywhere; }
.hp-prose p, .hp-prose ul, .hp-prose ol { margin-bottom: var(--hp-space-6); }
.hp-prose li + li { margin-top: var(--hp-space-2); }
.hp-prose h2, .hp-prose h3 { margin-block: var(--hp-space-12) var(--hp-space-4); }
.hp-prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.hp-grid { display: grid; gap: var(--hp-space-6); grid-template-columns: minmax(0, 1fr); }
.hp-grid > * { min-width: 0; }
.hp-marketing .hp-card { padding: var(--hp-space-8); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: var(--hp-white); }
.hp-marketing .hp-card h2, .hp-marketing .hp-card h3 { margin-bottom: var(--hp-space-4); font-size: 24px; }
.hp-card p:last-child { margin-bottom: 0; }
.hp-field { margin-bottom: var(--hp-space-6); }
.hp-field label, .hp-field legend { display: block; margin-bottom: var(--hp-space-2); color: var(--hp-ink); font-size: 16px; font-weight: 600; }
.hp-field fieldset { min-width: 0; padding: 0; border: 0; }
.hp-marketing .hp-input { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #68858b; border-radius: 8px; color: var(--hp-ink); background: var(--hp-white); font: inherit; font-size: 16px; line-height: 1.5; }
.hp-input::placeholder { color: var(--hp-muted); opacity: 1; }
.hp-marketing .hp-input:focus-visible { outline: 3px solid var(--hp-teal); outline-offset: 3px; }
.hp-marketing .hp-input[aria-invalid="true"] { border-color: var(--hp-error); }
.hp-field-help, .hp-field-error { display: block; margin: var(--hp-space-2) 0 0; font-size: var(--hp-text-small); }
.hp-marketing .hp-field-error { color: var(--hp-error); }
.hp-choice { display: flex; align-items: flex-start; gap: var(--hp-space-3); min-height: 44px; padding-block: var(--hp-space-2); font-size: 16px; }
.hp-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--hp-teal); }
.hp-choice input:focus-visible { outline: 3px solid var(--hp-teal); outline-offset: 3px; }
.hp-table-scroll { overflow-x: auto; max-width: 100%; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hp-table th, .hp-table td { padding: 16px; border-bottom: 1px solid var(--hp-border); text-align: left; vertical-align: top; }
.hp-table th { color: var(--hp-ink); background: var(--hp-surface); font-weight: 600; }
.hp-table caption { color: var(--hp-muted); text-align: left; }
@media (min-width: 768px) {
    .hp-grid-2, .hp-grid-3, .hp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .hp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .hp-page-header { padding-block: 48px; }
    .hp-page-header p { font-size: 17px; }
    .hp-prose { font-size: 17px; }
    .hp-marketing .hp-card { padding: var(--hp-space-6); }
}