/* =============================================================================
   AJARI — Landing Page v2
   -----------------------------------------------------------------------------
   Design language adapted from almiraproperties.com: a floating pill navbar,
   inset rounded hero cards, uppercase eyebrows on wide tracking, a cool
   off-white ground and a generous radius scale.

   Where the reference leans on champagne/bronze (#D0C09E / #8A6A37) as its
   accent, this uses the Ajari brand teal (#20857A) so the page stays
   continuous with the dashboard, login and registration. A muted sand tone is
   kept for decorative rules and the blueprint texture only — never for text
   or controls — so the reference's warmth survives without diluting the brand.

   Type runs on Thmanyah (font.thmanyah.com) for both display and body copy,
   English and Arabic alike, so the whole app — landing, login, registration,
   dashboard — shares one typeface instead of pairing separate faces per
   script or surface.

   RTL is handled with logical properties, so ar/en share one rule set.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Colour — every token that was here (the teal ramp, the neutrals, the
       semantic bg/surface/text/accent set, the status colours and the elevation
       scale) now lives in includes/css/brand.css, which this page loads first.
       It was lifted from this file in the first place; keeping one copy means
       the landing page, login, registration, the storefront and the dashboard
       cannot drift apart. The dark theme moved with it, keyed on the same
       html[data-style="dark"] attribute this page already sets.

       What remains below is layout and type, which is this page’s alone. */

    /* Type — --f-display / --f-body / --f-ar-* are defined in
       includes/css/thmanyah-fonts.css, which loads first and points all four
       at Thmanyah Sans. They are not redefined here so the app has a single
       source of truth for its typeface. */

    /* Display scale — reference: 40px mobile → 72px desktop, ls -0.04em */
    --t-display: clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);
    --t-h2:      clamp(2rem, 1rem + 3.2vw, 3.5rem);
    --t-h3:      clamp(1.375rem, 1rem + 1.1vw, 1.875rem);
    --t-h4:      clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem);
    --t-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --t-body:    1rem;
    --t-sm:      0.9375rem;
    --t-xs:      0.8125rem;
    --t-eyebrow: 0.75rem;

    --ls-display: -0.04em;
    --ls-eyebrow: 0.18em;
    --ls-nav:     0.02em;
    --ls-btn:     0.05em;

    /* Space */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
    --s9: 6rem;     --s10: 8rem;
    /* Two adjacent sections each contributed 9rem, so consecutive blocks were
       separated by 18rem of empty ground. 6.5rem a side reads generous
       without the page feeling half-empty. */
    --section: clamp(3.5rem, 6vw, 6.5rem);

    /* Radii — reference scale: 12/16/24/32/40/48/pill */
    --r-sm:  12px;
    --r:     16px;
    --r-md:  24px;
    --r-lg:  32px;
    --r-xl:  40px;
    --r-2xl: 48px;
    --r-pill: 9999px;

    --wrap: 1240px;
    --nav-h: 72px;

    --e-out: cubic-bezier(0.22, 1, 0.36, 1);
    --e-io:  cubic-bezier(0.65, 0, 0.35, 1);
    --d-fast: 200ms;
    --d: 380ms;
    --d-slow: 760ms;
}

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 32px);
    -webkit-text-size-adjust: 100%;
}

body.aj {
    margin: 0;
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--d) var(--e-out), color var(--d) var(--e-out);
}
/* Scroll lock.
   overflow:hidden on <body> alone does not stop the document scrolling — the
   viewport scrollbar belongs to <html>, so it stayed on screen beside an open
   dialog, full viewport height, with its stepper arrows sitting above and below
   the dialog's rounded corners. Lock the real scroller as well, so the only
   scrollbar on screen is the dialog's own.

   scrollbar-gutter keeps that gutter reserved, so removing the scrollbar does
   not let the page snap wider underneath the dialog. */
/* The horizontal clip lives here, not on <body>.
   Setting overflow-x on an element forces the other axis to compute to auto,
   so `body { overflow-x: hidden }` quietly turned the body into a scroll
   container — and a scroll container captures any position:sticky inside it.
   That is what stopped the How-it-works section pinning: the sticky stage was
   sticking to a body scrollport that never scrolls, so it just slid past with
   the page (measured: pin top tracked the section to -3062px instead of
   clamping at 0). On <html> the same clip does no harm, because <html> IS the
   scroller the sticky stage needs to stick to. */
html { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
html:has(body.is-locked), html.is-locked { overflow: hidden; }
body.aj.is-locked { overflow: hidden; }

[dir="rtl"] body.aj, body.aj[dir="rtl"] { font-family: var(--f-ar-body); }

/* -----------------------------------------------------------------------------
   FIELD — landing-only override
   -----------------------------------------------------------------------------
   includes/ajari-bg.php (shared with mystore) still renders its three glow
   shapes, but this page no longer wants them: the accent is now content-aware
   instead of decorative — see .aj-nav__glow and .aj-step.is-on below, which
   read as small "outlines" that hug whatever's actually active (the current
   nav section, the current story step) rather than three fixed shapes sitting
   behind everything. Turned off here, in the page-specific sheet, rather than
   in includes/css/ajari-bg.css or the shared markup partial, so mystore keeps
   its own glow untouched — this is a landing-page look, not a field change.
   The ground, dot grid and particle canvas (and --aj-mood, which still drives
   their opacity) are untouched: still one continuous field underneath. */
.aj-bg-page__blob { display: none; }

.aj h1, .aj h2, .aj h3, .aj h4 {
    margin: 0 0 var(--s4);
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    color: var(--text);
    text-wrap: balance;
}
[dir="rtl"] .aj h1, [dir="rtl"] .aj h2,
[dir="rtl"] .aj h3, [dir="rtl"] .aj h4 {
    font-family: var(--f-ar-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
}
[dir="rtl"] .aj p { line-height: 1.85; }

.aj p { margin: 0 0 var(--s4); color: var(--text-body); }
.aj a { color: var(--accent); text-decoration: none; transition: color var(--d-fast) var(--e-out); }
.aj a:hover { color: var(--accent-hover); }
.aj img { max-width: 100%; height: auto; display: block; }
.aj ul { margin: 0; padding: 0; list-style: none; }

.aj :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.aj-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.aj-skip {
    position: absolute; inset-inline-start: var(--s4); top: -120px; z-index: 3000;
    padding: var(--s3) var(--s5);
    background: var(--accent); color: var(--on-accent);
    border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm);
    transition: top var(--d-fast) var(--e-out);
}
.aj-skip:focus { top: var(--s4); color: var(--on-accent); }

/* -----------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
/* The page gutter, published as a token so anything that needs to bleed to
   the viewport edge (the mobile tab strip) can cancel exactly this much
   rather than guessing and leaving a sliver of horizontal scroll. */
:root { --gutter: clamp(1rem, 4vw, 2.5rem); }

.aj-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.aj-sec { position: relative; padding-block: var(--section); }
.aj-sec--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.aj-sec--raised { background: var(--bg-raised); }

/* Uppercase eyebrow on wide tracking — the reference's signature label. */
.aj-eyebrow {
    display: inline-flex; align-items: center; gap: var(--s2);
    margin-block-end: var(--s4);
    font-family: var(--f-body);
    font-size: var(--t-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--accent-ink);
}
[dir="rtl"] .aj-eyebrow { letter-spacing: 0.08em; }
.aj-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.aj-eyebrow--plain::before { display: none; }
.aj-eyebrow--invert { color: #fff; }

.aj-head { max-width: 780px; margin-block-end: var(--s7); }
.aj-head--center { margin-inline: auto; text-align: center; }
.aj-head--center .aj-eyebrow { justify-content: center; }
.aj-head h2 { font-size: var(--t-h2); }
.aj-head p { font-size: var(--t-lede); margin-block-end: 0; }

.aj-rule {
    height: 1px; border: 0; margin: 0;
    background: linear-gradient(90deg, transparent, var(--sand-dim) 20%, var(--sand-dim) 80%, transparent);
}

/* -----------------------------------------------------------------------------
   4. BUTTONS  (uppercase, tracked, pill — per the reference)
   -------------------------------------------------------------------------- */
.aj-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s2);
    min-height: 48px;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--f-body);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-btn);
    line-height: 1;
    /* The reference's labels are short; allow wrapping so a long Arabic
       string grows the button instead of being clipped. */
    white-space: normal;
    text-align: center;
    cursor: pointer;
    transition: transform var(--d-fast) var(--e-out),
                box-shadow var(--d-fast) var(--e-out),
                background-color var(--d-fast) var(--e-out),
                border-color var(--d-fast) var(--e-out),
                color var(--d-fast) var(--e-out);
}
[dir="rtl"] .aj-btn { letter-spacing: 0; }
.aj-btn:active { transform: translateY(1px); }
.aj-btn i { font-size: 1.15em; flex-shrink: 0; }
[dir="rtl"] .aj-btn .flip { transform: scaleX(-1); }

/* These are prefixed with `.aj` on purpose. The base `.aj a` rule above is
   specificity (0,1,1); a bare `.aj-btn--primary` is (0,1,0) and would lose to
   it, painting every anchor-based button teal-on-teal. `.aj .aj-btn--*` is
   (0,2,0) and wins for both <a> and <button>. */
.aj .aj-btn--primary {
    background: var(--accent); color: var(--on-accent);
    box-shadow: var(--sh-accent);
}
.aj .aj-btn--primary:hover {
    background: var(--accent-hover); color: var(--on-accent);
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(32, 133, 122, 0.34);
}

