/* ============================================================================
 * NEU single-service landing — SLIMMED (Bricks-native rebuild complete).
 *
 * MIGRATED INTO BRICKS (37 global classes + "NEU Brand" global colors — edit in
 * the builder, NOT here): all VISUAL design — border / background / padding /
 * radius / typography / color / element sizes — for hero, section-heading system,
 * and every section's cards/text (check-card, svc-card, step, for-who, out-card,
 * faq item/q/plus/answer, final-cta text, disc, footnote, dot, icon container).
 *
 * STILL CUSTOM HERE (legitimately):
 *   - LAYOUT primitives: flexbox / CSS grid / gap / grid-template-columns
 *     (Bricks' gap control was unreliable for these; grid column counts are
 *     Tailwind-breakpoint responsive — see RESPONSIVE note).
 *   - Genuinely-unexpressible: 01..0N CSS counters, CheckCircle mask-icons,
 *     details[open] FAQ rotation, layered section/grid-pattern gradients.
 *   - Structural: position / z-index / overflow (layering).
 *   - Interactive: :hover micro-interactions + transitions.
 *   - Contextual: .sl-check-card background flips per section (light-purple on
 *     white sections, white on purple/gradient sections) — a per-section
 *     override that a single Bricks class can't express; border/padding ARE in Bricks.
 *
 * RESPONSIVE (flagged): migrated classes use their DESKTOP value as the Bricks
 *   base, so desktop matches Lovable exactly. Tablet/mobile down-steps (Tailwind
 *   640/768/1024) for migrated typography/padding are NOT yet reproduced in Bricks
 *   (needs Bricks custom breakpoints = a separate setup). Grid COLUMN counts below
 *   keep their Tailwind responsive in CSS so layout still reflows on small screens.
 *
 * RTL-READINESS (audited 2026-06-25, preventive — Polylang/RTL NOT yet active):
 *   This CSS is RTL-safe by construction — all directional layout is flexbox/grid
 *   (writing-mode aware, auto-mirrors) and all physical box values here are either
 *   block-axis (top/bottom, never mirror) or symmetric (equal left/right). The only
 *   inline-directional declaration was `.sl-svc-card__rule margin:0 1rem`, now written
 *   as `margin-inline:1rem` (logical; identical in LTR). DO NOT add physical
 *   left/right here when replicating — use *-inline-start/end so AR mirrors for free.
 *   ITEMS LOGICAL PROPS CANNOT FIX — tracked for Wave 5 in docs/rtl-readiness-tpl-service.md,
 *   NOT handled here (need RTL active to test): (1) Bricks emits PHYSICAL border/
 *   padding/margin — the for-who `border-left:4px` + hero CTA `margin-right:16` won't
 *   flip; (2) `.sl-section--grad` 135deg gradient angle; (3) the 3 CTA "→" glyphs.
 * ========================================================================== */

.sl-root{
  font-family:Inter,'IBM Plex Sans Arabic',system-ui,sans-serif;
  background:hsl(var(--brand-white));color:hsl(var(--brand-dark));
  position:relative;isolation:isolate;overflow:hidden;
}
.sl-root *{box-sizing:border-box;}

/* ---- structural + gradients (not design controls) ---- */
.sl-section{position:relative;z-index:10;}
.sl-section--grad{
  border-top:1px solid hsl(var(--brand-purple)/.12);
  border-bottom:1px solid hsl(var(--brand-purple)/.12);
  background:linear-gradient(135deg,hsl(var(--light-purple-bg)),hsl(var(--brand-white)) 60%,hsl(var(--brand-lime)/.16));
}
.sl-inner{position:relative;z-index:20;}
.sl-inner--narrow{max-width:920px;}
.sl-hl{color:hsl(var(--brand-purple));}
.sl-hero{position:relative;z-index:10;overflow:hidden;}
.sl-hero__grid{
  pointer-events:none;position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(hsl(var(--brand-purple)/.06) 1px,transparent 1px),
                   linear-gradient(90deg,hsl(var(--brand-purple)/.06) 1px,transparent 1px);
  background-size:54px 54px;
}
.sl-hero__inner{position:relative;z-index:20;}
.sl-cta-primary{transition:all .3s;}
.sl-cta-primary:hover{transform:translateY(-4px);background:hsl(var(--brand-lime-hover));}
.sl-cta-secondary{transition:all .3s;}
.sl-cta-secondary:hover{background:hsl(var(--brand-purple));color:hsl(var(--brand-white));}

