/*
| PAYLYHR brand overrides for the landing template.
| Loaded after style.css. Replaces the template's pink (#F93E5E) with the
| project's green (#0ca30c) and re-points template placeholder assets at
| on-brand equivalents.
*/
:root {
    --theme-color: #0ca30c;
    --theme-color2: #059669;
    --smoke-color3: #E7F6EC;
    --smoke-color4: #F3FAF5;
}

/* The hero and section-title underline squiggles ship hardcoded pink inside
   inline SVG data URIs, so the variable swap above cannot reach them. */
.hero-style3 .hero-title span:after,
.sec-title.sec-title2 span:after {
    background-image: url("data:image/svg+xml,%3Csvg width='135' height='18' viewBox='0 0 135 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 16C25 3 79 -7 133 16' stroke='%230ca30c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

/* The template's hero background (assets/img/bg/hero_bg_3.jpg) was a pink
   wash that is not part of the saved assets. A soft on-brand wash instead. */
.th-hero-wrapper.hero-3 .th-hero-bg {
    background-image: linear-gradient(180deg, #EDF8F0 0%, #F6FCF7 55%, #FFFFFF 100%);
}

/* Hero decorative dots ship hardcoded template purples. */
.hero-3 .th-circle .circle {
    background-color: var(--theme-color);
}
.hero-3 .th-circle .circle.style2 {
    background-color: var(--theme-color2);
}

/* Smooth anchor travel for the one-page sections. */
html {
    scroll-behavior: smooth;
}

/* Header wordmark sits next to the brand mark. */
.header-logo img {
    height: 44px;
    width: auto;
}

/* Mobile menu wordmark (the template rule targets inline svg only). */
.mobile-logo img {
    max-width: 185px;
    height: auto;
}

/* Industry strip replaces the template's placeholder client logos. */
.brand-box.brand-box--text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
}
.brand-box.brand-box--text i {
    color: var(--theme-color);
    font-size: 15px;
}
.brand-box.brand-box--text:hover {
    opacity: 1;
    color: var(--theme-color);
}

/* Footer wordmark: brand-colored text beside the color mark (the footer
   background is light, so the white logo variant would vanish). */
.paylyhr-brand-footer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
}
.paylyhr-brand-footer img {
    width: 40px;
    height: 40px;
}

/* ── Pricing cards ─────────────────────────────────────────────────────
   Rebuilt on the reference card layout: plan name + tagline on top, the
   button and the price sharing one row, then a "What's Included" list.
   All colour stays on the PAYLYHR green. Operations — the default sell
   (docs/PRICING-AND-PLANS.md) — is the featured card: floating badge,
   solid green button and a tinted included panel. */

/* Cards top-align instead of stretching, so each card ends with its own
   content and the featured card can float above the row. */
.price-cards-row {
    align-items: flex-start;
}

.price-card {
    --pc-pad: 26px;
    --pc-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--pc-pad);
    background: #ffffff;
    border: 1px solid #E6ECE8;
    border-radius: var(--pc-radius);
    box-shadow: 0 2px 12px rgba(23, 46, 33, .05);
    transition: box-shadow .3s ease;
}
.price-card:hover {
    box-shadow: 0 14px 34px rgba(23, 46, 33, .10);
}
.price-card__name {
    margin: 0 0 4px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}
.price-card__tagline {
    margin: 0;
    color: var(--body-color);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Button and price share a row; on narrow screens the price drops below. */
.price-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 16px;
    margin: 20px 0 22px;
}
.price-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: #F1F5F2;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
}
.price-card__btn:hover {
    background: var(--theme-color);
    color: #ffffff;
}
.price-card__amount {
    display: flex;
    flex-direction: column;
}
.price-card__price {
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.price-card__period {
    margin-top: 2px;
    color: var(--body-color);
    font-size: 12.5px;
    line-height: 1.35;
}

/* The panel follows the button row directly, as in the reference cards. */
.price-card__included {
    padding-top: 20px;
    border-top: 1px solid var(--th-border-color);
}
.price-card__included-title {
    margin: 0 0 14px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
}
.price-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* content: none — the template draws its own checkmark on li:before. */
.price-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.55;
}
.price-card__list li:before,
.price-card__list li:after {
    content: none;
}
.price-card__list i {
    margin-top: 2px;
    color: var(--theme-color);
    font-size: 16px;
    line-height: 1;
}

.price-card--featured {
    border-color: rgba(12, 163, 12, .35);
    box-shadow: 0 18px 40px rgba(12, 163, 12, .14);
}
.price-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--theme-color);
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(12, 163, 12, .30);
}
.price-card--featured .price-card__btn {
    background: var(--theme-color);
    color: #ffffff;
}
.price-card--featured .price-card__btn:hover {
    background: var(--theme-color2);
    color: #ffffff;
}
/* The tinted panel bleeds to the card edges and takes the bottom corners. */
.price-card--featured .price-card__included {
    margin-right: calc(-1 * var(--pc-pad));
    margin-bottom: calc(-1 * var(--pc-pad));
    margin-left: calc(-1 * var(--pc-pad));
    padding: 20px var(--pc-pad) var(--pc-pad);
    border-top-color: rgba(12, 163, 12, .18);
    border-radius: 0 0 var(--pc-radius) var(--pc-radius);
    background: var(--smoke-color4, #F3FAF5);
}
/* On desktop the featured card floats above the row, like the reference. */
@media (min-width: 992px) {
    .price-card--featured {
        transform: translateY(-16px);
    }
}

/* Small phones: tighten the button/price row so the price keeps its place
   beside the button on every card instead of wrapping on the wider plans. */
@media (max-width: 575.98px) {
    .price-card__btn {
        padding: 12px 17px;
    }
    .price-card__cta {
        gap: 14px 10px;
    }
    .price-card__price {
        font-size: 22px;
    }
}

/* Slider pagination dots ship a hardcoded template pink. */
.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: var(--theme-color);
}
.swiper-pagination-bullets .swiper-pagination-bullet:before {
    border: 1px solid var(--theme-color);
}

/* The active feature-timeline switch: hardcoded pale-pink in the template. */
.feature-timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:before {
    border-color: var(--theme-color);
}

/* The footer ships a hardcoded pale-pink background — keep the footer area
   neutral and put the brand dark teal on the copyright strip instead. */
.footer-layout3 {
    background-color: #ffffff;
}
.footer-layout3 .footer-widget .widget_title:after {
    border-color: #ffffff;
}
.footer-layout3 .copyright-wrap {
    background-color: #071E1C;
}

/* The CTA block sits half inside the footer, so a solid bright-green slab
   reads as "a green footer". Use the brand deep-teal gradient (same family
   as the logo) instead. */
.cta-area.bg-theme {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
}

/* Page header banner for inner pages (contact etc.). */
.breadcumb-wrapper {
    background-color: transparent;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
}
.breadcumb-wrapper .breadcumb-menu a {
    color: rgba(255, 255, 255, .85);
}
.breadcumb-wrapper .breadcumb-menu a:hover {
    color: #ffffff;
}

/* ── Contact page (reference layout: light hero, form + dark side card,
   info tiles, map) ───────────────────────────────────────────────────── */

/* Light hero with green chevron decorations; the dark-teal banner stays on
   the other inner pages, which keep .breadcumb-wrapper. */
