/* AspectSoft product documentation */
:root{
  --ink:#172033;--muted:#5f6b7a;--line:#e3e8ef;--soft:#f6f8fb;--soft-blue:#f2f6ff;
  --blue:#0b5fff;--blue-dark:#0848c7;--white:#fff;--as-primary:#0b5fff;--as-border:#e3e8ef;--radius:14px;--shadow:0 12px 34px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--white);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
button,a{touch-action:manipulation}
.skip{position:fixed;left:14px;top:-80px;z-index:1000;background:#111827;color:#fff;padding:10px 14px;border-radius:8px}.skip:focus{top:14px}

/* Main-site aligned documentation navigation */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--as-border);
  overflow:visible;
}

.doc-nav{
  max-width:1180px;
  min-height:52px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:18px;
}

.site-header a:hover{
  text-decoration:none;
}

.brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  color:#0d47a1;
  text-decoration:none;
}

.brand-link img{
  width:32px;
  height:32px;
}

.brand-name{
  color:#0d47a1;
  font-size:20px;
  font-weight:800;
  letter-spacing:.25px;
}

.main-menu{
  display:none;
  align-items:center;
  gap:clamp(12px,1.5vw,22px);
  margin:0 0 0 auto;
  padding:0;
  list-style:none;
}

.main-menu > li{
  display:flex;
  align-items:center;
}

.main-menu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:4px 0;
  color:#334155;
  font-size:14px;
  font-weight:650;
  line-height:1.2;
  white-space:nowrap;
  transition:color .18s ease;
}

.main-menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--as-primary);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}

.main-menu > li > a:hover{
  color:#0b4ecf;
}

.main-menu > li > a:hover::after{
  transform:scaleX(.45);
}

.main-menu > li > a.is-active{
  color:#0b4ecf;
  font-weight:750;
}

.main-menu > li > a.is-active::after{
  transform:scaleX(1);
}

.main-menu > li > a:focus-visible,
.lang-switch .dropbtn:focus-visible,
.nav-toggle:focus-visible,
.drawer-close:focus-visible,
.drawer-menu a:focus-visible,
.drawer-language-link:focus-visible,
.drawer-cta:focus-visible{
  outline:3px solid rgba(11,95,255,.24);
  outline-offset:3px;
}

@media (min-width:900px){
  .main-menu{
    display:flex;
  }
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-left:auto;
  padding:0;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#0d47a1;
  cursor:pointer;
  transition:
    background-color .18s ease,
    border-color .18s ease;
}

.nav-toggle:hover{
  background:#f4f7ff;
  border-color:#e1e9ff;
}

.nav-toggle-bars{
  display:flex;
  width:21px;
  flex-direction:column;
  gap:4px;
}

.nav-toggle-bars > span{
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

@media (min-width:900px){
  .nav-toggle{
    display:none;
  }
}

.lang-switch{
  position:relative;
  margin-left:2px;
}

.lang-switch .dropbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:52px;
  min-height:36px;
  padding:6px 9px;
  border:1px solid #dbe3ee;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font:inherit;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease;
}

.lang-switch .dropbtn:hover{
  border-color:#c8d4e5;
  background:#f8fafc;
}

.lang-switch .dropbtn .caret{
  font-size:10px;
  opacity:.72;
}

.lang-switch .dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:250;
  display:none;
  min-width:174px;
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--as-border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
}

.lang-switch.open .dropdown-menu{
  display:block;
}

.lang-switch .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 10px;
  border-radius:8px;
  color:#1f2937;
  font-size:14px;
}

.lang-switch .dropdown-item:hover{
  background:#f5f7fb;
}

.lang-switch .dropdown-item.active,
.lang-switch .dropdown-item[aria-current="page"]{
  background:#f2f6ff;
  color:#0b4ecf;
  font-weight:700;
}

.language-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:22px;
  border:1px solid #dbe3ee;
  border-radius:6px;
  background:#fff;
  color:#475569;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:190;
  background:rgba(15,23,42,.44);
  opacity:1;
}

