/* LEXZUR LEXA - rebuilt from the Elementor export. Every value traced to a rule
   in lexa/style.css. Unlike the other pages this one is LIGHT (#f8fafc ground,
   #2e538a text) with two dark bands. Layer order: tokens, resets, theme mirrors,
   layout, components, then one block per breakpoint. */

/* 1. tokens */
.lex-lexa{
  --lex-lexa-ground:#f8fafc;
  --lex-lexa-card:#fff;
  --lex-lexa-text:#2e538a;
  --lex-lexa-muted:#5a6b86;
  --lex-lexa-brand:#a538e0;
  --lex-lexa-brand-dk:#7d1fb0;
  --lex-lexa-dark:#000;
  --lex-lexa-w:1140px;
  font-family:Poppins,sans-serif;font-size:16px;font-weight:400;line-height:1.5;
  color:var(--lex-lexa-text);background-color:var(--lex-lexa-ground);
}
.lex-lexa,.lex-lexa *,.lex-lexa *::before,.lex-lexa *::after{box-sizing:border-box}

/* 2. resets at element weight so components always win */
:where(.lex-lexa) img{max-width:100%;height:auto;border:0;vertical-align:middle;display:block}
:where(.lex-lexa) h1,:where(.lex-lexa) h2,:where(.lex-lexa) h3,:where(.lex-lexa) h4{margin:0;padding:0;font-family:Poppins,sans-serif}
:where(.lex-lexa) p{margin:0 0 16px}
:where(.lex-lexa) a{text-decoration:none;box-shadow:none;color:inherit}