.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 72px;
    text-align: center;
    background-color: transparent;
    background-image: linear-gradient(180deg, #E7F6EC 0%, #F3FAF5 70%, #ffffff 100%);
}
.contact-hero__chevrons {
    position: absolute;
    color: var(--theme-color);
    opacity: .30;
}
.contact-hero__chevrons--left {
    left: 5%;
    top: 44%;
}
.contact-hero__chevrons--right {
    right: 5%;
    top: 34%;
}
.contact-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
.contact-hero__title {
    margin: 0;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
}
.contact-hero__squiggle {
    display: block;
    margin: 14px auto 0;
}
.contact-hero__text {
    margin: 18px auto 0;
    max-width: 560px;
    color: var(--body-color);
    font-size: 16px;
    line-height: 1.7;
}
@media (max-width: 767.98px) {
    .contact-hero {
        padding: 72px 0 56px;
    }
    .contact-hero__chevrons {
        opacity: .18;
    }
    .contact-hero__chevrons--left {
        left: -26px;
    }
    .contact-hero__chevrons--right {
        right: -26px;
    }
}

/* Lead form: pill inputs on the soft green fill, like the reference.
   Field icons are pinned inside the left edge of every pill, ahead of the
   placeholder, with the text inset to clear them. */
.paylyhr-lead .form-group {
    position: relative;
    margin-bottom: 16px;
}
.paylyhr-lead .form-group > i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: var(--theme-color);
    opacity: .8;
}
.paylyhr-lead .form-control {
    padding: 15px 24px 15px 52px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #F3FAF5;
    color: var(--title-color);
    font-size: 15px;
    transition: border-color .2s ease, background-color .2s ease;
}
.paylyhr-lead .form-control::placeholder {
    color: #8A9691;
}
.paylyhr-lead .form-control:focus {
    border-color: var(--theme-color);
    background: #ffffff;
    box-shadow: none;
}

/* Dark side card — "Stay in the loop" — same gradient family as the CTA. */
.newsletter-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 36px 32px;
    border-radius: 24px;
    background-color: #0C3430;
    background-image: linear-gradient(150deg, #071E1C 0%, #0C3430 60%, #114C46 100%);
    color: rgba(255, 255, 255, .88);
}

/* Brand-green illustration filling the whole card. It sits on the bottom layer;
   the overlay below it re-darkens the left half so the heading and copy keep
   their contrast over the artwork. */
.newsletter-card__figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    line-height: 0;
    pointer-events: none;
    opacity: .34;
}
.newsletter-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 50%;
}

/* Readability scrim: heaviest where the text sits, clearing towards the right
   so the illustration still reads at the edge. */
.newsletter-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(7, 30, 28, .94) 0%, rgba(7, 30, 28, .82) 38%, rgba(7, 30, 28, .52) 68%, rgba(7, 30, 28, .28) 100%);
}

.newsletter-card > :not(.newsletter-card__figure) {
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .newsletter-card__figure {
        opacity: .26;
    }
}
.newsletter-card__title {
    margin: 0 0 12px;
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 24px;
    font-weight: 700;
}
.newsletter-card__text {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}
.newsletter-card__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.newsletter-card .form-control {
    padding: 13px 22px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: var(--title-color);
    font-size: 15px;
}
.newsletter-card .form-control:focus {
    box-shadow: 0 0 0 3px rgba(12, 163, 12, .35);
}
.newsletter-card__btn {
    padding: 13px 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(7, 30, 28, .85);
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease;
}
.newsletter-card__btn:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
}
.newsletter-card__btn:disabled {
    opacity: .6;
}
.newsletter-card__status {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    min-height: 0;
}
.newsletter-card__status.success {
    color: #9BE8B4;
}
.newsletter-card__status.error {
    color: #FFC9C9;
}

/* Info tiles — one tinted, one soft, one outlined, like the reference row.
   The icon chip sits in the tile's top-right corner. */
.contact-tile {
    position: relative;
    height: 100%;
    padding: 88px 26px 28px;
    border-radius: 20px;
}
.contact-tile--green {
    background: var(--smoke-color3, #E7F6EC);
}
.contact-tile--soft {
    background: var(--smoke-color2, #F8F8F8);
}
.contact-tile--outline {
    background: #ffffff;
    border: 1px solid var(--th-border-color);
}
.contact-tile__icon {
    position: absolute;
    top: 26px;
    right: 26px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 20px;
}
.contact-tile--outline .contact-tile__icon {
    background: var(--accent-soft, rgba(12, 163, 12, .12));
    color: var(--theme-color);
}
.contact-tile__title {
    display: block;
    margin: 0 0 8px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
a.contact-tile__title:hover {
    color: var(--theme-color);
}
.contact-tile__text {
    margin: 0;
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.65;
}

/* Map band with the floating location card. */
.contact-map {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--th-border-color);
    border-radius: 22px;
    background: #F3FAF5;
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}
.contact-map__card {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 40px);
    padding: 14px 18px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(7, 30, 28, .16);
}
.contact-map__pin {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 17px;
}
.contact-map__title {
    margin: 0 0 2px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
}
.contact-map__text {
    color: var(--body-color);
    font-size: 13px;
}
@media (max-width: 767.98px) {
    .contact-map iframe {
        height: 300px;
    }
}

/* ── Inner-page content blocks (About / Features / Industries) ───────── */

/* Feature tile: one icon, one title, one short line. */
.paylyhr-tile {
    height: 100%;
    padding: 26px 24px;
    border: 1px solid var(--th-border-color);
    border-radius: 16px;
    background: #ffffff;
}
.paylyhr-tile > i {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--accent-soft, rgba(12, 163, 12, .12));
    color: var(--theme-color);
    font-size: 19px;
}
.paylyhr-tile h3 {
    margin: 16px 0 6px;
    font-size: 17px;
    line-height: 1.3;
}
.paylyhr-tile p {
    margin: 0;
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.65;
}

/* Numbered step card. */
.paylyhr-step {
    display: flex;
    gap: 15px;
    height: 100%;
    padding: 22px;
    border: 1px solid var(--th-border-color);
    border-radius: 16px;
    background: #ffffff;
}
.paylyhr-step__num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #ffffff;
    font-family: var(--title-font);
    font-weight: 600;
}
.paylyhr-step h3 {
    margin: 2px 0 6px;
    font-size: 16px;
}
.paylyhr-step p {
    margin: 0;
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.65;
}

