/* ============================================================
   Capsjo public-site design system — ONE source for every public page
   (Home / ChildCaps / Category / Establishment / Contact) plus the shared
   navbar + footer. Pages add only their own layout (prefixed .hm- .cc- .ct-
   .ed- .co-) on top of these components — never their own tokens, buttons,
   eyebrows, headings or cards.
   Components are scoped under .cj so nothing leaks into the provider portal.
   Palette = OUR capsjo colors.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
    --cj-indigo:#6975e5; --cj-indigo-700:#5a63d8; --cj-indigo-050:#ecedfb; --cj-indigo-100:#dfe1f8;
    --cj-orange:#ff6b35; --cj-orange-700:#e2551f; --cj-orange-050:#fff1ea;
    --cj-green:#2e9e57; --cj-green-050:#e6f4ec;
    --cj-ink:#14151a; --cj-muted:#565667; --cj-faint:#8a8f9e;
    --cj-surface:#f6f7fc; --cj-card:#fff; --cj-line:#e7e9f4; --cj-chip:#f1f2f8; --cj-media:#eef0f8;

    --cj-r-sm:10px; --cj-r-md:14px; --cj-r-lg:22px; --cj-r-xl:30px; --cj-r-pill:100px;
    --cj-shadow-sm:0 2px 10px rgba(20,21,26,.05);
    --cj-shadow-md:0 10px 30px rgba(20,21,26,.06);
    --cj-shadow-lg:0 22px 44px rgba(105,117,229,.14);
    --cj-shadow-brand:0 10px 22px rgba(105,117,229,.22);

    --cj-font:'Plus Jakarta Sans','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
    --cj-font-ar:'Tajawal','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

    --cj-gutter:40px; --cj-sec:76px;
}
@media(max-width:991px){ :root{ --cj-gutter:24px; --cj-sec:60px } }
@media(max-width:600px){ :root{ --cj-gutter:20px; --cj-sec:48px } }

/* ---------- base ---------- */
.cj{ color:var(--cj-ink); background:#fff; font-family:var(--cj-font); font-size:15.5px; line-height:1.75; overflow-x:clip }
.cj *{ box-sizing:border-box }
/* CustomStyle.css sets `* { font-family: BlinkMacSystemFont… }`, which breaks inheritance on every span/div.
   Restore inheritance inside the public pages (icons keep their own font via remixicon's !important). */
.cj{ font-family:var(--cj-font) !important }
body.rtl .cj{ font-family:var(--cj-font-ar) !important }
.cj *:not(i){ font-family:inherit !important }
.cj h1,.cj h2,.cj h3,.cj h4{ font-family:var(--cj-font) !important; letter-spacing:-.02em; color:var(--cj-ink); font-weight:800 }
/* the margin reset is the weakest rule (:where = no class weight) so it still beats the old theme's bare p/h rules,
   but any spacing a component or page sets on its own class (.hm-who, .cx-note…) wins — `.cj p` used to zero those */
:where(.cj) :is(h1,h2,h3,h4,p){ margin:0 }
.cj a{ text-decoration:none }
.cj img{ max-width:100% }
.cj [hidden]{ display:none !important }

/* Arabic: Tajawal first. The site-wide theme forces Plus Jakarta (Latin only) on text
   elements with !important, so re-assert here; <i> is left alone so icon fonts survive. */
body.rtl .cj :is(h1,h2,h3,h4,h5,h6,p,a,li,span,b,strong,small,label,button,input,select,textarea,option,div,dt,dd),
body.rtl .navbar-area .nav-link, body.rtl .mean-nav a,
body.rtl .cj-foot :is(h5,p,a,span,li){ font-family:var(--cj-font-ar) !important; letter-spacing:0 !important }
body.rtl .cj{ line-height:1.9 }
/* the public header (.cj-nav) sits outside .cj: the same fonts as the page — Plus Jakarta, Tajawal in Arabic — on every
   element inside it (else CustomStyle's `*` system font wins on spans, e.g. the sign-in button's words) */
.cj-nav{ font-family:var(--cj-font) !important }
body.rtl .cj-nav{ font-family:var(--cj-font-ar) !important }
.cj-nav *:not(i){ font-family:inherit !important }
body.rtl .cj-nav *:not(i){ letter-spacing:0 !important }

/* ---------- layout ---------- */
.cj-wrap{ max-width:1200px; margin:0 auto; padding-inline:var(--cj-gutter) }
.cj-sec{ padding-block:var(--cj-sec) }
.cj-sec--tint{ background:var(--cj-surface) }
.cj-sec--flush-top{ padding-top:0 }

/* heroes: one marketing band (Home/ChildCaps) and one page band (Category/Establishment/Contact).
   The page band fades into --cj-surface so the tinted content section continues seamlessly. */
.cj-hero{ background:linear-gradient(180deg,#fff 0%,var(--cj-indigo-050) 52%,#fff 100%); padding-block:64px 72px }
.cj-hero--page{ background:linear-gradient(180deg,#fff 0%,var(--cj-surface) 100%); padding-block:22px 34px }
.cj-hero--center{ text-align:center }
@media(max-width:600px){ .cj-hero{ padding-block:40px 48px } .cj-hero--page{ padding-block:16px 26px } }

/* ---------- typography ---------- */
.cj-display{ font-size:clamp(36px,5vw,60px) !important; line-height:1.06; margin:0 0 20px !important }
.cj-title{ font-size:clamp(28px,3.6vw,40px) !important; line-height:1.15; margin:0 0 12px !important }
.cj-h2{ font-size:clamp(26px,3.2vw,36px) !important; line-height:1.2; margin:0 0 12px !important }
.cj-h3{ font-size:20px !important; line-height:1.3; margin:0 0 8px !important }
body.rtl .cj-display, body.rtl .cj-title, body.rtl .cj-h2{ line-height:1.35 }
.cj .k, .cj .kb{ color:var(--cj-indigo) } .cj .ko{ color:var(--cj-orange) }
.cj-lead{ font-size:17.5px; line-height:1.85; color:var(--cj-muted); max-width:58ch }
.cj-hero--center .cj-lead{ margin-inline:auto }
.cj-text{ font-size:15.5px; line-height:1.85; color:var(--cj-muted) }
.cj-meta{ font-size:13px; color:var(--cj-faint) }

/* eyebrow: the one small label above headings */
.cj-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--cj-indigo); background:var(--cj-indigo-050); padding:6px 14px; border-radius:var(--cj-r-pill); margin-bottom:16px; line-height:1.4 }
.cj-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:currentColor }
.cj-eyebrow--on-dark{ background:rgba(255,255,255,.16); color:#fff }
body.rtl .cj-eyebrow{ font-size:12.5px }

/* section heading */
.cj-head{ text-align:center; max-width:680px; margin:0 auto 42px }
.cj-head p{ color:var(--cj-muted); font-size:16.5px; line-height:1.8 }
.cj-head--start{ text-align:start; margin-inline:0 }

/* inline facts line (small real numbers — not KPI tiles) */
.cj-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; color:var(--cj-muted); font-size:14px; margin-top:18px }
.cj-facts span{ display:inline-flex; align-items:center; gap:7px }
.cj-facts i{ color:var(--cj-indigo); font-size:17px }
.cj-facts b{ color:var(--cj-ink); font-weight:800 }
.cj-hero--center .cj-facts{ justify-content:center }

/* breadcrumb */
.cj-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:13px; color:var(--cj-muted); margin-bottom:18px }
.cj-crumb a{ color:var(--cj-muted) } .cj-crumb a:hover{ color:var(--cj-indigo) }
.cj-crumb .sep{ color:var(--cj-faint); font-size:15px; display:inline-flex }
.cj-crumb .cur{ color:var(--cj-ink); font-weight:700 }

/* ---------- actions ---------- */
/* primary = the one main action · secondary = alternative · link = text action · icon = compact action */
.cj-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14.5px; line-height:1.2; padding:12px 22px;
    border-radius:var(--cj-r-pill); border:1.5px solid transparent; cursor:pointer; font-family:inherit; white-space:nowrap;
    transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s }
