/* Blueprint Atelier — inner pages. Drafting paper, ink lines, title blocks (native light) / night blueprint (dark). */
.sx,.sx-foot{
  --bg:#f2eee5; --bg2:#e9e3d6; --ink:#14213d; --mute:rgba(20,33,61,.72); --line:rgba(20,33,61,.22); --card:#f7f4ed; --card-line:#14213d;
  --accent:#1d4ed8; --on-accent:#fff; --accent-ink:#1d4ed8; --field:#fbf9f4; --head-bg:rgba(242,238,229,.96); --head-line:#14213d;
  --radius:0px; --radius-sm:0px; --btn-r:2px; --shadow:6px 6px 0 rgba(20,33,61,.12);
  --font:'Archivo',system-ui,sans-serif; --font-d:'Archivo',system-ui,sans-serif; --font-m:'IBM Plex Mono',ui-monospace,monospace; --d-weight:750; --d-track:-.035em; --d-case:uppercase; --d-lh:.94;
  --grid1:rgba(20,33,61,.09); --grid2:rgba(20,33,61,.035); --amber:#e9a23b; --red:#c8423b;
}
html[data-theme="dark"] .sx,html[data-theme="dark"] .sx-foot{
  --bg:#0b2a5b; --bg2:#0d2550; --ink:#e6efff; --mute:rgba(230,239,255,.74); --line:rgba(230,239,255,.24); --card:#0e2f63; --card-line:rgba(230,239,255,.6);
  --accent:#7cc4ff; --on-accent:#0b2a5b; --accent-ink:#9fd3ff; --field:#0d2a58; --head-bg:rgba(11,42,91,.96); --head-line:rgba(230,239,255,.5);
  --shadow:6px 6px 0 rgba(0,0,0,.25); --grid1:rgba(230,239,255,.1); --grid2:rgba(230,239,255,.04); --amber:#f2b24a; --red:#ff8f80;
}
html[lang=ar] .sx,html[lang=ar] .sx-foot{--font:'IBM Plex Sans Arabic',system-ui,sans-serif; --font-d:'IBM Plex Sans Arabic',system-ui,sans-serif; --d-weight:700; --d-case:none; --d-lh:1.3}

