/* ===========================================================================
   acpos-home.css — the rebuilt AC POS homepage (2026-09-23).

   Loaded from resources/views/landing/home/head.blade.php via the layout's
   @yield('head_extra'), which sits BEFORE the aora/Elementor stylesheets in
   the cascade. Anything here therefore loses a specificity tie against those
   sheets, so every rule is written as `.ac-home .ac-something` (0,2,0) and
   never as a bare element selector. Do not "simplify" that away.

   The page body lives inside .elementor-container (max-width 1140px), so no
   rule here uses 100vw or negative margins to break out: that is what used to
   produce horizontal scroll at 390px.

   Fonts: IBM Plex Sans Arabic is already declared in css/acpos-landing.css
   (self-hosted, public/fonts/ibm-plex-sans-arabic). No external font, no CDN.
   =========================================================================== */

.ac-home {
    --ac-primary: #1F4E79;
    --ac-primary-dark: #14344F;
    --ac-accent-light: #6BA3D6;
    --ac-ink: #10243A;
    --ac-muted: #52657A;
    --ac-line: #DCE5EE;
    --ac-surface: #FFFFFF;
    --ac-tint: #F4F8FC;
    --ac-tint-deep: #EAF2FA;
    --ac-radius: 16px;
    --ac-radius-sm: 10px;
    --ac-gap: 24px;
    --ac-shadow: 0 1px 2px rgba(16, 36, 58, .06), 0 8px 24px rgba(16, 36, 58, .06);

    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    color: var(--ac-ink);
    line-height: 1.7;

    /* The layout puts the page inside #pxl-main > .elementor-container, which the
       theme leaves full-bleed with no gutter, so the page supplies its own. */
    box-sizing: border-box;
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px 16px 8px;
}

.ac-home *,
.ac-home *::before,
.ac-home *::after {
    box-sizing: border-box;
}

/* css/aorabooks/style.css:3375-3410 gives bare h1–h6 a large negative
   letter-spacing (h1 -4px, h2 -3.2px, h3 -2.4px). That is tuned for the donor
   theme's display font; on this page it glued English words together
   ("Unlimitedbranches,noper-userfees"). Reset it for everything in scope —
   (0,1,1) beats the theme's (0,0,1) even though this file loads first. */
.ac-home h1,
.ac-home h2,
.ac-home h3,
.ac-home h4,
.ac-home p,
.ac-home li,
.ac-home a,
.ac-home span,
.ac-home label,
.ac-home summary {
    letter-spacing: normal;
    word-spacing: normal;
}

@media (min-width: 600px) {
    .ac-home {
        padding-inline: 24px;
    }
}

/* The shared footer renders its link list at 20px tall, under the 24px minimum
   (WCAG 2.2 AA 2.5.8). Scoped to the homepage body class because the real fix
   belongs in the shared footer stylesheet, which this brief does not own. */
body.ac-home-body .aora-footer__links a,
body.ac-home-body .aora-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* --- shared primitives --------------------------------------------------- */

.ac-home .ac-section {
    margin: 0 0 64px;
}

.ac-home .ac-section:last-child {
    margin-bottom: 24px;
}

.ac-home .ac-section__head {
    max-width: 760px;
    margin: 0 0 32px;
}

.ac-home .ac-section__label {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ac-tint-deep);
    color: var(--ac-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.ac-home .ac-section__title {
    margin: 0 0 12px;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.35;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-home .ac-section__desc {
    margin: 0;
    font-size: 17px;
    color: var(--ac-muted);
}

.ac-home .ac-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ac-home .ac-icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
}

/* The arrow glyph points right; in RTL "forward" is left. */
[dir="rtl"] .ac-home .ac-icon--arrow {
    transform: scaleX(-1);
}

/* Skip link. It is the first element of the page content, which is as high as
   this view can place it: the header markup lives in landing/aora/layout.blade.php,
   which this work is not allowed to edit. See the build report. */
.ac-home-body .ac-skip {
    position: absolute;
    inset-inline-start: 8px;
    top: -60px;
    z-index: 999;
    padding: 12px 20px;
    border-radius: var(--ac-radius-sm);
    background: var(--ac-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}

.ac-home-body .ac-skip:focus {
    top: 8px;
}

/* --- buttons ------------------------------------------------------------- */

.ac-home .ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--ac-radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ac-home .ac-btn--primary {
    background: var(--ac-primary);
    border-color: var(--ac-primary);
    color: #fff;
}

.ac-home .ac-btn--primary:hover,
.ac-home .ac-btn--primary:focus {
    background: var(--ac-primary-dark);
    border-color: var(--ac-primary-dark);
    color: #fff;
}

.ac-home .ac-btn--ghost {
    background: #fff;
    border-color: var(--ac-primary);
    color: var(--ac-primary);
}

.ac-home .ac-btn--ghost:hover,
.ac-home .ac-btn--ghost:focus {
    background: var(--ac-tint-deep);
    color: var(--ac-primary-dark);
}

.ac-home .ac-btn--on-dark {
    background: #fff;
    border-color: #fff;
    color: var(--ac-primary-dark);
}

.ac-home .ac-btn--on-dark-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}

.ac-home .ac-btn--on-dark-ghost:hover,
.ac-home .ac-btn--on-dark-ghost:focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.ac-home .ac-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: var(--ac-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ac-home .ac-link:hover,
.ac-home .ac-link:focus {
    color: var(--ac-primary-dark);
}

.ac-home a:focus-visible,
.ac-home summary:focus-visible,
.ac-home .ac-billing__radio:focus-visible + .ac-billing__switch {
    outline: 3px solid var(--ac-accent-light);
    outline-offset: 2px;
}

/* --- 1. compliance strip ------------------------------------------------- */

.ac-home .ac-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 32px;
    padding: 12px 18px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-tint);
    font-size: 15px;
}