.cj-btn i{ font-size:18px; line-height:1 }
.cj-btn:hover{ transform:translateY(-2px); text-decoration:none }
.cj-btn--lg{ font-size:15.5px; padding:14px 26px }
.cj-btn.block{ width:100% }
.cj-btn--primary{ background:var(--cj-indigo); color:#fff !important; box-shadow:var(--cj-shadow-brand) }
.cj-btn--primary:hover{ background:var(--cj-indigo-700); box-shadow:0 14px 28px rgba(105,117,229,.3) }
.cj-btn--secondary{ background:#fff; color:var(--cj-ink) !important; border-color:var(--cj-line) }
.cj-btn--secondary:hover{ color:var(--cj-indigo) !important; border-color:var(--cj-indigo-100); box-shadow:var(--cj-shadow-sm) }
.cj-btn--on-dark{ background:#fff; color:var(--cj-indigo) !important }
.cj-btn--on-dark-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.45) }
.cj-btn--on-dark-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff }
.cj-btn-row{ display:flex; flex-wrap:wrap; gap:12px }
.cj-hero--center .cj-btn-row{ justify-content:center }

.cj-link{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14.5px; color:var(--cj-indigo) !important; background:none; border:0; padding:0; cursor:pointer; font-family:inherit }
.cj-link i{ font-size:17px; transition:transform .15s }
.cj-link:hover i, a:hover > .cj-link i, .cj-card:hover .cj-link i{ transform:translateX(3px) }
body.rtl .cj-link:hover i, body.rtl a:hover > .cj-link i, body.rtl .cj-card:hover .cj-link i{ transform:translateX(-3px) }

.cj-icon-btn{ width:42px; height:42px; flex:none; border-radius:var(--cj-r-md); display:inline-grid; place-items:center; font-size:20px;
    background:var(--cj-indigo-050); color:var(--cj-indigo) !important; border:0; transition:background .15s, color .15s, transform .15s }