.aj .aj-btn--dark {
    background: var(--navy); color: #fff;
    box-shadow: var(--sh-md);
}
.aj .aj-btn--dark:hover { background: var(--navy-lift); color: #fff; transform: translateY(-2px); }
[data-style="dark"] .aj .aj-btn--dark { background: var(--teal-600); }
[data-style="dark"] .aj .aj-btn--dark:hover { background: var(--teal-500); }

.aj .aj-btn--outline {
    background: transparent; color: var(--text);
    border-color: var(--line-strong);
}
.aj .aj-btn--outline:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.aj .aj-btn--ghost-invert {
    background: rgba(255, 255, 255, 0.14); color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(8px);
}
.aj .aj-btn--ghost-invert:hover { background: rgba(255, 255, 255, 0.24); color: #fff; border-color: #fff; }

.aj-btn--lg { min-height: 56px; padding: 1.05rem 2.1rem; font-size: var(--t-sm); }
.aj-btn--block { width: 100%; }

/* Text link with a moving underline */
/* Prefixed for the same reason as the button modifiers above. */
.aj .aj-link {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-btn);
    color: var(--text);
    padding-block-end: 3px;
    border-block-end: 1px solid var(--accent);
}
.aj .aj-link:hover { color: var(--accent); }
[dir="rtl"] .aj-link { letter-spacing: 0; }

/* -----------------------------------------------------------------------------
   5. FLOATING PILL NAVBAR
   -------------------------------------------------------------------------- */
.aj-nav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1000;
    padding-block-start: clamp(0.75rem, 1.6vw, 1.25rem);
    padding-inline: clamp(0.75rem, 3vw, 2rem);
    pointer-events: none;
}
.aj-nav__shell {
    pointer-events: auto;
    max-width: var(--wrap);
    margin-inline: auto;
    min-height: var(--nav-h);
    display: flex; align-items: center; gap: var(--s4);
    padding: 0.5rem 0.5rem 0.5rem 1.35rem;
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-nav);
    transition: box-shadow var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
[dir="rtl"] .aj-nav__shell { padding: 0.5rem 1.35rem 0.5rem 0.5rem; }
.aj-nav.is-stuck .aj-nav__shell { box-shadow: 0 14px 50px rgba(25, 28, 30, 0.16); }

/* Brand: the real Ajari logo, sized by height at its own 1:1 ratio. */
.aj-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.aj-logo { width: auto; display: block; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
/* The full lockup is a near-square; the header mark is 1.11:1. Both are driven
   by height, so nothing here should constrain width. */
.aj-logo--full { width: auto; }
/* The asset is a deep teal-to-navy gradient on transparency. On the dark
   ground its navy strokes sink into the background, so lift it there. */
[data-style="dark"] .aj-logo { filter: brightness(1.45) saturate(1.15); }
.aj-brand--foot { margin-block-end: var(--s4); }

/* -----------------------------------------------------------------------------
   5b. GENERATED ILLUSTRATIONS
   Drawn from theme tokens, so one asset serves light and dark and stays sharp
   at any size — replacing the fixed-theme PNG screenshots.
   -------------------------------------------------------------------------- */
/* These are mockups of a Latin-numeral interface, so they stay left-to-right
   whatever the page direction. Without this the inherited `direction: rtl`
   makes text-anchor:start anchor on the RIGHT, and every label runs off the
   left edge of the viewBox — "TOTAL PAID / 48,000" rendered as "PAID / 00". */
.aj-illus {
    display: block; width: 100%; height: auto;
    direction: ltr;
}
.aj-illus text { text-anchor: start; }
.aj-illus .i-pill-text { text-anchor: middle; }

.aj-illus .i-card { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.aj-illus .i-label {
    fill: var(--text-dim);
    font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
}
.aj-illus .i-figure { fill: var(--text); font-family: var(--f-display); font-size: 30px; }
.aj-illus .i-figure--alert { fill: var(--warn); }
.aj-illus .i-meta { fill: var(--text-dim); font-family: var(--f-body); font-size: 11px; font-weight: 500; }
.aj-illus .i-spark { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.aj-illus .i-ring { fill: none; stroke: var(--line-strong); stroke-width: 7; }
.aj-illus .i-ring-fill {
    fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 188; stroke-dashoffset: 64;
    transform: rotate(-90deg); transform-origin: 452px 106px;
}
.aj-illus .i-bar rect { fill: var(--accent); opacity: 0.26; }
.aj-illus .i-bar--on rect { opacity: 1; }
.aj-illus .i-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.45; }
.aj-illus .i-avatar { fill: var(--accent); opacity: 0.22; }
.aj-illus .i-txt { fill: var(--text); opacity: 0.72; }
.aj-illus .i-txt--dim { opacity: 0.32; }
.aj-illus .i-pill { fill: var(--accent); opacity: 0.16; }
.aj-illus .i-pill--soft { opacity: 0.22; }
.aj-illus .i-pill-text {
    fill: var(--accent); text-anchor: middle;
    font-family: var(--f-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
}
.aj-illus .i-dot { fill: var(--ok); }
.aj-illus .i-dot--dim { fill: var(--warn); }

.aj-nav__links { position: relative; display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }
.aj-nav__links a {
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.8rem;
    border-radius: var(--r-pill);
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: var(--ls-nav);
    white-space: nowrap;
    transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.aj-nav__links a:hover { color: var(--accent); background: var(--accent-soft); }
/* .is-active gets no background of its own — the travelling glow underneath
   (.aj-nav__glow) is what marks it now, so hover (instant) and "current
   section while scrolling" (eased) read as two different, legible things
   instead of the same flat fill doing both jobs. */
.aj-nav__links a.is-active { color: var(--accent); }

/* Content-aware outline #1: a soft glowing ring that slides to sit behind
   whichever link initNav() (landing.js) has just marked current, instead of
   three fixed glow shapes sitting behind the whole page. left:0 is the
   anchor; JS drives position purely via transform + width, measured off the
   link's own offsetLeft/offsetWidth, so it tracks real layout (language
   switch, RTL, resize) rather than a guessed pixel table. Outline, not a
   filled pill, per the brief — the fill stays with :hover above. */
.aj-nav__glow {
    position: absolute;
    z-index: 0;
    top: 4px; bottom: 4px; left: 0;
    width: 0;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 1px 0 var(--accent), 0 0 18px 1px var(--accent-soft);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--e-out), width 0.45s var(--e-out), opacity 0.3s var(--e-out);
}

.aj-nav__tools { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.aj-nav__links + .aj-nav__tools { margin-inline-start: var(--s3); }

.aj-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text);
    cursor: pointer;
    transition: all var(--d-fast) var(--e-out);
}
.aj-icon:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.aj-icon i { font-size: 1.2rem; }

.aj-icon--lang { width: auto; padding-inline: 0.9rem; gap: 0.4rem; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.04em; }

.aj-theme .ti-sun { display: none; }
[data-style="dark"] .aj-theme .ti-moon { display: none; }
[data-style="dark"] .aj-theme .ti-sun { display: inline-block; }

.aj-burger { display: none; }

/* Mobile sheet */
.aj-sheet {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1200;
    width: min(90vw, 380px);
    display: flex; flex-direction: column;
    padding: var(--s5);
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: var(--sh-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--d) var(--e-out), visibility var(--d);
    overflow-y: auto;
}
[dir="rtl"] .aj-sheet { transform: translateX(-100%); }
.aj-sheet.is-open { transform: translateX(0); visibility: visible; }

.aj-sheet__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s6); }
.aj-sheet nav { display: flex; flex-direction: column; gap: var(--s1); }
.aj-sheet nav a {
    display: flex; align-items: center; gap: var(--s3);
    min-height: 52px; padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    color: var(--text); font-weight: 600; font-size: var(--t-sm);
}
.aj-sheet nav a:hover { background: var(--accent-soft); color: var(--accent); }
.aj-sheet__cta { margin-block-start: var(--s6); display: grid; gap: var(--s3); }

.aj-scrim {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(9, 12, 18, 0.58);
    backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--d) var(--e-out), visibility var(--d);
}
.aj-scrim.is-open { opacity: 1; visibility: visible; }

.aj-progress {
    position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1001;
    height: 2px; width: 100%;
    transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, var(--teal-600), var(--teal-400));
}
[dir="rtl"] .aj-progress { transform-origin: right center; }

/* -----------------------------------------------------------------------------
   6. (retired) BLUEPRINT TEXTURE
   The square-line grid that used to ride over the hero smoke is gone — the
   smoke now blends with the drifting particle field behind it instead of a
   grid pattern on top of it. Nothing below references .aj-blueprint any more.
   -------------------------------------------------------------------------- */

/* Aurora flow — soft drifting colour fields behind the hero.
   Masked out over its last quarter so it dissolves into the page-wide field
   below rather than handing off at a hard edge — see .aj-shader for the same
   treatment on the WebGL version. */
.aj-aurora {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
}
.aj-aurora span {
    position: absolute; display: block;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}
.aj-aurora span:nth-child(1) {
    width: 46vw; height: 46vw; max-width: 680px; max-height: 680px;
    inset-block-start: -18%; inset-inline-end: -8%;
    background: radial-gradient(circle at 35% 35%, var(--teal-400), transparent 66%);
    opacity: 0.38;
    animation: aj-flow-a 24s var(--e-io) infinite alternate;
}
.aj-aurora span:nth-child(2) {
    width: 38vw; height: 38vw; max-width: 540px; max-height: 540px;
    inset-block-end: -14%; inset-inline-start: -8%;
    background: radial-gradient(circle at 60% 40%, var(--teal-700), transparent 64%);
    opacity: 0.26;
    animation: aj-flow-b 30s var(--e-io) infinite alternate;
}
.aj-aurora span:nth-child(3) {
    width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
    inset-block-start: 34%; inset-inline-start: 42%;
    background: radial-gradient(circle, var(--sand), transparent 70%);
    opacity: 0.16;
    animation: aj-flow-a 36s var(--e-io) infinite alternate-reverse;
}
@keyframes aj-flow-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6%, 8%, 0) scale(1.14); }
}
@keyframes aj-flow-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(7%, -7%, 0) scale(0.94); }
}

/* -----------------------------------------------------------------------------
   7. HERO — inset rounded card carousel
   -------------------------------------------------------------------------- */
.aj-hero {
    position: relative;
    padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) var(--section);
    isolation: isolate;
}
.aj-hero__inner { position: relative; z-index: 3; }

