/* LMSNext page (built 2026-10-21 from the lmsnext_website_page.html draft). Classes and variables are prefixed lx- so they cannot collide with header.css / responsive.css. */
/* ===== Tokens taken from edumarshal.lx-com (home.lx-css / header.lx-css / learning-management-system page) ===== */
:root{
  --lx-navy:#0a2043;      /* hero background */
  --lx-navy-2:#0f2a52;    /* demo form card */
  --lx-blue:#0a387c;      /* primary / links / topbar */
  --lx-blue-2:#2c5aa0;
  --lx-ink:#12233f;       /* headings */
  --lx-body:#565656;      /* paragraph */
  --lx-muted:#93a0b4;
  --lx-line:rgba(44,90,160,.14);
  --lx-soft:#eef2f8;
  --lx-soft-2:#f7f9fc;
  --lx-tint:#e8f0fc;
  --lx-amber:#ffb000;
  --lx-amber-2:#ffd47e;
  --lx-amber-bg:#fff4dd;
  --lx-green:#2e7d32;
  --lx-green-2:#43a840;
  --lx-green-bg:#e9f6ea;
  --lx-red:#e8505b;
  --lx-red-bg:#fdeced;
  --lx-purple-bg:#f0edfb;
  --lx-page:#fdfefe;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--lx-page);color:var(--lx-ink);-webkit-font-smoothing:antialiased}
a{color:var(--lx-blue);text-decoration:none}
h1,h2,h3,p{margin:0}
button{font-family:inherit}

@keyframes emFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes emPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes emShimmer{0%{background-position:200% 50%}100%{background-position:-200% 50%}}
@keyframes emBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes emGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes emDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-26px) scale(1.14)}}
@keyframes emSpin{to{transform:rotate(1turn)}}
@keyframes fill{from{width:0}}

/* ===== Buttons ===== */
.lx-btn-amber{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;background:linear-gradient(120deg,#ffb000 30%,#ffd47e 48%,#ffb000 62%);background-size:220% 100%;animation:emShimmer 3.5s linear infinite;color:#272727;font-weight:800;font-size:14px;border-radius:99px;white-space:nowrap;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s}
.lx-btn-amber:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 28px -10px rgba(255,176,0,.8)}
.lx-btn-amber.lx-lg{height:52px;padding:0 26px;font-size:15px;color:var(--lx-ink);box-shadow:0 12px 26px -10px rgba(255,176,0,.55)}
.lx-btn-ghost{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:99px;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:700;font-size:14.5px;transition:background .25s}
.lx-btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ===== Common section bits ===== */
.lx-wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.lx-sec{padding:84px 0}
.lx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lx-blue-2);font-weight:800}
.lx-eyebrow i{width:8px;height:8px;border-radius:99px;background:var(--lx-amber);display:inline-block;animation:emPulse 2.4s ease infinite}
.lx-h2{font-weight:800;font-size:36px;line-height:1.15;letter-spacing:-.025em;color:var(--lx-ink);margin-top:14px}
.lx-h2 em{font-style:normal;color:var(--lx-blue-2)}
.lx-lede{font-size:16px;color:var(--lx-body);line-height:1.7;margin-top:14px;max-width:640px}
.lx-center{text-align:center}
.lx-center .lx-lede{margin-left:auto;margin-right:auto}
.lx-rvl{transition:opacity .65s ease,transform .65s ease}
.lx-rvl.lx-armed{opacity:0;transform:translateY(32px)}
.lx-rvl.lx-on{opacity:1;transform:none}
.lx-gridtex{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}