.cj-icon-btn:hover{ background:var(--cj-indigo); color:#fff !important; transform:translateY(-2px) }

/* icon box (the one way an icon sits in a tinted square) */
.cj-ic{ width:48px; height:48px; flex:none; border-radius:var(--cj-r-md); display:grid; place-items:center; font-size:24px; background:var(--cj-indigo-050); color:var(--cj-indigo) }
.cj-ic--accent{ background:var(--cj-orange-050); color:var(--cj-orange) }
.cj-ic--sm{ width:38px; height:38px; font-size:19px; border-radius:11px }

/* ---------- surfaces ---------- */
.cj-panel{ background:var(--cj-card); border:1px solid var(--cj-line); border-radius:var(--cj-r-lg); padding:28px }
.cj-panel + .cj-panel{ margin-top:22px }
.cj-panel-title{ font-size:19px !important; margin:0 0 16px !important; display:flex; align-items:center; gap:10px }
.cj-panel-title i{ color:var(--cj-indigo); font-size:22px }
@media(max-width:600px){ .cj-panel{ padding:22px } }

/* brand banner: indigo promo band (feature / provider invitations) */
.cj-banner{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--cj-indigo-700) 0%,var(--cj-indigo) 58%,#6a5aa8 100%);
    border-radius:var(--cj-r-xl); padding:48px; color:#fff; box-shadow:0 26px 54px rgba(105,117,229,.24) }
.cj-banner::after{ content:""; position:absolute; top:-80px; inset-inline-end:14%; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none }
.cj-banner > *{ position:relative; z-index:1 }
.cj-banner h2,.cj-banner h3{ color:#fff !important }
.cj-banner p{ color:rgba(255,255,255,.88) }
@media(max-width:600px){ .cj-banner{ padding:32px 22px; border-radius:var(--cj-r-lg) } }

/* app CTA: the one "get the Capsjo app" block */
.cj-appcta{ background:linear-gradient(135deg,var(--cj-indigo-050),#fff 58%,var(--cj-orange-050)); border:1px solid var(--cj-line);
    border-radius:var(--cj-r-xl); padding:56px 40px; text-align:center }
.cj-appcta p{ color:var(--cj-muted); font-size:16px; line-height:1.85; max-width:46rem; margin:0 auto 26px }
.cj-appcta--compact{ padding:26px 22px; border-radius:var(--cj-r-lg); border-color:var(--cj-indigo-100) }
.cj-appcta--compact p{ font-size:14px; margin-bottom:16px }
@media(max-width:600px){ .cj-appcta{ padding:40px 22px; border-radius:var(--cj-r-lg) } }
.cj-stores{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.cj-stores img{ height:50px; width:auto; display:block; transition:transform .15s }
.cj-stores a:hover img{ transform:translateY(-2px) }
.cj-appcta--compact .cj-stores img{ height:42px }

/* ---------- media (one image treatment) ---------- */
.cj-media{ position:relative; overflow:hidden; background:var(--cj-media); aspect-ratio:16/10 }
.cj-media > img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s }

/* ---------- cards ---------- */
.cj-card{ display:flex; flex-direction:column; background:var(--cj-card); border:1px solid var(--cj-line); border-radius:var(--cj-r-lg); overflow:hidden;
    box-shadow:var(--cj-shadow-sm); transition:transform .18s, box-shadow .18s, border-color .18s; color:inherit }
.cj-card:hover{ transform:translateY(-4px); box-shadow:var(--cj-shadow-lg); border-color:var(--cj-indigo-100); color:inherit; text-decoration:none }
.cj-card:hover .cj-media > img{ transform:scale(1.05) }
.cj-cbody{ padding:20px; display:flex; flex-direction:column; flex-grow:1; gap:8px }
.cj-ctag{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cj-indigo) }
body.rtl .cj-ctag{ font-size:12px }
.cj-ctitle{ font-size:17px !important; line-height:1.3 }
.cj-cmeta{ display:flex; align-items:flex-start; gap:6px; color:var(--cj-muted); font-size:13px; line-height:1.55 }
.cj-cmeta i{ color:var(--cj-faint); font-size:15px; flex:none; margin-top:1px }
.cj-cdesc{ color:var(--cj-muted); font-size:13.5px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.cj-cfoot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--cj-line) }
.cj-card .cj-cbody > .cj-cfoot{ margin-top:auto }

/* badge on an image, logo chip on an image */
.cj-badge{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:11.5px; padding:5px 11px; border-radius:var(--cj-r-pill); box-shadow:0 4px 12px rgba(0,0,0,.14); line-height:1.3 }
.cj-badge--deal{ top:12px; inset-inline-end:12px; background:var(--cj-orange); color:#fff }
.cj-badge i{ font-size:13px }
.cj-logo-badge{ position:absolute; z-index:2; inset-inline-end:14px; bottom:12px; width:50px; height:50px; border-radius:var(--cj-r-md); background:#fff;
    box-shadow:0 8px 18px rgba(20,21,26,.16); display:grid; place-items:center; overflow:hidden }
.cj-logo-badge img{ width:80%; height:80%; object-fit:contain }

/* small tags (inline facts inside content) */
.cj-tags{ display:flex; flex-wrap:wrap; gap:8px }
.cj-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:var(--cj-r-pill); background:var(--cj-chip); color:var(--cj-muted); line-height:1.4 }
.cj-tag i{ font-size:15px }
.cj-tag--brand{ background:var(--cj-indigo-050); color:var(--cj-indigo) }
.cj-tag--deal{ background:var(--cj-orange-050); color:var(--cj-orange-700) }

/* category navigation chips (the one category switcher) */
.cj-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
.cj-chips::-webkit-scrollbar{ height:5px } .cj-chips::-webkit-scrollbar-thumb{ background:var(--cj-line); border-radius:100px }
.cj-chip{ flex:none; display:inline-flex; align-items:center; padding:8px 16px; border-radius:var(--cj-r-pill); border:1px solid var(--cj-line);
    background:#fff; color:var(--cj-muted) !important; font-weight:700; font-size:13.5px; white-space:nowrap; transition:all .15s }
.cj-chip:hover{ color:var(--cj-indigo) !important; border-color:var(--cj-indigo-100); background:var(--cj-indigo-050) }
.cj-chip.is-active{ background:var(--cj-indigo); border-color:var(--cj-indigo); color:#fff !important }

/* ---------- forms / discovery toolbar ---------- */
.cj-field{ position:relative; min-width:0 }
.cj-field > i{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:14px; color:var(--cj-faint); font-size:18px; pointer-events:none }
.cj-input{ width:100%; border:1px solid var(--cj-line) !important; background:#fff !important; color:var(--cj-ink); border-radius:var(--cj-r-md) !important;
    padding:12px 14px !important; font-family:inherit; font-size:14.5px; line-height:1.4; height:auto !important; box-shadow:none !important; appearance:none; -webkit-appearance:none }
.cj-field > i ~ .cj-input{ padding-inline-start:42px !important }
textarea.cj-input{ resize:vertical; min-height:150px }
select.cj-input{ cursor:pointer; padding-inline-end:36px !important }
.cj-field--select::after{ content:"\ea4e"; font-family:"remixicon"; position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:12px; color:var(--cj-faint); pointer-events:none; font-size:18px }
.cj-input:focus{ outline:none; border-color:var(--cj-indigo) !important; box-shadow:0 0 0 4px rgba(105,117,229,.12) !important }
.cj-input::placeholder{ color:var(--cj-faint) }
.cj-label{ display:block; font-size:13px; font-weight:700; color:var(--cj-ink); margin-bottom:7px }

/* ---------- grids ---------- */
.cj-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
@media(max-width:991px){ .cj-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:600px){ .cj-grid-3{ grid-template-columns:1fr; gap:18px } }

/* ---------- states ---------- */
.cj-empty{ text-align:center; color:var(--cj-muted); background:#fff; border:1px dashed var(--cj-line); border-radius:var(--cj-r-lg); padding:52px 20px }
.cj-empty i{ font-size:36px; color:var(--cj-indigo); display:block; margin-bottom:10px }

/* ---------- photo tile: a real place photo with a floating label; tinted panel + category icon when the photo is missing ---------- */
.cj-ptile{ position:relative; display:block; width:100%; height:100%; border-radius:var(--cj-r-xl); overflow:hidden; color:#fff;
    background:linear-gradient(140deg,var(--cj-indigo-050),var(--cj-orange-050)); box-shadow:0 12px 28px rgba(20,21,26,.07) }
.cj-ptile .fb{ position:absolute; inset:0; display:grid; place-items:center }
.cj-ptile .fb img{ width:34%; max-width:96px; opacity:.9 }
.cj-ptile > .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.cj-ptile.has-ph::after{ content:""; position:absolute; inset:auto 0 0 0; height:50%; background:linear-gradient(180deg,transparent,rgba(20,21,26,.42)); pointer-events:none }
.cj-ptile:hover > .ph{ transform:scale(1.06) }
.cj-plabel{ position:absolute; z-index:2; inset-inline-start:14px; bottom:14px; max-width:calc(100% - 28px); display:flex; flex-direction:column; gap:1px;
    background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--cj-ink);
    padding:8px 14px; border-radius:14px; box-shadow:0 4px 12px rgba(20,21,26,.08); transition:transform .35s ease }
.cj-plabel b{ font-size:13px; font-weight:800; display:flex; align-items:center; gap:7px; line-height:1.3 }
.cj-plabel b::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cj-indigo); flex:none }
.cj-plabel--accent b::before{ background:var(--cj-orange) }
.cj-plabel span{ font-size:11.5px; color:var(--cj-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cj-ptile:hover .cj-plabel{ transform:translateY(-4px) }
@media(max-width:600px){ .cj-plabel{ padding:6px 11px } .cj-plabel span{ display:none } }

/* ---------- motion: entrance, slow float, scroll reveal (all off for reduced motion) ---------- */
@keyframes cj-up{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes cj-in{ from{ opacity:0; transform:translateY(22px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes cj-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.cj-enter > *{ animation:cj-up .7s cubic-bezier(.2,.7,.2,1) both }
.cj-enter > *:nth-child(2){ animation-delay:.08s } .cj-enter > *:nth-child(3){ animation-delay:.16s }
.cj-enter > *:nth-child(4){ animation-delay:.24s } .cj-enter > *:nth-child(5){ animation-delay:.32s }
/* sections rise into view only once _CjReveal has armed the page, so it is complete without JS */
.cj-armed .cj-reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
.cj-armed .cj-reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
    .cj-enter > *{ animation:none !important }
    .cj-armed .cj-reveal{ opacity:1; transform:none; transition:none }
    .cj-ptile > .ph, .cj-plabel{ transition:none }
}

/* ---------- motion 2 (2026-10-21): button shine · endless strip · phone · scroll story — all off for reduced motion ---------- */
/* a soft light that passes over the main action now and then */
.cj-btn--shine{ position:relative; overflow:hidden; isolation:isolate }
.cj-btn--shine::after{ content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%); transform:translateX(-130%);
    animation:cj-shine 7s cubic-bezier(.4,0,.2,1) 2.4s infinite }
body.rtl .cj-btn--shine::after{ animation-name:cj-shine-rtl }
.cj-btn--on-dark.cj-btn--shine::after, .cj-btn--secondary.cj-btn--shine::after{ background:linear-gradient(105deg,transparent 35%,rgba(105,117,229,.2) 50%,transparent 65%) }
@keyframes cj-shine{ 0%{ transform:translateX(-130%) } 16%,100%{ transform:translateX(130%) } }
@keyframes cj-shine-rtl{ 0%{ transform:translateX(130%) } 16%,100%{ transform:translateX(-130%) } }

/* endless strip: .cj-marquee > .cj-marquee__track > .cj-marquee__set ×2 (the second aria-hidden). Pauses on hover. */
.cj-marquee{ --cj-mq-gap:10px; overflow:hidden; padding-block:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) }
.cj-marquee__track{ display:flex; gap:var(--cj-mq-gap); width:max-content; animation:cj-marquee var(--cj-mq-dur,40s) linear infinite }
.cj-marquee__set{ display:flex; gap:var(--cj-mq-gap); flex:none }
.cj-marquee:hover .cj-marquee__track, .cj-marquee:focus-within .cj-marquee__track{ animation-play-state:paused }
body.rtl .cj-marquee__track{ animation-name:cj-marquee-rtl }
@keyframes cj-marquee{ to{ transform:translateX(calc(-50% - var(--cj-mq-gap) / 2)) } }
@keyframes cj-marquee-rtl{ to{ transform:translateX(calc(50% + var(--cj-mq-gap) / 2)) } }

/* a phone drawn in CSS: .cj-phone > .cj-phone-screen > .cj-phone-view(.is-on) — the views cross-fade */
.cj-phone{ position:relative; width:min(290px,76vw); aspect-ratio:9 / 18.6; padding:10px; border-radius:46px; background:#15142a; margin-inline:auto;
    box-shadow:0 40px 80px rgba(8,6,30,.45), inset 0 0 0 1.5px rgba(255,255,255,.14) }
.cj-phone::before{ content:""; position:absolute; z-index:3; top:19px; left:50%; width:84px; height:24px; margin-left:-42px; border-radius:20px; background:#15142a }
.cj-phone-screen{ position:relative; height:100%; border-radius:37px; overflow:hidden; background:#fff; color:var(--cj-ink) }
.cj-phone-view{ position:absolute; inset:0; padding:54px 15px 16px; display:flex; flex-direction:column; gap:11px; overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.985); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s .6s }
.cj-phone-view.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .45s ease .05s, transform .6s cubic-bezier(.2,.7,.2,1) .05s, visibility 0s }

/* scroll story ([data-cj-story], _CjStory): steps [data-step] drive views [data-view]. Wide screens: the stage stays
   put while the steps scroll past. Narrow screens: the steps are tabs that also advance on their own. */
.cj-story [data-step]{ cursor:pointer; transition:opacity .35s ease }
.cj-story.is-live [data-step]:not(.is-on){ opacity:.5 }
.cj-story.is-live [data-step]:not(.is-on):hover{ opacity:.8 }
.cj-story [data-step] .cj-story-bar{ display:block; height:2px; margin-top:12px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden }
.cj-story [data-step] .cj-story-bar::after{ content:""; display:block; height:100%; width:0; background:currentColor; opacity:.9 }
.cj-story.is-auto [data-step].is-on .cj-story-bar::after{ animation:cj-progress var(--cj-story-ms,5000ms) linear forwards }
.cj-story:not(.is-auto) [data-step].is-on .cj-story-bar::after{ width:100% }
@keyframes cj-progress{ to{ width:100% } }

/* the stage around a .cj-phone (soft glow) and the app screens drawn inside it (.cj-pv-*) */
.cj-phone-stage{ position:relative; display:flex; justify-content:center; padding-block:6px }
.cj-phone-stage::before{ content:""; position:absolute; width:78%; aspect-ratio:1; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(closest-side,rgba(255,107,53,.30),rgba(105,117,229,.18) 55%,transparent); filter:blur(10px); pointer-events:none }
.cj-phone-stage .cj-phone{ position:relative }
/* the screens inside the phone (app look: small type, soft tiles) */
.cj-pv-top{ display:flex; align-items:center; justify-content:space-between }
.cj-pv-top b{ font-size:19px; font-weight:800; color:var(--cj-ink) }
.cj-pv-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--cj-indigo-050); color:var(--cj-indigo); font-size:15px }
.cj-pv-search{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--cj-r-pill); background:var(--cj-chip); color:var(--cj-faint); font-size:11.5px }
.cj-pv-seg{ display:flex; gap:6px }
.cj-pv-seg span{ padding:5px 11px; border-radius:var(--cj-r-pill); background:var(--cj-chip); color:var(--cj-muted); font-size:11px; font-weight:700 }
.cj-pv-seg span.on{ background:var(--cj-indigo); color:#fff }
.cj-pv-h{ font-size:11.5px; font-weight:800; color:var(--cj-ink) }
.cj-pv-cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
.cj-pv-cats span{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px 8px; border-radius:12px; background:var(--cj-indigo-050) }
.cj-pv-cats i{ width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#fff }
.cj-pv-cats img{ width:20px; height:20px; object-fit:contain }
.cj-pv-cats em{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--cj-ink); text-align:center; line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cj-pv-place{ border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(43,34,115,.12); margin-top:auto }
.cj-pv-place .ph{ height:92px; background:linear-gradient(135deg,var(--cj-indigo-100),var(--cj-orange-050)) }
.cj-pv-place .ph img{ width:100%; height:100%; object-fit:cover; display:block }
.cj-pv-place > div:last-child{ padding:8px 11px 10px }
.cj-pv-place b, .cj-pv-list b{ display:block; font-size:12px; font-weight:800; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cj-pv-place small, .cj-pv-list small{ display:block; font-size:10.5px; color:var(--cj-muted) }
.cj-pv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.cj-pv-list li{ display:flex; align-items:center; gap:10px; padding:7px; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(43,34,115,.09) }
.cj-pv-list .th{ width:46px; height:46px; flex:none; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--cj-indigo-100),var(--cj-orange-050)) }
.cj-pv-list .th img{ width:100%; height:100%; object-fit:cover; display:block }
.cj-pv-list .tx{ min-width:0; flex:1 }
.cj-pv-list > li > i{ color:#ff5a7a; font-size:17px }
.cj-pv-toast{ margin-top:auto; align-self:center; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--cj-r-pill);
    background:var(--cj-ink); color:#fff; font-size:11px; font-weight:700; box-shadow:0 10px 22px rgba(20,21,26,.25) }
.cj-pv-toast.ok{ background:var(--cj-green,#2e9e57) }
.cj-pv-toast i{ font-size:15px }
.cj-phone-view.is-on .cj-pv-toast{ animation:cj-pop .5s cubic-bezier(.2,.9,.3,1.3) .55s both }
.cj-phone-view.is-on .cj-pv-list li{ animation:cj-up .5s cubic-bezier(.2,.7,.2,1) both }
.cj-phone-view.is-on .cj-pv-list li:nth-child(2){ animation-delay:.08s } .cj-phone-view.is-on .cj-pv-list li:nth-child(3){ animation-delay:.16s }
@keyframes cj-pop{ from{ opacity:0; transform:translateY(10px) scale(.9) } to{ opacity:1; transform:none } }
.cj-pv-slash{ background:linear-gradient(180deg,#fff 0%,var(--cj-indigo-050) 100%) }
.cj-pv-slash .card{ width:100%; border-radius:14px; display:block; box-shadow:0 14px 28px rgba(43,34,115,.25) }
.cj-phone-view.is-on.cj-pv-slash .card{ animation:cj-card-in .7s cubic-bezier(.2,.7,.2,1) .1s both }
@keyframes cj-card-in{ from{ opacity:0; transform:perspective(600px) rotateX(18deg) translateY(14px) } to{ opacity:1; transform:none } }
.cj-pv-slash .qr{ display:flex; align-items:center; gap:11px; padding:11px; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(43,34,115,.09) }
.cj-pv-slash .qr i{ font-size:44px; line-height:1; color:var(--cj-ink) }
.cj-pv-slash .qr span{ font-size:11px; font-weight:700; color:var(--cj-muted); line-height:1.4 }

/* a small logo tile (partners, places); in a row (.cj-logos) or a .cj-marquee */
.cj-logos{ display:flex; flex-wrap:wrap; gap:10px }
.cj-logotile{ width:124px; height:78px; display:grid; place-items:center; padding:8px 12px; background:#fff; border:1px solid var(--cj-line); border-radius:var(--cj-r-md); transition:border-color .2s, box-shadow .2s }
/* the logo fills the tile's inner box (124×78 minus padding and border) at its own proportions and in its own colours
   (no grey-out: partners want to be seen) — a % max-height did not apply in this grid, tall logos spilled out */
.cj-logotile img{ display:block; width:98px; height:60px; object-fit:contain }
.cj-logotile:hover{ border-color:var(--cj-indigo-100); box-shadow:var(--cj-shadow-sm) }

@media (prefers-reduced-motion: reduce){
    .cj-btn--shine::after{ animation:none; display:none }
    .cj-marquee{ -webkit-mask-image:none; mask-image:none }
    .cj-marquee__track{ animation:none; width:auto; flex-wrap:wrap }
    .cj-marquee__set{ flex-wrap:wrap } .cj-marquee__set[aria-hidden="true"]{ display:none }
    .cj-phone-view, .cj-phone-view.is-on, .cj-story [data-step]{ transition:none }
    .cj-phone-view.is-on .cj-pv-toast, .cj-phone-view.is-on .cj-pv-list li, .cj-phone-view.is-on.cj-pv-slash .card{ animation:none }
    .cj-logotile{ transition:none }
}

/* ---------- FAQ ---------- */
.cj-faq{ border-top:1px solid var(--cj-line) }
.cj-faq details{ border-bottom:1px solid var(--cj-line) }
.cj-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; font-weight:800; font-size:17px; color:var(--cj-ink) }
.cj-faq summary::-webkit-details-marker{ display:none }
.cj-faq summary::after{ content:"\ea13"; font-family:"remixicon" !important; font-weight:400; font-size:22px; color:var(--cj-indigo); transition:transform .25s; flex:none }
.cj-faq details[open] summary::after{ transform:rotate(45deg) }
.cj-faq details p{ color:var(--cj-muted); font-size:15.5px; line-height:1.85; padding:0 2px 22px; max-width:72ch }
.cj-faq summary:focus-visible{ outline:2px solid var(--cj-indigo); outline-offset:4px; border-radius:6px }

/* ---------- auth (partner sign-in / sign-up / reset): ONE card — the form and the brand panel are its two halves ---------- */
.cj-auth{ background:var(--cj-surface); padding-block:44px 72px }
.cj-auth-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:1060px; margin-inline:auto; min-height:600px;
    background:#fff; border:1px solid var(--cj-line); border-radius:var(--cj-r-xl); overflow:hidden; box-shadow:var(--cj-shadow-md) }
.cj-auth-form{ padding:52px clamp(28px,4.5vw,60px); display:flex; flex-direction:column; justify-content:center }
.cj-auth-form .cj-title{ font-size:clamp(28px,3vw,38px) !important; margin-bottom:8px !important }
.cj-auth-form .sub{ color:var(--cj-muted); font-size:15.5px; line-height:1.8; margin-bottom:28px }
.cj-auth-fields{ display:flex; flex-direction:column; gap:16px }
/* the legacy theme styles #contactForm / .form-group (side margins, 25px gaps) — neutralise them inside the auth card */
.cj-auth form{ margin:0 !important; max-width:none !important; width:auto !important }
.cj-auth-fields .form-group{ margin:0 !important }
.cj-auth .cj-label{ margin:0 0 7px !important }
/* the validator plugin tags the submit "disabled" until valid — keep it looking live; a click explains what's missing */
.cj-auth .cj-btn.disabled{ opacity:1; pointer-events:auto; cursor:pointer }
.cj-auth-fields .help-block{ color:#d64545; font-size:12.5px; margin-top:5px } .cj-auth-fields .help-block ul{ list-style:none; margin:0; padding:0 }
.cj-auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px }
.cj-auth-row a{ color:var(--cj-indigo); font-weight:700 }
.cj-auth-row > span{ color:var(--cj-muted) }
/* multi-step forms (password reset): step dots + a single 6-digit code field */
.cj-auth-steps{ display:flex; align-items:center; gap:8px; list-style:none; margin:18px 0 14px; padding:0 }
.cj-auth-fields .cj-auth-msg:empty{ display:none }
.cj-auth-steps li{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; background:var(--cj-indigo-050); color:var(--cj-muted) }
.cj-auth-steps li.is-active{ background:var(--cj-indigo); color:#fff }
.cj-auth-steps li.is-done{ background:var(--cj-green); color:#fff }
.cj-auth-step[hidden]{ display:none !important }
.cj-auth .cj-otp{ font-size:26px; font-weight:800; letter-spacing:.5em; text-align:center; padding-inline-start:.5em }
.cj-auth-consent{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--cj-muted); line-height:1.6 }
.cj-auth-consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--cj-indigo); flex:none }
.cj-auth-consent a{ color:var(--cj-indigo); font-weight:700 }
.cj-auth-msg{ font-size:14px; font-weight:700; margin-top:12px; min-height:1px }
.cj-auth-msg.text-success{ color:var(--cj-green) } .cj-auth-msg.text-danger{ color:#d64545 }
.cj-auth-alert{ background:#fdecec; color:#b83a3a; border-radius:var(--cj-r-md); padding:11px 14px; font-size:14px; font-weight:600; margin-bottom:18px }
.cj-auth-alt{ margin-top:24px; padding-top:20px; border-top:1px solid var(--cj-line); color:var(--cj-muted); font-size:14.5px; text-align:center }
.cj-auth-alt a{ color:var(--cj-indigo); font-weight:800 }
.cj-auth-switch{ margin-top:10px; color:var(--cj-faint); font-size:13.5px; text-align:center; line-height:1.7 }
.cj-auth-switch a{ color:var(--cj-indigo); font-weight:700 }
.cj-pass{ position:relative }
.cj-pass .cj-input{ padding-inline-end:46px !important }
.cj-pass button{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:8px; width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:var(--cj-faint); font-size:19px; display:grid; place-items:center; cursor:pointer }
.cj-pass button:hover{ color:var(--cj-indigo); background:var(--cj-indigo-050) }
.cj-auth-visual{ position:relative; overflow:hidden; color:#fff; padding:48px 44px 0; display:flex; flex-direction:column; gap:22px;
    background:linear-gradient(150deg,var(--cj-indigo-700) 0%,var(--cj-indigo) 58%,#6a5aa8 100%) }
.cj-auth-visual.slash{ background:linear-gradient(165deg,#2b2273 0%,#3d2f9a 52%,#ff6b35 130%) }
/* the site's own sign-in (yellow) / sign-up (blue) pictures: the panel takes the picture's background colour */
.cj-auth-visual.art-signin{ background:#fcd56d; color:#2b2273 }
.cj-auth-visual.art-signup{ background:#6a75e5 }
.cj-auth-visual.art-signin h2{ color:#2b2273 !important }
.cj-auth-visual.art-signin li, .cj-auth-visual.art-signin li i{ color:#2b2273 }
.cj-auth-visual.art-signin .cj-eyebrow{ background:rgba(255,255,255,.55); color:#2b2273 }
.cj-auth-visual.art-signin::after{ background:rgba(255,255,255,.22) }
.cj-auth-visual.art-signin .pic img, .cj-auth-visual.art-signup .pic img{ max-width:480px }
.cj-auth-visual::after{ content:""; position:absolute; top:-90px; inset-inline-end:-60px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none }
.cj-auth-visual > *{ position:relative; z-index:1 }
.cj-auth-visual h2{ color:#fff !important; font-size:clamp(26px,2.8vw,34px) !important; line-height:1.2; max-width:16ch }
body.rtl .cj-auth-visual h2{ line-height:1.4 }
.cj-auth-visual ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.cj-auth-visual li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.92) }
.cj-auth-visual li i{ font-size:19px; flex:none; color:#fff }
.cj-auth-visual .pic{ margin-top:auto; display:flex; justify-content:center; align-items:flex-end }
.cj-auth-visual .pic img{ width:100%; max-width:440px; height:auto; display:block }
.cj-auth-visual .pic picture{ display:block; width:100%; max-width:440px }
@media(max-width:991px){
    .cj-auth-card{ grid-template-columns:minmax(0,1fr); min-height:0 }
    .cj-auth-visual{ padding:30px 28px }   /* below the form: a short brand strip */
    .cj-auth-visual .pic{ display:none }
}
@media(max-width:600px){ .cj-auth-form{ padding:32px 22px } .cj-auth-visual h2{ font-size:24px !important } }

/* ---------- pager ---------- */
.cj-pager{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:32px }
.cj-pager .info{ color:var(--cj-faint); font-size:13.5px }
.cj-pages{ display:flex; align-items:center; gap:6px }
.cj-pg{ min-width:38px; height:38px; padding:0 10px; border-radius:11px; border:1px solid var(--cj-line); background:#fff; color:var(--cj-muted); font-weight:700; font-size:14px;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; transition:all .15s }
.cj-pg:hover{ border-color:var(--cj-indigo-100); color:var(--cj-indigo) }
.cj-pg.on{ background:var(--cj-indigo); border-color:var(--cj-indigo); color:#fff }
.cj-pg[disabled]{ opacity:.4; cursor:default }

/* ============================================================
   Public navbar (cj-nav): logo · Home | ChildCaps | Slash | Contact · language.
   ≤ 991px: logo, language and a menu button; the links open as a panel under the bar.
   ============================================================ */
/* glass: the page shows through, blurred (owner 2026-10-09) */
.cj-nav{ position:sticky; top:0; z-index:1000;
    border-bottom:1px solid rgba(255,255,255,.6); box-shadow:0 1px 0 rgba(20,21,26,.06), 0 8px 24px rgba(20,21,26,.04) }
/* the glass sits on a layer behind the bar (not on the bar itself), so the menu panel below can blur the page too —
   a blur inside a blurred parent shows nothing */
.cj-nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:saturate(1.8) blur(18px); backdrop-filter:saturate(1.8) blur(18px) }
/* full width: logo · links centred · language — three columns, the middle one exactly centred */
.cj-nav-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:28px; height:72px; position:relative }
.cj-nav-logo{ display:flex; align-items:center; flex:none }
.cj-nav-logo img{ height:40px; width:auto; display:block }
.cj-nav-links{ display:flex; align-items:center; gap:6px; justify-self:center }
.cj-nav-links a{ position:relative; padding:10px 14px; border-radius:12px; color:var(--cj-muted); font-weight:600; font-size:15px; text-decoration:none; transition:color .15s, background .15s }
.cj-nav-links a:hover{ color:var(--cj-ink); background:var(--cj-surface) }
.cj-nav-links a.on{ color:var(--cj-ink); font-weight:700 }
.cj-nav-links a.on::after{ content:""; position:absolute; inset-inline:14px; bottom:2px; height:3px; border-radius:3px; background:var(--cj-indigo) }
.cj-nav-tools{ display:flex; align-items:center; gap:8px; justify-self:end }
.cj-nav-lang, .cj-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:42px; border-radius:12px; border:1px solid var(--cj-line);
    background:rgba(255,255,255,.55); border-color:rgba(20,21,26,.08); color:var(--cj-ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s, background .15s }
.cj-nav-lang{ width:42px; padding:0 }   /* icon only (owner): the label is for screen readers */
.cj-nav-lang i{ font-size:20px; color:var(--cj-indigo) }
.cj-nav-lang:hover, .cj-nav-toggle:hover{ border-color:var(--cj-indigo-100); color:var(--cj-indigo) }
.cj-nav-toggle{ display:none; width:42px; padding:0; font-size:22px }
/* the one sign-in button (partners + Slash merchants share the account): the shared .cj-btn, as tall as the tools */
/* the same frame as the language / menu buttons beside it (owner 2026-10-26): no fill, a hairline border, a faint shadow */
.cj-nav-signin{ height:42px; padding:0 16px; font-size:14px; border-radius:12px; white-space:nowrap;
    background:rgba(255,255,255,.55); border:1px solid rgba(20,21,26,.08); color:var(--cj-ink) !important; box-shadow:0 1px 2px rgba(20,21,26,.05) }
.cj-nav-signin i{ color:var(--cj-indigo); font-size:18px }
.cj-nav-signin:hover{ transform:none; border-color:var(--cj-indigo-100); color:var(--cj-indigo) !important; box-shadow:0 1px 2px rgba(20,21,26,.05) }
.cj-nav-signin-short{ display:none }
@media(max-width:991px){ .cj-nav-signin{ padding:0 14px } .cj-nav-signin-long{ display:none } .cj-nav-signin-short{ display:inline } }
@media(max-width:400px){ .cj-nav-signin{ padding:0 12px; gap:6px } .cj-nav-signin i{ display:none } }   /* small phones: the words, no icon */
.cj-nav-lang:focus-visible, .cj-nav-toggle:focus-visible, .cj-nav-links a:focus-visible{ outline:2px solid var(--cj-indigo); outline-offset:2px }
@media(max-width:991px){
    .cj-nav-bar{ display:flex; height:64px; gap:10px }
    .cj-nav-logo{ margin-inline-end:auto }
    .cj-nav-logo img{ height:34px }
    .cj-nav-toggle{ display:inline-flex }
    .cj-nav-links{ position:absolute; top:100%; inset-inline:0; justify-self:stretch; margin:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px var(--cj-gutter) 16px;
        background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(1.8) blur(18px); backdrop-filter:saturate(1.8) blur(18px);
        border-bottom:1px solid rgba(255,255,255,.6); box-shadow:0 18px 30px rgba(20,21,26,.08);
        opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s }
    .cj-nav.open .cj-nav-links{ opacity:1; visibility:visible; transform:none }
    .cj-nav-links a{ padding:14px 16px; font-size:16px; border-radius:14px }
    .cj-nav-links a.on{ background:var(--cj-indigo-050); color:var(--cj-indigo) }
    .cj-nav-links a.on::after{ display:none }
}
/* no blur support: a plain, almost solid bar (text stays readable) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cj-nav::before{ background:rgba(255,255,255,.96) } .cj-nav.open .cj-nav-links{ background:#fff } }

/* ============================================================
   Shared shell: navbar + footer aligned to the same 1200px grid
   ============================================================ */
.navbar-area .main-navbar > .container-fluid,
.navbar-area .main-responsive-nav > .container,
.cj-foot > .container{ max-width:1200px; margin-inline:auto; padding-inline:var(--cj-gutter) }
.main-navbar .navbar-nav .nav-item .nav-link{ position:relative }
.main-navbar .navbar-nav .nav-item.cj-active > .nav-link{ color:var(--cj-ink) !important; font-weight:700 !important }
.main-navbar .navbar-nav .nav-item.cj-active > .nav-link::after{ content:""; position:absolute; inset-inline:12px; bottom:-2px; height:3px; border-radius:3px; background:var(--cj-indigo) }.cj-foot{ background:var(--cj-surface) !important; margin-top:0 !important }
/* brand column + four link columns (ChildCaps · SlashCard · Businesses · Company) */
.cj-foot .cj-foot-grid{ grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)); gap:32px 28px }
.cj-foot .brand .cj-foot-badges{ flex-direction:row; flex-wrap:wrap; margin-top:18px }
.cj-foot .brand .cj-foot-badges img{ height:40px }
.cj-foot h5{ color:var(--cj-ink) !important; letter-spacing:.06em }
body.rtl .cj-foot h5{ font-size:14px }
@media(max-width:991px){ .cj-foot .cj-foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .cj-foot .brand{ grid-column:1 / -1 } }