/* Live GLSL field. Fades in only once hero-shader.js has a working context,
   so a failed init leaves the CSS aurora showing rather than a black box.
   Masked out over its last quarter so the hero dissolves into the page-wide
   field underneath instead of cutting hard into the next section — the two
   are the same "sky" now (see includes/ajari-bg.php), so this is a blend
   between two views of it, not a handoff between two different things. */
.aj-shader {
    position: absolute; inset: 0; z-index: 0;
    display: block; width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s var(--e-out);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
}
/* Held under full opacity (not 1) so the drifting particle field behind the
   hero (the same one visible everywhere else on the page, from
   includes/ajari-bg.php) shows through the smoke instead of being fully
   hidden underneath it until the bottom-edge mask above kicks in — the smoke
   drifts OVER the stars for the whole hero now, like a cloud, not just the
   last quarter. */
.aj-hero.has-shader .aj-shader { opacity: 0.82; }
/* Two animated colour fields on top of each other reads as mud — retire the
   aurora once the shader is actually painting. Same reduced ceiling as the
   shader above, for the no-WebGL/reduced-motion fallback. */
.aj-hero.has-shader .aj-aurora { opacity: 0; transition: opacity 1s var(--e-out); }
.aj-aurora { opacity: 0.82; }

/* Readability wash. The shader is at its most saturated exactly where the
   hero copy sits, and measuring the composited result showed dark-theme lede
   text landing at 3.0:1 and the eyebrow at 2.5:1 over the teal field. Rather
   than dulling the shader everywhere, a soft pool of the page ground is laid
   between the field and the type — vivid where nothing is written, calm
   underneath the words. Sits at z-index 1: above the shader, below the copy. */
.aj-hero.has-shader::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 82% 72% at 26% 42%,
        rgb(var(--hero-scrim-rgb) / var(--hero-scrim-a)) 0%,
        rgb(var(--hero-scrim-rgb) / calc(var(--hero-scrim-a) * 0.72)) 48%,
        transparent 78%);
}
/* The copy sits on the other side in Arabic, so the pool follows it. */
[dir="rtl"] .aj-hero.has-shader::after {
    background: radial-gradient(ellipse 82% 72% at 74% 42%,
        rgb(var(--hero-scrim-rgb) / var(--hero-scrim-a)) 0%,
        rgb(var(--hero-scrim-rgb) / calc(var(--hero-scrim-a) * 0.72)) 48%,
        transparent 78%);
}

/* Narrow screens: the copy stretches nearly edge to edge, so an off-centre
   pool leaves the far end of each line sitting on bare shader — measured at
   3.84:1 for the Arabic lede. Below the tablet breakpoint the wash becomes a
   full-width one centred on the copy instead, for both writing directions. */
@media (max-width: 900px) {
    .aj-hero.has-shader::after,
    [dir="rtl"] .aj-hero.has-shader::after {
        background: radial-gradient(ellipse 140% 78% at 50% 40%,
            rgb(var(--hero-scrim-rgb) / var(--hero-scrim-a)) 0%,
            rgb(var(--hero-scrim-rgb) / calc(var(--hero-scrim-a) * 0.72)) 48%,
            transparent 78%);
    }
}

.aj-hero__lead { max-width: 940px; margin-block-end: clamp(2rem, 4vw, 3.25rem); }
.aj-hero__lead h1 { font-size: var(--t-display); margin-block-end: var(--s5); }
.aj-hero__lead p {
    font-size: var(--t-lede);
    max-width: 60ch;
    margin-block-end: var(--s6);
}

/* Display word that swaps — sized by the widest phrase so nothing reflows. */
.aj-rotate { display: inline-grid; vertical-align: top; }
.aj-rotate__sizer { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.aj-rotate__word {
    grid-area: 1 / 1;
    color: var(--accent);
    font-style: italic;
    opacity: 0;
    transform: translateY(0.4em);
    filter: blur(6px);
    transition: opacity var(--d) var(--e-out), transform var(--d) var(--e-out), filter var(--d) var(--e-out);
}
.aj-rotate__word.is-on { opacity: 1; transform: none; filter: blur(0); }
[dir="rtl"] .aj-rotate__word { font-style: normal; }

.aj-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* The inset showcase card */
.aj-stage {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--navy);
    box-shadow: var(--sh-xl);
    aspect-ratio: 16 / 7;
    min-height: 360px;
}
.aj-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity var(--d-slow) var(--e-out);
}
.aj-slide.is-on { opacity: 1; }

.aj-slide__media { position: absolute; inset: 0; overflow: hidden; }
.aj-slide__media .aj-slide__fill {
    width: 100%; height: 100%;
    /* Slow push-in while the slide is showing — the reference's quiet motion. */
    transform: scale(1.06);
    transition: transform 9s linear;
}
.aj-slide.is-on .aj-slide__media .aj-slide__fill { transform: scale(1); }

/* Module artwork, sitting under the scrim so it reads as texture. */
.aj-slide-art {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 5%;
    transform: translateY(-50%);
    width: min(300px, 36%);
    height: auto;
    opacity: 0.55;
    pointer-events: none;
}
.aj-slide-art .s-panel { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.aj-slide-art .s-bar { fill: #fff; opacity: 0.5; }
.aj-slide-art .s-bar--dim { opacity: 0.24; }
.aj-slide-art .s-accent { fill: var(--teal-300); opacity: 0.85; }
.aj-slide-art .s-accent-soft { fill: var(--teal-300); opacity: 0.3; }
.aj-slide-art .s-cols rect { fill: #fff; opacity: 0.22; }
.aj-slide-art .s-line {
    fill: none; stroke: var(--teal-300); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.9;
}
.aj-slide-art .s-rule { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.aj-slide-art .s-tile rect { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.aj-slide-art .s-tile .s-door { fill: var(--teal-300); opacity: 0.45; stroke: none; }
.aj-slide-art .s-roofline {
    fill: none; stroke: var(--teal-300); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.8;
}

.aj-slide__fill {
    background:
        radial-gradient(ellipse at 25% 20%, rgba(43, 187, 173, 0.34), transparent 58%),
        radial-gradient(ellipse at 80% 75%, rgba(0, 28, 55, 0.85), transparent 62%),
        linear-gradient(135deg, var(--navy-teal), var(--navy));
}
.aj-slide__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(0, 16, 32, 0.88) 0%, rgba(0, 16, 32, 0.55) 42%, rgba(0, 16, 32, 0.15) 100%);
}
[dir="rtl"] .aj-slide__scrim {
    background: linear-gradient(260deg, rgba(0, 16, 32, 0.88) 0%, rgba(0, 16, 32, 0.55) 42%, rgba(0, 16, 32, 0.15) 100%);
}

.aj-slide__body {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--s3);
    padding: clamp(1.75rem, 4vw, 3.5rem);
    /* Reserve the strip the dots and arrows occupy so the last line of copy
       is never sitting underneath them. */
    padding-block-end: clamp(5rem, 10vw, 6.5rem);
    max-width: 680px;
}
.aj-slide__tag {
    align-self: flex-start;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-pill);
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    color: #fff;
}
[dir="rtl"] .aj-slide__tag { letter-spacing: 0.08em; }
.aj-slide__body h2 { color: #fff; font-size: var(--t-h2); margin: 0; }
.aj-slide__body p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 48ch; }
.aj-slide__sub {
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    color: rgba(255, 255, 255, 0.82) !important;
}
[dir="rtl"] .aj-slide__sub { letter-spacing: 0.08em; }

/* Feature bullets pinned to the far side, as on the reference hero */
.aj-slide__facts {
    position: absolute; z-index: 2;
    inset-block-start: clamp(1.75rem, 4vw, 3.5rem);
    inset-inline-end: clamp(1.75rem, 4vw, 3.5rem);
    display: grid; gap: var(--s4);
    max-width: 210px;
}
.aj-slide__fact { display: flex; align-items: flex-start; gap: var(--s3); color: #fff; }
.aj-slide__fact i { font-size: 1.25rem; color: var(--teal-300); flex-shrink: 0; margin-block-start: 2px; }
.aj-slide__fact span { font-size: var(--t-xs); line-height: 1.4; font-weight: 600; }

/* Carousel controls */
.aj-stage__ctrl {
    position: absolute; z-index: 3;
    inset-block-end: clamp(1.25rem, 3vw, 2rem);
    inset-inline-end: clamp(1.25rem, 3vw, 2rem);
    display: flex; align-items: center; gap: var(--s3);
}
.aj-dots {
    display: flex; align-items: center; gap: 6px;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    border-radius: var(--r-pill);
}
.aj-dot {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
.aj-dot[aria-selected="true"] { width: 26px; background: #fff; }

.aj-round {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #fff; cursor: pointer;
    transition: background-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.aj-round:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.aj-round i { font-size: 1.15rem; }
[dir="rtl"] .aj-round i { transform: scaleX(-1); }

/* -----------------------------------------------------------------------------
   8. STAT BAND
   -------------------------------------------------------------------------- */
.aj-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--s5);
    padding-block: var(--s7);
    border-block: 1px solid var(--line);
}
.aj-stat__n {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(2.25rem, 1rem + 3vw, 3.25rem);
    font-weight: 400; line-height: 1;
    letter-spacing: var(--ls-display);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
[dir="rtl"] .aj-stat__n { font-family: var(--f-ar-display); letter-spacing: 0; }
.aj-stat__l {
    display: block; margin-block-start: var(--s2);
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    color: var(--text-dim);
}
[dir="rtl"] .aj-stat__l { letter-spacing: 0.06em; }

/* -----------------------------------------------------------------------------
   9. MODULE GRID  (the full product surface)
   -------------------------------------------------------------------------- */
.aj-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-end: var(--s7); }
.aj-tab {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 46px; padding: 0.65rem 1.2rem;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--text-body);
    font-family: var(--f-body);
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-btn);
    cursor: pointer;
    transition: all var(--d-fast) var(--e-out);
}
[dir="rtl"] .aj-tab { letter-spacing: 0; }
.aj-tab:hover { color: var(--accent); border-color: var(--accent); }
.aj-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.aj-tab i { font-size: 1.1rem; }

.aj-panel[hidden] { display: none; }

/* Only surfaces on phones, where the tab strip is replaced by stacked groups. */
.aj-panel__title {
    display: none; align-items: center; gap: var(--s3);
    font-size: var(--t-h3);
    margin-block-end: var(--s5);
}
.aj-panel__title i { color: var(--accent); font-size: 1.35rem; }

.aj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--s4);
}