/* 3. mirrors of the global theme rules that still reach bare tags in here */
.lex-lexa h1:not(.a4l-customized){color:#242424;font-size:40px;font-weight:700;line-height:60px}
.lex-lexa h2:not(.a4l-customized){color:#242424;font-size:25px;font-weight:700;line-height:40px}
.lex-lexa button:not(.a4l-customized):not(.cky-btn-close):not(.iti__selected-country){min-width:80px;padding:15px 10px;border-radius:32px;background-color:#2d83be;color:#fff;font-size:14px;font-weight:600;cursor:pointer}

/* 4. layout */
.lex-lexa-w{max-width:var(--lex-lexa-w);margin-inline:auto;padding-inline:10px}

/* 5. typography */
.lex-lexa-h1{font-size:30px;font-weight:600;line-height:1.4em;text-align:center;color:var(--lex-lexa-text)}
.lex-lexa-h2{font-size:30px;font-weight:700;line-height:40px;text-align:center;color:var(--lex-lexa-text)}
.lex-lexa-h3{font-size:30px;font-weight:600;line-height:40px;text-align:center;color:var(--lex-lexa-text)}

/* 6. buttons. gap not margin-left, so a wrapped fr/es label still gets spacing */
.lex-lexa-btnrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:20px;column-gap:12px;row-gap:12px}
.lex-lexa-why .lex-lexa-btnrow{margin-top:40px}
.lex-lexa-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:80px;padding:15px 30px;border:2px solid transparent;border-radius:50px;font-size:16px;font-weight:400;line-height:16px;white-space:nowrap;transition:background-color .3s ease,color .3s ease,opacity .4s ease}
.lex-lexa-btn--sm{padding:12px 24px;font-size:16px}
.lex-lexa-btn--mint{background-color:var(--lex-lexa-brand);border-color:var(--lex-lexa-brand);color:#fff;fill:#fff}
/* live: the hero CTA is a 10px-radius block, not the 50px pill */
.lex-lexa-hero .lex-lexa-btn--mint{background-color:#a538e0;border-color:#a538e0;border-width:0;border-radius:45px;padding:15px 35px;font-size:16px;font-weight:400;line-height:16px;color:#fff;fill:#fff;min-width:235px;box-sizing:border-box}
.lex-lexa-btn--mint:hover,.lex-lexa-btn--mint:focus{background-color:var(--lex-lexa-brand);border-color:var(--lex-lexa-brand);color:#fff;opacity:1}
.lex-lexa-btn--outline{background-color:#2e538a;border-color:#2e538a;border-width:0;color:#fff;fill:#fff;font-size:16px;font-weight:400;line-height:16px;border-radius:45px;padding:15px 35px;min-width:176px;box-sizing:border-box}
.lex-lexa-btn--outline:hover,.lex-lexa-btn--outline:focus{background-color:#2d83be;border-color:#2d83be;color:#fff}

/* 7. hero. min-height comes from the source: 54vh, 300px at 1200, 500px at 900 */
.lex-lexa-hero{background-color:#f8fafc;padding:60px 0;display:block}
.lex-lexa-hero>.lex-lexa-w{width:100%}
/* live: two 570 columns, text left / product shot right */
.lex-lexa-hero__split{display:flex;flex-wrap:wrap;align-items:center;padding-inline:0}
/* reference: buttons are centred UNDER both columns (y=514, x=470/735) */
.lex-lexa-hero .lex-lexa-btnrow{justify-content:center;column-gap:30px;margin:56px 0 0}
.lex-lexa-hero__text,.lex-lexa-hero__media{flex:0 0 50%;max-width:50%;box-sizing:border-box;padding:10px}
.lex-lexa-hero__media img{width:100%;max-width:550px;height:auto}
.lex-lexa-hero__logo{display:flex;justify-content:flex-start;padding-bottom:10px}
.lex-lexa-hero__logo img{width:100%;max-width:200px}
.lex-lexa-hero__eyebrow{font-size:28px;font-weight:500;line-height:30px;text-align:start;color:#155495;margin:0 0 8px}
.lex-lexa-hero__sub{max-width:none;margin:0 0 16px;font-size:18px;font-weight:400;line-height:24px;text-align:start;color:#000}
.lex-lexa-hero__text .lex-lexa-h1{text-align:start;font-size:28px;font-weight:600;line-height:42px;color:#155495;margin:10px 0}
.lex-lexa-hero__shot{margin:0}

/* 8. intro band */
.lex-lexa-intro{padding:30px 0}
.lex-lexa-intro__d{max-width:869px;margin:20px auto 16px;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#000}
/* the first paragraph is the emphasised lead-in */
.lex-lexa-intro__d:first-of-type{font-weight:600;color:#000}

/* 9. feature panels (12 AI capabilities per product) */
.lex-lexa-panel{padding:12px 0 62px}
.lex-lexa-panel--practice{padding-bottom:21px}
.lex-lexa-panel>.lex-lexa-w{padding-inline:0}
.lex-lexa-panel__logo{display:flex;justify-content:center;padding:0 0 35px}
.lex-lexa-panel__logo img{width:100%;max-width:300px;height:auto}
/* the PRACTICE wordmark is narrower than CONTRA's on the reference */
.lex-lexa-panel__logo img[src*="practice-logo"]{max-width:300px}
.lex-lexa-feat-grid{display:flex;flex-wrap:wrap;justify-content:center;margin-top:28px}
.lex-lexa-feat{flex:0 0 33.3333%;max-width:33.3333%;display:flex;flex-direction:column;box-sizing:border-box;padding:15px 15px 61px;text-align:center}
.lex-lexa-feat__shot{margin-bottom:10px;min-height:104px;display:flex;align-items:center;justify-content:center}
.lex-lexa-feat__shot img{width:auto;max-height:104px;margin-inline:auto}
.lex-lexa-feat__t{margin:0 0 10px;font-size:18px;font-weight:700;line-height:23.4px;color:var(--lex-lexa-text)}
.lex-lexa-feat__d{margin:0;font-size:16px;font-weight:400;line-height:24px;color:#000}
.lex-lexa-why__d{max-width:330px;margin-inline:auto}

/* 10. "Why LEXA?" */
.lex-lexa-why{padding:30px 0 80px}
.lex-lexa-why__logo{display:flex;justify-content:center;padding:6px 0 18px}
.lex-lexa-why__logo img{width:100%;max-width:200px}
.lex-lexa-why__lead{max-width:837px;margin:0 auto 30px;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#000}
.lex-lexa-why__grid{display:flex;flex-wrap:wrap;justify-content:center}
.lex-lexa-why__it{flex:0 0 33.3333%;max-width:33.3333%;box-sizing:border-box;padding:18px;text-align:center}
.lex-lexa-why__ico{display:flex;justify-content:center;margin-bottom:12px}
.lex-lexa-why__ico img{width:100px;max-width:100px;height:auto}
.lex-lexa-why__t{font-size:18px;font-weight:700;line-height:23.4px;color:var(--lex-lexa-text)}
.lex-lexa-why__d{margin:8px 0 0;font-size:16px;font-weight:400;line-height:24px;color:var(--lex-lexa-text)}

/* 11. trust band - the one dark section */
.lex-lexa-trust{position:relative;background-color:var(--lex-lexa-dark);background-image:url(https://www.lexzur.com/wp-content/uploads/2025/08/Security-First-Background-1.jpg);background-position:bottom center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;padding:60px 30px;color:#fff}
/* 70% black wash over the photo; on its own layer so the text stays opaque */
.lex-lexa-trust::before{content:"";position:absolute;inset:0;z-index:0;background-color:#000;opacity:.7;transition:background .3s,border-radius .3s,opacity .3s}
.lex-lexa-trust>.lex-lexa-w{position:relative;z-index:1}
.lex-lexa-trust .lex-lexa-h2{color:#fff}
.lex-lexa-trust__d{max-width:none;margin:16px auto 0;font-size:18px;font-weight:600;line-height:32px;text-align:center;color:#fff}
.lex-lexa-trust__logos{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;margin-top:24px}
.lex-lexa-trust__logos img{width:100px;max-width:100px;height:auto}
/* the LEXA mark in this row is slightly larger than the certifications */
.lex-lexa-trust__logos img[src*="isologo"]{width:120px;max-width:120px}
/* the same mark appears outside the trust row at 120 too */
.lex-lexa-why img[src*="isologo"],.lex-lexa-cta img[src*="isologo"]{width:120px;max-width:120px;height:auto}

/* 12. closing CTA */
.lex-lexa-cta{padding:66px 30px 60px;background-color:#2e538a;margin:0 30px 60px;border-radius:15px}
.lex-lexa-cta__d{max-width:869px;margin:30px auto 0;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#fff}

/* 13. FAQ (EN only). .lex-toggle keeps the script.js contract: it toggles
       .lex-active on the title and swaps the closed/opened icon spans. The
       open-state border rule is the one the export never captured. */
.lex-lexa-faq{background-color:var(--lex-lexa-ground);padding:112px 0 40px}
.lex-lexa-faq>.lex-lexa-w>.lex-lexa-h2{padding-bottom:30px;font-size:32px;font-weight:600;line-height:40px}
/* reference: questions are 18px/600 in black, not bold blue */
.lex-lexa-faq .lex-toggle-title,.lex-lexa-faq .lex-tab-title{font-size:16px;font-weight:600;line-height:16px;color:#000}
.lex-lexa .lex-toggle .lex-toggle-item{margin-bottom:18px}
.lex-lexa .lex-toggle .lex-tab-title{display:flex;align-items:center;gap:10px;border-block-end:1px solid #d5d8dc;padding:15px;font-weight:700;color:var(--lex-lexa-text);cursor:pointer}
.lex-lexa .lex-toggle .lex-tab-title.lex-active{border-block-end:none}
.lex-lexa .lex-toggle .lex-tab-content{border-block-end:1px solid #d5d8dc;display:none;padding:15px;color:#000}
.lex-lexa .lex-toggle .lex-tab-title .lex-toggle-icon{display:inline-block;flex:none}
.lex-lexa .lex-toggle .lex-tab-title .lex-toggle-icon .lex-toggle-icon-closed{display:block}
.lex-lexa .lex-toggle .lex-tab-title .lex-toggle-icon .lex-toggle-icon-opened{display:none}

/* 14. tablet - max-width queries stack, so this is live at mobile too */
@media (max-width:1200px){
  .lex-lexa-w{max-width:1024px}
  .lex-lexa-hero{min-height:300px}
  .lex-lexa-hero__logo img{max-width:150px}
  .lex-lexa-h1,.lex-lexa-h2{font-size:30px}
  .lex-lexa-h3,.lex-lexa-hero__sub,.lex-lexa-intro__d,.lex-lexa-cta__d,.lex-lexa-why__lead,.lex-lexa-trust__d{font-size:16px}
  .lex-lexa-feat__d,.lex-lexa-why__d{font-size:14px}
  .lex-lexa-btn{font-size:16px}
  .lex-lexa-panel,.lex-lexa-intro,.lex-lexa-cta{padding:30px 10px 40px}
  .lex-lexa-why{padding:30px 10px}
  .lex-lexa-feat,.lex-lexa-why__it{flex:0 0 50%;max-width:50%}
}

/* 15. mobile */
@media (max-width:900px){
  .lex-lexa-w{max-width:767px}
  /* Elementor mobile reference: full-width stacked columns, but the product
     composition itself is capped at 350px rather than stretched edge-to-edge. */
  .lex-lexa-hero{min-height:500px;padding:60px 0}
  .lex-lexa-hero__split{flex-direction:column;align-items:stretch}
  .lex-lexa-hero__text{flex:0 0 100%;width:100%;max-width:100%;padding:0 10px 0 25px}
  .lex-lexa-hero__media{flex:0 0 100%;width:100%;max-width:100%;padding:0}
  .lex-lexa-hero__logo{justify-content:center}
  .lex-lexa-hero__text .lex-lexa-h1{font-size:24px;line-height:1.5em;text-align:center}
  .lex-lexa-hero__sub{font-size:15px;line-height:24px;text-align:center}
  .lex-lexa-hero__shot{width:100%;text-align:center}
  .lex-lexa-hero__media img{display:block;width:100%;max-width:350px;height:auto;margin-inline:auto}
  .lex-lexa-hero .lex-lexa-btnrow{width:100%;margin-top:45px}
  .lex-lexa-hero .lex-lexa-btn{font-size:14px;padding:17px 80px}
  .lex-lexa-h1,.lex-lexa-h2{font-size:24px}
  .lex-lexa-panel,.lex-lexa-intro{padding:30px 15px 10px}
  .lex-lexa-cta{padding:40px 15px;margin:0 15px 40px}
  .lex-lexa-why{padding:30px 15px}
  .lex-lexa-trust,.lex-lexa-faq{padding:40px 15px}
  .lex-lexa-feat,.lex-lexa-why__it{flex:0 0 100%;max-width:100%}
  /* two buttons per row stack with real spacing */
  .lex-lexa-btnrow{flex-direction:column;align-items:center;column-gap:0;row-gap:15px}
  .lex-lexa .lex-toggle .lex-tab-title{padding:12px}
  .lex-lexa .lex-toggle .lex-tab-content{padding:12px 10px}
}
.lex-lexa-ctarow{padding:0 0 30px}
/* the theme sizes .lexzur-iframe-youtube itself (400px / 19:6, 175px mobile);
   this only centres it and reserves the box so there is no shift */
.lex-lexa-why__video{max-width:860px;margin:0 auto 65px}
.lex-lexa-why__video .lexzur-iframe-youtube{display:block;width:100%;border:0;aspect-ratio:19/6}

.lex-lexa-intro .lex-lexa-h2{font-weight:700;line-height:40px;margin-bottom:0}

/* reference: the trust and CTA headings are 32px white */
.lex-lexa-trust .lex-lexa-h2{font-size:32px;font-weight:700;line-height:40px;color:#fff}
.lex-lexa-cta .lex-lexa-h2{font-size:32px;font-weight:700;line-height:1.2em;color:#fff}

/* reference: the "see LEXA in action" CTAs are blue on white; inside the
   dark CTA band the same button inverts to white with purple text */
.lex-lexa-ctarow .lex-lexa-btn--mint{background-color:#2e538a;border-color:#2e538a;border-width:0;border-radius:10px;padding:15px 30px;font-size:16px;font-weight:600;line-height:16px;color:#fff;fill:#fff;min-width:213px}
/* reference: the Why-LEXA CTA is purple, 267x40 */
.lex-lexa-why .lex-lexa-btn--mint{background-color:#2e538a;border-color:#2e538a;border-width:0;border-radius:10px;padding:12px 60px;font-size:16px;font-weight:600;line-height:16px;color:#fff;fill:#fff;min-width:0;box-sizing:border-box}
.lex-lexa-why .lex-lexa-btn--mint:hover,.lex-lexa-why .lex-lexa-btn--mint:focus{background-color:#2d83be;border-color:#2d83be;color:#fff;opacity:1}
.lex-lexa-cta .lex-lexa-btn--mint{background-color:#fff;border-color:#fff;border-width:0;border-radius:10px;padding:12px 60px;font-size:16px;font-weight:600;color:#a538e0;fill:#a538e0;min-width:0}

/* reference weights differ per heading on EN */
.lex-lexa-panel--practice>.lex-lexa-w>.lex-lexa-h2{font-weight:600}
.lex-lexa-panel--practice .lex-lexa-h3{font-weight:700}
.lex-lexa-cta>.lex-lexa-w>.lex-lexa-h2{font-size:32px;font-weight:700;line-height:1.2em;color:#fff}

/* reference: section headings sit on the 1120 track (1080 in why) */
.lex-lexa-intro>.lex-lexa-w,.lex-lexa-panel>.lex-lexa-w,.lex-lexa-cta>.lex-lexa-w{padding-inline:10px}
.lex-lexa-why>.lex-lexa-w{padding:60px 30px;background-color:#eaeaea;border-radius:15px}

/* the practice panel logo sits between two headings: ref 60 above / 64 below */
.lex-lexa-panel--practice .lex-lexa-panel__logo{padding:12px 0 18px}

.lex-lexa-why>.lex-lexa-w>.lex-lexa-h2{margin-bottom:20px}

/* iOS Safari mishandles background-attachment:fixed - fall back on mobile */
@media (max-width:900px){
  .lex-lexa-trust{background-attachment:scroll}
}

.lex-lexa-intro .lex-lexa-h3{margin-top:0;padding-top:16px}

/* Arabic hero: measured from lexa/ar reference - H1 20/700, and the CTA
   sits at the text column's trailing edge rather than centred. */
html[lang|="fr"] .lex-lexa-hero__text .lex-lexa-h1,
html[lang|="es"] .lex-lexa-hero__text .lex-lexa-h1,
html[lang|="ar"] .lex-lexa-hero__text .lex-lexa-h1,
.lex-lexa[dir="rtl"] .lex-lexa-hero__text .lex-lexa-h1{font-size:20px;font-weight:700;line-height:1.2em;text-shadow:0 0 1px rgba(0,0,0,.3);color:#155495}
html[lang|="ar"] .lex-lexa-hero .lex-lexa-btnrow,
.lex-lexa[dir="rtl"] .lex-lexa-hero .lex-lexa-btnrow{justify-content:flex-start;max-width:1140px;margin-inline:auto;padding-inline:10px}
html[lang|="ar"] .lex-lexa-hero .lex-lexa-btn--mint,
.lex-lexa[dir="rtl"] .lex-lexa-hero .lex-lexa-btn--mint{min-width:213px;padding:12px 30px;font-weight:600}

.lex-lexa-cta .lex-lexa-btnrow{padding-top:30px}

/* FR/ES/AR heroes carry ONE button: 10px radius, 12/60 padding, weight 600,
   aligned to the text column rather than centred (measured per locale). */
html[lang|="fr"] .lex-lexa-hero .lex-lexa-btnrow,
html[lang|="es"] .lex-lexa-hero .lex-lexa-btnrow{justify-content:flex-start;max-width:1140px;margin-inline:auto;padding-inline:10px}
html[lang|="fr"] .lex-lexa-hero .lex-lexa-btn--mint,
html[lang|="es"] .lex-lexa-hero .lex-lexa-btn--mint,
html[lang|="ar"] .lex-lexa-hero .lex-lexa-btn--mint,
.lex-lexa[dir="rtl"] .lex-lexa-hero .lex-lexa-btn--mint{border-radius:10px;padding:12px 60px;font-weight:600;min-width:0;box-sizing:border-box}

/* export: hero buttons carry .lex-animation-grow - scale(1.1) on hover */
.lex-lexa-hero .lex-lexa-btn{transition:background-color .3s ease,color .3s ease,opacity .4s ease,transform .3s ease}
.lex-lexa-hero .lex-lexa-btn:hover,.lex-lexa-hero .lex-lexa-btn:focus,.lex-lexa-hero .lex-lexa-btn:active{transform:scale(1.1)}

/* reference hero paragraph -> button gap: FR/ES 36, AR 76 (EN is 98) */
html[lang|="fr"] .lex-lexa-hero .lex-lexa-btnrow,
html[lang|="es"] .lex-lexa-hero .lex-lexa-btnrow{margin-top:-21px}
html[lang|="ar"] .lex-lexa-hero .lex-lexa-btnrow,
.lex-lexa[dir="rtl"] .lex-lexa-hero .lex-lexa-btnrow{margin-top:-37px}

/* EN closing CTA — matched to the Elementor reference (8e2ba0a). Scoped to
   the English-only modifier so FR/ES/AR keep their existing CTA treatment. */
.lex-lexa-cta--en-ref{
  padding:30px 0;
  margin:0;
  border-radius:0;
  background-color:#fff;
}
.lex-lexa-cta--en-ref>.lex-lexa-w{padding-inline:10px}
.lex-lexa-cta--en-ref>.lex-lexa-w>.lex-lexa-h2{
  margin:0;
  font-size:30px;
  font-weight:700;
  line-height:40px;
  color:#2e538a;
  text-align:center;
}
.lex-lexa-cta--en-ref .lex-lexa-cta__d{
  max-width:869px;
  margin:20px auto 0;
  font-size:16px;
  font-weight:600;
  line-height:24px;
  text-align:center;
  color:#000;
}
.lex-lexa-cta--en-ref .lex-lexa-btnrow{margin-top:16px;padding-top:0}
.lex-lexa-cta--en-ref .lex-lexa-btn--mint{
  min-width:0;
  padding:15px 35px;
  border-width:0;
  border-radius:45px;
  background-color:#2e538a;
  border-color:#2e538a;
  color:#fff;
  fill:#fff;
  font-size:16px;
  font-weight:400;
  line-height:16px;
}
.lex-lexa-cta--en-ref .lex-lexa-btn--mint:hover,
.lex-lexa-cta--en-ref .lex-lexa-btn--mint:focus{
  background-color:#2d83be;
  border-color:#2d83be;
  color:#fff;
  opacity:1;
}
@media (max-width:1200px){
  .lex-lexa-cta--en-ref{padding:30px 10px 40px}
  .lex-lexa-cta--en-ref>.lex-lexa-w>.lex-lexa-h2{font-size:30px;line-height:45px}
  .lex-lexa-cta--en-ref .lex-lexa-btn--mint{font-size:14px}
}
@media (max-width:900px){
  .lex-lexa-cta--en-ref{padding:30px 5px 10px}
  .lex-lexa-cta--en-ref>.lex-lexa-w>.lex-lexa-h2{font-size:24px;line-height:1.2em}
  .lex-lexa-cta--en-ref .lex-lexa-btnrow{margin-top:16px}
  .lex-lexa-cta--en-ref .lex-lexa-btn--mint{padding:17px 80px}
}