/* Lex360 public website. Light and dark follow the visitor's device. */
:root{--bg:#fafbfd;--surface:#fff;--soft:#f0f3f8;--text:#101a2a;--muted:#525f72;--line:#dfe5ee;--brand:#0B2A4A;--brand2:#4F7BA8;--accent:#C1121F;--ink:#0b1220;--good:#157a46;--warn:#9a5b00;--radius:16px;--shadow:0 18px 50px -24px rgba(11,42,74,.35);--grad:linear-gradient(120deg,#0B2A4A 0%,#12385f 50%,#1b4a7c 100%)}
@media (prefers-color-scheme:dark){:root{--bg:#0a1626;--surface:#0f2038;--soft:#0c1b30;--text:#e8edf5;--muted:#a3b2c7;--line:#223652;--brand:#8fb2da;--brand2:#6f95c2;--accent:#ef4b59;--ink:#fff;--grad:linear-gradient(120deg,#17406d 0%,#1f5088 50%,#2b629f 100%);--good:#4ec77f;--warn:#f0a93a;--shadow:0 18px 50px -24px rgba(0,0,0,.8)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 14px;border-radius:8px;z-index:100}.skip:focus{left:8px}
header.site{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--text);text-decoration:none}.logo b{color:var(--lg-red)}
.logo .mk{width:34px;height:34px;display:grid;place-items:center}
nav.main{display:flex;gap:4px;margin-left:12px;flex:1}nav.main a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:9px;font-size:.95rem;font-weight:500}nav.main a:hover,nav.main a[aria-current]{color:var(--text);background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.btn.primary{background:var(--grad);color:#fff;border-color:transparent}.btn.big{padding:15px 26px;font-size:1.05rem;border-radius:14px}
@media (prefers-color-scheme:dark){.btn.primary{color:#061324;background:linear-gradient(120deg,#a9c6e8 0%,#8fb2da 55%,#7aa3d2 100%)}}
.hero{padding:70px 0 40px;background:radial-gradient(900px 380px at 85% -10%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),radial-gradient(700px 300px at 0% 0%,color-mix(in srgb,var(--brand2) 14%,transparent),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);padding:5px 12px;border-radius:99px}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em;margin:16px 0 16px}
h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px}h3{margin:0 0 6px;font-size:1.12rem}
.lead{font-size:1.2rem;color:var(--muted);max-width:34em}.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}.fine{font-size:.88rem;color:var(--muted)}
.mock{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px;display:grid;gap:12px;transform:rotate(1.2deg)}
.mock .row{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:14px;padding:12px 14px}.mock .dot{width:38px;height:38px;border-radius:12px;background:var(--grad);flex:none}
.mock .bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;flex:1}.mock .bar i{display:block;height:100%;background:var(--grad)}.mock small{color:var(--muted);display:block;font-size:.8rem}.mock b{font-size:.95rem}
.pill{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.stats{padding:26px 0;border-block:1px solid var(--line);background:var(--surface)}.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}.stats b{display:block;font-size:2rem;letter-spacing:-.02em;color:var(--brand)}.stats span{color:var(--muted);font-size:.95rem}
section.s{padding:72px 0}section.s.alt{background:var(--soft)}.center{text-align:center}.center .lead{margin-inline:auto}
.grid{display:grid;gap:18px}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}.card p{margin:6px 0 0;color:var(--muted);font-size:.98rem}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);margin-bottom:14px}
.step{counter-increment:s}.step::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:99px;background:var(--grad);color:#fff;font-weight:800;margin-bottom:12px}
.steps{counter-reset:s}
ul.tick{list-style:none;padding:0;margin:14px 0 0}ul.tick li{padding-left:28px;position:relative;margin:8px 0;color:var(--text)}ul.tick li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:99px;background:color-mix(in srgb,var(--good) 20%,transparent);box-shadow:inset 0 0 0 2px var(--good)}
.price{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}.price small{font-size:.95rem;color:var(--muted);font-weight:500}
.plan{display:flex;flex-direction:column}.plan .top{flex:1}.plan.pop{border-color:var(--brand);box-shadow:var(--shadow)}.plan .tag{align-self:flex-start;font-size:.75rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 10px;border-radius:99px;margin-bottom:10px}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}table.cmp th{background:var(--soft);font-size:.85rem;color:var(--muted)}table.cmp tr:last-child td{border-bottom:0}
.yes{color:var(--good);font-weight:700}.no{color:var(--muted)}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin:10px 0}details.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}details.faq summary::-webkit-details-marker{display:none}details.faq summary::after{content:"+";float:right;font-size:1.4rem;color:var(--accent)}details.faq[open] summary::after{content:"–"}details.faq p{color:var(--muted);margin:0 0 16px}
form.lead-form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);max-width:640px;margin-inline:auto;text-align:left}
form.lead-form label{font-weight:600;font-size:.92rem;display:block;margin-bottom:5px}form.lead-form input,form.lead-form select,form.lead-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:inherit;font:inherit}
form.lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}form.lead-form .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--muted)}form.lead-form .chk input{width:auto;margin-top:5px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}.msg{min-height:1.3em;font-size:.95rem}.msg.err{color:#b3261e}.msg.ok{color:var(--good);font-weight:600}
.band{background:var(--grad);color:#fff;border-radius:26px;padding:48px 28px;text-align:center}.band h2{color:#fff}.band p{max-width:34em;margin:0 auto 20px}.band .btn.primary{background:#fff;color:#0B2A4A}
footer.site{border-top:1px solid var(--line);padding:42px 0;background:var(--surface);color:var(--muted);font-size:.93rem}footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}footer.site a{color:var(--muted);text-decoration:none;display:block;margin:6px 0}footer.site a:hover{color:var(--text)}footer.site h4{color:var(--text);margin:0 0 8px;font-size:.95rem}
footer.site .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem}footer.site .legal p{margin:0}footer.site .pw{margin-left:auto;text-align:right;opacity:.85}
.doc{max-width:760px;margin:0 auto;padding:56px 20px}.doc h2{font-size:1.4rem;margin:30px 0 8px}.doc p,.doc li{color:var(--text)}.notice{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:12px;padding:12px 16px;color:var(--text);font-size:.95rem}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.g3,.g4{grid-template-columns:1fr 1fr}.stats .wrap{grid-template-columns:1fr 1fr}.mock{transform:none}footer.site .cols{grid-template-columns:1fr 1fr}header.site .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;gap:8px 14px}nav.main{order:3;flex-basis:100%;margin-left:0;overflow-x:auto}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}form.lead-form .two{grid-template-columns:1fr}section.s{padding:48px 0}.hero{padding:40px 0 24px}header.site .wrap{gap:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.doc-table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:.95rem}.doc-table th,.doc-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}.doc-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.plans{border:0;padding:0;margin:14px 0;display:grid;gap:10px}.plans legend{font-weight:600;margin-bottom:6px}
.plan-opt{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;background:var(--surface,#fff)}.plan-opt:has(input:checked){border-color:var(--brand,#0B2A4A);background:color-mix(in srgb,var(--brand,#0B2A4A) 7%,var(--surface,#fff))}.plan-opt em{font-style:normal;color:var(--brand,#0B2A4A);font-weight:700;margin-left:6px}.plan-opt small{color:var(--muted)}
.plan-opt input[type=radio]{width:auto;flex:none;margin:5px 0 0;padding:0}
.plan-opt>span{flex:1}

.qa{border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);margin:8px 0;padding:0}.qa summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none}.qa summary::-webkit-details-marker{display:none}.qa summary::before{content:'+';display:inline-block;width:1.2em;color:var(--brand,#0B2A4A);font-weight:800}.qa[open] summary::before{content:'\2212'}.qa>div{padding:0 16px 14px 34px;color:var(--text)}
h2[id]{scroll-margin-top:90px;margin-top:30px}
.skip:focus{z-index:100}
@media (max-width:640px){header.site .wrap{gap:10px}header.site .btn{white-space:nowrap;padding:8px 12px;font-size:.9rem;border-radius:10px}header.site .logo span:last-child{font-size:1.1rem}}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.cmp tbody th{background:none;color:var(--text);font-size:inherit;font-weight:600}

/* ─────────────────────────────────────────────────────────────────────────────
   The finish: depth, light and motion, shared by every page of the website.
   Everything degrades to the plain layout above if the browser skips it, and all
   movement stops for anyone who asks for reduced motion.
   ───────────────────────────────────────────────────────────────────────────── */

/* a slow aurora behind the whole page, and a hair of grain so the gradients do not band */
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42vmax 32vmax at 12% -8%, color-mix(in srgb,var(--brand) 20%,transparent), transparent 62%),
    radial-gradient(38vmax 30vmax at 92% 4%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 60%),
    radial-gradient(44vmax 34vmax at 70% 96%, color-mix(in srgb,var(--brand) 12%,transparent), transparent 64%);
  animation:aurora 28s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes aurora{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.08)}}