.aj-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--s6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out),
                border-color var(--d) var(--e-out);
}
.aj-card::after {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0); transform-origin: inline-start;
    transition: transform var(--d) var(--e-out);
}
.aj-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--accent-ring); }
.aj-card:hover::after { transform: scaleX(1); }

.aj-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-block-end: var(--s4);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-sm);
    color: var(--accent); font-size: 1.5rem;
}
.aj-card h3 { font-size: var(--t-h4); margin-block-end: var(--s2); }
.aj-card p { font-size: var(--t-sm); margin: 0; }
.aj-card__badge {
    align-self: flex-start; margin-block-start: var(--s4);
    padding: 0.25rem 0.7rem;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--r-pill);
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
}
[dir="rtl"] .aj-card__badge { letter-spacing: 0; }

/* -----------------------------------------------------------------------------
   10. SPOTLIGHT  (large split feature, mirrors the reference's signature block)
   -------------------------------------------------------------------------- */
.aj-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.aj-split--flip > :first-child { order: 2; }

.aj-shot {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    box-shadow: var(--sh-lg);
}
.aj-shot img { width: 100%; display: block; }
.aj-shot__bar {
    display: flex; align-items: center; gap: 6px;
    padding: 0.7rem 1rem;
    background: var(--surface-2);
    border-block-end: 1px solid var(--line);
}
.aj-shot__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.aj-shot__bar span:nth-child(1) { background: #ff5f57; }
.aj-shot__bar span:nth-child(2) { background: #febc2e; }
.aj-shot__bar span:nth-child(3) { background: #28c840; }

/* Zoom-parallax: the shot eases from slightly small to full as it scrolls in. */
.aj-zoom { transform: scale(0.9); opacity: 0; transition: transform 1.1s var(--e-out), opacity 0.8s var(--e-out); }
.aj-zoom.is-in { transform: scale(1); opacity: 1; }

/* Prefixed with `.aj`: these are <ul>s, and the base `.aj ul { margin: 0 }`
   reset is specificity (0,1,1) — it beats a bare class and silently ate the
   space above the call to action under each list. */
.aj .aj-checks { display: grid; gap: var(--s3); margin-block: var(--s5) var(--s7); }
.aj-checks li { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--t-sm); color: var(--text-body); }
.aj-checks i {
    flex-shrink: 0; margin-block-start: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   11. SCROLL-LOCKED STORY
   -------------------------------------------------------------------------- */
.aj-story { position: relative; background: var(--bg-raised); }
.aj-story__pin {
    position: sticky; inset-block-start: 0;
    min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden;
}
.aj-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
}
.aj-steps { display: grid; gap: var(--s3); }
.aj-step {
    display: flex; gap: var(--s4);
    padding: var(--s4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    opacity: 0.4;
    transition: opacity var(--d) var(--e-out), background-color var(--d) var(--e-out),
                border-color var(--d) var(--e-out), box-shadow var(--d) var(--e-out);
}
/* Content-aware outline #2: the current step in the pinned story gets a soft
   glowing ring on top of its existing raised-card treatment, instead of that
   presence coming from a fixed background shape elsewhere on the page. Off by
   default (transparent, 0 blur) so the transition above still animates it in
   and out as .is-on moves between steps, rather than snapping. */
.aj-step.is-on {
    opacity: 1;
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--sh-sm), 0 0 0 1px var(--accent-soft), 0 0 26px -6px var(--accent);
}
.aj-step__n {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-dim);
    font-family: var(--f-display); font-size: 1.05rem;
    box-shadow: 0 0 transparent;
    transition: background-color var(--d) var(--e-out), color var(--d) var(--e-out),
                box-shadow var(--d) var(--e-out);
}
.aj-step.is-on .aj-step__n {
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px 0 var(--accent);
}
.aj-step h3 { font-size: var(--t-h4); margin-block-end: 2px; }
/* The per-step panel clone is a mobile-only device — above the pin breakpoint
   the real stage is on screen and this would print the same copy twice.
   Scoped by min-width so source order cannot resurrect it. */
@media (min-width: 1101px) { .aj-step__reveal { display: none; } }
.aj-step p { font-size: var(--t-sm); margin: 0; }

.aj-story__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}
.aj-story__panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s4); padding: var(--s7); text-align: center;
    opacity: 0; transform: scale(0.97) translateY(14px);
    transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.aj-story__panel.is-on { opacity: 1; transform: none; }
.aj-story__panel .glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 92px; height: 92px; border-radius: var(--r-lg);
    background: var(--accent); color: var(--on-accent);
    font-size: 2.75rem;
    box-shadow: var(--sh-accent);
}
.aj-story__panel h3 { font-size: var(--t-h3); margin: 0; }
.aj-story__panel p { font-size: var(--t-sm); margin: 0; max-width: 40ch; }

.aj-rail {
    position: absolute; inset-block: 22%; inset-inline-start: clamp(0.5rem, 2vw, 1.5rem);
    width: 2px; border-radius: 2px; background: var(--line);
    overflow: hidden;
}
.aj-rail span {
    display: block; width: 100%; height: 0;
    background: linear-gradient(180deg, var(--teal-600), var(--teal-400));
    transition: height 110ms linear;
}

/* -----------------------------------------------------------------------------
   12. STOREFRONT CARDS
   -------------------------------------------------------------------------- */
/* These were 4:3 blocks holding a single icon — a lot of height for very
   little information. Now a compact row: icon, label, status. */
.aj-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.aj-tile {
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-xs);
    transition: transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out),
                border-color var(--d) var(--e-out);
}
.aj-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent-ring); }
.aj-tile__ico {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent); font-size: 1.5rem;
}
.aj-tile__txt { display: flex; flex-direction: column; min-width: 0; }
.aj-tile__txt strong { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; color: var(--text); }
[dir="rtl"] .aj-tile__txt strong { font-family: var(--f-ar-display); }
.aj-tile__txt > span {
    font-size: var(--t-xs); color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.1em;
}
[dir="rtl"] .aj-tile__txt > span { letter-spacing: 0; }
.aj-tile__flag {
    margin-inline-start: auto; flex-shrink: 0;
    padding: 0.22rem 0.6rem;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--r-pill);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
}
[dir="rtl"] .aj-tile__flag { letter-spacing: 0; }

/* -----------------------------------------------------------------------------
   13. PRICING
   -------------------------------------------------------------------------- */
.aj-toggle {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 0.35rem;
    margin-block-end: var(--s7);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.aj-toggle__opt {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 44px; padding: 0.55rem 1.3rem;
    background: transparent; border: 0; border-radius: var(--r-pill);
    color: var(--text-body);
    font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-btn);
    cursor: pointer;
    transition: all var(--d-fast) var(--e-out);
}
[dir="rtl"] .aj-toggle__opt { letter-spacing: 0; }
.aj-toggle__opt[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--sh-xs); }
.aj-chip-save {
    padding: 0.15rem 0.5rem; border-radius: var(--r-pill);
    background: var(--ok); color: #fff; font-size: 0.6rem; letter-spacing: 0.06em;
}

/* -----------------------------------------------------------------------------
   PRICING
   The paid plan is stated once and given the weight the headline promises,
   with what it includes set out beside it. The trial and the enterprise
   conversation follow underneath as compact rails — they are an entry ramp and
   a sales call, not rivals to be compared feature by feature.

   Desktop: offer and inclusions side by side, rails two-up beneath.
   Tablet:  offer and inclusions stack, rails stay two-up.
   Phone:   everything in one column.
   -------------------------------------------------------------------------- */
.aj-pricing {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.aj-alts { grid-column: 1 / -1; }

/* ---- The offer ---------------------------------------------------------- */
.aj-offer {
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--accent-ring);
    box-shadow: var(--sh-lg);
}
/* A soft accent wash so the offer reads as the primary object on the page
   without needing a heavy filled panel that would fight the CTA inside it. */
.aj-offer::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% 0%, var(--accent-soft), transparent 70%);
    pointer-events: none;
}
.aj-offer > * { position: relative; }

.aj-offer__flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translateY(-50%);
    padding: 0.4rem 0.9rem;
    border-radius: var(--r-pill);
    background: var(--accent); color: var(--on-accent);
    font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: var(--ls-btn); text-transform: uppercase;
    white-space: nowrap;
}
[dir="rtl"] .aj-offer__flag { letter-spacing: 0; }

.aj-offer__head { margin-block-end: var(--s5); }
.aj-offer__tier {
    display: block;
    font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--accent-ink);
    margin-block-end: var(--s2);
}
[dir="rtl"] .aj-offer__tier { letter-spacing: 0.08em; }
.aj .aj-offer__name {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
    margin: 0 0 var(--s2);
}
.aj .aj-offer__note { color: var(--text-body); font-size: var(--t-sm); margin: 0; }

/* The toggle carries a 48px bottom margin from its standalone days; inside
   the offer it sits directly above the figure it controls, so cancel it and
   let the price own the spacing. */
.aj-offer .aj-cycle { justify-content: flex-start; }
[dir="rtl"] .aj-offer .aj-cycle { justify-content: flex-start; }
.aj-offer .aj-toggle { margin-block-end: 0; }
.aj-price--lead { margin-block: var(--s4) var(--s5); align-items: baseline; }
.aj-price--lead .aj-price__n { font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem); }

.aj-offer__fine {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    margin: var(--s4) 0 0;
    color: var(--text-dim); font-size: var(--t-xs); text-align: center;
}
.aj-offer__fine i { color: var(--accent); font-size: 1rem; flex-shrink: 0; }