.drawer-backdrop[hidden]{
  display:none;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:200;
  display:flex;
  width:min(90vw,390px);
  height:100vh;
  height:100dvh;
  flex-direction:column;
  background:#fff;
  box-shadow:-18px 0 50px rgba(15,23,42,.18);
  transform:translateX(102%);
  transition:transform .26s ease;
  overscroll-behavior:contain;
}

.mobile-drawer.open{
  transform:translateX(0);
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  padding:14px 16px 14px 18px;
  border-bottom:1px solid #edf0f4;
}

.drawer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#0d47a1;
  font-size:19px;
  font-weight:800;
  letter-spacing:.2px;
}

.drawer-brand img{
  width:32px;
  height:32px;
}

.mobile-drawer .drawer-close{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#334155;
  font:inherit;
  font-size:30px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease;
}

.mobile-drawer .drawer-close:hover{
  background:#f4f6f8;
}

.drawer-nav{
  flex:1 1 auto;
  overflow-y:auto;
  padding:14px 14px 20px;
}

.drawer-menu{
  margin:0;
  padding:0;
  list-style:none;
}

.drawer-menu li{
  margin:0;
}

.drawer-menu a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:50px;
  padding:11px 13px;
  border-radius:9px;
  color:#263548;
  font-size:16px;
  font-weight:650;
  line-height:1.3;
  transition:
    color .18s ease,
    background-color .18s ease;
}

.drawer-menu a:hover{
  color:#0b4ecf;
  background:#f7f9fc;
}

.drawer-menu a.is-active{
  color:#0b4ecf;
  background:#f2f6ff;
  font-weight:750;
  box-shadow:inset 3px 0 0 var(--as-primary);
}

.drawer-footer{
  flex:0 0 auto;
  padding:16px 18px max(18px,env(safe-area-inset-bottom));
  border-top:1px solid #edf0f4;
  background:#fff;
}

.drawer-language{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-bottom:12px;
  padding:4px;
  border:1px solid #dfe6ef;
  border-radius:10px;
  background:#f8fafc;
}

.drawer-language-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:7px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}

.drawer-language-link:hover{
  color:#0b4ecf;
  background:#fff;
}

.drawer-language-link.is-active,
.drawer-language-link[aria-current="page"]{
  color:#0b4ecf;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.08);
}

.drawer-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  width:100%;
  padding:10px 14px;
  border:1px solid var(--as-primary);
  border-radius:10px;
  background:var(--as-primary);
  color:#fff;
  font-size:14px;
  font-weight:750;
  text-align:center;
  transition:
    background-color .18s ease,
    border-color .18s ease;
}

.drawer-cta:hover{
  border-color:#084fd6;
  background:#084fd6;
  color:#fff;
}

.doc-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.doc-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 14px;
  border:1px solid var(--blue);
  border-radius:9px;
  font-size:14px;
  font-weight:750;
  text-decoration:none;
}

.doc-action:hover{
  text-decoration:none;
}

.doc-action-primary{
  background:var(--blue);
  color:#fff;
}

.doc-action-primary:hover{
  background:var(--blue-dark);
  color:#fff;
}

.doc-action-secondary{
  background:#fff;
  color:var(--blue);
}

@media (max-width:899px){
  .doc-nav{
    min-height:56px;
    padding:12px 14px;
  }

  .brand-name{
    font-size:18px;
  }
}

@media (min-width:900px) and (max-width:1040px){
  .doc-nav{
    gap:12px;
    padding:10px 14px;
  }

  .main-menu{
    gap:12px;
  }

  .main-menu > li > a{
    font-size:13px;
  }

  .brand-name{
    font-size:18px;
  }
}

@media (min-width:900px){
  .mobile-drawer,
  .drawer-backdrop{
    display:none !important;
  }
}