/* ===== Hero ===== */
.lx-hero{position:relative;overflow:hidden;background-color:var(--lx-navy)}
.lx-blob{position:absolute;border-radius:99em;filter:blur(60px);pointer-events:none}
.lx-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center;padding:64px 48px 76px;max-width:1280px;margin:0 auto}
.lx-hero-t{animation:emFadeUp .7s ease both}
.lx-pill-dark{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:700;background:rgba(255,176,0,.14);border:1px solid rgba(255,176,0,.35);color:var(--lx-amber-2)}
.lx-hero h1{font-weight:800;font-size:44px;line-height:1.12;letter-spacing:-.025em;color:#fff;margin:18px 0 0}
.lx-grad{background:linear-gradient(100deg,#ffb000,#ffd47e 40%,#7fb2ff 80%,#ffb000);background-size:220% 100%;animation:emGrad 7s linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-hero p.lx-sub{font-size:16.5px;color:rgba(255,255,255,.75);margin:16px 0 0;line-height:1.65;max-width:500px}
.lx-hero-ctas{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.lx-hero-stats{display:flex;gap:28px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.lx-hero-stats b{display:block;font-weight:800;font-size:22px;color:#fff}
.lx-hero-stats span{font-size:11.5px;color:rgba(255,255,255,.55)}

/* product window */
.lx-win-wrap{position:relative}
.lx-float{position:absolute;z-index:5;background:#fff;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:9px;box-shadow:0 16px 34px -12px rgba(0,0,0,.5)}
.lx-float .lx-ic{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:14px}
.lx-float b{display:block;font-weight:800;font-size:12px;color:var(--lx-ink)}
.lx-float small{display:block;font-size:10.5px;color:var(--lx-muted)}
.lx-win{background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 30px 70px -25px rgba(0,0,0,.6);overflow:hidden}
.lx-win-bar{display:flex;align-items:center;gap:8px;background:var(--lx-soft);padding:10px 16px}
.lx-dot{width:9px;height:9px;border-radius:99px}
.lx-win-url{font-size:11px;color:var(--lx-muted);margin-left:8px}
.lx-sync{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;color:var(--lx-green);background:var(--lx-green-bg);border-radius:99px;padding:3px 9px}
.lx-sync i{width:6px;height:6px;border-radius:99px;background:var(--lx-green);animation:emPulse 2s ease infinite}
.lx-win-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--lx-soft)}
.lx-win-tabs button{border:0;background:none;padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--lx-muted);border-bottom:2px solid transparent;cursor:pointer}
.lx-win-tabs button.lx-act{color:var(--lx-blue);border-bottom-color:var(--lx-amber)}
.lx-win-body{height:380px;position:relative;overflow:hidden}
.lx-pane{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;gap:11px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;pointer-events:none}
.lx-pane.lx-act{opacity:1;transform:none;pointer-events:auto}
.lx-ph{display:flex;align-items:center;gap:9px}
.lx-ph .lx-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px}
.lx-ph b{display:block;font-weight:800;font-size:13px;color:var(--lx-ink)}
.lx-ph small{display:block;font-size:9.5px;color:var(--lx-muted)}
.lx-ph .lx-act-btn{margin-left:auto;background:var(--lx-green-2);color:#fff;border-radius:8px;padding:6px 11px;font-size:9.5px;font-weight:800}
.lx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lx-kpi{border:1px solid var(--lx-soft);border-left:3px solid var(--lx-blue-2);border-radius:8px;padding:8px 10px}
.lx-kpi small{display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--lx-muted);font-weight:800}
.lx-kpi b{display:block;font-size:17px;font-weight:800;color:var(--lx-ink);margin-top:2px}
.lx-kpi em{font-style:normal;font-size:8.5px;color:var(--lx-green);font-weight:700}
.lx-mtbl{border:1px solid var(--lx-soft);border-radius:10px;overflow:hidden;font-size:10px}
.lx-mrow{display:grid;gap:6px;align-items:center;padding:7px 12px;border-top:1px solid #f2f5fa}
.lx-mrow.lx-hd{background:var(--lx-soft-2);font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lx-muted);font-weight:800;border-top:0;padding:6px 12px}
.lx-mrow b{font-weight:800;color:var(--lx-ink);font-size:10.5px}
.lx-bar{height:6px;border-radius:99px;background:var(--lx-soft);overflow:hidden}
.lx-bar i{display:block;height:100%;border-radius:99px;background:var(--lx-blue-2);animation:fill 1.2s ease both}
.lx-chip{display:inline-flex;align-items:center;border-radius:99px;padding:2px 8px;font-size:8px;font-weight:800;white-space:nowrap}
.lx-c-green{background:var(--lx-green-bg);color:var(--lx-green)}
.lx-c-amber{background:var(--lx-amber-bg);color:#b07300}
.lx-c-red{background:var(--lx-red-bg);color:var(--lx-red)}
.lx-c-blue{background:var(--lx-tint);color:var(--lx-blue)}
.lx-two{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;flex:1;min-height:0}
.lx-box{border:1px solid var(--lx-soft);border-radius:10px;padding:10px 12px}
.lx-box h5{margin:0 0 8px;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--lx-muted);font-weight:800}
.lx-cont{display:flex;gap:10px;align-items:center}
.lx-thumb{width:62px;height:44px;border-radius:8px;background:linear-gradient(135deg,#0a387c,#2c5aa0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.lx-outline{display:flex;flex-direction:column;gap:5px;font-size:9.5px}
.lx-outline div{display:flex;align-items:center;gap:7px;color:var(--lx-ink)}
.lx-tick{width:14px;height:14px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.lx-t-done{background:var(--lx-green-bg);color:var(--lx-green)}
.lx-t-now{background:var(--lx-amber);color:var(--lx-ink)}
.lx-t-lock{background:var(--lx-soft);color:var(--lx-muted)}
.lx-hbars{display:flex;align-items:flex-end;gap:7px;height:80px;padding-top:6px}
.lx-hbars div{flex:1;background:#2A78D6;border-radius:4px 4px 0 0;position:relative}
.lx-hbars div:last-child{background:var(--lx-amber)}
.lx-hlbl{display:flex;gap:7px;font-size:7.5px;color:var(--lx-muted);margin-top:4px}
.lx-hlbl span{flex:1;text-align:center}

/* ===== Audience strip ===== */
.lx-aud{padding:30px 0;border-bottom:1px solid var(--lx-line);background:#fff}
.lx-aud .lx-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.lx-aud .lx-lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lx-muted);font-weight:800}
.lx-audchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lx-line);border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--lx-ink);background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.lx-audchip:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(10,56,124,.42);border-color:var(--lx-amber)}

/* ===== Lifecycle ===== */
.lx-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px;position:relative}
.lx-steps::before{content:"";position:absolute;top:30px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--lx-amber) 0 8px,transparent 8px 16px);opacity:.6}
.lx-step{position:relative;text-align:center;padding:0 4px}
.lx-step .lx-n{width:60px;height:60px;margin:0 auto;border-radius:18px;background:#fff;border:1px solid var(--lx-line);box-shadow:0 14px 28px -18px rgba(10,56,124,.45);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;transition:transform .3s,border-color .3s}
.lx-step:hover .lx-n{transform:translateY(-5px) rotate(-4deg);border-color:var(--lx-amber)}
.lx-step .lx-n span{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:99px;background:var(--lx-blue);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lx-step h3{font-size:15.5px;font-weight:800;margin-top:16px}
.lx-step p{font-size:12.5px;color:var(--lx-body);line-height:1.55;margin-top:6px}

/* ===== Roles ===== */
.lx-roles{background:var(--lx-soft-2);border-top:1px solid var(--lx-line);border-bottom:1px solid var(--lx-line)}
.lx-rtabs{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--lx-line);border-radius:99px;padding:6px;margin-top:30px}
.lx-rtabs button{border:0;background:none;border-radius:99px;padding:11px 22px;font-size:14px;font-weight:800;color:#5a6675;cursor:pointer;transition:background .25s,color .25s}
.lx-rtabs button.lx-act{background:var(--lx-blue);color:#fff}
.lx-rpanel{display:none;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;margin-top:40px;text-align:left}
.lx-rpanel.lx-act{display:grid;animation:emFadeUp .5s ease both}
.lx-rpanel h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
.lx-rpanel .lx-who{font-size:13px;color:var(--lx-blue-2);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.lx-rpanel>div>p{font-size:15px;color:var(--lx-body);line-height:1.7;margin-top:12px}
.lx-flist{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.lx-flist li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#2b3648;line-height:1.55}
.lx-flist li i{font-style:normal;width:26px;height:26px;border-radius:8px;background:var(--lx-tint);color:var(--lx-blue);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.lx-flist b{color:var(--lx-ink)}
.lx-card-mock{background:#fff;border:1px solid var(--lx-line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(10,56,124,.45);padding:20px;display:flex;flex-direction:column;gap:12px}

/* ===== Feature grid ===== */
.lx-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.lx-fcard{background:#fff;border:1px solid var(--lx-line);border-radius:18px;padding:26px 24px;box-shadow:0 10px 24px -18px rgba(10,56,124,.3);transition:transform .3s,box-shadow .3s,border-color .3s}
.lx-fcard:hover{transform:translateY(-6px);box-shadow:0 28px 50px -20px rgba(10,56,124,.45);border-color:var(--lx-amber)}
.lx-fcard .lx-fi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:21px;transition:transform .3s}
.lx-fcard:hover .lx-fi{transform:scale(1.12) rotate(-6deg)}
.lx-fcard h3{font-size:17px;font-weight:800;margin-top:16px;letter-spacing:-.01em}
.lx-fcard p{font-size:13.5px;color:var(--lx-body);line-height:1.65;margin-top:8px}
.lx-fcard .lx-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.lx-fcard .lx-tags span{font-size:11px;font-weight:700;color:var(--lx-blue);background:var(--lx-tint);border-radius:99px;padding:4px 10px}

/* ===== Certificate verify ===== */
.lx-verify{position:relative;overflow:hidden;background-color:var(--lx-navy)}
.lx-verify-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.lx-verify .lx-eyebrow{color:var(--lx-amber)}
.lx-verify .lx-h2{color:#fff}
.lx-verify .lx-h2 em{color:var(--lx-amber)}
.lx-verify .lx-lede{color:rgba(255,255,255,.72)}
.lx-cert{background:#fffdf7;border-radius:14px;padding:12px;box-shadow:0 30px 70px -25px rgba(0,0,0,.7);transform:rotate(-1.5deg);transition:transform .4s}
.lx-cert:hover{transform:rotate(0) scale(1.01)}
.lx-cert-in{border:2px solid #d9b45a;border-radius:8px;padding:26px 28px;position:relative;text-align:center;background:radial-gradient(circle at 50% 0,#fff8e6,transparent 70%)}
.lx-cert-in .lx-org{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lx-blue);font-weight:800}
.lx-cert-in .lx-ttl{font-size:24px;font-weight:800;color:var(--lx-ink);margin-top:10px;letter-spacing:-.01em}
.lx-cert-in .lx-pre{font-size:11.5px;color:var(--lx-body);margin-top:14px}
.lx-cert-in .lx-nm{font-size:22px;font-weight:800;color:var(--lx-blue);margin-top:4px;font-style:italic}
.lx-cert-in .lx-crs{font-size:12.5px;color:#2b3648;margin-top:8px;line-height:1.5}
.lx-cert-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:22px;text-align:left;gap:12px}
.lx-cert-foot small{display:block;font-size:9.5px;color:var(--lx-muted)}
.lx-cert-foot b{display:block;font-size:11px;color:var(--lx-ink)}
.lx-sig{font-family:'Brush Script MT',cursive;font-size:20px;color:var(--lx-blue);border-bottom:1px solid #c9d3e3;padding:0 8px 2px}
.lx-qr{width:62px;height:62px;display:grid;grid-template-columns:repeat(9,1fr);gap:1px;padding:4px;background:#fff;border:1px solid #e3e8f0;border-radius:6px}
.lx-qr i{background:var(--lx-ink);border-radius:1px}
.lx-qr i.lx-o{background:transparent}
.lx-seal{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:99px;background:radial-gradient(circle,#ffd47e,#ffb000);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 14px -6px rgba(176,115,0,.7)}

/* ===== Compare ===== */
.lx-cmp{margin-top:40px;background:#fff;border:1px solid var(--lx-line);border-radius:20px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(10,56,124,.4)}
.lx-cmp-row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;border-top:1px solid #eef2f8}
.lx-cmp-row:first-child{border-top:0}
.lx-cmp-row>div{padding:16px 22px;font-size:14px;color:#2b3648;line-height:1.5}
.lx-cmp-row>div:first-child{font-weight:800;color:var(--lx-ink);background:var(--lx-soft-2)}
.lx-cmp-row.lx-hd>div{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--lx-muted);background:#fff}
.lx-cmp-row.lx-hd>div:last-child{color:var(--lx-blue)}
.lx-cmp-row>div:last-child{background:#fffaf0}
.lx-cmp-row.lx-hd>div:last-child{background:#fff4dd}

/* ===== ERP-connected ===== */
.lx-erp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.lx-erp{border-radius:16px;padding:22px;background:linear-gradient(160deg,#0a387c,#0f2a52);color:#fff;transition:transform .3s,box-shadow .3s}
.lx-erp:hover{transform:translateY(-5px);box-shadow:0 28px 48px -18px rgba(10,56,124,.6)}
.lx-erp .lx-e{font-size:22px}
.lx-erp h3{font-size:16px;font-weight:800;margin-top:12px}
.lx-erp p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.6;margin-top:6px}

/* ===== Demo form ===== */
.lx-demo{position:relative;overflow:hidden;background-color:var(--lx-navy-2);border-radius:24px;padding:52px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:48px;box-shadow:0 30px 60px -22px rgba(10,42,82,.55)}
.lx-demo .lx-eyebrow{color:var(--lx-amber)}
.lx-demo h2{font-weight:800;font-size:32px;line-height:1.18;color:#fff;letter-spacing:-.02em;margin-top:14px}
.lx-demo h2 span{color:var(--lx-amber)}
.lx-demo .lx-dsub{font-size:15px;color:rgba(255,255,255,.72);margin-top:12px;line-height:1.6}
.lx-dstats{display:flex;gap:32px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.lx-dstats b{display:block;font-weight:800;font-size:24px;color:#fff}
.lx-dstats span{font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase}
.lx-ring{position:relative;padding:3px;border-radius:21px;overflow:hidden;box-shadow:0 26px 55px -22px rgba(2,10,26,.6)}
.lx-ring::before{content:"";position:absolute;inset:-130%;background:conic-gradient(#ffb000,#2c5aa0,#0a387c,#ffb000);animation:emSpin 7s linear infinite}
.lx-dform{position:relative;background:#fff;border-radius:18px;padding:30px 30px 26px;display:flex;flex-direction:column;gap:14px;margin:0}
.lx-dform .lx-fh{display:flex;align-items:center;gap:11px}
.lx-dform .lx-fh .lx-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(120deg,#ffb000,#ffc44d);display:flex;align-items:center;justify-content:center;font-size:18px}
.lx-dform .lx-fh b{display:block;font-weight:800;font-size:19px;color:var(--lx-blue)}
.lx-dform .lx-fh small{display:block;font-size:11.5px;color:var(--lx-muted)}
.lx-fld{min-width:0;display:flex;align-items:center;gap:9px;height:52px;border:1px solid rgba(44,90,160,.16);border-radius:12px;background:var(--lx-soft-2);padding:0 16px}
.lx-fld input,.lx-fld select{border:0;background:transparent;outline:none;font-family:inherit;font-size:13.5px;color:var(--lx-ink);flex:1;min-width:0}
.lx-fld:focus-within{border-color:var(--lx-blue-2);background:#fff}
.lx-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lx-dform .lx-btn-amber{height:52px;font-size:15px;color:var(--lx-ink);width:100%}
.lx-dform .lx-fine{font-size:11px;color:var(--lx-muted);text-align:center}
.lx-thanks{display:none;text-align:center;padding:30px 10px}
.lx-thanks .lx-big{font-size:40px}
.lx-thanks b{display:block;font-size:20px;color:var(--lx-blue);margin-top:10px}
.lx-thanks p{font-size:13.5px;color:var(--lx-body);margin-top:6px}

/* ===== FAQ ===== */
.lx-faqs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;align-items:start}
details.lx-faq{background:#fff;border:1px solid rgba(44,90,160,.16);border-radius:14px;box-shadow:0 10px 24px -16px rgba(10,56,124,.28);transition:box-shadow .3s,border-color .3s}
details.lx-faq:hover{border-color:var(--lx-amber);box-shadow:0 18px 34px -18px rgba(10,56,124,.4)}
details.lx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:800;font-size:15px;color:var(--lx-ink)}
details.lx-faq summary::-webkit-details-marker{display:none}
details.lx-faq .lx-fx{width:26px;height:26px;border-radius:99px;background:var(--lx-tint);color:var(--lx-blue);display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;transition:transform .3s,background .3s,color .3s}
details.lx-faq[open] .lx-fx{transform:rotate(45deg);background:var(--lx-amber);color:var(--lx-ink)}
details.lx-faq .lx-fa{padding:0 22px 18px;font-size:14px;color:var(--lx-body);line-height:1.65;margin:0}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .lx-steps{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .lx-steps::before{display:none}
  .lx-erp-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .lx-wrap{padding:0 16px}
  .lx-hero-grid{grid-template-columns:1fr;padding:48px 16px 60px;gap:44px}
  .lx-hero h1{font-size:34px}
  .lx-float{display:none}
  .lx-kpis{grid-template-columns:repeat(2,1fr)}
  .lx-two{grid-template-columns:1fr}
  .lx-win-body{height:620px}
  .lx-sec{padding:60px 0}
  .lx-h2{font-size:28px}
  .lx-rpanel,.lx-verify-grid{grid-template-columns:1fr;gap:32px}
  .lx-fgrid{grid-template-columns:1fr 1fr}
  .lx-demo{grid-template-columns:1fr;padding:30px 20px;gap:30px}
  .lx-faqs{grid-template-columns:1fr}
  .lx-cmp-row{grid-template-columns:1fr}
  .lx-cmp-row.lx-hd{display:none}
  .lx-cmp-row>div:nth-child(2)::before{content:"Edumarshal LMS: ";font-weight:800;color:var(--lx-muted)}
  .lx-cmp-row>div:nth-child(3)::before{content:"LMSNext: ";font-weight:800;color:var(--lx-blue)}
}
@media (max-width:620px){
  .lx-steps{grid-template-columns:1fr 1fr}
  .lx-fgrid,.lx-erp-grid{grid-template-columns:1fr}
  .lx-f2{grid-template-columns:1fr}
  .lx-rtabs{display:flex;width:100%}
  .lx-rtabs button{flex:1;padding:10px 6px;font-size:12.5px}
  .lx-win-tabs button{padding:8px 7px;font-size:10.5px}
  .lx-dstats{gap:20px}
}

/* ===== Mock-up grids: inline column lists live in --lx-cols so responsive.css leaves them alone ===== */
[style*="--lx-cols:"]{grid-template-columns:var(--lx-cols) !important}
/* ===== Responsive fixes (2026-10-21) ===== */
/* keep the certificate's issuer name clear of the gold seal in the top-right corner */
.lx-cert-in .lx-org{padding:0 52px}