/* ---- What's included ---------------------------------------------------- */
.aj-incl { padding-block-start: var(--s3); }
.aj-incl .aj-eyebrow { margin-block-end: var(--s5); }
.aj .aj-incl__list {
    display: grid; gap: var(--s3);
    margin: 0; padding: 0; list-style: none;
}
.aj-incl__list li {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: var(--t-sm);
    transition: border-color var(--d) var(--e-out), transform var(--d) var(--e-out);
}
.aj-incl__list li:hover { border-color: var(--accent-ring); transform: translateX(2px); }
[dir="rtl"] .aj-incl__list li:hover { transform: translateX(-2px); }
.aj-incl__list i {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent-ink);
    font-size: 1.05rem;
}

/* ---- The two alternatives ----------------------------------------------- */
.aj-alts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}
.aj-alt {
    display: flex; flex-direction: column;
    padding: clamp(1.25rem, 2.2vw, 1.85rem);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color var(--d) var(--e-out), box-shadow var(--d) var(--e-out);
}
.aj-alt:hover { border-color: var(--accent-ring); box-shadow: var(--sh-sm); }

.aj-alt__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s4);
    margin-block-end: var(--s3);
}
.aj-alt__tier {
    display: block;
    font-family: var(--f-body); font-size: 0.68rem; font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--text-dim);
    margin-block-end: 4px;
}
[dir="rtl"] .aj-alt__tier { letter-spacing: 0.08em; }
.aj .aj-alt__name { font-size: var(--t-h4); margin: 0; }

.aj-alt__val { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.aj-alt__n { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--text); }
[dir="rtl"] .aj-alt__n { font-family: var(--f-ar-display); }
.aj-alt__u, .aj-alt__talk { font-size: var(--t-xs); color: var(--text-dim); }
.aj-alt__talk {
    font-family: var(--f-display); font-size: 1.15rem; color: var(--accent-ink);
}
[dir="rtl"] .aj-alt__talk { font-family: var(--f-ar-display); }

.aj .aj-alt__note { color: var(--text-body); font-size: var(--t-xs); margin: 0 0 var(--s4); }

.aj .aj-alt__list {
    display: grid; gap: var(--s2);
    margin: 0 0 var(--s5); padding: 0; list-style: none;
    /* Push the button to the bottom so both rails line up whatever the count. */
    flex: 1 1 auto;
}
.aj-alt__list li {
    position: relative;
    padding-inline-start: 1.1rem;
    color: var(--text-body); font-size: var(--t-xs); line-height: 1.6;
}
.aj-alt__list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0; inset-block-start: 0.55em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
}

/* ---- Tablet: offer and inclusions stack, rails stay side by side --------- */
@media (max-width: 980px) {
    .aj-pricing { grid-template-columns: minmax(0, 1fr); }
    .aj-incl { padding-block-start: 0; }
    .aj-incl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Once the offer spans the full width, left-aligned content leaves a wide
       empty field beside a short price and toggle. Centring it turns the card
       into a deliberate banner instead. */
    .aj-offer { align-items: center; text-align: center; }
    .aj-offer__head, .aj-offer .aj-btn { width: 100%; }
    .aj-offer .aj-cycle,
    [dir="rtl"] .aj-offer .aj-cycle { justify-content: center; }
    .aj-price--lead { justify-content: center; }
}

/* ---- Phone: one column throughout --------------------------------------- */
@media (max-width: 700px) {
    .aj-incl__list { grid-template-columns: minmax(0, 1fr); }
    .aj-alts { grid-template-columns: minmax(0, 1fr); }

    /* The flag would hang off the card's top-inline-end corner and clip against
       the section gutter, so bring it inside the flow on a narrow screen. */
    .aj-offer { padding-block-start: clamp(2.25rem, 7vw, 2.75rem); }
    .aj-offer__flag {
        inset-inline-end: 50%;
        transform: translate(50%, -50%);
    }
    [dir="rtl"] .aj-offer__flag { transform: translate(-50%, -50%); }

    /* Centring the flag moves it off the corner and straight over .aj-offer__tier,
       which also starts at the head’s top edge — “MOST POPULAR” landed on top of
       “Premium”. The flag is translated -50%, so half its height sits inside the
       head; this padding clears that half plus a little breathing room.

       Padding on the head is the right lever because an absolutely positioned
       child resolves inset-block-start against the PADDING box, so the flag
       keeps straddling the card edge exactly where it was while only the text
       below moves down. */
    .aj-offer__head { padding-block-start: 1.75rem; }

}

/* Guarantees breathing room above the plan's call to action even when the
   feature list runs long enough to cancel the auto margin below. */

/* -----------------------------------------------------------------------------
   14. QUOTES
   -------------------------------------------------------------------------- */
.aj-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }
.aj-quote {
    display: flex; flex-direction: column; gap: var(--s4);
    padding: var(--s7) var(--s6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out);
}
.aj-quote:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.aj-quote__mark { font-family: var(--f-display); font-size: 3rem; line-height: 0.6; color: var(--sand); }
.aj-quote blockquote {
    margin: 0;
    font-family: var(--f-display);
    font-size: var(--t-h4);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--text);
}
[dir="rtl"] .aj-quote blockquote { font-family: var(--f-ar-display); letter-spacing: 0; line-height: 1.7; }
.aj-quote__who { display: flex; align-items: center; gap: var(--s3); margin-block-start: auto; }
.aj-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    font-family: var(--f-display); font-size: 1.1rem;
}
.aj-quote__who strong { display: block; font-size: var(--t-sm); color: var(--text); }
.aj-quote__who span { font-size: var(--t-xs); color: var(--text-dim); }

/* -----------------------------------------------------------------------------
   15. CONSULTATION BAND
   -------------------------------------------------------------------------- */
.aj-band {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--navy);
    padding: clamp(2.5rem, 6vw, 5rem);
    text-align: center;
}
.aj-band::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 18% 20%, rgba(43, 187, 173, 0.30), transparent 55%),
        radial-gradient(ellipse at 82% 80%, rgba(208, 192, 158, 0.16), transparent 55%);
}
.aj-band > * { position: relative; z-index: 1; }
.aj-band h2 { color: #fff; font-size: var(--t-h2); }
.aj-band p { color: rgba(255, 255, 255, 0.85); font-size: var(--t-lede); max-width: 58ch; margin-inline: auto; }
.aj .aj-band__points {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s3) var(--s6);
    margin-block: var(--s5) var(--s7);
}
.aj-band__points li { display: flex; align-items: center; gap: var(--s2); color: rgba(255, 255, 255, 0.9); font-size: var(--t-sm); }
.aj-band__points i { color: var(--teal-300); }
.aj-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* -----------------------------------------------------------------------------
   16. CONTACT
   -------------------------------------------------------------------------- */
.aj-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); }
.aj-contact__list { display: grid; gap: var(--s4); margin-block-start: var(--s5); }
.aj-contact__row { display: flex; align-items: center; gap: var(--s4); }
.aj-contact__row i {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent); font-size: 1.3rem;
}
.aj-contact__row strong { display: block; font-size: var(--t-sm); color: var(--text); }
.aj-contact__row a, .aj-contact__row span { font-size: var(--t-sm); color: var(--text-body); }

.aj-form {
    display: grid; gap: var(--s4);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
.aj-field { display: grid; gap: var(--s2); }
.aj-field label {
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text);
}
[dir="rtl"] .aj-field label { letter-spacing: 0; }
.aj-field .req { color: var(--bad); }
.aj-field input, .aj-field textarea {
    width: 100%; min-height: 50px;
    padding: 0.8rem 1.05rem;
    font-family: inherit; font-size: var(--t-body); color: var(--text);
    background: var(--surface-inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.aj-field textarea { min-height: 140px; resize: vertical; }
.aj-field input::placeholder, .aj-field textarea::placeholder { color: var(--text-dim); opacity: 0.75; }
.aj-field input:focus, .aj-field textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.aj-field .hint { font-size: var(--t-xs); color: var(--text-dim); }
.aj-field .err { font-size: var(--t-xs); color: var(--bad); font-weight: 600; }
.aj-field .err:empty { display: none; }
.aj-field input[aria-invalid="true"], .aj-field textarea[aria-invalid="true"] { border-color: var(--bad); }

.aj-note {
    display: flex; gap: var(--s3); align-items: flex-start;
    padding: var(--s4);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
}
.aj-note i { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
/* The section above already ends on a full --section of padding; stacking a
   6rem footer inset on top of it opened a dead band of empty ground. */
.aj-foot { background: var(--bg-raised); border-block-start: 1px solid var(--line); padding-block: var(--s7) var(--s5); }
.aj-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s6);
    margin-block-end: var(--s6);
}
.aj-foot h4 {
    font-family: var(--f-body);
    font-size: var(--t-eyebrow); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
    color: var(--text);
    margin-block-end: var(--s4);
}
[dir="rtl"] .aj-foot h4 { letter-spacing: 0.06em; }
.aj-foot__links { display: grid; gap: var(--s3); }
.aj-foot__links a, .aj-foot__links span { font-size: var(--t-sm); color: var(--text-body); }
.aj-foot__links a:hover { color: var(--accent); }
.aj-foot__brand img { height: 40px; margin-block-end: var(--s4); }
.aj-foot__brand p { font-size: var(--t-sm); max-width: 40ch; }

.aj-social { display: flex; gap: var(--s2); margin-block-start: var(--s5); }
.aj-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--text-body); font-size: 1.1rem;
    transition: all var(--d-fast) var(--e-out);
}
.aj-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); }

.aj-foot__bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s3);
    padding-block-start: var(--s5);
    border-block-start: 1px solid var(--line);
    font-size: var(--t-xs); color: var(--text-dim);
}
.aj-foot__legal { display: flex; flex-wrap: wrap; gap: var(--s5); }
.aj-foot__legal a { color: var(--text-dim); }
.aj-foot__legal a:hover { color: var(--accent); }