/* headings with the weight and tracking of a paid-for product */
h1,h2,h3{letter-spacing:-.025em}
h1{line-height:1.04}
.grad-text,.gt{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 9s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.eyebrow{border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);backdrop-filter:blur(6px)}
.lead{font-size:1.22rem;line-height:1.6}

/* every hero gets the soft light and a hairline close */
.hero{position:relative;padding:86px 0 56px;overflow:clip}
.hero::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1120px,92%);height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 45%,transparent),transparent)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.hero.center .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
.hero.center .lead{margin-inline:auto}

/* cards: a hairline that catches the light, a lift on hover, and a spotlight that follows the pointer */
.card,.plan,.qa,.doc-table{position:relative}
.card,.plan{background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(140deg,color-mix(in srgb,var(--brand) 38%,transparent),color-mix(in srgb,var(--line) 85%,transparent) 42%,color-mix(in srgb,var(--brand2) 30%,transparent)) border-box;
  border:1px solid transparent;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.card::after,.plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%)}
.card:hover,.plan:hover{transform:translateY(-6px);box-shadow:0 26px 60px -30px color-mix(in srgb,var(--brand) 60%,transparent),var(--shadow)}
.card:hover::after,.plan:hover::after{opacity:1}
.plan.pop{box-shadow:0 30px 70px -34px color-mix(in srgb,var(--brand) 70%,transparent)}