.hero{border-bottom:1px solid var(--line);background:var(--soft-blue)}
.hero-inner{max-width:1180px;margin:auto;padding:54px 20px 48px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:46px;align-items:center}
.eyebrow{margin:0 0 10px;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
h1{margin:0;color:#14213d;font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.035em}.subtitle{margin:12px 0 0;font-size:clamp(19px,2.4vw,25px);line-height:1.35;font-weight:700;color:#30415c}.lead{max-width:760px;margin:18px 0 0;color:#4b5870;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}.chips li{padding:6px 10px;border:1px solid #cedbf6;border-radius:999px;background:#fff;color:#37506f;font-size:12px;font-weight:700}
.hero-media{border:1px solid #dce5f3;border-radius:16px;background:#fff;padding:10px;box-shadow:var(--shadow)}.hero-media img{width:100%;max-height:420px;object-fit:contain;border-radius:10px;background:#fff}
.wrap{max-width:1180px;margin:auto;padding:42px 20px 70px}.mobile-toc{display:none;margin:0 0 28px;border:1px solid var(--line);border-radius:12px;background:#fff}.mobile-toc summary{padding:12px 14px;font-weight:750;cursor:pointer}.mobile-toc nav{padding:0 14px 12px}.mobile-toc a{display:block;padding:5px 0;color:#475467}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:46px}.toc{position:sticky;top:88px;align-self:start}.toc-label{margin:0 0 8px;color:#7b8797;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.toc nav{border-left:1px solid var(--line);padding-left:14px}.toc a{display:block;padding:6px 0;color:#59677a;font-size:14px}.toc a:hover{color:var(--blue);text-decoration:none}
.content{min-width:0}.section{padding:0 0 42px;margin:0 0 42px;border-bottom:1px solid var(--line)}.section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.section h2{margin:0 0 14px;color:#16243d;font-size:28px;line-height:1.2;letter-spacing:-.02em}.section h3{margin:26px 0 8px;font-size:19px;color:#253451}.section p{margin:0 0 14px;color:#4f5e71}.section ul{margin:14px 0 0;padding-left:20px;color:#4f5e71}.section li{margin:7px 0}.note{padding:14px 16px;border-left:3px solid var(--blue);background:var(--soft-blue);border-radius:0 10px 10px 0;color:#44536a}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.feature{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}.feature h3{margin:0 0 6px;font-size:17px}.feature p{margin:0;font-size:14px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0!important;list-style:none}.tag-list li{margin:0;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:13px;color:#455468}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.gallery figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.gallery img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#f8fafc}.gallery .portrait{aspect-ratio:4/5}.gallery figcaption{padding:10px 12px;color:#667085;font-size:13px;border-top:1px solid var(--line)}
.cta{margin-top:48px;padding:28px;border:1px solid #dbe5f7;border-radius:16px;background:var(--soft-blue)}.cta h2{margin:0 0 8px;font-size:24px}.cta p{margin:0 0 18px;color:#52617a}.buttons{display:flex;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:9px;border:1px solid var(--blue);font-size:14px;font-weight:750}.btn:hover{text-decoration:none}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-dark)}.btn.secondary{background:#fff;color:var(--blue)}
.doc-footer{border-top:1px solid var(--line);background:#fafbfc}.footer-inner{max-width:1180px;margin:auto;padding:24px 20px;display:flex;justify-content:space-between;gap:18px;color:#667085;font-size:13px}.footer-inner a{color:#475467}
:focus-visible{outline:3px solid rgba(11,95,255,.28);outline-offset:3px}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:28px;padding-top:40px}.hero-media{max-width:680px}.layout{grid-template-columns:1fr}.toc{display:none}.mobile-toc{display:block}.wrap{padding-top:30px}}
@media(max-width:640px){.hero-inner{padding:34px 16px 32px}.wrap{padding:26px 16px 54px}.feature-grid,.gallery{grid-template-columns:1fr}.section{padding-bottom:32px;margin-bottom:32px}.section h2{font-size:24px}.footer-inner{padding:20px 16px;flex-direction:column}.cta{padding:22px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mobile-drawer{transition:none}.main-menu > li > a::after{transition:none}}