/* -----------------------------------------------------------------------------
   FLOATING CONTACT BUTTON
   It used to be a flat WhatsApp-green disc with a heavy green glow — the one
   element on the page that belonged to another brand's palette, and the first
   thing the eye went to in a corner that should be quiet until wanted.

   Now it is built from the page's own teal, and it earns attention by
   behaving rather than by shouting: a calm disc at rest that expands into a
   labelled pill on hover, focus or touch. The small green dot is the only
   green left — enough to read as "chat / online" without the whole button
   borrowing someone else's colour.
   -------------------------------------------------------------------------- */
.aj .aj-wa {
    position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 900;
    display: inline-flex; align-items: center;
    gap: 0;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 10px 30px var(--accent-ring),
        0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    /* Width is the thing that animates, so it is the only expensive property
       here; everything else is transform/opacity. */
    /* The expansion animates grid-template-columns, not width.
       `width: auto` has no interpolatable value — a transition to it lands on
       the final size in a single frame, so the pill used to snap open and the
       label then faded into an already-open box. That reads as abrupt however
       gently the text itself fades. A second grid track going 0fr → 1fr does
       interpolate, so the button genuinely grows. */
    display: grid;
    grid-template-columns: 56px 0fr;
    align-items: center;
    transition: grid-template-columns 420ms var(--e-out),
                transform var(--d-fast) var(--e-out),
                box-shadow var(--d) var(--e-out);
    overflow: hidden;
    white-space: nowrap;
}

.aj-wa__ico {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    font-size: 1.65rem;
}

/* Presence dot — the single green cue, sitting on the icon rather than
   colouring the whole control. */
.aj-wa__dot {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-end: 12px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 0 2px var(--teal-700);
}

/* The track the grid opens. It owns no padding of its own — padding here would
   survive the 0fr collapse and leave the pill permanently a little too wide. */
.aj-wa__txt {
    overflow: hidden;
    min-width: 0;
}
.aj-wa__txt-i {
    display: block;
    padding-inline: 0.15rem 1.35rem;
    font-family: var(--f-body);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: var(--ls-btn);
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-8px);
    /* Closing: the copy leaves first and fast, so it is gone before the track
       narrows over it. Opening is staged separately below. */
    transition: opacity 110ms var(--e-out) 0ms,
                transform 150ms var(--e-out) 0ms;
}
[dir="rtl"] .aj-wa__txt-i { transform: translateX(8px); }
[dir="rtl"] .aj-wa__txt-i { letter-spacing: 0; }

/* Expand on hover, on keyboard focus, and while being tapped. */
.aj .aj-wa:hover,
.aj .aj-wa:focus-visible,
.aj .aj-wa:active {
    grid-template-columns: 56px 1fr;
    color: #fff;
    box-shadow:
        0 16px 40px var(--accent-ring),
        0 3px 10px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Opening: hold the label back until the pill has most of its width, then
   ease it in over a longer beat. Fading it from t=0 made it appear to pop in
   before there was room for it — the two motions have to be staged, not
   simultaneous. */
/* Opening: the copy rides in behind the track rather than with it — held back
   just long enough for there to be somewhere to arrive, then eased over a
   longer beat than the box itself so the two motions overlap instead of
   finishing together. */
.aj-wa:hover .aj-wa__txt-i,
.aj-wa:focus-visible .aj-wa__txt-i,
.aj-wa:active .aj-wa__txt-i {
    opacity: 1;
    transform: none;
    transition: opacity 300ms var(--e-out) 120ms,
                transform 380ms var(--e-out) 100ms;
}
.aj .aj-wa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A ring that breathes out of the button — three times, then stops. An
   indefinite loop in the corner of every page is a distraction, and WCAG
   2.2.2 asks that nothing move forever without a way to stop it. */
.aj .aj-wa::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    border: 2px solid var(--teal-400);
    opacity: 0;
    animation: aj-wa-ping 2.6s var(--e-out) 3s 3;
    pointer-events: none;
}
@keyframes aj-wa-ping {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(1.45); }
    100% { opacity: 0;    transform: scale(1.45); }
}
/* The ring is drawn on the resting disc; once expanded it would trace the
   pill and read as a stray outline. */
.aj .aj-wa:hover::before,
.aj .aj-wa:focus-visible::before,
.aj .aj-wa:active::before { animation: none; opacity: 0; }

[data-style="dark"] .aj .aj-wa {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 0 0 1px var(--accent-ring),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
[data-style="dark"] .aj-wa__dot { box-shadow: 0 0 0 2px var(--teal-800); }

@media (prefers-reduced-motion: reduce) {
    .aj .aj-wa { transition: none; }
    .aj-wa__txt-i { transition: none; }
    .aj .aj-wa::before { animation: none; opacity: 0; }
}

/* -----------------------------------------------------------------------------
   18. REVEAL / LAZY ENTRANCE
   The hidden state only exists once JS adds .js-on, so a no-JS visitor still
   sees a complete page.
   -------------------------------------------------------------------------- */
.js-on [data-rv] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
}
.js-on [data-rv="left"]  { transform: translate3d(-30px, 0, 0); }
.js-on [data-rv="right"] { transform: translate3d(30px, 0, 0); }
.js-on [data-rv="zoom"]  { transform: scale(0.95); }
.js-on [data-rv="blur"]  { transform: none; filter: blur(10px); }
.js-on [data-rv].is-in { opacity: 1; transform: none; filter: none; will-change: auto; }

.aj-fade { opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
.aj-fade.is-loaded { opacity: 1; }

/* -----------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .aj-nav__links { display: none; }
    .aj-burger { display: inline-flex; }
    /* The links are hidden but still an adjacent sibling, so restore the
       auto margin that would otherwise be overridden. */
    .aj-nav__links + .aj-nav__tools { margin-inline-start: auto; }
    .aj-nav__tools .aj-btn--outline { display: none; }

    .aj-story__pin { position: static; min-height: 0; padding-block: var(--section); }
    .aj-story__grid { grid-template-columns: 1fr; gap: var(--s6); }
    /* Step states, the rail and the stage panels are all handled in the
       MOBILE: HOW IT WORKS block further down. */

    .aj-split--flip > :first-child { order: 0; }
}

@media (max-width: 900px) {
    .aj-slide__facts { display: none; }
    /* Sized for the desktop split (art panel on the right, facts list below
       it) — on a single mobile column it had nothing to sit beside and just
       floated over the copy instead, worst on the Tenant Portal slide whose
       body text runs longest. Hidden here for the same reason the facts list
       already is above. */
    .aj-slide-art { display: none; }
    /* 4/3.4 + 340px was tuned against the shortest slide's copy; the longest
       (Tenant Portal, ~165 characters of body text) ran past it and got
       clipped by .aj-stage's overflow:hidden, colliding with the dot/arrow
       strip reserved at the bottom. Every slide fills the same stage
       (.aj-slide is inset:0), so sizing the stage for the longest one just
       centers shorter slides with a bit more breathing room instead.

       aspect-ratio is dropped rather than adjusted: paired with a min-height
       taller than the ratio would give at this width, the browser treated
       height as the definite side and derived WIDTH from it instead — a
       409px-wide box in a 360px viewport (min-height 440px × 4/4.3 =
       409.3, exactly what rendered), overflowing the page horizontally on
       every phone narrower than ~430px. min-height alone, on a plain block
       element, cannot do that — width still just fills the container.
       (auto, not none: aspect-ratio has no "none" keyword, so that value
       was silently invalid and dropped — which is exactly how this shipped
       broken the first time, the desktop 16/7 kept cascading through.) */
    .aj-stage { aspect-ratio: auto; min-height: 460px; }
    .aj-slide__body { max-width: 100%; }

    /* The side-to-side scrim runs out before the copy does once the body is
       full width, leaving text on top of a busy screenshot. Go vertical and
       much heavier so every slide keeps its contrast. */
    .aj-slide__scrim,
    [dir="rtl"] .aj-slide__scrim {
        background: linear-gradient(180deg,
            rgba(0, 16, 32, 0.70) 0%,
            rgba(0, 16, 32, 0.86) 45%,
            rgba(0, 16, 32, 0.95) 100%);
    }
}

@media (max-width: 700px) {
    :root { --nav-h: 60px; }

    .aj-nav__shell { padding: 0.4rem 0.4rem 0.4rem 1rem; }
    [dir="rtl"] .aj-nav__shell { padding: 0.4rem 1rem 0.4rem 0.4rem; }
    /* The header mark shrinks with the bar; the footer lockup must not —
       its wordmark stops being readable much below 56px. */
    .aj-logo:not(.aj-logo--full) { height: 42px !important; }
    .aj-logo--full { height: 56px !important; }
    .aj-icon { width: 40px; height: 40px; }
    .aj-nav__tools .aj-btn--primary { min-height: 40px; padding: 0.6rem 0.9rem; font-size: 0.7rem; }

    /* Space is tight in the bar — the globe glyph already says "language",
       so drop the two-letter code and keep the toggle a plain round icon. */
    .aj-icon--lang { width: 40px; padding-inline: 0; }
    .aj-lang-now { display: none; }

    .aj-stage { border-radius: var(--r-md); min-height: 440px; }
    .aj-hero__actions .aj-btn { flex: 1 1 100%; }

    .aj-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

    /* The tab strip, panel visibility and card entrance are handled in the
       MOBILE: MODULES block further down. */

    /* Thirty identical full-width rows is a monotonous scroll. A two-up grid
       of compact tiles reads as a set rather than a list, roughly halves the
       section again, and lets the eye take in several modules at a glance. */
    .aj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
    .aj-card {
        min-width: 0;
        padding: var(--s4);
        border-radius: var(--r-sm);
    }
    .aj-card__icon {
        width: 40px; height: 40px;
        margin-block-end: var(--s3);
        font-size: 1.2rem;
    }
    .aj-card h3 { font-size: 0.98rem; line-height: 1.25; margin-block-end: 5px; }
    .aj-card p { font-size: 0.8rem; line-height: 1.5; }
    .aj-card__badge { font-size: 0.58rem; margin-block-start: var(--s3); }

    .aj-band { border-radius: var(--r-md); }
    .aj-foot__grid { grid-template-columns: 1fr; }
    .aj-foot__bottom { justify-content: center; text-align: center; }
    /* On a phone there is no hover, the pill would crowd the viewport, and the
       button sits near the thumb — so it stays a disc and the label never
       expands. The aria-label still names it for assistive tech. */
    .aj .aj-wa { inset-block-end: 16px; inset-inline-end: 16px; height: 52px; grid-template-columns: 52px 0fr; }
    .aj-wa__ico { width: 52px; height: 52px; font-size: 1.55rem; }
    /* Must match the desktop hover rule's specificity (.aj .aj-wa:hover, 0,3,0) or
       that rule — not this one — decides the outcome on a phone too, since
       media-query order does not override specificity. */
    .aj .aj-wa:hover, .aj .aj-wa:focus-visible, .aj .aj-wa:active { grid-template-columns: 52px 0fr; }
    .aj-wa__txt { display: none; }

    /* The fixed WhatsApp button sits at the inline-end corner and lands on top
       of the carousel arrows once the stage reaches the bottom of the screen.
       Send the controls to the opposite corner — logical properties keep them
       apart in both LTR and RTL. */
    .aj-stage__ctrl {
        inset-inline-end: auto;
        inset-inline-start: clamp(1rem, 4vw, 1.5rem);
    }
}