/* Compact FAQ accordion. */
.paylyhr-faq details {
    margin-bottom: 10px;
    border: 1px solid var(--th-border-color);
    border-radius: 14px;
    background: #ffffff;
}
.paylyhr-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 600;
}
.paylyhr-faq summary::-webkit-details-marker {
    display: none;
}
.paylyhr-faq summary:after {
    content: "+";
    color: var(--theme-color);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.paylyhr-faq details[open] summary {
    color: var(--theme-color);
}
.paylyhr-faq details[open] summary:after {
    content: "–";
}
.paylyhr-faq__a {
    padding: 0 20px 16px;
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.7;
}

/* Slim product screenshot panel (features page). */
.paylyhr-screen {
    overflow: hidden;
    border: 1px solid var(--th-border-color);
    border-radius: 18px;
    background: #ffffff;
}

/* ── Features page: dark hero, alternating card system, collage ───────
   Structure follows the referenced layout; every colour is drawn from the
   PAYLYHR green family rather than the reference lime/cream. */
:root {
    --paylyhr-lime: #9EE87C;
    --paylyhr-lime-deep: #7CD957;
    --paylyhr-ink: #071E1C;
}

/* Page hero — replaces the template breadcrumb block. */
.paylyhr-phero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 92px;
    background-color: #0C3430;
    background-image: linear-gradient(118deg, #041614 0%, #0A2C28 46%, #10453F 100%);
    color: rgba(255, 255, 255, .8);
}
.paylyhr-phero::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -12%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(158, 232, 124, .16) 0%, transparent 68%);
    pointer-events: none;
}
.paylyhr-phero > .container {
    position: relative;
    z-index: 1;
}
.paylyhr-phero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 8px 18px;
    border: 1px solid rgba(158, 232, 124, .35);
    border-radius: 999px;
    background: rgba(158, 232, 124, .1);
    color: var(--paylyhr-lime);
    font-family: var(--title-font);
    font-size: 13px;
    font-weight: 600;
}
.paylyhr-phero__title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.12;
}
.paylyhr-phero__title span {
    color: var(--paylyhr-lime);
}
.paylyhr-phero__text {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
}
.paylyhr-phero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
}
.paylyhr-phero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--paylyhr-lime);
    color: var(--paylyhr-ink);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .25s ease, transform .25s ease;
}
.paylyhr-phero__cta:hover {
    background: #ffffff;
    color: var(--paylyhr-ink);
    transform: translateY(-2px);
}
.paylyhr-phero__call {
    display: inline-flex;
    align-items: center;
    gap: 13px;
}
.paylyhr-phero__call > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--paylyhr-lime);
    font-size: 16px;
}
.paylyhr-phero__call-label {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.paylyhr-phero__call-value {
    display: block;
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 15.5px;
    font-weight: 600;
}
a.paylyhr-phero__call-value:hover {
    color: var(--paylyhr-lime);
}
.paylyhr-phero__screen {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
    line-height: 0;
}
.paylyhr-phero__screen img {
    width: 100%;
    height: auto;
}

@media (max-width: 1199.98px) {
    .paylyhr-phero__title {
        font-size: 44px;
    }
}
@media (max-width: 991.98px) {
    .paylyhr-phero {
        padding: 70px 0 66px;
    }
    .paylyhr-phero__title {
        font-size: 36px;
    }
    .paylyhr-phero__text {
        max-width: none;
    }
}

/* Tinted band used between the white sections. */
.paylyhr-band {
    background: #F3FAF5;
}

/* Small pill eyebrow above a section title. */
.paylyhr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(12, 163, 12, .1);
    color: var(--theme-color);
    font-family: var(--title-font);
    font-size: 12.5px;
    font-weight: 600;
}

/* Split section header: title left, supporting copy right. */
.paylyhr-split-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 42px;
}
.paylyhr-split-head__main {
    flex: 1 1 420px;
}
.paylyhr-split-head__title {
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
}
.paylyhr-split-head__title span {
    color: var(--theme-color);
}
.paylyhr-split-head__text {
    flex: 0 1 380px;
    margin: 0;
    color: var(--body-color);
    font-size: 14.5px;
    line-height: 1.75;
}
@media (max-width: 767.98px) {
    .paylyhr-split-head__title {
        font-size: 30px;
    }
}

/* Signature feature card — white / lime / dark, cycled across the row. */
.paylyhr-fcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 30px 30px;
    border: 1px solid var(--th-border-color);
    border-radius: 24px;
    background: #ffffff;
    transition: transform .3s ease, box-shadow .3s ease;
}
.paylyhr-fcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(7, 30, 28, .1);
}
.paylyhr-fcard__icon {
    margin-bottom: 26px;
    color: var(--theme-color);
    font-size: 34px;
    line-height: 1;
}
.paylyhr-fcard__title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}
.paylyhr-fcard__text {
    margin: 0 0 26px;
    color: var(--body-color);
    font-size: 14.5px;
    line-height: 1.7;
}
.paylyhr-fcard__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 10px 20px;
    border-radius: 999px;
    background: #F3FAF5;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease;
}
.paylyhr-fcard__more i {
    font-size: 11px;
}
.paylyhr-fcard__more:hover {
    background: var(--theme-color);
    color: #ffffff;
}