/* icon tiles read as objects, not glyphs */
.ico{background:var(--grad);color:#fff;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--brand) 85%,transparent);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card:hover .ico{transform:translateY(-2px) rotate(-4deg) scale(1.06)}
.step::before{box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 85%,transparent)}

/* buttons: a sheen that crosses once on hover */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%)}
.btn:hover::before{transform:translateX(120%)}
.btn.primary{box-shadow:0 14px 34px -16px color-mix(in srgb,var(--brand) 90%,transparent)}
.btn.primary:hover{box-shadow:0 20px 44px -16px color-mix(in srgb,var(--brand) 95%,transparent)}

/* the logo mark breathes a little when you point at it */
header.site .logo .mk{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
header.site .logo:hover .mk{transform:rotate(-6deg) scale(1.07);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--brand) 95%,transparent)}
header.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);transition:box-shadow .3s,background .3s}
header.site.stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.8);background:color-mix(in srgb,var(--bg) 94%,transparent)}

/* the closing band: a moving gradient rather than a flat block */
.band{position:relative;overflow:hidden;background:linear-gradient(120deg,#0B2A4A,#1b4a7c,#2f5f93,#0B2A4A);background-size:280% 280%;animation:band 16s ease infinite;
  box-shadow:0 40px 90px -50px color-mix(in srgb,var(--brand) 90%,transparent)}
@keyframes band{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* numbers that matter, counted up once */
.stats{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(10px)}
.stats b{font-variant-numeric:tabular-nums}

/* anything marked .rv rises into place the first time it is seen */
.rv{opacity:0;transform:translateY(22px)}
.rv-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0s)}

/* page-top art: a glass panel with floating chips, used by the sub-pages */
.art{position:relative;min-height:330px;overflow:visible}
.art .pane{position:absolute;inset:0;border-radius:24px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow);overflow:hidden}
.art .pane::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;background:radial-gradient(60% 100% at 50% 0,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%)}
.art .chip{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:.92rem;font-weight:600;white-space:nowrap;animation:bob 7s ease-in-out infinite}
.art .chip i{width:9px;height:9px;border-radius:99px;background:var(--grad);flex:none}
.art .chip.c1{top:-14px;left:-14px}.art .chip.c2{top:52%;right:-20px;animation-delay:-2.3s}.art .chip.c3{bottom:-16px;left:14%;animation-delay:-4.6s}
@media (max-width:1100px){.art .chip.c1,.art .chip.c3{left:0}.art .chip.c2{right:0}}
@keyframes bob{50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  body::before,.band,.grad-text,.gt,.art .chip{animation:none}
  .rv{opacity:1;transform:none}
  .card:hover,.plan:hover{transform:none}
  .btn::before{display:none}
}

/* the glimpse of the product inside a page-top panel */
.art .pane{display:grid;place-items:center;padding:18px}
.pn{position:relative;width:100%;max-width:360px;display:grid;gap:9px;font-size:.92rem}
.pn-top{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;font-weight:700;margin-bottom:2px}
.pn-top b{margin-left:6px;color:var(--text);font-weight:700}
.pn-dot{width:8px;height:8px;border-radius:99px;background:var(--line)}
.pn-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;
  opacity:0;animation:pn-in .5s cubic-bezier(.2,.7,.3,1) forwards}