@media (max-width: 420px) {
    .aj-stats { grid-template-columns: 1fr; }
    .aj-offer, .aj-alt, .aj-quote { padding: var(--s6) var(--s5); }
}

/* -----------------------------------------------------------------------------
   20. REDUCED MOTION — everything resolves to its final, readable state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .aj *, .aj *::before, .aj *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .js-on [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .aj-fade { opacity: 1 !important; }
    .aj-zoom { opacity: 1 !important; transform: none !important; }
    .aj-aurora span { animation: none !important; }
    .aj-slide__media img, .aj-slide__media .aj-slide__fill { transform: none !important; }

    .aj-story__pin { position: static; min-height: 0; padding-block: var(--section); }
    .aj-story__grid { grid-template-columns: 1fr; }
    .aj-step { opacity: 1; background: var(--surface); border-color: var(--line); }
    .aj-story__stage { position: static; aspect-ratio: auto; display: grid; gap: var(--s5); background: transparent; border: 0; box-shadow: none; padding: var(--s5); }
    .aj-story__panel { position: static; opacity: 1; transform: none; }
    .aj-rail { display: none; }

    .aj-rotate__word { opacity: 0; }
    .aj-rotate__word.is-on { opacity: 1; filter: none; transform: none; }
}

/* -----------------------------------------------------------------------------
   POLICY MODALS
   The legal copy is reused verbatim from the original landing page's modal.php,
   so this page does not own that markup — it adopts it. Everything below maps
   that file's existing class vocabulary (.policy-*) onto this page's tokens, so
   the documents read as part of this design rather than a transplant, and the
   legal text itself stays in exactly one place.

   These are long-form reading, so: a measure cap, generous leading, and a paper
   surface that holds its own against the shader behind it.
   -------------------------------------------------------------------------- */
.policy-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: none;
    align-items: flex-start; justify-content: center;
    padding: clamp(0.75rem, 3vw, 2.5rem);
}
.policy-modal.active { display: flex; }

.policy-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(9, 12, 18, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: aj-policy-fade var(--d) var(--e-out) both;
}

.policy-modal-container {
    position: relative;
    width: 100%; max-width: 920px;
    margin-block: auto;
    animation: aj-policy-rise 0.42s var(--e-out) both;

    /* The clipper.
       An element that scrolls is never clipped by its own border-radius — its
       scrollbar is painted in its box, outside the curve, which is how the
       native stepper arrows ended up sitting past the rounded corners. So the
       radius and the scrolling have to live on two different elements: this one
       rounds off and hides the overflow, the paper inside does the scrolling.
       The scrollbar — track, thumb and any native arrows — is then contained
       strictly inside the corners by the clip itself, in every browser, with no
       reliance on ::-webkit-scrollbar being honoured at all. */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.policy-modal-paper {
    position: relative;
    max-height: min(88vh, 900px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Chrome now lives on the clipping parent, so this element is only a
       scroller: no background, no border, no radius of its own. */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    padding-block-start: clamp(3.25rem, 6vw, 4rem);
}

/* WebKit needs its own vocabulary for the same thing. The thumb is drawn with
   a transparent border and background-clip so it reads as an inset pill with
   breathing room, instead of a slab hard against the dialog edge. */
.policy-modal-paper::-webkit-scrollbar { width: 12px; }

/* A scroll container is not clipped by its own border-radius, so the scrollbar
   runs the full box height and its stepper arrows end up sitting outside the
   32px corner curve, floating in the gap beside the dialog. Drop the arrows —
   nobody uses them and they are the part that escapes — and inset the track so
   the thumb starts and ends inside the curve. */
.policy-modal-paper::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.policy-modal-paper::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 16px;
}
.policy-modal-paper::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
.policy-modal-paper::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
.policy-modal-paper::-webkit-scrollbar-corner { background: transparent; }

/* Close button rides above the scrolling copy. */
.policy-modal-header {
    position: absolute;
    inset-block-start: clamp(0.75rem, 2vw, 1.25rem);
    inset-inline-end: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 2;
}
.policy-modal-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background var(--d) var(--e-out), color var(--d) var(--e-out),
                border-color var(--d) var(--e-out);
}
.policy-modal-close:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: var(--accent-ring);
}
.policy-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.policy-modal-content { max-width: 68ch; }

.aj .policy-modal-title {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--ls-display);
    color: var(--text);
    margin: 0 0 var(--s5);
}
[dir="rtl"] .aj .policy-modal-title {
    font-family: var(--f-ar-display);
    font-weight: 600; letter-spacing: 0; line-height: 1.5;
}

.policy-section { margin-block-end: var(--s7); }
.policy-section:last-child { margin-block-end: 0; }

.aj .policy-section-title {
    font-family: var(--f-display);
    font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 var(--s3);
    padding-block-end: var(--s2);
    border-block-end: 1px solid var(--line);
}
.aj .policy-subsection-title {
    font-family: var(--f-body);
    font-size: 1rem; font-weight: 700;
    color: var(--text);
    margin: var(--s5) 0 var(--s2);
}
[dir="rtl"] .aj .policy-section-title {
    font-family: var(--f-ar-display); font-weight: 600; letter-spacing: 0;
}
[dir="rtl"] .aj .policy-subsection-title { font-family: var(--f-ar-body); }

.aj .policy-text {
    color: var(--text-body);
    font-size: var(--t-sm);
    line-height: 1.8;
    margin: 0 0 var(--s4);
}
[dir="rtl"] .aj .policy-text { line-height: 2; }

/* Same trap as the checklists above: the base .aj ul (0,1,1) sets
   list-style:none, so a policy list has to ask for its markers back. */
.aj .policy-list { margin: 0 0 var(--s4); padding-inline-start: 1.35rem; list-style: disc; }
.aj .policy-list ul { list-style: circle; padding-inline-start: 1.25rem; margin-block-start: var(--s2); }
.aj .policy-list li {
    color: var(--text-body);
    font-size: var(--t-sm);
    line-height: 1.8;
    margin-block-end: var(--s2);
}
.aj .policy-list li::marker { color: var(--accent); }

.policy-highlight {
    background: var(--accent-soft);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--r-sm);
    padding: var(--s4);
    margin-block-end: var(--s4);
}
.policy-highlight .policy-text:last-child { margin-block-end: 0; }

/* Info / service / feature grids from the About and contact blocks. */
.policy-info-grid, .policy-services-grid, .policy-features-grid {
    display: grid; gap: var(--s4);
    margin-block-end: var(--s4);
}
.policy-info-grid, .policy-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.policy-features-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.policy-info-item, .policy-feature {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--s4);
}
.policy-feature-icon {
    color: var(--accent); font-size: 1.5rem;
    margin-block-end: var(--s2); display: block;
}
.aj .policy-feature-title {
    font-family: var(--f-body); font-size: 0.95rem; font-weight: 700;
    margin: 0 0 var(--s2); color: var(--text);
}
.policy-feature-text {
    color: var(--text-body); font-size: var(--t-xs);
    line-height: 1.7; margin: 0;
}

/* modal.php carries a handful of Bootstrap utility classes. This page has no
   Bootstrap, so give them just enough that nothing reads as broken. */
.policy-modal .table-responsive { overflow-x: auto; margin-block-end: var(--s4); }
.policy-modal table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.policy-modal table th, .policy-modal table td {
    border: 1px solid var(--line);
    padding: var(--s2) var(--s3);
    text-align: start;
    color: var(--text-body);
}
.policy-modal table th { background: var(--accent-soft); color: var(--text); font-weight: 700; }
.policy-modal .text-center { text-align: center; }
.policy-modal .text-muted { color: var(--text-dim); }
.policy-modal .text-danger { color: var(--bad); }
.policy-modal .mb-0 { margin-block-end: 0; }
.policy-modal .mb-4 { margin-block-end: var(--s5); }
.policy-modal .alert-heading { font-weight: 700; color: var(--text); }

.policy-modal-actions {
    display: flex; flex-wrap: wrap; gap: var(--s3);
    margin-block-start: var(--s7);
    padding-block-start: var(--s5);
    border-block-start: 1px solid var(--line);
}
.aj .policy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 48px; padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: background var(--d) var(--e-out), color var(--d) var(--e-out);
}
.aj .policy-btn-primary {
    background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.aj .policy-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.aj .policy-btn-outline {
    background: transparent; color: var(--text); border: 1px solid var(--line-strong);
}
.aj .policy-btn-outline:hover { background: var(--accent-soft); color: var(--accent-ink); }

@keyframes aj-policy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aj-policy-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .policy-modal-overlay, .policy-modal-container { animation: none !important; }
}