.paylyhr-fcard--lime {
    border-color: var(--paylyhr-lime);
    background-image: linear-gradient(160deg, #B4EF98 0%, #9EE87C 55%, #86DF63 100%);
}
.paylyhr-fcard--lime .paylyhr-fcard__icon,
.paylyhr-fcard--lime .paylyhr-fcard__title {
    color: var(--paylyhr-ink);
}
.paylyhr-fcard--lime .paylyhr-fcard__text {
    color: rgba(7, 30, 28, .76);
}
.paylyhr-fcard--lime .paylyhr-fcard__more {
    background: #ffffff;
    color: var(--paylyhr-ink);
}
.paylyhr-fcard--lime .paylyhr-fcard__more:hover {
    background: var(--paylyhr-ink);
    color: #ffffff;
}

.paylyhr-fcard--dark {
    border-color: transparent;
    background-color: #0C3430;
    background-image: linear-gradient(150deg, #071E1C 0%, #0C3430 60%, #114C46 100%);
}
.paylyhr-fcard--dark .paylyhr-fcard__icon {
    color: var(--paylyhr-lime);
}
.paylyhr-fcard--dark .paylyhr-fcard__title {
    color: #ffffff;
}
.paylyhr-fcard--dark .paylyhr-fcard__text {
    color: rgba(255, 255, 255, .76);
}
.paylyhr-fcard--dark .paylyhr-fcard__more {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #ffffff;
}
.paylyhr-fcard--dark .paylyhr-fcard__more:hover {
    background: var(--paylyhr-lime);
    border-color: var(--paylyhr-lime);
    color: var(--paylyhr-ink);
}

/* Screenshot collage: one wide panel over a stat card + phone panel. */
.paylyhr-collage {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 18px;
}
.paylyhr-collage__wide {
    grid-column: 1 / -1;
}
.paylyhr-collage__panel {
    overflow: hidden;
    border: 1px solid var(--th-border-color);
    border-radius: 20px;
    background: #ffffff;
    line-height: 0;
}
.paylyhr-collage__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.paylyhr-collage__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 24px;
    border-radius: 20px;
    background-image: linear-gradient(160deg, #B4EF98 0%, #9EE87C 55%, #86DF63 100%);
    color: var(--paylyhr-ink);
}
.paylyhr-collage__stat > i {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 1;
}
.paylyhr-collage__stat-num {
    display: block;
    font-family: var(--title-font);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}
.paylyhr-collage__stat-label {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(7, 30, 28, .76);
}
@media (max-width: 575.98px) {
    .paylyhr-collage {
        grid-template-columns: 1fr;
    }
}

/* Small proof cards beside the collage copy. */
.paylyhr-proof {
    height: 100%;
    padding: 24px 22px;
    border: 1px solid var(--th-border-color);
    border-radius: 18px;
    background: #F3FAF5;
}
.paylyhr-proof__num {
    display: block;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.paylyhr-proof__label {
    margin: 10px 0 0;
    color: var(--body-color);
    font-size: 13.5px;
    line-height: 1.5;
}
.paylyhr-proof__title {
    margin: 0 0 14px;
    font-size: 15px;
}
.paylyhr-proof__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.paylyhr-proof__tags li {
    padding: 6px 13px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--body-color);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Brand chip under the collage copy. */
.paylyhr-byline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.paylyhr-byline__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 17px;
}
.paylyhr-byline__name {
    display: block;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: 14.5px;
    font-weight: 700;
}
.paylyhr-byline__role {
    display: block;
    color: var(--body-color);
    font-size: 12.5px;
}

/* ══ 2026-10 refresh: header, one inner-page header, pricing, get started ══
   Same palette as everything above: #0ca30c green, the dark teal
   (#071E1C → #114C46) and the soft green wash. Nothing new in colour. */

/* ── Header: one aligned row. Logo | menu centred in the free space | actions */
.paylyhr-header .menu-area { padding: 0; }
.paylyhr-header__row {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 84px;
}
.paylyhr-header__logo { flex: 0 0 auto; }
.paylyhr-header__nav {
    flex: 1 1 auto;
    justify-content: center;
}
.paylyhr-header__nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.paylyhr-header__nav > ul > li { margin: 0; }
.paylyhr-header__nav > ul > li > a {
    padding: 30px 0;
    font-size: 15.5px;
    line-height: 1;
    white-space: nowrap;
}
.paylyhr-header__nav > ul > li > a.paylyhr-header__partner {
    color: var(--theme-color);
    font-weight: 600;
}
.paylyhr-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.paylyhr-header__nav + .paylyhr-header__actions { margin-left: 0; }
.th-btn.paylyhr-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 13px 26px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1279.98px) {
    .paylyhr-header__nav > ul { gap: 0; }
    .paylyhr-header .main-menu.paylyhr-header__nav > ul > li > a { padding-left: 10px; padding-right: 10px; font-size: 14.5px; }
    .th-btn.paylyhr-header__btn { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 991.98px) {
    .paylyhr-header__row { min-height: 72px; }
    .paylyhr-header .header-logo img { height: 36px; }
}

/* ── Inner-page header (breadcumb-wrapper): the contact-page pattern ────── */
.breadcumb-wrapper.paylyhr-page-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 76px;
    text-align: center;
    background-color: transparent;
    background-image: linear-gradient(180deg, #E7F6EC 0%, #F3FAF5 70%, #ffffff 100%);
}
.paylyhr-page-hero__chevrons {
    position: absolute;
    color: var(--theme-color);
    opacity: .30;
}
.paylyhr-page-hero__chevrons--left { left: 5%; top: 46%; }
.paylyhr-page-hero__chevrons--right { right: 5%; top: 30%; }
.paylyhr-page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.paylyhr-page-hero__crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 22px;
    padding: 7px 16px;
    list-style: none;
    border: 1px solid rgba(12, 163, 12, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 6px 20px -12px rgba(7, 30, 28, .35);
    font-size: 14px;
    font-weight: 500;
}
.paylyhr-page-hero__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--title-color);
}
.paylyhr-page-hero__crumbs a { color: var(--body-color); }
.paylyhr-page-hero__crumbs a:hover { color: var(--theme-color); }
.paylyhr-page-hero__crumbs svg { color: var(--theme-color); opacity: .8; }
.paylyhr-page-hero__crumbs [aria-current] { color: var(--theme-color); font-weight: 600; }
.paylyhr-page-hero__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--theme-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.paylyhr-page-hero__title {
    margin: 0;
    color: var(--title-color);
    font-family: var(--title-font);
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
}
.paylyhr-page-hero__squiggle { display: block; margin: 14px auto 0; }
.paylyhr-page-hero__text {
    margin: 18px auto 0;
    max-width: 580px;
    color: var(--body-color);
    font-size: 16.5px;
    line-height: 1.7;
}
@media (max-width: 767.98px) {
    .breadcumb-wrapper.paylyhr-page-hero { padding: 64px 0 52px; }
    .paylyhr-page-hero__chevrons { opacity: .16; }
    .paylyhr-page-hero__chevrons--left { left: -30px; }
    .paylyhr-page-hero__chevrons--right { right: -30px; }
}

/* Features: product screen right under the page header. */
.paylyhr-showcase { padding: 8px 0 40px; }
.paylyhr-showcase__frame {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 24px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    box-shadow: 0 30px 60px -30px rgba(7, 30, 28, .55);
}
.paylyhr-showcase__frame img { display: block; width: 100%; height: auto; border-radius: 16px; }
.paylyhr-showcase__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