body.sx::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid1) 1px,transparent 1px),linear-gradient(90deg,var(--grid1) 1px,transparent 1px),linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.sx h1,.sx h2,.sx-foot-cta h2,.sx-menu-big,.sx-card h3,.sx-post h3,.sx-mega-h{font-stretch:118%}
html[lang=ar] .sx h1,html[lang=ar] .sx h2,html[lang=ar] .sx-foot-cta h2{font-stretch:100%}
.sx h1{font-size:clamp(30px,6vw,92px)}
.sx-hero--img h1{font-size:clamp(30px,4.4vw,70px)}
.sx h2,.sx-h2,.sx-cta h2{font-size:clamp(24px,3vw,44px)}
.sx-head{border-bottom-width:1.5px}
.sx-nav > ul > li > a{font:500 12.5px/1.2 var(--font-m);letter-spacing:.08em;text-transform:uppercase;border-radius:0}
.sx-nav > ul > li > a:hover,.sx-nav > ul > li > a[aria-current]{background:var(--ink);color:var(--bg)}
.sx-logo{gap:12px}
.sx-mark{width:36px;height:36px;flex:none}
html[data-theme="dark"] .sx-mark-b{stroke:#6aa8ff}
.sx-logo b{font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:.04em;line-height:1}
.sx-logo b small{display:block;font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--mute);margin-top:3px}
.sx-btn{border:1.5px solid var(--ink);font-family:var(--font-m);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.sx-btn--accent{border-color:var(--accent)}
.sx-btn--ghost:hover{background:var(--ink);color:var(--bg)}
.sx-btn:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
.sx-burger,.sx-head .pref-btn{border:1.5px solid var(--ink);border-radius:2px;color:var(--ink)}
.sx-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-ink)}
.sx-eyebrow::before{content:'';width:28px;height:1px;background:currentColor;box-shadow:0 -4px 0 -0px transparent}
/* title block under the hero heading: a dimension line with end ticks */
.sx-hero-t h1{padding-bottom:22px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 11px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 11px no-repeat}
.sx-card,.sx-post,.sx-form,.sx-ci,.sx-faq details,.sx-stat,.sx-cta-in,.sx-table{border-width:1.5px}
.sx-card:hover,.sx-post:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent)}
.sx-fig{border:1.5px solid var(--ink)}
.sx-card .sx-fig,.sx-post .sx-fig{border:0;border-bottom:1.5px solid var(--ink)}
.sx-hero-fig,.sx-sec-fig{box-shadow:10px 10px 0 color-mix(in srgb,var(--accent) 22%,transparent)}
.sx-prose ul li::before{border-radius:0;transform:none;width:9px;height:1.5px;top:.85em;background:var(--accent)}
.sx-faq summary::after{border-radius:0;border-color:var(--ink)}
.sx-cta-in{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sx-cta-in p{color:color-mix(in srgb,var(--bg) 78%,transparent)}
.sx-cta-in .sx-btn--ghost{color:var(--bg);border-color:var(--bg)}
.sx-cta-in .sx-btn--ghost:hover{background:var(--bg);color:var(--ink)}
.sx-stat b{color:var(--accent-ink);font-stretch:118%}
.sx-meta,.sx-crumbs ol{font-family:var(--font-m);letter-spacing:.04em}
.sx-field input,.sx-field select,.sx-field textarea{border:1.5px solid var(--line)}
.sx-foot{border-top:1.5px solid var(--ink)}
.sx-foot-grid h3{color:var(--accent-ink)}
html[lang=ar] .sx-nav > ul > li > a,html[lang=ar] .sx-btn{font-family:var(--font);text-transform:none;font-size:14.5px}

@media (max-width:420px){.sx-logo b{font-size:12px}.sx-logo b small{display:none}.sx-mark{width:28px;height:28px}.sx-logo{gap:8px}}

/* configurator skin (copied from the homepage) */
/* names used by the homepage skin, mapped to the inner-page tokens */
.sx{--paper:var(--bg);--blue:var(--accent);--on-blue:var(--on-accent);--tint:color-mix(in srgb,var(--accent) 8%,transparent)}
.cfx{--cfx-ink:var(--ink);--cfx-mute:var(--mute);--cfx-line:var(--line);--cfx-panel:var(--paper);--cfx-well:transparent;--cfx-accent:var(--blue);--cfx-on-accent:var(--on-blue);
  --cfx-tint:var(--tint);--cfx-sel:var(--ink);--cfx-on-sel:var(--paper);--cfx-r:0px;--cfx-r2:0px;--cfx-btn-r:2px;--cfx-border:1.5px solid var(--ink);--cfx-dim:var(--red);
  --cfx-tool:var(--paper);--cfx-tool-ink:var(--ink);--cfx-shadow:0 0 0 1px var(--ink);--cfx-mono:'IBM Plex Mono',monospace;--cfx-top:84px;
  --cfx-stage:radial-gradient(110% 90% at 50% 30%,#fbf9f4 0%,#ece6d9 60%,#ddd5c4 100%);--cfx-stage-night:radial-gradient(110% 90% at 50% 30%,#14325f 0%,#0a1d3d 60%,#061229 100%)}
html[data-theme="dark"] .cfx{--cfx-stage:radial-gradient(110% 90% at 50% 30%,#2b4f86 0%,#173766 60%,#0d2550 100%)}
.cfx-view{border-inline-end:1.5px solid var(--ink)}
.cfx-seg{gap:0;padding:0;border:1.5px solid var(--ink)}
.cfx-seg button{border-inline-end:1px solid var(--ink);font-stretch:110%}
.cfx-seg button:last-child{border-inline-end:0}
.cfx-seg button[aria-checked=true]{box-shadow:none}
.cfx-range input{height:2px;background:var(--ink);border-radius:0}
.cfx-range input::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--ink)}
.cfx-range output{font-stretch:115%;font-size:20px}
.cfx-swatches button{border-radius:2px}
.cfx-spec{border-color:var(--ink)}
.cfx-spec dt,.cfx-spec dd{border-color:var(--line)}
.cfx-spec dd{color:var(--blue)}
.cfx-labels span{border-radius:0}
#sent.cfx-attached{color:var(--blue)}
@media (max-width:900px){.cfx-view{border-inline-end:0;border-bottom:1.5px solid var(--ink)}}