/* ---- LAYOUT: grids + gaps + responsive column counts (Tailwind breakpoints) ---- */
.sl-grid-2{display:grid;gap:1rem;}
@media(min-width:768px){.sl-grid-2{grid-template-columns:repeat(2,1fr);}}
.sl-svc-grid{display:grid;gap:1.25rem;counter-reset:svc;}
@media(min-width:768px){.sl-svc-grid{grid-template-columns:repeat(2,1fr);}}
.sl-step-grid{display:grid;gap:1.5rem;counter-reset:step;}
@media(min-width:768px){.sl-step-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.sl-step-grid{grid-template-columns:repeat(4,1fr);}}
.sl-forwho-grid{display:grid;gap:.75rem;}
@media(min-width:768px){.sl-forwho-grid{grid-template-columns:repeat(2,1fr);}}
.sl-out-grid{display:grid;gap:1rem;}
@media(min-width:640px){.sl-out-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.sl-out-grid{grid-template-columns:repeat(3,1fr);}}
.sl-faq{display:flex;flex-direction:column;gap:.75rem;}
.sl-finalcta{display:grid;gap:2.25rem;}
@media(min-width:1024px){.sl-finalcta{grid-template-columns:1fr auto;align-items:end;}}

/* ---- check-cards: flex layout + hover (border/padding/background now Bricks) ----
 * Background is contextual (s1=light-purple, s4=white) so it lives as Bricks
 * element-level _background on the loop containers (s1c=clpbg, s4c=cwhite), NOT here —
 * removed the old base + .sl-section--grad/--purple bg rules to end the load-order overlap.
 * Hover selector is bumped to .brxe-div:hover so it out-specifies the Bricks base border. */
.sl-check-card{display:flex;align-items:flex-start;gap:1rem;transition:all .3s;}
.sl-check-card.brxe-div:hover{transform:translateY(-4px);border-color:hsl(var(--brand-lime));box-shadow:0 18px 50px hsl(var(--brand-purple)/.1);}
.sl-check::before{
  content:"";flex:0 0 auto;width:24px;height:24px;margin-top:2px;background:hsl(var(--brand-purple));
  -webkit-mask:var(--sl-check-svg) center/contain no-repeat;mask:var(--sl-check-svg) center/contain no-repeat;
}
.sl-disc{display:inline-flex;align-items:center;justify-content:center;}
.sl-disc__ico{
  width:20px;height:20px;background:hsl(var(--brand-dark));
  -webkit-mask:var(--sl-check-svg) center/contain no-repeat;mask:var(--sl-check-svg) center/contain no-repeat;
}
:root{--sl-check-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");}

/* ---- services cards: hover + head flex + counter + rule (visual in Bricks) ---- */
.sl-svc-card{transition:all .3s;}
.sl-svc-card.brxe-div:hover{transform:translateY(-4px);border-color:hsl(var(--brand-lime));box-shadow:0 18px 50px hsl(var(--brand-purple)/.1);}
.sl-svc-card__head{margin-bottom:1rem;display:flex;align-items:center;}
.sl-svc-card__num::before{
  counter-increment:svc;content:counter(svc,decimal-leading-zero);
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--brand-purple));
}
.sl-svc-card__rule{height:1px;flex:1;margin-block:0;margin-inline:1rem;background:hsl(var(--brand-purple)/.16);}

/* ---- process: counter (step border/padding/typography in Bricks) ---- */
.sl-step__num::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-size:44px;font-weight:900;line-height:1;color:hsl(var(--brand-purple));
}
@media(min-width:768px){.sl-step__num::before{font-size:52px;}}

/* ---- for-who: flex layout (border/bg/padding/type in Bricks) ---- */
.sl-forwho{display:flex;align-items:flex-start;gap:.75rem;}

/* ---- outcomes: hover + icon flex/mask (visual in Bricks) ---- */
.sl-out-card{transition:all .3s;}
.sl-out-card.brxe-div:hover{transform:translateY(-4px);border-color:hsl(var(--brand-lime));box-shadow:0 18px 50px hsl(var(--brand-purple)/.1);}
.sl-out-card__ico{display:inline-flex;align-items:center;justify-content:center;}
.sl-out-card__ico::before{
  content:"";width:20px;height:20px;background:hsl(var(--brand-purple));
  -webkit-mask:var(--sl-check-svg) center/contain no-repeat;mask:var(--sl-check-svg) center/contain no-repeat;
}

/* ---- FAQ: summary flex + marker + open-state + plus rotation (visual in Bricks) ---- */
.sl-faq__item{transition:border-color .2s;}
.sl-faq__item.brxe-div[open]{border-color:hsl(var(--brand-purple)/.4);}
.sl-faq__q{display:flex;cursor:pointer;list-style:none;align-items:center;justify-content:space-between;gap:1rem;}
.sl-faq__q::-webkit-details-marker{display:none;}
.sl-faq__plus{display:grid;place-items:center;transition:transform .2s;}
.sl-faq__item[open] .sl-faq__plus{transform:rotate(45deg);}