.pn-row:nth-of-type(2){animation-delay:.25s}.pn-row:nth-of-type(3){animation-delay:.5s}.pn-row:nth-of-type(4){animation-delay:.75s}
.pn-row.dim{color:var(--muted)}
.pn-row .tick{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:99px;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);font-size:.8rem;font-weight:800}
.pn-row .tick.no{background:color-mix(in srgb,#e2526a 18%,transparent);color:#e2526a}
.pn-bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.pn-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);animation:pn-bar 1.5s .9s cubic-bezier(.2,.7,.3,1) forwards}
.pn-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:.84rem}.pn-foot b{color:var(--text)}
@keyframes pn-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pn-bar{to{width:86%}}
@media (prefers-reduced-motion:reduce){.pn-row{opacity:1;animation:none}.pn-bar i{width:86%;animation:none}}

/* the small drawn pictures that stand in for each feature */
.vis-card{padding:18px;min-height:250px;display:grid;align-content:center}
.vis{display:grid;gap:8px;font-size:.92rem}
.vis-h{font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.vis-f{font-size:.84rem;color:var(--muted);margin-top:4px}
.vis .pn-row{animation:none;opacity:1}
.vis .pn-row small{color:var(--muted)}
/* a lesson plan, stage by stage */
.vis .stage{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface);position:relative}
.vis .stage em{font-style:normal;color:var(--muted);font-size:.84rem;font-variant-numeric:tabular-nums}
.vis .stage.on{border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.vis .stage.on::before{content:"";position:absolute;left:-1px;top:14%;bottom:14%;width:3px;border-radius:99px;background:var(--grad)}
/* the CEFR ladder and skill meters */
.vis .ladder{display:flex;gap:6px}
.vis .ladder span{flex:1;text-align:center;padding:7px 0;border-radius:9px;border:1px solid var(--line);font-weight:700;font-size:.82rem;color:var(--muted)}
.vis .ladder span.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -12px color-mix(in srgb,var(--brand) 90%,transparent)}
.vis .meters{display:grid;gap:7px;margin-top:4px}
.vis .meter{display:grid;grid-template-columns:5.5em 1fr 2.6em;gap:9px;align-items:center;font-size:.86rem}
.vis .meter b{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.vis .meter b i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);animation:meter 1.2s .2s cubic-bezier(.2,.7,.3,1) forwards}
.vis .meter em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@keyframes meter{to{width:var(--w)}}
/* the whiteboard */
.vis .board{position:relative;height:104px;border-radius:14px;border:1px solid var(--line);background:var(--soft);overflow:hidden}
.vis .board svg{width:100%;height:100%}
.vis .board .ink{fill:none;stroke:url(#g) var(--brand);stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.6s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.vis .board .note{position:absolute;font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.vis .board .n1{top:12px;right:14px}.board .n2{bottom:12px;left:16px}
/* the waveform and the accents */
.vis .wave{display:flex;align-items:center;gap:3px;height:60px;padding:0 2px}
.vis .wave i{flex:1;border-radius:99px;background:var(--grad);height:30%;transform-origin:center;animation:wv 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.07s)}
@keyframes wv{to{height:92%}}
.vis .accents{display:flex;gap:6px;flex-wrap:wrap}
.vis .accents span{font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.vis .accents span.on{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
/* the term chart */
.vis .bars{display:flex;align-items:flex-end;gap:8px;height:110px}
.vis .bars i{flex:1;border-radius:8px 8px 4px 4px;background:var(--grad);height:0;animation:bar .9s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i) * .09s);opacity:.55}
.vis .bars i:last-child{opacity:1;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--brand) 90%,transparent)}
@keyframes bar{to{height:var(--h)}}
@media (prefers-reduced-motion:reduce){
  .vis .vis .meter b i{width:var(--w);animation:none}.vis .bars i{height:var(--h);animation:none}
  .vis .wave i{animation:none;height:60%}.vis .board .ink{stroke-dashoffset:0;animation:none}
}

/* the Lex360 logo colours: lightened for the dark theme so the navy and black segments show */
:root{--lg-red:#C1121F;--lg-navy:#0B2A4A;--lg-grey:#9AA5B1;--lg-black:#111111}
@media (prefers-color-scheme:dark){:root{--lg-red:#ef4b59;--lg-navy:#8fb2da;--lg-black:#e6e9ef}}
.lgw .w-r{stroke:var(--lg-red)}.lgw .w-n{stroke:var(--lg-navy)}.lgw .w-g{stroke:var(--lg-grey)}.lgw .w-k{stroke:var(--lg-black)}.lgw .w-t{fill:var(--lg-grey)}
.logo{color:var(--lg-navy)}