/* Approved homepage composition only.
 * Foundation and reusable components: hirepos-marketing.css.
 * Keep this file after the shared styles; do not load it on other pages.
 */
.hp-hero { position: relative; padding: 66px 0 68px; background: linear-gradient(135deg, #f9fbfa 10%, #edf5f2 72%, #e4f1ed 100%); }
.hp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 35%, rgb(164 213 202 / 20%), transparent 60%); pointer-events: none; }
.hp-hero .container { position: relative; }
.hp-hero .hp-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.hp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #007894; box-shadow: 0 0 0 4px #d9ece7; }
.hp-hero h1 { margin: 0; font-size: clamp(3.25rem, 5.8vw, 5rem); letter-spacing: -.05em; line-height: 1.02; }
.hp-hero h1 span { color: var(--hp-teal); }
.hp-hero-summary { max-width: 465px; padding-top: 12px; }
.hp-hero-summary > p { margin-bottom: 24px; font-size: 18px; line-height: 1.65; }
.hp-hero-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--hp-muted); }
.hp-hero-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hp-product-stage { position: relative; max-width: 900px; margin: 36px auto 0; padding-bottom: 80px; }
.hp-product-stage > .hp-reminders { width: 70%; }
.hp-product-stage > .hp-calendar { position: absolute; right: 0; bottom: 0; width: 54%; }
.hp-home .hp-access-note { max-width: 900px; margin: 26px auto 0; padding: 24px clamp(20px, 4vw, 48px); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: linear-gradient(120deg, #fff, #e5f3ef); text-align: center; }
.hp-home .hp-access-note p { max-width: 720px; margin: 0 auto; color: var(--hp-deep); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; line-height: 1.6; }
.hp-workflow .hp-section-title { max-width: 580px; }
.hp-workflow-intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 44px; }
.hp-workflow-intro > p { max-width: 390px; margin: 0 0 6px; font-size: 17px; }
.hp-workflow-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
/* Show complete, equally sized devices while retaining the original UI captures. */
.hp-home .hp-mobile-card .hp-mobile-scenes { align-items: flex-start; gap: clamp(12px, 2vw, 20px); margin: auto 24px 28px; padding-top: 12px; }
.hp-home .hp-mobile-scenes .hp-phone,
.hp-home .hp-mobile-scenes .hp-phone:first-child { position: relative; isolation: isolate; flex: 0 1 175px; min-width: 0; width: 175px; height: auto; aspect-ratio: 190 / 350; margin: 0; padding: 14px 7px 18px; border: 1px solid #20484f; border-radius: 21px; background: #163b43; box-shadow: 0 12px 28px -14px rgb(19 62 67 / 25%); }
.hp-home .hp-mobile-scenes .hp-phone::before { content: ""; position: absolute; z-index: -1; inset: 14px 7px 18px; border-radius: 10px; background: #fff; }
.hp-home .hp-mobile-scenes .hp-phone:first-child::before { background: #0d1625; }
.hp-home .hp-mobile-scenes .hp-phone::after { content: ""; position: absolute; bottom: 7px; left: 35%; width: 30%; height: 3px; border-radius: 3px; background: #b4c7cb; }
.hp-home .hp-mobile-scenes .hp-phone img,
.hp-home .hp-mobile-scenes .hp-phone:first-child img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; }
@media (min-width: 992px) {
    .hp-hero-summary { margin-left: auto; }
}
@media (max-width: 1199.98px) {
    .hp-hero h1 { font-size: 65px; }
    .hp-hero-summary > p { font-size: 17px; }
}
@media (max-width: 991.98px) {
    .hp-hero { padding-top: 46px; }
    .hp-hero h1 { font-size: 66px; }
    .hp-hero-summary { max-width: 570px; padding-top: 24px; }
    .hp-hero-summary > p { margin-bottom: 20px; font-size: 18px; }
    .hp-product-stage { margin-top: 32px; padding-bottom: 70px; }
    .hp-workflow-intro { display: block; }
    .hp-workflow-intro > p { max-width: 580px; }
    .hp-workflow-grid { gap: 18px; }
}
@media (max-width: 767.98px) {
    .hp-hero { padding: 38px 0 36px; }
    .hp-hero .hp-eyebrow { margin-bottom: 20px; font-size: 12px; letter-spacing: .1em; }
    .hp-hero h1 { font-size: clamp(2.7rem, 9vw, 3.75rem); }
    .hp-hero-summary { padding-top: 20px; }
    .hp-hero-summary > p { font-size: 17px; }
    .hp-hero-note { font-size: 12px; }
    .hp-product-stage { max-width: 480px; margin-top: 28px; padding-bottom: 76px; }
    .hp-product-stage > .hp-reminders { width: 88%; }
    .hp-product-stage > .hp-calendar { width: 78%; }
    .hp-workflow-intro { margin-bottom: 28px; }
    .hp-workflow-intro > p { font-size: 16px; }
    .hp-workflow-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 374.98px) {
    .hp-hero h1 { font-size: 40px; }
}
@media (max-width: 575.98px) {
    .hp-hero-note { flex-wrap: wrap; }
}

/* Homepage feature showcase. Keep these overrides out of shared page styles. */
.hp-home .hp-feature-showcase { padding-top: 0; padding-bottom: 40px; }
.hp-home .hp-feature-heading { text-align: center; margin-bottom: 40px; }
.hp-home .hp-feature-heading .hp-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--hp-deep); }
.hp-home .hp-feature-heading .hp-eyebrow::before,
.hp-home .hp-feature-heading .hp-eyebrow::after { content: ""; width: 68px; height: 1px; background: #8fc4c9; }
.hp-home .hp-feature-heading h2 { margin-bottom: 12px; font-size: clamp(2rem, 3.3vw, 2.65rem); color: #0b202a; }
.hp-home .hp-feature-heading p { margin: 0; font-size: 19px; color: #243247; }
.hp-home .hp-feature-showcase .hp-feature-grid { margin: 0; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-home .hp-feature-showcase .hp-feature { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 18px; overflow: hidden; border: 1px solid #d5e5e8; border-radius: 12px; background: linear-gradient(135deg, #fff, #fafcfc); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hp-home .hp-feature-showcase .hp-feature::before { content: ""; position: absolute; z-index: -1; right: -80px; bottom: -130px; width: 220px; height: 240px; border-radius: 60% 0 0 0; transform: rotate(25deg); background: linear-gradient(145deg, #f0f9f8, #bde8e7); }
.hp-home .hp-feature-showcase .hp-feature:is(:hover, :focus-within) { transform: translateY(-4px); border-color: #95c4c9; box-shadow: 0 14px 30px -18px rgb(0 86 106 / 35%); }
.hp-home .hp-feature-showcase .hp-feature-icon { width: 44px; height: 44px; margin-bottom: 10px; background: #e0f3f1; color: #006878; font-size: 24px; }
.hp-home .hp-feature-showcase h3 { font-size: 20px; font-weight: 700; color: #0b202a; line-height: 1.25; }
.hp-home .hp-feature-showcase .hp-feature p { margin-bottom: 12px; color: #243247; font-size: 15px; line-height: 1.45; }
.hp-home .hp-feature-showcase .hp-feature a { position: relative; align-self: flex-start; margin-top: auto; padding-right: 48px; font-size: 14px; color: var(--hp-deep); line-height: 1.4; }
.hp-home .hp-feature-showcase .hp-feature a .hp-icon { transition: transform .2s ease; }
.hp-home .hp-feature-showcase .hp-feature a:is(:hover, :focus-visible, :active) .hp-icon { transform: translateX(4px); }
.hp-home .hp-feature-art { position: absolute; right: 16px; bottom: 16px; width: 58px; height: 58px; fill: none; stroke: #006878; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* Editable CSS integration banner and locally hosted official brand artwork. */
.hp-home .hp-integration-banner { position: relative; isolation: isolate; overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 30px 24px; border: 0; border-radius: 20px; background: radial-gradient(ellipse at 0 0, #2a7c83, transparent 65%), linear-gradient(115deg, #073f4b, #14616b 85%, #257f87); }
.hp-home .hp-integration-banner::after { content: ""; position: absolute; z-index: -1; width: 400px; height: 400px; right: -250px; bottom: -340px; border-radius: 50%; background: rgb(133 221 215 / 13%); box-shadow: 0 0 0 70px rgb(133 221 215 / 8%); pointer-events: none; }
.hp-home .hp-integration-banner .container { padding-inline: 0; }
.hp-home .hp-integration-banner .hp-eyebrow { color: #fff; font-size: 11px; margin-bottom: 12px; }
.hp-home .hp-integration-banner h2 { color: #fff; font-size: 30px; margin-bottom: 10px; }
.hp-home .hp-integration-banner p { color: #fff; font-size: 15px; line-height: 1.5; }
.hp-home .hp-integration-banner .hp-text-link { padding: 3px 18px; min-height: 36px; background: #fff; border-radius: 10px; color: var(--hp-deep); font-size: 13px; }
.hp-home .hp-integration-banner .hp-text-link:is(:hover, :focus-visible, :active) { background: #e5f3ef; }
.hp-home .hp-integration-banner a:focus-visible { outline-color: #fff; }
.hp-home .hp-integration-banner .hp-integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.hp-home .hp-integration-banner .hp-integration-name { flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 100px; padding: 14px 10px; border-radius: 12px; background: #fff; }
.hp-home .hp-integration-banner .hp-integration-name img { width: 100%; height: 48px; object-fit: contain; }
.hp-home .hp-integration-banner .hp-integration-name img[src$="/xero.svg"] { transform: scale(.81); }
.hp-home .hp-integration-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; color: white; font-size: 13px; text-align: center; }
.hp-home .hp-integration-services li::before { content: "✓"; padding-right: 8px; }
@media (min-width: 992px) {
    .hp-home .hp-integration-layout > .hp-integration-copy { flex: 0 0 39%; width: 39%; padding-right: 28px; border-right: 1px solid #97c4c7; }
    .hp-home .hp-integration-layout > .col-lg-6:last-child { flex: 0 0 61%; width: 61%; padding-left: 36px; }
}
@media (max-width: 1247px) { .hp-home .hp-integration-banner { margin-inline: 24px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hp-home .hp-feature-showcase .hp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .hp-home .hp-feature-showcase .hp-feature-grid { grid-template-columns: 1fr; gap: 18px; }
    .hp-home .hp-feature-heading .hp-eyebrow::before, .hp-home .hp-feature-heading .hp-eyebrow::after { display: none; }
    .hp-home .hp-feature-showcase .hp-feature { padding: 22px; }
    .hp-home .hp-feature-showcase .hp-feature p { padding-right: 30px; }
    .hp-home .hp-integration-banner { margin-inline: 22px; padding: 28px 22px; }
    .hp-home .hp-integration-banner .hp-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-home .hp-integration-services { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
}

/* Bottom CTA interactions only: preserve dimensions, spacing and destinations. */
.hp-home .hp-cta .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.hp-home .hp-cta .btn-light { color: var(--hp-deep); background: #fff; border-color: #fff; }
.hp-home .hp-cta .btn-light:is(:hover, :focus-visible, :active) { color: var(--hp-deep); background: #e5f3ef; border-color: #e5f3ef; transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 28 35 / 18%); }
/* Switch the two contrast pairs together; animate elevation, not text/background
 * interpolation, which would briefly make the colours meet mid-transition. */
.hp-home .hp-cta .btn-outline-primary { color: #fff; background: transparent; border-color: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.hp-home .hp-cta .btn-outline-primary:is(:hover, :focus-visible, :active) { color: var(--hp-deep); background: #fff; border-color: var(--hp-deep); transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 28 35 / 18%); }
.hp-home .hp-cta .hp-cta-link { color: #e5f3ef !important; text-decoration-color: currentColor; text-underline-offset: 4px; transition: color .2s ease, text-underline-offset .2s ease; }
.hp-home .hp-cta .hp-cta-link:is(:hover, :focus-visible, :active) { color: #d0ffe9 !important; text-underline-offset: 7px; }
.hp-home .hp-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
    .hp-home .hp-feature-showcase .hp-feature:is(:hover, :focus-within),
    .hp-home .hp-feature-showcase .hp-feature a:is(:hover, :focus-visible, :active) .hp-icon,
    .hp-home .hp-cta .btn:is(:hover, :focus-visible, :active) { transform: none; }
}