/* Full-bleed sheet on phones — a floating card wastes the little width there is. */
@media (max-width: 700px) {
    .policy-modal { padding: 0; }
    .policy-modal-container {
        max-width: none; margin-block: 0;
        border-radius: 0; border: 0; box-shadow: none;
    }
    .policy-modal-paper {
        max-height: 100vh;
        max-height: 100dvh;
    }
    .policy-modal-paper::-webkit-scrollbar-track { margin-block: 0; }
}

/* -----------------------------------------------------------------------------
   MOBILE: HOW IT WORKS  — scroll-driven timeline
   The desktop version pins the section and swaps an illustrated stage as you
   scroll. Below the pin breakpoint that was thrown away entirely: every step
   got .is-on at once and the stage was hidden, leaving four identical flat
   cards with none of the artwork and no sense of progression.

   The pin itself should not come back — pinning on a phone fights the scroll.
   Instead the same narrative runs as a vertical timeline: a rail fills as you
   move through the section, the step nearest the reading line lights up, and
   the stage panel that belongs to it opens underneath it. Steps are also
   tappable, so the whole thing works without scrolling at all.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

    .aj-story__pin { overflow: visible; }

    /* The rail returns, running down the side of the step list. */
    /* landing.js moves the rail inside .aj-steps on this breakpoint, and
       .aj-steps is positioned only here — so these offsets resolve against the
       step list and land on the badge centres (step padding 16px + half of the
       42px badge, less half the rail width). Above the breakpoint .aj-steps is
       static, the rail resolves against .aj-story__pin as before, and none of
       this applies. */
    .aj-rail {
        display: block;
        inset-block: 21px auto;
        height: calc(100% - 42px);
        inset-inline-start: 36px;
        width: 2px;
    }
    .aj-steps { position: relative; padding-inline-start: 0; }

    .aj-step {
        position: relative;
        align-items: flex-start;
        opacity: 0.55;
        background: transparent;
        border-color: transparent;
        cursor: pointer;
        transition: opacity var(--d) var(--e-out), background-color var(--d) var(--e-out),
                    border-color var(--d) var(--e-out), box-shadow var(--d) var(--e-out),
                    transform var(--d) var(--e-out);
    }
    .aj-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    .aj-step.is-on {
        opacity: 1;
        background: var(--surface);
        border-color: var(--line);
        box-shadow: var(--sh-sm);
    }

    /* The number badge is the bead on the rail, so it keeps a solid ground of
       its own — a transparent badge would let the rail run straight through it. */
    .aj-step__n {
        background: var(--bg-raised);
        border: 2px solid var(--line);
        box-shadow: 0 0 0 4px var(--bg-raised);
        transition: background-color var(--d) var(--e-out), color var(--d) var(--e-out),
                    border-color var(--d) var(--e-out), transform var(--d) var(--e-out);
    }
    .aj-step.is-on .aj-step__n {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
        transform: scale(1.08);
    }

    /* The stage panel for this step, cloned in by landing.js. Collapsed with a
       0fr→1fr grid row so the open/close is a real height transition rather
       than a jump, and the inner track is what actually clips. */
    .aj-step__reveal {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--d-slow) var(--e-out),
                    opacity var(--d) var(--e-out),
                    margin-block-start var(--d-slow) var(--e-out);
        opacity: 0;
        margin-block-start: 0;
    }
    .aj-step.is-on .aj-step__reveal {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-block-start: var(--s3);
    }
    .aj-step__reveal > * { overflow: hidden; min-height: 0; }

    .aj-step__art {
        display: flex; align-items: center; gap: var(--s3);
        padding: var(--s3);
        border-radius: var(--r-sm);
        background: var(--accent-soft);
        border: 1px solid var(--accent-ring);
    }
    .aj-step__art .glyph {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        border-radius: var(--r-sm);
        background: var(--accent); color: var(--on-accent);
        font-size: 1.2rem;
    }
    .aj-step__art strong {
        display: block;
        font-family: var(--f-display); font-weight: 600;
        font-size: 0.98rem; color: var(--text);
        margin-block-end: 1px;
    }
    [dir="rtl"] .aj-step__art strong { font-family: var(--f-ar-display); }
    .aj-step__art span { font-size: var(--t-xs); line-height: 1.55; color: var(--text-body); }

    /* The desktop stage stays hidden — its content now lives in the steps. */
    .aj-story__stage { display: none; }
}

/* -----------------------------------------------------------------------------
   MOBILE: MODULES — a scrolling tab strip instead of thirty stacked cards
   This section previously dropped the tab strip on phones and printed all five
   groups end to end: thirty cards and 3,361px of scrolling to reach the
   pricing below it. Everything was visible, but nothing was navigable.

   The strip comes back as a snap-scrolling row of chips, and only the selected
   group renders — the same behaviour the desktop already has, and the same
   ARIA tab semantics, so keyboard and screen-reader use is unchanged. The
   count on each chip tells you what is inside before you tap it.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {

    .aj-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        gap: var(--s2);
        /* Bleed to the viewport edge so the strip reads as scrollable, and
           fade the trailing edge to say there is more. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-block-end: var(--s2);
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
    }
    [dir="rtl"] .aj-tabs {
        -webkit-mask-image: linear-gradient(to left, #000 0, #000 88%, transparent 100%);
        mask-image: linear-gradient(to left, #000 0, #000 88%, transparent 100%);
    }
    .aj-tabs::-webkit-scrollbar { display: none; }
    .aj-tabs .aj-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 44px;
    }
    .aj-tab__n {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding-inline: 5px;
        border-radius: 999px;
        background: var(--accent-soft); color: var(--accent-ink);
        font-size: 0.68rem; font-weight: 700; line-height: 1;
    }
    .aj-tab[aria-selected="true"] .aj-tab__n {
        background: rgba(255, 255, 255, 0.22); color: inherit;
    }

    /* One group at a time again. */
    .aj-panel[hidden] { display: none; }
    .aj-panel__title { display: flex; }
    .aj-panel + .aj-panel { margin-block-start: 0; }

    /* Cards enter in sequence when their group is selected, so switching tabs
       reads as a change rather than a repaint. The delay is capped so the last
       card in a group of six is not left waiting. */
    .aj-panel:not([hidden]) .aj-card {
        animation: aj-card-in 460ms var(--e-out) both;
        animation-delay: calc(var(--i, 0) * 45ms);
    }
}

/* The count is only meaningful on the strip, where one group shows at a time.
   Scoped by min-width rather than a bare rule so source order cannot undo the
   mobile display above. */
@media (min-width: 1001px) { .aj-tab__n { display: none; } }

@keyframes aj-card-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aj-panel:not([hidden]) .aj-card { animation: none !important; }

    /* initStory does not run at all under reduced motion, so nothing ever
       activates a step. Without this, three of the four steps would sit dimmed
       forever with their panels collapsed and no way to open them. Show the
       whole timeline at once instead — every step readable, every panel open,
       and no movement anywhere. */
    .aj-step { opacity: 1 !important; cursor: default; }
    .aj-step__reveal {
        transition: none !important;
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
        margin-block-start: var(--s3) !important;
    }
    /* A progress rail that can never fill is just a stray line. */
    .aj-rail { display: none !important; }
}

/* -----------------------------------------------------------------------------
   BILLING CYCLE TOGGLE
   Replaces the inline flex wrapper the markup used to carry.
   -------------------------------------------------------------------------- */
.aj-cycle { display: flex; justify-content: center; }

@media (max-width: 700px) {
    /* The toggle sits between the section heading and the plan cards, and at
       213px against 368px cards with 48px of air under it, it read as the tail
       of the heading rather than the control for the cards below it — so on a
       phone, where only one card is on screen at a time, it was easy to miss
       that the prices could be switched at all.

       Pulling it down onto the cards and letting it span their width makes it
       a segmented control sitting directly on top of what it changes. */
    /* The toggle now lives inside the offer card, which owns the spacing —
       the standalone margins it needed as a free-floating control would just
       open a gap between the plan note and the control. */
    .aj-toggle {
        display: flex;
        width: 100%;
        margin-block-end: 0;
    }
    .aj-toggle__opt {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: var(--s3);
    }
}

/* -----------------------------------------------------------------------------
   APP STORE BADGES
   Both are in the markup; which one shows is decided by data-platform, set on
   <html> by the pre-paint bootstrap. Keying it off an attribute rather than
   toggling after load means the wrong badge is never painted — no flash of the
   store you cannot install from.

   The artwork is Apple's and Google's own, which both vendors require be used
   unmodified, so the badges are not recoloured — only the frame around them is
   ours. Their intrinsic width/height are declared so the hero never reflows
   while they load.
   -------------------------------------------------------------------------- */
.aj-stores {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s3);
    margin-block-start: var(--s5);
}

.aj-store {
    display: inline-flex;
    padding: 0;
    border-radius: 10px;
    line-height: 0;
    /* The badges are dark artwork; on a dark ground they need a faint edge to
       separate from the page, on light they need none. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    transition: transform var(--d-fast) var(--e-out), box-shadow var(--d) var(--e-out);
}
.aj-store img { display: block; height: 44px; width: auto; border-radius: inherit; }
.aj-store:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); }
.aj-store:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

[data-style="dark"] .aj-store {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Show only the store the device can actually install from. Anything that is
   not clearly iOS or Android keeps both. */
[data-platform="ios"]     .aj-store--android { display: none; }
[data-platform="android"] .aj-store--ios     { display: none; }

@media (max-width: 700px) {
    .aj-stores { gap: var(--s2); margin-block-start: var(--s4); }
    .aj-store img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .aj-store { transition: none; }
    .aj-store:hover { transform: none; }
}

@media print { .aj-stores { display: none !important; } }

@media print {
    .aj-nav, .aj-sheet, .aj-scrim, .aj-progress, .aj-wa, .aj-aurora, .aj-blueprint { display: none !important; }
    .js-on [data-rv] { opacity: 1 !important; transform: none !important; }
    .aj { background: #fff; color: #000; }
}