.ac-home .ac-strip__badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ac-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.ac-home .ac-strip__text {
    color: var(--ac-ink);
    font-weight: 500;
}

/* --- 2. hero ------------------------------------------------------------- */

.ac-home .ac-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin: 0 0 56px;
}

@media (min-width: 900px) {
    .ac-home .ac-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
    }
}

/* Until public/images/landing-v2/hero-pos.webp exists the hero has no media
   column, so it must not reserve an empty half of the fold. */
.ac-home .ac-hero--text-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
}

.ac-home .ac-hero__title {
    margin: 0 0 16px;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-home .ac-hero__accent {
    display: block;
    margin-top: 8px;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    color: var(--ac-primary);
}

.ac-home .ac-hero__lead {
    margin: 0 0 24px;
    font-size: 18px;
    color: var(--ac-muted);
}

.ac-home .ac-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
}

.ac-home .ac-hero__note {
    margin: 0;
    font-size: 14px;
    color: var(--ac-muted);
}

.ac-home .ac-hero__media {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    background: var(--ac-tint);
    box-shadow: var(--ac-shadow);
}

.ac-home .ac-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ac-radius-sm);
}

/* --- 3. proof strip ------------------------------------------------------ */

.ac-home .ac-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin: 0 0 64px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    background: var(--ac-line);
    overflow: hidden;
}

.ac-home .ac-proof__item {
    padding: 18px 20px;
    background: var(--ac-surface);
}

.ac-home .ac-proof__value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--ac-primary);
}

.ac-home .ac-proof__label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ac-muted);
}

/* --- 4. services --------------------------------------------------------- */

.ac-home .ac-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ac-gap);
}

.ac-home .ac-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    background: var(--ac-surface);
    overflow: hidden;
}

.ac-home .ac-card__media {
    margin: 0;
    border-bottom: 1px solid var(--ac-line);
    background: var(--ac-tint);
}

.ac-home .ac-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.ac-home .ac-card__body {
    padding: 22px;
}

.ac-home .ac-card__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-home .ac-card__value {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--ac-muted);
}

.ac-home .ac-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-home .ac-points li {
    display: flex;
    align-items: start;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.6;
}

.ac-home .ac-points li:last-child {
    margin-bottom: 0;
}

.ac-home .ac-points .ac-icon {
    margin-top: 6px;
    color: var(--ac-primary);
    font-size: 14px;
}

.ac-home .ac-card__link {
    margin: 14px 0 0;
    font-size: 15px;
}

/* --- 5. zatca ------------------------------------------------------------ */

.ac-home .ac-zatca {
    padding: 32px;
    border-radius: var(--ac-radius);
    background: var(--ac-tint);
}

.ac-home .ac-zatca__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 900px) {
    .ac-home .ac-zatca__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ac-home .ac-step {
    padding: 18px 20px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-surface);
}

.ac-home .ac-step__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ac-primary);
}

.ac-home .ac-step__desc {
    margin: 0;
    font-size: 15px;
    color: var(--ac-muted);
}

.ac-home .ac-zatca__media {
    margin: 24px 0 0;
}

.ac-home .ac-zatca__media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: #fff;
}

.ac-home .ac-note {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-inline-start: 4px solid var(--ac-accent-light);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-surface);
    font-size: 15px;
    color: var(--ac-muted);
}

/* --- 6. sectors ---------------------------------------------------------- */

.ac-home .ac-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-home .ac-sectors li {
    padding: 16px 18px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-surface);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* --- 7 & 8. plain feature grids ------------------------------------------ */

.ac-home .ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ac-gap);
}

.ac-home .ac-tile {
    display: flex;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    background: var(--ac-surface);
}

.ac-home .ac-tile .ac-icon {
    margin-top: 6px;
    color: var(--ac-primary);
    font-size: 16px;
}

.ac-home .ac-tile__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-home .ac-tile__desc {
    margin: 0;
    font-size: 15px;
    color: var(--ac-muted);
}