/* ── Pricing: three tiered cards on the brand dark teal ─────────────────── */
.paylyhr-pricing__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.paylyhr-pricing__title { margin-bottom: 14px; }
.paylyhr-pricing__lead { max-width: 560px; margin: 0 auto; }
.paylyhr-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    max-width: 1140px;
    margin: 56px auto 0;
}
.paylyhr-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 34px 32px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    background-image: linear-gradient(160deg, #0C2A26 0%, #071E1C 100%);
    color: rgba(255, 255, 255, .72);
    box-shadow: 0 30px 60px -36px rgba(7, 30, 28, .7);
    transition: transform .25s ease, box-shadow .25s ease;
}
.paylyhr-plan:hover { transform: translateY(-4px); }
.paylyhr-plan--popular {
    border: 2px solid var(--theme-color);
    transform: translateY(-14px);
    box-shadow: 0 36px 70px -30px rgba(12, 163, 12, .45);
}
.paylyhr-plan--popular:hover { transform: translateY(-18px); }
.paylyhr-plan__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.paylyhr-plan__name {
    margin: 0;
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 26px;
    font-weight: 700;
}
.paylyhr-plan .paylyhr-plan__tagline {
    color: rgba(255, 255, 255, .7);
    margin: 10px 0 0;
    min-height: 52px;
    font-size: 15.5px;
    line-height: 1.6;
}
.paylyhr-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.paylyhr-plan__amount {
    color: #ffffff;
    font-family: var(--title-font);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
}
.paylyhr-plan__unit { font-size: 15px; color: rgba(255, 255, 255, .6); }
.paylyhr-plan__list {
    flex: 1 1 auto;
    margin: 26px 0 30px;
    padding: 0;
    list-style: none;
}
.paylyhr-plan__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    color: rgba(255, 255, 255, .88);
    font-size: 15.5px;
}
.paylyhr-plan__check {
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}
.paylyhr-plan--popular .paylyhr-plan__check { background: var(--theme-color); }
.paylyhr-plan__cta {
    display: block;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.paylyhr-plan__cta:hover { background: rgba(255, 255, 255, .18); color: #ffffff; }
.paylyhr-plan--popular .paylyhr-plan__cta { background: var(--theme-color); }
.paylyhr-plan--popular .paylyhr-plan__cta:hover { background: #0a8f0a; }
.paylyhr-plan__sub {
    display: block;
    margin-top: 14px;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    text-align: center;
}
.paylyhr-plan__sub:hover { color: #ffffff; }
.paylyhr-pricing__note {
    display: flex;
    text-align: left !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 44px auto 0;
    max-width: 720px;
    text-align: center;
}
.paylyhr-pricing__note svg { flex: 0 0 auto; color: var(--theme-color); }
@media (max-width: 991.98px) {
    .paylyhr-pricing__grid { grid-template-columns: 1fr; max-width: 460px; gap: 40px; }
    .paylyhr-plan--popular, .paylyhr-plan--popular:hover { transform: none; }
    .paylyhr-plan__tagline { min-height: 0; }
}

/* ── Get started (trial step 1) ────────────────────────────────────────── */
.paylyhr-start { padding: 8px 0 110px; }
.paylyhr-start__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: start;
}
.paylyhr-start__card {
    padding: 40px;
    border: 1px solid var(--th-border-color);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 30px 60px -40px rgba(7, 30, 28, .35);
}
.paylyhr-start__steps {
    display: flex;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-color);
}
.paylyhr-start__steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--smoke-color4);
}
.paylyhr-start__steps li span {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--th-border-color);
    font-size: 13px;
}
.paylyhr-start__steps li.is-active { background: var(--smoke-color3); color: var(--title-color); }
.paylyhr-start__steps li.is-active span { background: var(--theme-color); border-color: var(--theme-color); color: #ffffff; }
.paylyhr-start__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}
.paylyhr-start__lead { margin: 8px 0 26px; }
.paylyhr-start__alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: 15px;
}
.paylyhr-start__alert a { margin-left: 6px; font-weight: 600; color: #B91C1C; text-decoration: underline; }
.paylyhr-start__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.paylyhr-field {
    display: block;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}
.paylyhr-field > span,
.paylyhr-field > legend {
    display: block;
    float: none;
    width: auto;
    margin-bottom: 8px;
    color: var(--title-color);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}
.paylyhr-field input[type="text"],
.paylyhr-field input[type="email"],
.paylyhr-field input[type="tel"] {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--th-border-color);
    border-radius: 14px;
    background: var(--smoke-color4);
    color: var(--title-color);
    font-size: 15.5px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.paylyhr-field input:focus {
    border-color: var(--theme-color);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(12, 163, 12, .12);
}
.paylyhr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.paylyhr-chip { position: relative; margin: 0; cursor: pointer; }
.paylyhr-chip input,
.paylyhr-plan-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.paylyhr-chip span {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--th-border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--title-color);
    font-size: 14.5px;
    font-weight: 500;
    transition: all .2s ease;
}
.paylyhr-chip input:checked + span { border-color: var(--theme-color); background: var(--smoke-color3); color: var(--theme-color); font-weight: 600; }
.paylyhr-chip input:focus-visible + span,
.paylyhr-plan-pick__item input:focus-visible + span { box-shadow: 0 0 0 4px rgba(12, 163, 12, .2); }
.paylyhr-plan-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.paylyhr-plan-pick__item { margin: 0; cursor: pointer; }
.paylyhr-plan-pick__item > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--th-border-color);
    border-radius: 14px;
    background: #ffffff;
    transition: all .2s ease;
}
.paylyhr-plan-pick__item strong { color: var(--title-color); font-size: 15.5px; }
.paylyhr-plan-pick__item em { color: var(--theme-color); font-size: 12.5px; font-style: normal; font-weight: 600; }
.paylyhr-plan-pick__item input:checked + span { border-color: var(--theme-color); background: var(--smoke-color3); box-shadow: inset 0 0 0 1px var(--theme-color); }
.paylyhr-start__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: 14px;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 16.5px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}
.paylyhr-start__submit:hover { background: #0a8f0a; transform: translateY(-1px); }
.paylyhr-start__fine { margin: 16px 0 0; font-size: 14px; text-align: center; }
.paylyhr-start__fine a { font-weight: 600; }
.paylyhr-start__side {
    position: sticky;
    top: 110px;
    padding: 36px 32px;
    border-radius: 24px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    color: rgba(255, 255, 255, .78);
}
.paylyhr-start__badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(12, 163, 12, .2);
    color: #7BE07B;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.paylyhr-start__side h3 { margin: 16px 0 20px; color: #ffffff; font-size: 24px; line-height: 1.3; }
.paylyhr-start__side ul { margin: 0; padding: 0; list-style: none; }
.paylyhr-start__side ul li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #ffffff; font-size: 15.5px; }
.paylyhr-start__side ul i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #7BE07B;
    font-size: 14px;
}
.paylyhr-start__how {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.paylyhr-start__how p { margin: 0 0 10px; color: #ffffff; }
.paylyhr-start__how ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }
.paylyhr-start__how ol li { padding: 3px 0; }
.paylyhr-start__help { margin: 22px 0 0; font-size: 14px; }
.paylyhr-start__help a { color: #7BE07B; font-weight: 600; }
@media (max-width: 991.98px) {
    .paylyhr-start__grid { grid-template-columns: 1fr; }
    .paylyhr-start__side { position: static; }
}
@media (max-width: 575.98px) {
    .paylyhr-start__card { padding: 26px 20px; }
    .paylyhr-start__row { grid-template-columns: 1fr; gap: 0; }
    .paylyhr-plan-pick { grid-template-columns: 1fr; }
    .paylyhr-start__steps { flex-wrap: wrap; }
}

/* ── Header v2: Product ▾ · Pricing · Industries ▾ · Log in · Start Free Trial ── */
.paylyhr-header__login {
    align-items: center;
    padding: 10px 14px;
    color: var(--title-color);
    font-size: 15.5px;
    font-weight: 500;
}
.paylyhr-header__login:hover { color: var(--theme-color); }
.paylyhr-header__nav > ul { gap: 14px; }
.main-menu .paylyhr-header__menu {
    min-width: 280px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--th-border-color);
    box-shadow: 0 24px 48px -24px rgba(7, 30, 28, .35);
}
.main-menu .paylyhr-header__menu li { display: block; margin: 0; padding: 0; }
.main-menu .paylyhr-header__menu li a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.35;
}
.main-menu .paylyhr-header__menu li a::before { display: none; }
.main-menu .paylyhr-header__menu li a:hover { background: var(--smoke-color4); }
.main-menu .paylyhr-header__menu strong { display: block; color: var(--title-color); font-weight: 600; }
.main-menu .paylyhr-header__menu small { display: block; margin-top: 2px; color: var(--body-color); font-size: 13px; font-weight: 400; }
.main-menu .paylyhr-header__menu-all a { color: var(--theme-color) !important; font-weight: 600; }
@media (max-width: 991.98px) {
    .th-btn.paylyhr-header__btn { padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 380px) {
    .th-btn.paylyhr-header__btn { padding: 10px 12px; font-size: 13px; }
}

/* Page header extras: second line, actions, trust line. */
.paylyhr-page-hero__text--sub { margin-top: 8px; color: var(--title-color); font-weight: 500; }
.paylyhr-page-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.paylyhr-page-hero__trust { margin: 16px 0 0; font-size: 14.5px; color: var(--body-color); }

/* Product pages */
.paylyhr-product__who {
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--smoke-color4);
    color: var(--title-color);
    font-weight: 600;
    text-align: center;
}
.paylyhr-product__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.paylyhr-product__card {
    padding: 28px;
    border: 1px solid var(--th-border-color);
    border-radius: 20px;
    background: #ffffff;
}
.paylyhr-product__card i {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--smoke-color3);
    color: var(--theme-color);
    font-size: 18px;
}
.paylyhr-product__card h3 { margin: 16px 0 8px; font-size: 21px; }
.paylyhr-product__card p { margin: 0; line-height: 1.65; }
.paylyhr-product__proof { max-width: 1040px; margin: 56px auto 0; text-align: center; }
.paylyhr-product__proof figcaption { margin-top: 14px; font-size: 14.5px; }
.paylyhr-product__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1040px;
    margin: 56px auto 0;
    padding: 30px 34px;
    border-radius: 22px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    color: rgba(255, 255, 255, .78);
}
.paylyhr-product__price h3 { margin: 0 0 6px; color: #ffffff; font-size: 24px; }
.paylyhr-product__price p { margin: 0; }
.paylyhr-product__price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.paylyhr-product__price-actions a.paylyhr-link { color: #7BE07B; font-weight: 600; }
@media (max-width: 767.98px) {
    .paylyhr-product__grid { grid-template-columns: 1fr; }
}

/* ── Pricing page ──────────────────────────────────────────────────────── */
.paylyhr-pricing--page { padding: 8px 0 80px; }
.paylyhr-cycle {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px;
    gap: 4px;
    border: 1px solid var(--th-border-color);
    border-radius: 999px;
    background: #ffffff;
}
.paylyhr-cycle__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 600;
}
.paylyhr-cycle__btn span {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--smoke-color3);
    color: var(--theme-color);
    font-size: 12px;
}
.paylyhr-cycle__btn.is-active { background: var(--theme-color); color: #ffffff; }
.paylyhr-cycle__btn.is-active span { background: rgba(255, 255, 255, .2); color: #ffffff; }
.paylyhr-plan .paylyhr-plan__billing { margin: -16px 0 0; padding-bottom: 4px; color: #7BE07B; font-size: 14px; }
.paylyhr-plan .paylyhr-plan__limits { margin: -12px 0 22px; color: rgba(255, 255, 255, .6); font-size: 14px; }
.paylyhr-plan__price { border-bottom: 0; padding-bottom: 20px; }

.paylyhr-calc {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid var(--th-border-color);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 30px 60px -40px rgba(7, 30, 28, .35);
}
.paylyhr-calc__title { margin: 0 0 20px; font-size: 26px; }
.paylyhr-field select,
.paylyhr-field input[type="number"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--th-border-color);
    border-radius: 14px;
    background: var(--smoke-color4);
    color: var(--title-color);
    font-size: 15.5px;
}
.paylyhr-calc__result {
    padding: 28px;
    border-radius: 20px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    color: rgba(255, 255, 255, .75);
}
.paylyhr-calc__result p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.paylyhr-calc__result strong { color: #ffffff; font-size: 20px; }
.paylyhr-calc__result .paylyhr-calc__save { border: 0; color: #7BE07B; font-weight: 600; }
.paylyhr-calc__result .th-btn { margin-top: 14px; }
.paylyhr-calc__result small { display: block; margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .55); }

.paylyhr-compare {
    max-width: 1040px;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--th-border-color);
    border-radius: 20px;
    background: #ffffff;
}
.paylyhr-compare table { width: 100%; min-width: 620px; margin: 0; border: 0; border-collapse: collapse; }
.paylyhr-compare th,
.paylyhr-compare td { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--th-border-color); text-align: center; font-size: 15px; }
.paylyhr-compare tbody th { text-align: left; font-weight: 500; color: var(--title-color); }
.paylyhr-compare thead th { background: var(--smoke-color4); color: var(--title-color); font-size: 16px; }
.paylyhr-compare thead th:first-child { text-align: left; }
.paylyhr-compare thead small { display: block; color: var(--theme-color); font-size: 13px; font-weight: 600; }
.paylyhr-compare tr:last-child th,
.paylyhr-compare tr:last-child td { border-bottom: 0; }
.paylyhr-compare__yes { color: var(--theme-color); font-weight: 700; font-size: 18px; }
.paylyhr-compare__no { color: #B8C0C8; font-size: 16px; }

.paylyhr-faq { max-width: 820px; margin: 0 auto; }
.paylyhr-final-cta {
    max-width: 820px;
    margin: 56px auto 0;
    padding: 40px 28px;
    border-radius: 24px;
    background: var(--smoke-color3);
    text-align: center;
}
.paylyhr-final-cta h2 { margin: 0 0 8px; font-size: 30px; }
.paylyhr-final-cta p { margin: 0 0 22px; }
@media (max-width: 767.98px) {
    .paylyhr-calc { grid-template-columns: 1fr; padding: 22px; }
    .paylyhr-cycle__btn { padding: 9px 12px; font-size: 14px; }
}

/* ── Home v2 blocks ────────────────────────────────────────────────────── */
.paylyhr-hero-trust { margin: 18px 0 0; color: var(--body-color); font-size: 15px; font-weight: 500; }
.hero-style3 .btn-group .th-btn { white-space: normal; }
.paylyhr-howsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1140px; margin: 0 auto; }
.paylyhr-howstep {
    position: relative;
    padding: 34px 28px 30px;
    border: 1px solid var(--th-border-color);
    border-radius: 22px;
    background: #ffffff;
}
.paylyhr-howstep__num {
    position: absolute;
    top: 22px;
    right: 24px;
    color: var(--smoke-color3);
    font-family: var(--title-font);
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
}
.paylyhr-howstep i {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 20px;
}
.paylyhr-howstep h3 { margin: 18px 0 8px; font-size: 21px; }
.paylyhr-howstep p { margin: 0; line-height: 1.65; }
.paylyhr-audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1140px; margin: 0 auto; }
.paylyhr-audience__item { padding: 22px; border-radius: 18px; background: var(--smoke-color4); }
.paylyhr-audience__item span { display: block; color: var(--theme-color); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.paylyhr-audience__item p { margin: 8px 0 0; color: var(--title-color); font-size: 17px; font-weight: 600; line-height: 1.45; }
.paylyhr-chip-static { cursor: default; }
.paylyhr-price-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 36px;
    border-radius: 24px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    color: rgba(255, 255, 255, .75);
}
.paylyhr-price-preview h2 { margin: 0 0 8px; color: #ffffff; font-size: 26px; line-height: 1.3; }
.paylyhr-price-preview p { margin: 0; }
.paylyhr-price-preview ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.paylyhr-price-preview li { padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; text-align: center; }
.paylyhr-price-preview li.is-popular { border-color: var(--theme-color); }
.paylyhr-price-preview li strong { display: block; color: #ffffff; font-size: 15px; }
.paylyhr-price-preview li span { display: block; margin-top: 4px; color: #ffffff; font-family: var(--title-font); font-size: 26px; font-weight: 700; }
.paylyhr-price-preview li small { color: rgba(255, 255, 255, .6); font-size: 12px; }
.paylyhr-calc__result p span { color: rgba(255, 255, 255, .8); }
@media (max-width: 1199.98px) {
    .paylyhr-price-preview { grid-template-columns: 1fr; }
    .paylyhr-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .paylyhr-howsteps, .paylyhr-audience, .paylyhr-price-preview ul { grid-template-columns: 1fr; }
    .paylyhr-price-preview { padding: 24px; }
}

/* ── Industry pages v2 ─────────────────────────────────────────────────── */
.paylyhr-industry__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1040px; margin: 0 auto; }
.paylyhr-industry__col { padding: 30px; border-radius: 22px; }
.paylyhr-industry__col--pain { border: 1px solid var(--th-border-color); background: #ffffff; }
.paylyhr-industry__col--fix { background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%); color: rgba(255, 255, 255, .85); }
.paylyhr-industry__col h2 { margin: 0 0 16px; font-size: 22px; }
.paylyhr-industry__col--fix h2 { color: #ffffff; }
.paylyhr-industry__col ul { margin: 0; padding: 0; list-style: none; }
.paylyhr-industry__col li { display: flex; gap: 12px; padding: 9px 0; font-size: 16px; line-height: 1.55; }
.paylyhr-industry__col li span { flex: 0 0 auto; font-weight: 700; }
.paylyhr-industry__col--pain li span { color: #C2410C; }
.paylyhr-industry__col--fix li span { color: #7BE07B; }
.paylyhr-industry__example {
    max-width: 1040px;
    margin: 20px auto 0;
    padding: 28px 30px;
    border-left: 4px solid var(--theme-color);
    border-radius: 0 18px 18px 0;
    background: var(--smoke-color4);
}
.paylyhr-industry__example span { color: var(--theme-color); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.paylyhr-industry__example h3 { margin: 6px 0 8px; font-size: 21px; }
.paylyhr-industry__example p { margin: 0; line-height: 1.7; }
.paylyhr-industry__example small { display: block; margin-top: 10px; color: var(--body-color); font-size: 13px; }
.paylyhr-industry__related { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 32px; font-size: 15px; }
.paylyhr-industry__related a { font-weight: 600; }
@media (max-width: 767.98px) {
    .paylyhr-industry__compare { grid-template-columns: 1fr; }
}
.paylyhr-contact__team { margin: 14px 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.paylyhr-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1140px; margin: 0 auto; }
.paylyhr-about article { padding: 30px; border: 1px solid var(--th-border-color); border-radius: 22px; background: #ffffff; }
.paylyhr-about h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.3; }
.paylyhr-about p { margin: 0; line-height: 1.7; }
.paylyhr-about__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.paylyhr-about__links a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--smoke-color3); font-size: 14px; font-weight: 600; }
@media (max-width: 991.98px) { .paylyhr-about { grid-template-columns: 1fr; } }
.paylyhr-footer__cta { margin-top: 18px; padding: 13px 24px; }
.paylyhr-problem-card > i {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: #FFF1EB;
    color: #C2410C;
    font-size: 22px;
}

/* ── Images (x-site-image) ─────────────────────────────────────────────── */
.paylyhr-img { display: block; }
.paylyhr-img img { display: block; width: 100%; height: auto; }
.paylyhr-img--frame {
    padding: 8px;
    border-radius: 22px;
    background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%);
    box-shadow: 0 30px 60px -30px rgba(7, 30, 28, .45);
}
.paylyhr-img--frame img { border-radius: 15px; }
.paylyhr-product__hero { max-width: 1080px; margin: 0 auto 40px; }
.paylyhr-product__more { margin-top: 64px; }
.paylyhr-howsteps--shots .paylyhr-howstep { padding-top: 22px; }
.paylyhr-howstep__shot { margin: -4px -6px 18px; }
.paylyhr-howstep__shot img { border: 1px solid var(--th-border-color); border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.paylyhr-howsteps--shots .paylyhr-howstep__num { top: auto; bottom: 22px; }
.paylyhr-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 40px auto 0; padding: 0; list-style: none; }
.paylyhr-benefits li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 20px; border-radius: 18px; background: var(--smoke-color4); }
.paylyhr-benefits i { grid-row: span 2; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--theme-color); color: #fff; }
.paylyhr-benefits strong { color: var(--title-color); font-size: 16.5px; }
.paylyhr-benefits span { font-size: 14.5px; line-height: 1.5; }
.paylyhr-proof { max-width: 1040px; margin: 56px auto 0; text-align: center; }
.paylyhr-proof figcaption { margin-top: 14px; font-size: 14.5px; }
.paylyhr-proof figcaption small { display: block; margin-top: 4px; font-size: 12.5px; opacity: .75; }
@media (max-width: 767.98px) {
    .paylyhr-benefits { grid-template-columns: 1fr; }
}

/* Home: hero photo, section photos, product tour, industry cards */
.paylyhr-hero-photo { max-width: 1140px; margin: 48px auto 0; position: relative; z-index: 2; }
.paylyhr-section-photo { max-width: 1140px; margin: 0 auto 32px; }
.paylyhr-section-photo img { border-radius: 22px; aspect-ratio: 3 / 2; object-fit: cover; max-height: 520px; }
.paylyhr-tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1140px; margin: 0 auto; }
.paylyhr-tour__item { margin: 0; }
.paylyhr-tour__item img { border: 1px solid var(--th-border-color); border-radius: 16px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; box-shadow: 0 20px 40px -30px rgba(7, 30, 28, .45); }
.paylyhr-tour__item figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
.paylyhr-tour__item figcaption strong { color: var(--title-color); }
.paylyhr-industry-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1140px; margin: 0 auto; }
.paylyhr-industry-card { display: block; overflow: hidden; border: 1px solid var(--th-border-color); border-radius: 18px; background: #ffffff; transition: transform .2s ease, box-shadow .2s ease; }
.paylyhr-industry-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(7, 30, 28, .45); }
.paylyhr-industry-card img { aspect-ratio: 3 / 2; object-fit: cover; }
.paylyhr-industry-card span { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; color: var(--title-color); font-weight: 600; }
.paylyhr-industry-card i { color: var(--theme-color); }
.paylyhr-industry-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1140px; margin: 22px auto 0; }
.paylyhr-industry-chips a, .paylyhr-industry-chips span { padding: 8px 16px; border: 1px solid var(--th-border-color); border-radius: 999px; color: var(--title-color); font-size: 14.5px; }
.paylyhr-industry-chips a:hover { border-color: var(--theme-color); color: var(--theme-color); }
@media (max-width: 991.98px) { .paylyhr-tour, .paylyhr-industry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .paylyhr-tour, .paylyhr-industry-cards { grid-template-columns: 1fr; } }
.paylyhr-industry__shots { margin-top: 24px; max-width: 1040px; }
.paylyhr-about__photo { margin: 16px 0 0; }
.paylyhr-about__photo img { border-radius: 14px; aspect-ratio: 3 / 2; object-fit: cover; }
.paylyhr-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 36px; max-width: 1140px; margin: 56px auto 0; }
.paylyhr-approach h2 { margin: 6px 0 16px; font-size: 28px; }
.paylyhr-approach ul { margin: 0; padding: 0; list-style: none; }
.paylyhr-approach li { padding: 12px 0; border-bottom: 1px solid var(--th-border-color); line-height: 1.65; }
.paylyhr-approach li strong { color: var(--title-color); }
@media (max-width: 991.98px) { .paylyhr-approach { grid-template-columns: 1fr; } }
.paylyhr-plan__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #7BE07B; font-size: 18px; }
.paylyhr-plan--popular .paylyhr-plan__icon { background: var(--theme-color); color: #ffffff; }
.paylyhr-final-photo { margin-top: 56px; max-width: 820px; }
.paylyhr-contact__faq { margin: 24px 0 0; text-align: center; }
.paylyhr-contact__faq a { font-weight: 600; }

/* ── Phone screenshots (staff app): shown whole in a device outline ── */
.paylyhr-img--phone img { border-radius: 26px; box-shadow: 0 0 0 6px #0b1f1d, 0 24px 48px -24px rgba(7, 30, 28, .55); background: #f3f3f1; }
.paylyhr-howstep__shot.paylyhr-img--phone { display: flex; justify-content: center; align-items: flex-start; height: 248px; margin: -4px -6px 18px; padding: 18px 0 0; overflow: hidden; border: 1px solid var(--th-border-color); border-radius: 14px; background: linear-gradient(180deg, var(--smoke-color3), var(--smoke-color4)); }
.paylyhr-howstep__shot.paylyhr-img--phone img { width: 46%; height: auto; aspect-ratio: auto; border: 0; object-fit: contain; border-radius: 20px 20px 0 0; box-shadow: 0 0 0 5px #0b1f1d; }
.paylyhr-img--frame.paylyhr-img--phone { display: flex; justify-content: center; padding: 28px 0; border-radius: 22px; background: linear-gradient(180deg, var(--smoke-color3), var(--smoke-color4)); }
.paylyhr-img--frame.paylyhr-img--phone img { width: auto; max-width: 300px; max-height: 620px; }

/* ── Home: the staff app band ── */
.paylyhr-appband { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 48px; border-radius: 28px; background-image: linear-gradient(135deg, #071E1C 0%, #0C3430 55%, #114C46 100%); color: rgba(255, 255, 255, .82); }
.paylyhr-appband .sub-title { color: #6fdc7c; }
.paylyhr-appband .sec-title { color: #ffffff; }
.paylyhr-appband .sec-title span { color: #6fdc7c; }
.paylyhr-appband__copy p { margin: 0 0 20px; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.7; }
.paylyhr-appband .sec-title { margin-bottom: 18px; }
.paylyhr-appband__list { margin: 0 0 28px; padding: 0; list-style: none; }
.paylyhr-appband__list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: #ffffff; font-weight: 500; }
.paylyhr-appband__list i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #6fdc7c; font-size: 15px; }
.paylyhr-appband .th-btn { background: #ffffff; color: #071E1C; }
.paylyhr-appband .th-btn:hover { color: #ffffff; }
.paylyhr-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.paylyhr-phone { margin: 0; text-align: center; }
.paylyhr-phone:nth-child(even) { margin-top: 44px; }
.paylyhr-phone img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 5px #06201d, 0 26px 50px -22px rgba(0, 0, 0, .6); }
.paylyhr-phone figcaption { margin-top: 16px; color: #ffffff; font-size: 14px; font-weight: 600; }
.paylyhr-appband__note { margin: 14px 0 0; color: var(--body-color); font-size: 13px; text-align: center; }
@media (max-width: 1199.98px) { .paylyhr-appband { grid-template-columns: 1fr; padding: 36px; } }
@media (max-width: 575.98px) {
    .paylyhr-appband { padding: 28px 20px; border-radius: 22px; }
    .paylyhr-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paylyhr-phone:nth-child(even) { margin-top: 28px; }
}

/* ── Home: industry cards (icon, name, one line; photo on top once sourced) ── */
.paylyhr-industry-card { display: flex; flex-direction: column; color: inherit; }
.paylyhr-industry-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.paylyhr-industry-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: var(--smoke-color3); color: var(--theme-color); font-size: 20px; }
.paylyhr-industry-card h3 { margin: 0 0 8px; font-size: 19px; }
.paylyhr-industry-card p { margin: 0 0 18px; color: var(--body-color); line-height: 1.6; }
.paylyhr-industry-card .paylyhr-industry-card__more { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-start; margin-top: auto; padding: 0; color: var(--theme-color); font-size: 15px; font-weight: 600; }
.paylyhr-industry-card:hover .paylyhr-industry-card__more i { transform: translateX(3px); }
.paylyhr-industry-card__more i { transition: transform .2s ease; }
.paylyhr-industry-more { max-width: 760px; margin: 26px auto 0; color: var(--body-color); text-align: center; }
.paylyhr-industry-more a { color: var(--theme-color); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575.98px) { .paylyhr-industry-cards { grid-template-columns: 1fr; } }

/* ── Home: plan cards ── */
.paylyhr-pricing__lead { max-width: 640px; margin: 10px auto 0; }
.paylyhr-pricing__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; }
.paylyhr-pricing__more a { color: var(--theme-color); font-weight: 600; }

/* ── Staff app downloads (/app and home): platform columns, one row per installer ── */
.paylyhr-dl { max-width: 1180px; margin: 0 auto; padding: 44px; border-radius: 28px; background: #0b1514; color: rgba(255, 255, 255, .72); }
.paylyhr-dl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 34px; }
.paylyhr-dl__head h2 { margin: 0 0 8px; color: #ffffff; font-size: 34px; }
.paylyhr-dl__head p { margin: 0; font-size: 17px; }
.paylyhr-dl__qr { flex: 0 0 auto; text-align: center; }
.paylyhr-dl__qr > div { width: 112px; height: 112px; padding: 10px; border-radius: 14px; background: #ffffff; }
.paylyhr-dl__qr span { display: block; margin-top: 8px; font-size: 12.5px; }
.paylyhr-dl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.paylyhr-dl__col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #ffffff; font-size: 21px; }
.paylyhr-dl__col h3 i { font-size: 22px; }
.paylyhr-dl__col h3 .fa-android { color: #3ddc84; }
.paylyhr-dl__row { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; background: #16211f; color: #ffffff; font-weight: 500; transition: background .2s ease, border-color .2s ease; }
.paylyhr-dl__row.is-ready:hover { border-color: var(--theme-color); background: #1b2a27; color: #ffffff; }
.paylyhr-dl__name { display: flex; flex: 1; align-items: center; gap: 10px; }
.paylyhr-dl__ext { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 400; }
.paylyhr-dl__ver { color: rgba(255, 255, 255, .55); font-size: 14px; }
.paylyhr-dl__go { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--theme-color); color: #ffffff; font-size: 14px; font-weight: 600; }
.paylyhr-dl__badge { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: rgba(255, 255, 255, .8); font-size: 13px; }
.paylyhr-dl__row.is-soon { color: rgba(255, 255, 255, .7); }
.paylyhr-dl__meta { margin: 12px 2px 0; font-size: 14px; }
.paylyhr-dl__meta a, .paylyhr-dl__check summary { color: #6fdc7c; }
.paylyhr-dl__check { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.paylyhr-dl__check summary { cursor: pointer; }
.paylyhr-dl__check code { display: block; margin-top: 10px; color: rgba(255, 255, 255, .8); word-break: break-all; }
.paylyhr-appband__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.paylyhr-appband .th-btn.paylyhr-btn-ghost { border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #ffffff; }
.paylyhr-phones--light .paylyhr-phone figcaption { color: var(--title-color); }
.paylyhr-phones--light { max-width: 980px; margin: 0 auto; }
@media (max-width: 767.98px) {
    .paylyhr-dl { padding: 28px 20px; border-radius: 22px; }
    .paylyhr-dl__head { margin-bottom: 24px; }
    .paylyhr-dl__head h2 { font-size: 26px; }
    .paylyhr-dl__qr { display: none; }
    .paylyhr-dl__grid { grid-template-columns: 1fr; }
    .paylyhr-dl__row { flex-wrap: wrap; padding: 16px; }
    .paylyhr-dl__ver { order: 3; }
}