.ac-home .ac-nocharge {
    padding: 32px;
    border-radius: var(--ac-radius);
    background: var(--ac-primary);
    color: #fff;
}

.ac-home .ac-nocharge .ac-section__title,
.ac-home .ac-nocharge .ac-section__desc {
    color: #fff;
}

.ac-home .ac-nocharge .ac-section__desc {
    opacity: .9;
}

.ac-home .ac-nocharge .ac-tile {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
}

.ac-home .ac-nocharge .ac-tile__title {
    color: #fff;
}

.ac-home .ac-nocharge .ac-tile__desc {
    color: rgba(255, 255, 255, .88);
}

.ac-home .ac-nocharge .ac-icon {
    color: #fff;
}

/* --- 9. pricing ---------------------------------------------------------- */

.ac-home .ac-billing__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.ac-home .ac-billing__switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 24px;
    padding: 4px;
    border: 1px solid var(--ac-line);
    border-radius: 999px;
    background: var(--ac-tint);
}

.ac-home .ac-billing__option {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 22px;
    border-radius: 999px;
    color: var(--ac-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.ac-home #ac-billing-months:checked ~ .ac-billing__switch .ac-billing__option--months,
.ac-home #ac-billing-years:checked ~ .ac-billing__switch .ac-billing__option--years {
    background: var(--ac-primary);
    color: #fff;
}

.ac-home #ac-billing-months:checked ~ .ac-plans .ac-plan--years,
.ac-home #ac-billing-years:checked ~ .ac-plans .ac-plan--months {
    display: none;
}

.ac-home .ac-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ac-gap);
}

.ac-home .ac-plan {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    background: var(--ac-surface);
}

.ac-home .ac-plan--popular {
    border-color: var(--ac-primary);
    box-shadow: var(--ac-shadow);
}

.ac-home .ac-plan__name {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ac-ink);
}

.ac-home .ac-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 12px;
}

.ac-home .ac-plan__amount {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ac-primary);
}

.ac-home .ac-plan__period {
    font-size: 15px;
    color: var(--ac-muted);
}

.ac-home .ac-plan__desc {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ac-muted);
}

.ac-home .ac-plan__limits {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.ac-home .ac-plan__limits li {
    display: flex;
    align-items: start;
    gap: 8px;
    margin-bottom: 6px;
}

.ac-home .ac-plan__limits .ac-icon {
    margin-top: 6px;
    color: var(--ac-primary);
    font-size: 14px;
}

.ac-home .ac-plan__includes {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--ac-muted);
}

.ac-home .ac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.ac-home .ac-chips li {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ac-tint-deep);
    color: var(--ac-primary);
    font-size: 13px;
    font-weight: 600;
}

.ac-home .ac-plan__cta {
    margin-top: auto;
    width: 100%;
}

.ac-home .ac-pricing__notes {
    margin: 24px 0 0;
    font-size: 15px;
    color: var(--ac-muted);
}

.ac-home .ac-pricing__notes p {
    margin: 0 0 6px;
}

/* --- 10. faq ------------------------------------------------------------- */

.ac-home .ac-faq {
    display: grid;
    gap: 12px;
}

.ac-home .ac-faq__item {
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-surface);
}

.ac-home .ac-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
}

.ac-home .ac-faq__q::-webkit-details-marker {
    display: none;
}

.ac-home .ac-faq__q-text {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ac-ink);
}

.ac-home .ac-faq__chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ac-primary);
    transition: transform .15s ease;
}

.ac-home .ac-faq__item[open] .ac-faq__chevron {
    transform: rotate(180deg);
}

.ac-home .ac-faq__a {
    margin: 0;
    padding: 0 20px 18px;
    font-size: 15.5px;
    color: var(--ac-muted);
}

/* --- 11. closing cta ----------------------------------------------------- */

.ac-home .ac-final {
    padding: 40px 32px;
    border-radius: var(--ac-radius);
    background: var(--ac-primary);
    color: #fff;
    text-align: center;
}

.ac-home .ac-final .ac-section__title {
    color: #fff;
}

.ac-home .ac-final__desc {
    max-width: 640px;
    margin: 0 auto 24px;
    font-size: 17px;
    color: rgba(255, 255, 255, .9);
}

.ac-home .ac-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ac-home .ac-final__phone {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
}

.ac-home .ac-final__phone a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 599px) {
    .ac-home .ac-zatca,
    .ac-home .ac-nocharge {
        padding: 24px 20px;
    }

    .ac-home .ac-final {
        padding: 32px 20px;
    }

    .ac-home .ac-btn {
        width: 100%;
    }

    .ac-home .ac-hero__actions .ac-btn,
    .ac-home .ac-final__actions .ac-btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-home-body .ac-skip,
    .ac-home .ac-btn,
    .ac-home .ac-faq__chevron {
        transition: none;
    }
}